モバイルアプリをHTML/CSS/JavaScriptといったフロントエンドの技術で制作できるIonicですが、Ionic 2.2からSplit Paneが実装されたことで、モバイルアプリだけではなくデスクトップをサポートするウェブアプリを制作するための環境が揃ってきました。Ionicではモバイルアプリかウェブアプリのビルドしかできませんが、Electronを使えばデスクトップアプリのビルドもできます。つまり、共通のソースコードで

Android
iOS
Windows Phone
macOS
Windows
Linux

という主要なプラットフォームをすべてカバーするアプリを制作することができるようになります。ということでここではIonicプロジェクトを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でプロジェクトを新規作成

CLIをインストールしたら、

ionic start newproject tabs

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

ディレクトリから必要な２つのファイルをもってきます。 main.jsとrenderer.jsを移動したらelectron-quick-startディレクトリは不要なので削除して構いません。

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

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

全部終わったらnpm start

以上の手順が終わったら最後に npm start します。これでElectronが立ち上がってionic:serveで確認したアプリが表示されるはずです。

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