f

2016-05-15

WebベースGUIライブラリElectronのチュートリアルの実行

2016-05-11にElectron 1.0のリリースがアナウンスされた(実際のリリースは2016-05-09)。気になったので試しにチュートリアルのサンプルアプリの作成からパッケージ化までやってみた。

ElectronはGitHub社により作られた,クロスプラットフォームなデスクトップアプリを開発するためのライブラリとなっている。JavaScriptのライブラリであるNode.jsとブラウザであるChromiumをベースにHTML,CSS,JavaScriptなどのWeb技術で開発できるのが特徴となっている。最初のリリースは2013-07-15となっており,リリースが始まって約3年経過したことになる。時間が立って安定してきたので,1.0がリリースされたのだと思われる。

ネットで見ていてもElectronでのアプリ開発例をちらほらみかけるようになり,いいタイミングなのでちょっとだけ試してみることにした。

動作環境はUbuntu 14.04 64bitであり,チュートリアルとしてQuick Startを参照した。

少し長いので目次も書いておく。

  1. Electronのインストール
    1. npmのモジュールelectron-prebuiltをインストール
    2. 公式で配布されているバイナリをインストール
  2. サンプルアプリの作成・実行
    1. package.json
    2. main.js
    3. index.html
    4. サンプルアプリの実行
  3. パッケージング
    1. アプリディレクトリ丸ごとの配布
    2. asarコマンドでアプリディレクトリ.asarファイルに固めて配布
    3. Electronごと配布
  4. まとめ

Electronのインストール

Electronのインストール方法は2種類ある。

  1. npmのモジュールelectron-prebuiltをインストール。
  2. 公式で配布されているバイナリをインストール。

開発中であれば,どちらの方法でインストールしてもよい。しかし,最終的にパッケージングして配布するときは2.のバイナリを使うことになる。

npmのモジュールelectron-prebuiltをインストール

npmのモジュールであるelectron-prebuiltはビルド済みのElectronを含んでいる。以下のコマンドでインストールできる。

mkdir -p ~/local/
npm install -g --prefix=$HOME/local/ electron-prebuilt

npm install -gでインストールすると,既定では以下のディレクトリにインストールしようとする。

  • /usr/bin
  • /usr/lib/node_modules/

これらのディレクトリにインストールするには管理者権限が必要なので,--prefixオプションで以下のディレクトリにインストールされるように変更した。

  • $HOME/local/bin
  • $HOME/local/lib/node_modules/

.bashrcなどでexport PATH=$HOME/local/bin:$PATHなどと記述してPATH変数を設定しておく。これで,electronコマンドをインストールできた。以下のコマンドでelectronが起動する。

electron

npmでのインストール方法は以下を参照した。

npm のローカルモードでインストールした実行モジュールにパスを通す設定 - Qiita

公式で配布されているバイナリをインストール

Electronの各OS向けの最新のバイナリは以下のGitHubのページで公開されている。

Releases · electron/electron

ここから各OS,アーキテクチャ向けのelectronをダウンロードする。今回はUbuntu 14.04 64bitなので,electron-v1.1.0-linux-x64.zipをダウンロードして,展開し,~/local/opt/に配置した。

コマンドでやると以下のようになる。

mkdir -p ~/local/opt/; cd ~/local/opt/
VER=1.1.0
wget -nc https://github.com/electron/electron/releases/download/v$VER/electron-v$VER-linux-x64.zip
unzip -d electron-v$VER-linux-x64{,.zip}

electronを起動するときは以下のコマンドを入力する。

~/local/opt/electron-v1.1.0-linux-x64/electron

これでElectron自体のインストールは完了となる

サンプルアプリの作成・実行

まず,今回作るアプリの名前をyour-appとして作業ディレクトリを作る。

mkdir -p ~/tmp/your-app
cd ~/tmp/your-app

一般的に,Electronアプリは以下のディレクトリ構成となる。

your-app/
├── package.json
├── main.js
└── index.html

以下で各ファイルの簡単な説明とサンプルを示す。

なお,ファイル作成を簡単にするためにファイルサンプルの前後に以下のシェルコマンドを入れている。

cat << EOF > ファイル名
...
EOF

これにより,catからEOFまでをターミナルにコピーペーストするだけでファイルが作成できる。

package.json

package.jsonの形式はNodeのモジュールと同じで,mainフィールドでアプリのメインプロセスとして実行するスクリプトを指定する。例えば,以下のようになる。

cat << EOF > package.json
{
  "name"    : "your-app",
  "version" : "0.1.0",
  "main"    : "main.js"
}
EOF

package.jsonmainフィールドがなければ,Electronはindex.jsを読み込もうとする。

main.js

main.jsはウィンドウを作り,システムイベントを操作する。サンプルは以下となる。

cat << EOF > main.js
const electron = require('electron')
// Module to control application life.
const app = electron.app
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600})

  // and load the index.html of the app.
  mainWindow.loadURL('file://' + __dirname + '/index.html')

  // Open the DevTools.
  mainWindow.webContents.openDevTools()

  // Emitted when the window is closed.
  mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
EOF
index.html

最後に,index.htmlは表示したいWebページだ。

cat << EOF > index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>
EOF
サンプルアプリの実行

main.jsindex.htmlpackage.jsonを作ったら,アプリを実行してみよう。

npmelectron-prebuiltをインストールしていれば,以下のコマンドでアプリを実行できる。

electron .

バイナリをインストールしていれば,以下のコマンドでアプリを実行できる。

~/local/opt/electron-v1.1.0-linux-x64/electron .

electronコマンドにindex.htmlmain.jspackage.jsonが格納されているディレクトリを指定するとよい。

実行すると,以下のように開発者ツールの画面が開いた状態のウィンドウが表示される。

パッケージング

公式で紹介されているアプリの配布方法には以下の3通りがある。

  1. アプリディレクトリ丸ごとの配布。
  2. asarコマンドでアプリディレクトリを.asarファイルに固めて配布。
  3. Electronごと配布。

1と2は,配布するファイルサイズは小さいが利用者の環境にElectronがインストールされていないと動作しない。3は配布するファイルサイズは40 MB以上と大きくなるが,Electronごと配布するので,利用者の環境にElectronがインストールされていなくても動作する。利用者がElectronをインストールしていることは想定しにくいので,実際には3の方法を採用することになるだろう。しかし,2の方法は,.asarファイルにElectronを関連付けさせておけばダブルクリックで実行できるので悪くない方法だ。

なお,この他にサードーパーティーのパッケージ化コマンドとしてelectron-packagerelectron-builderなども存在するが,調査に時間がかかるので省略した。実際にアプリをリリースするときに検討すればよいだろう。

アプリディレクトリ丸ごとの配布

1の方法は,単に作成したアプリディレクトリ(今回は~/tmp/your-app)を配布するだけだ。利用者側ではelectronコマンドでこのディレクトリを指定すれば起動できる。

この方法だと,ユーザーにソースコードが丸見えなので,ソースコードをユーザーに隠したいときは使えない。

asarコマンドでアプリディレクトリ.asarファイルに固めて配布

事前にアプリ一式をasarコマンドで.asarファイルに固めて配布する。ユーザー側ではelectronコマンドで.asarファイルを指定することで実行できる。

ソースコードを利用者から隠したいときにこの方法が使える。

まず,npmからアプリを固めることができるasarコマンドをインストールする。

npm install -g --prefix=$HOME/lobal asar

そしてasarコマンドでアプリディレクトリを.asarファイルに固める。イメージとしてはtar.gzなどに圧縮するような感じだ。

asar pack your-app your-app.asar
# asar pack your-app{,.asar} ## シェルのブレース展開でこうしてもよい。

これで,以下のコマンドでElectronのアプリケーションを実行できる。

electron your-app.asar

.asarファイルをelectronコマンドで開くように関連付けさせればダブルクリックでも実行できるだろう。

Electronごと配布

利用者がElectronをインストールしていることは想定しにくいので,Electronごと配布する。

  1. 配布先OS用Electronのダウンロード

    まず,以下にOSごとのElectronが配布されているので配布先のOSのものをダウンロードする。

    Releases · electron/electron

    例えば,冒頭でも行ったがLinux版だと以下のコマンドでElectron本体をダウンロードして,解凍する。

    VER=1.1.0
    wget -nc https://github.com/electron/electron/releases/download/v$VER/electron-v$VER-linux-x64.zip
    unzip -d electron-v$VER-linux-x64{,.zip}

    なお,解凍後のディレクトリはelectron-v1.1.0-linux-x64というようなOSごとのディレクトリ名になっている。説明を簡単にするために,このディレクトリを単にelectronと表記する。

  2. アプリ一式をasarコマンドでapp.asarに固める。

    ファイル名をapp.asarにしてasarコマンドでアプリ一式を固める。後からファイル名をapp.asarに変えるだけでもよい。

    例:

    asar pack your-app app.asar
    ## または以下のように既に固めたasarファイルのファイル名を変えるだけもよい。
    # asar pack your-app your-app.asar
    # mv your-app.asar app.asar
  3. 固めたapp.asarをElectronに配置。

    配布先OSに応じて以下の場所にapp.asarを配置する。

    app.asarの配置場所
    OS 配置場所

    electronは展開したElectronのディレクトリのこと。例:electron-v1.1.0-linux-x64。
    OS X electron/Electron.app/Contents/Resources/
    Windows, Linux electron/resources/

これでパッケージングは完了だ。後はelectronディレクトリに存在する,OSごとのelectronファイルをダブルクリックなどで起動するとアプリが実行される。

OS毎のelectronの実行ファイル名
OS ファイル名
Linux electron
Windows electron.exe
OS X electron.app

必要に応じて,上記の実行ファイル名electronをアプリケーションの名前に変更したり(例:your-app),アイコンを設定すればパッケージングは完了となる。

まとめ

Electronの導入として,公式サイトのチュートリアルをやってみて,パッケージングの方法までまとめた。

チュートリアルをやっていて躓いたのは,Electronごとパッケージ化の際のファイル名だった。app.asarというファイル名はただのサンプルかと思っていたらそうではなくて,このファイル名でなければならなかった。これに気づくのに時間がかかってしまった。

実際にアプリを作成するにはmain.jsの書き方や使えるモジュールなど細かく見ていかなければならない。この記事を,今後Electronでアプリを作成する際の足がかりしていきたい。

0 件のコメント:

コメントを投稿