『Ionic 2 & Ionic 3のプロジェクトをElectronアプリとしてビルドする』のトップへ戻る

Ionicのインストール

まずはIonicでプロジェクトを新規作成します。Ionicをインストールしていない人は公式ページにしたがってターミナルから

npm install -g cordova ionic

でApache Cordova CLIとIonic CLIをインストールしてください。2017年4月23日現在でionicのバージョンは2.2.3ですが、最新の3.x.xをインストールしたい場合は

npm install -g cordova ionic@beta

でインストールしてください。3.x.x系のIonic CLIは2.x.x系から大きな変更があってより使いやすくなっているので、3.x.x系をインストールすることをオススメします。以下では

$ ionic info
 
  Your system information:
 
    Cordova CLI: 6.5.0
    Ionic CLI Version: 3.0.0-beta7
    ios-deploy version: 1.9.1
    ios-sim version: 5.0.13
    OS: macOS Sierra
    Node Version: v7.9.0
    Xcode version: Xcode 8.3.2 Build version 8E2002

の環境を前提として進めていきます。

Ionicでプロジェクトを新規作成

CLIをインストールしたら、ionic CLIでプロジェクトを新規作成します：

ionic start newproject tabs

プロジェクト用のディレクトリnewprojectの生成、テンプレートファイル群のダウンロード、npm installなどが実行されます。最後に”Link this app to your Ionic Dashboard to use tools like Ionic View?”と聞かれますが、IonicViewと連携しない場合は”No”でいいです。ターミナルに

$ ionic start myproject tabs
✔ Creating directory /Users/yuki/newproject - done!
✔ Downloading 'tabs' starter template - done!
✔ Updating project dependencies to add required plugins - done!
✔ Creating configuration file for the new project - done!
✔ Executing: npm install within the newly created project directory - done!
 
♬ ♫ ♬ ♫  Your Ionic app is ready to go! ♬ ♫ ♬ ♫
 
Run your app in the browser (great for initial development):
  ionic serve
 
Run on a device or simulator:
  ionic cordova:run ios
 
Test and share your app on a device with the Ionic View app:
  http://view.ionic.io
 
? Link this app to your Ionic Dashboard to use tools like Ionic View? No
 
Go to your newly created project: cd /Users/yuki/newproject

と表示されたらOKです。

npm run ionic:serve

でスターターアプリが表示されることを確認してください。ionic:serveしない場合でも

npm run build

で一度は必ずビルドしてください。一度もビルドしないとwwwディレクトリが空のままなので、下記の手順にしたがってもElectronで何も表示されません。

Electronのインストール

Ionic側の準備が終わったので次はElectronの準備です。プロジェクトディレクトリに移動してElectronをインストールします：

cd newproject
npm install --save-dev electron electron-packager

インストールが終わったらpackage.jsonのdevDependenciesにelectronとelectron-packagerが追加されているはずです。

package.jsonの修正

Ionicをインストールした後のpackage.jsonのscriptsプロパティは

  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },

のようにIonic用のコマンドが定義されています。またmainプロパティは定義されていません。ここにElectron用のコマンドを追加します：

  "main": "main.js",
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve",
    "start": "electron .",
    "electron:build": "electron-packager . --overwrite --out='./dist"
  },

mainプロパティを指定するのを忘れないでください。これを忘れるとElectronを実行したときに

Electron launching app
 
Unable to find Electron app at /Users/yuki/newproject
 
Cannot find module '/Users/yuki/newproject'

というメッセージがプロンプトに表示されてElectronが終了します。

Electronクイックスタートキットのダウンロード

Ionicで作ったプロジェクトをElectronで動かすためには、2つファイルを追加する必要があります。その2つのファイルを手に入れるためにElectronの公式ページにしたがってクイックスタートキットをダウンロードしてきます：

git clone https://github.com/electron/electron-quick-start

ダウンロードが終わったらelectron-quick-startディレクトリから必要な２つのファイルをもってきます。

mv electron-quick-start/main.js .
mv electron-quick-start/renderer.js .

main.jsとrenderer.jsを移動したらelectron-quick-startディレクトリは不要なので削除して構いません。

main.jsでindex.htmlファイルの指定

最後にmain.js内で指定しているindex.htmlファイルのパスを変更します。Ionicではwwwディレクトリ内にindex.htmlファイルが生成されるので、main.js内の

  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))

の部分を

  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'www/index.html'),
    protocol: 'file:',
    slashes: true
  }))

に変更します。

全部終わったらnpm start

以上の手順が終わったら最後に

npm start

します。これでElectronが立ち上がってionic:serveで確認したアプリが表示されるはずです。