モバイルアプリを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 CLIIonic 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のdevDependencieselectronelectron-packagerが追加されているはずです。

package.jsonの修正

Ionicをインストールした後のpackage.jsonscriptsプロパティは
  "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
ディレクトリから必要な2つのファイルをもってきます。 main.jsrenderer.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で確認したアプリが表示されるはずです。