Electron-UIの構築

Electronアプリのユーザーインターフェイスは、HTML、CSS、JSを使用して構築されています。そのため、ここでもフロントエンドWeb開発に利用可能なすべてのツールを活用できます。 Angular、Backbone、React、Bootstrap、Foundationなどのツールを使用して、アプリを構築できます。

Bowerを使用して、これらのフロントエンドの依存関係を管理できます。 -を使用してbowerをインストールします

$ npm install -g bower

これで、利用可能なすべてのJSおよびCSSフレームワーク、ライブラリ、プラグインなどを取得できます。バウアーを使用して。たとえば、ブートストラップの最新の安定バージョンを取得するには、次のコマンドを入力します-

$ bower install bootstrap

これにより、_bower_components_にブートストラップがダウンロードされます。これで、HTMLでこのライブラリを参照できます。これらのライブラリを使用して簡単なページを作成しましょう。

npmコマンドを使用してjqueryをインストールしましょう-

$ npm install --save jquery

さらに、これはview.jsファイルでは_required_になります。次のようなmain.jsのセットアップが既にあります-

const {app, BrowserWindow} = require('electron')
const url = require('url')
const path = require('path')

let win

function createWindow() {
   win = new BrowserWindow({width: 800, height: 600})
   win.loadURL(url.format ({
      pathname: path.join(__dirname, 'indexl'),
      protocol: 'file:',
      slashes: true
   }))
}

app.on('ready', createWindow)

*indexl* ファイルを開き、それに次のコードを入力します-

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "UTF-8">
      <title>Hello World!</title>
      <link rel = "stylesheet"
         href = "./bower_components/bootstrap/dist/css/bootstrap.min.css"/>
   </head>

   <body>
      <div class = "container">
         <h1>This page is using Bootstrap and jQuery!</h1>
         <h3 id = "click-counter"></h3>
         <button class = "btn btn-success" id = "countbtn">Click here</button>
         <script src = "./view.js" ></script>
      </div>
   </body>
</html>

*view.js* を作成し、その中にクリックカウンターロジックを入力します-

let $ = require('jquery') //jQuery now loaded and assigned to $
let count = 0
$('#click-counter').text(count.toString())
$('#countbtn').on('click', () => {
   count ++
   $('#click-counter').text(count)
})

次のコマンドを使用してアプリを実行します-

$ electron ./main.js

上記のコマンドは、次のスクリーンショットのように出力を生成します-

UI

Webサイトを構築するのと同じように、ネイティブアプリを構築できます。ユーザーを正確なウィンドウサイズに制限したくない場合は、レスポンシブデザインを活用して、ユーザーがアプリを柔軟に使用できるようにすることができます。

Electron-building-uis

Electron-UIの構築