Ionic3のアプリをPhoneGap Buildにアップする

Ionic3で作ったAndroidアプリをAdobe PhoneGap Buildにアップする時、正しいフォルダ構成が分からず非常に悩んだのでログとして残しておきます。

PhoneGap Buildに上げるzipに必要なフォルダ

まずはリリース用にビルドします。

$ ionic cordova build android --prod --release

ビルド後のフォルダで必要なのは以下の３つです。

• 「WWW」フォルダ
• 「resources」フォルダ
• 「config.xml」ファイル

上記の３つをコピーしてPhoneGap Buildにアップするための作業を行います。

• 「WWW」フォルダを適当な場所にコピー
• 御幣のないよう、コピーした「WWW」フォルダを「PhoneGap」に名前を変更
• 「PhoneGap」フォルダの中に「resources」フォルダをコピペ
• 「PhoneGap」フォルダの中に「config.xml」ファイルをコピペ
• 「PhoneGap」フォルダをzip形式に圧縮

このzipをPhoneGap BuildにアップすればPhoneGap Buildでビルドを行えます。

PhoneGap Buildでビルドエラーになる場合

私の場合は、ビルドを行った際にいくつかエラーがでました。 使用しているプラグインのAPIレベルの指定の関係で、gradleでエラーが発生している様子でした。 そこで、以下のプラグインを使うことにしました。

cordova-android-support-gradle-releaseを使用する

$ cordova plugin add cordova-android-support-gradle-release

config.xmlには以下のように追記されます。

<plugin name="cordova-android-support-gradle-release" spec="^1.4.4">
    <variable name="ANDROID_SUPPORT_VERSION" value="27+" />
</plugin>

私はどうにも+（プラス）という記述でエラーになりがちなのが不安だったので、以下の形に書き換えました。

<plugin name="cordova-android-support-gradle-release" spec="^1.4.4">
    <variable name="ANDROID_SUPPORT_VERSION" value="27.1.0" />
</plugin>

phonegap-versionを指定する

どうやらPhoneGap Buildが動作するバージョンを指定してやることが必要だった様子。 config.xmlに以下のように追記しました。

<preference name="phonegap-version" value="cli-7.1.0" />

因みに、以下のように現時点（2018-10-10）の最新版を指定したら別のエラーがでました。

<preference name="phonegap-version" value="cli-8.0.0" />

PhoneGap CLIバージョン一覧

まとめ

フォルダ構成と動作環境が謎過ぎて困った困った。 これは全くの余談ですが、キーストアファイルはちゃんと作成した時のパスワードを入力したら正常に動作するのですが、私はエイリアスの名称を誤って入力していることに気付かず一日を棒に振りました。

Angularアプリケーションプログラミング

山田 祥寛

Angularによる動的Webアプリケーション開発に必要となる知識が、この1冊で身に付きます!

Ionicで作る モバイルアプリ制作入門〈Web/iPhone/Android対応〉

榊原 昌彦

Ionicの最大の特徴は、UIデザインの良さです。海外には多くのユーザがいますが、その多くは「UIデザインがいいからIonicにした」と答えています。