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

2021年04月06日05:03更新 2017年04月24日17:25公開

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

Android
iOS
Windows Phone
macOS
Windows
Linux

という主要なプラットフォームをすべてカバーするアプリを制作することができるようになります。ということでここではIonicプロジェクトをElectronでビルドする手順を紹介します。

1 Ionicのインストール
2 Ionicでプロジェクトを新規作成
3 Electronのインストール
4 package.jsonの修正
5 Electronクイックスタートキットのダウンロード
6 main.jsでindex.htmlファイルの指定
7 全部終わったらnpm start

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 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
}))

//  |
//  |
//  v

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

全部終わったらnpm start

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