中安拓也のブログ

プログラミングについて書くブログ

【Ionic, Cordova】カスタムプラグインを導入した時のiOSビルド手順

はじめに

ionic-plugincordova-pluginなどのプラグインをインストールした後、オリジナル版とは違う修正を加えて、カスタムプラグインを作る事がある。そんなカスタムプラグインを使ったiOSアプリのビルド手順について書いていく。

バージョン情報

今回ビルドするアプリでは、Angular(JavaScriptのWebフレームワーク)ベースの、ハイブリットモバイルアプリ用フレームワークである「Ionic」を使った。

  • Ionic Framework: ionic-angular 3.9.2

  • Node: v8.1.4

  • npm: 5.6.0

  • OS: macOS High Sierra

  • Xcode: Xcode 9.3 Build version 9E145

  • ionic (Ionic CLI) : 3.20.0

  • cordova (Cordova CLI) : 8.0.0

  • Angular: 5.2.9

ビルド手順

カスタムプラグインを作る

まず、インストールしてきたプラグインをベースに、カスタムプラグインを作成する。今回は、cordova-plugin-inappbrowserに独自の改修(初回ログイン以降は、ログイン情報を保持する)を加えて、カスタムプラグインにしている。

f:id:l08084:20180414181340p:plain

  1. 改修を加えたいプラグインをコピーして、custom_pluginsディレクトリ配下に置く

  2. 独自の改修を加える

iOSビルド

  1. node_modulesplatformsplugins配下を全て削除する

  2. ターミナルを開く

  3. $ npm iコマンドでnpmライブラリをインストールする

  4. $ cordova platform add iosコマンドを実行して、プラットフォームとプラグインをインストール&作成

  5. platforms配下を削除

  6. ここで、独自の変更を加えたカスタムプラグインを使いたいので、plugins配下のcordova-plugin-inappbrowserを、custom_plugins配下のcordova-plugin-inappbrowserに入れ替える

  7. 再度$ cordova platform add iosコマンドを実行して、プラットフォームを作成

  8. platforms/ios/[プロジェクト名]/Plugins配下のcordova-plugin-inappbrowserの中身を確認して、カスタムプラグインと同様の中身になっていることを確認する

  9. Xcodeでplatforms/ios/配下の.xcodeprojを開いて、事前にSigningを済ませておく

  10. $ ionic cordova buildd ios --prodコマンドでビルド

  11. Xcodeから、実機もしくはエミュレータ上で動かす

$ npm i
$ cordova platform add ios
# 2度目
$ cordova platform add ios
$ ionic cordova buildd ios --prod