久しぶりにGoogle Play Developer Consoleを見たら、アラートが表示されていました。
アラートが出ているのはIonicで作ったアプリです。このアプリが使用しているCordovaのバージョンに脆弱性があるようで、期限内にアップロードしてね、という通知でした。
Ionicが依存するCordovaのバージョンは、Ionicのバージョンによって決まります。よってIonicをアップデートする必要があります。
$ npm i -g ionic
Ionicをアップデートしても、アプリはアップデートされないため、一度アプリを消してから作り直す必要があります。まずはアプリを削除します。
$ ionic platform rm android
アプリをビルドし直します。
$ ionic build android
今後も脆弱性が見つかるかもしれないので、都度アップデートする必要がありますね。
このページでは、UIフレームワークのIonicを使ったアプリの作成について紹介します。
Ionicとその依存モジュールであるcordovaをインストールします。
$ npm install -g cordova ionic
アプリ名はIonicAppとします。テンプレートは作りたいアプリに近いものを選ぶと楽です。
$ ionic start IonicApp blank
実装は作りたいアプリに応じてご自由に！！笑
アプリ内のHTMLやJavascriptなどをPCでデバッグしたい場合、以下のコマンドを実行します。ファイルを更新すると自動でブラウザが更新されるのでとっても便利です。
$ ionic serve
モバイル機器でアプリを実行したい場合、対応するプラットフォームを追加します。iPhoneやiPadで実行したい場合、「android」ではなく「ios」となります。
$ ionic platform add android
追加したプラットフォームを実行します。
$ ionic run android
また、上記PCでの実行と同様に、HTMLやJavascriptを更新した時に、再ビルドなしで実行するためには、以下のコマンドを実行します。「-l」はlivereloadの意味です。このコマンドで実行した場合、HTMLなどのソースはモバイル機器にダウンロードされるのではなく、PCがWebサーバーとなってモバイル機器からアクセスされるようになります。
$ ionic run android -l
Ionicのアプリアイコンのファイルはresourcesフォルダ内にあります。icon.pngはホーム画面に表示されるアプリのアイコン画像であり、splash.pngはアプリ起動時に表示されるスプラッシュ画像です。これらのファイルをそれぞれ上書きしてから下記コマンドを実行すると、各プラットフォーム用のアイコンサイズに変換してくれます。
$ ionic resources
作ったアプリをAndroidアプリとしてGoogle Playに公開するために、APKファイルを作成します。手順はPhoneGapアプリの公開用APKを作るをご覧ください。
アプリが日本語で公開できるレベルになったら、ぜひ英語でも公開しましょう。一度仕組みを作ってしまえば簡単に多言語化できます。
まず多言語化を行うangular-translateと多言語ファイルを外部ファイルとして読み込むangular-translate-loader-static-filesをダウンロードします。
$ ionic add angular-translate $ ionic add angular-translate-loader-static-files
これらのモジュールをHTMLから読み込みます。
<!-- www/index.html --> <!DOCTYPE html> ... <script src="lib/angular-translate/angular-translate.min.js"></script> <script src="lib/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script> ... </html>
アプリのAngularJSモジュールとして追加します。
// www/js/app.js
angular.module('starter', [
... , 'pascalprecht.translate'
])
...
多言語ファイルの読み込み設定と言語の適用を行います。言語の適用はOSに設定された言語を使用し、もしその言語用のファイルがなければ変数defaultLangに入れた言語が適用されます。多言語ファイルはjs/langフォルダ内の言語コード.json（例：ja.json）を使用します。これで多言語化の準備は完了です。対応する言語を増やしたいときは、その言語の用語ファイルを追加するだけです。
// www/js/app.js
...
.config(function($translateProvider) {
$translateProvider.useStaticFilesLoader({
prefix: 'js/lang/',
suffix: '.json'
});
var defaultLang = 'en';
var getLang = function() {
try {
return (navigator.browserLanguage || navigator.language || navigator.userLanguage).substr(0, 2)
} catch (e) {
return defaultLang;
}
}
$translateProvider.preferredLanguage(getLang());
$translateProvider.fallbackLanguage(defaultLang);
})
実際に多言語化するためには、下記のような用語ファイルをlangフォルダに作ります。各メッセージにIDを振ります。
www/js/lang/ja.json
{
"START": "はじめる",
"GAMEOVER": "Game Over",
"RESTART": "もう一度",
"": ""
}
www/js/lang/en.json
{
"START": "Start",
"GAMEOVER": "Game Over",
"RESTART": "Restart",
"": ""
}
HTMLからこれらの用語を使うには、translate属性を追加してメッセージIDを指定します。
<!-- www/index.html --> ... <button class="button button-assertive" translate>START</button> ...
Javascriptから使うにはtranslateサービスを使います。
// controller.js
app.controller('Ctrl', ['$scope', '$translate', function($scope, $translate) {
$scope.start = $translate('START');
}]);
アプリ作成のために必要最低限のことを突っ走って書いてきましたが、他に必要だと思ったら適宜追記します。
僕自身はIonicを使って2つのアプリを作りました。動作の確認のためなど試しに触って見てください。
このページでは、PhoneGapで作ったAndroidアプリの公開用APKを作るまでを紹介します。APKは「android application package file」の略です。
Google playにアプリを公開するには、アプリに署名する必要があります。これは、アプリの正当性を保証するためです。
まず、署名するための証明書を作ります。keytoolはJDKに入っているので、パスが通っていればどこでも実行できます。パスワードなど色々聞かれるので、好きに答えてください。「よろしいですか？」と聞かれたら、「y」と答えれば次に進みます。
| 今回の設定値 | |
|---|---|
| エイリアス名 | shoarai |
| アプリ名 | app |
| 有効日数 | 10000 |
$ keytool -genkey -v -keystore .keystore -alias shoarai -keyalg RSA -validity 10000 > キーストアのパスワードを入力してください: > 新規パスワードを再入力してください: > 姓名を入力してください。 > 組織単位名を入力してください。 > 組織名を入力してください。 > 都市名または地域名を入力してください。 > 都道府県名を入力してください。 > この単位に該当する2文字の国コードを入力してください。 > ...でよろしいですか。 10,000日間有効な2,048ビットのRSAの鍵ペアと自己署名型証明書(SHA256withRSA)を生成しています ディレクトリ名: ... の鍵パスワードを入力してください (キーストアのパスワードと同じ場合はRETURNを押してください):
アプリの実装が完了したらリリースビルドし、APKを生成します。platforms/android/ant-buildにapp-release-unsigned.apkというファイルが生成されます。appの部分にはアプリ名が入ります。
$ phonegap build --release
事前に作った証明書でapkに署名します。
$ jarsigner -verbose -keystore .keystore app-release-unsigned.apk shoarai
Google playにアプリを公開するには、最適化もする必要があります。最適化後のapkのファイル名をapp.apkとします。これで公開用APIの完成です。
$ zipalign -v 4 app-release-unsigned.apk app.apk
前述の最適化にて、zipalignコマンドが見つからないことがあります。
-bash: zipalign: command not found
zipalignはANDROID SDKのBuild-toolsに入っています。もしまだBuild-toolsが入ってないなら、Android SDK Managerからインストールしましょう。また、パスを通さないと実行できません。パスを通すのが面倒であれば、下記のように直接アクセスして実行してもいいです。
$ /Applications/android-sdk-macosx/build-tools/21.1.1/zipalign ...
APK生成、署名、最適化をまとめて行えるように下記のようなバッチファイルを作り、証明書と一緒にプロジェクトフォルダに置いておくと楽ですね。
MY_DIRNAME=$(dirname $0) cd $MY_DIRNAME # 設定値 UNSIGNED_FILE=platforms/android/ant-build/app-release-unsigned.apk SIGNED_FILE=app.apk ALIAS=shoarai phonegap build --release jarsigner -verbose -keystore .keystore $UNSIGNED_FILE $ALIAS zipalign -v 4 $UNSIGNED_FILE $SIGNED_FILE
いつの間にか、署名時に下記の警告が表示されるようになっていました。
警告: -tsaまたは-tsacertが指定されていないため、このjarにはタイムスタンプが付加されていません。 タイムスタンプがないと、署名者証明書の有効期限(2043-05-10)後または将来の失効日後に 、ユーザーはこのjarを検証できない可能性があります。
JDK1.7からタイムスタンプが必要になったそうです。署名を下記のように修正すると警告が表示されなくなります。
$ jarsigner -verbose -tsa https://timestamp.digicert.com -keystore .keystore app-release-unsigned.apk shoarai
このページでは、PhoneGapをインストール後にサンプルプロジェクトを作成し、エミュレータで起動するまでを紹介します。
PhoneGapをインストールし、phonegapコマンドを使えるようにします。
npmからPhoneGapをインストールします。
$ npm i -g phonegap
インストールが終わったら、PhoneGapのインストール状況を確認します。PhoneGapのコマンド一覧などが参照できます。
$ phonegap ... Commands: create <path> create a phonegap project build <platform> build a specific platform install <platform> install a specific platform run <platform> build and install a specific platform local [command] development on local system remote [command] development in cloud with phonegap/build platform [command] update a platform version plugin [command] add, remove, and list plugins help [command] output usage information version output version number ...
PhoneGapコマンドから以下の内容を持つプロジェクトを作ります。このプロジェクトはAndroidやiOSなどのプラットフォームに共通のプロジェクトです。
まず、フォルダ名、パッケージ名、プロジェクト名は以下の通りとします。 ちなみにフォルダ名以外は未入力でも、デフォルトで設定されるので特に決めなくても大丈夫です。
| 今回の入力値 | デフォルト値 | |
|---|---|---|
| フォルダ名 | Hello | －（未入力不可） |
| パッケージ名 | com.shoarai.hello | com.phonegap.helloworld |
| プロジェクト名 | HelloWorld | Hello World |
phonegapコマンドで上記の内容を持ったプロジェクトを生成します。
$ phonegap create Hello com.shoarai.hello HelloWorld
作成されるHelloフォルダの構成は以下の通りです。wwwフォルダ内にプラットフォームに共通するHTML、JavaScriptファイルがあります。
Hello ├─ .cordova ├─ merges ├─ platforms ├─ plugins └─ www
Helloフォルダに移動します。
$ cd Hello .../Hello>
作成したプロジェクトからアプリケーションの実行ファイルを作成します。今回はAndroidアプリを作成しますが、PhoneGapはiosやWindowsPhoneのアプリも作成できます。
phonegapコマンドでプロジェクトをビルドします。AndroidアプリケーションとしてビルドするためにAndroid SDKを利用しています。
$ phonegap build android ... [phonegap] successfully compiled Android app
Androidアプリとしてビルドすると、platformsフォルダ内にandroidフォルダが作成されます。また、iOSとしてビルドするとiosフォルダが追加されることになります。 それぞれのフォルダ内に生成されるplartforms/…/wwwフォルダは、Hello/wwwフォルダがコピーされたものです。つまり、Hello/www内を編集して、 ビルドすると指定したplartforms/…/wwwが更新されることになります。
Hello ├─ .cordova ├─ merges ├─ platforms │ └─ android │ ├─ assets │ │ └─ www │ ... ├─ plugins └─ www
ビルド時に起こったエラーを記述しておきます。
Please install Android target 19 (the Android newest SDK)
これはPhoneGapが対応するAndroid SDKが入ってないよ！ということです。解決策は2つ。「①対応するSDK Platformをインストールする」または「②PhoneGap側のSDKの対応バージョンを変更する」です。 SDK側を合わせるか、PhoneGap側を合わせるかということです。
①は、エラー文にあるSDKバージョン（ここでは19）をインストールします。
②は、対応するバージョンを.cordova/lib/android/cordova/3.1.0（PhoneGapのバージョン）/frameworkフォルダ内のproject.propertiesファイルのtargetの値で確認できます。 ここではtarget=android-19をインストール済みのSDKのバージョン（android-18など）に変更します。
作成したAndroidアプリを実行します。
まず、アプリを実行するエミュレータを起動します。AVD（Android Virtual Device Manager）を実行し、起動するエミュレータのAVD名を確認します。もしくは起動するAVDを新規作成します。
$ android avd
ここでは、AVD名がNexus5のエミュレータを起動します。
$ emulator -avd Nexus5
作成したAndroidアプリケーションをエミュレータで実行します。
$ phonegap run android ... [phonegap] successfully installed onto emulator
Androidアプリケーションをエミュレータで実行できました！実行前に実機を接続しておくと、優先して実機で実行されます。 このときは[phonegap] successfully installed onto deviceが表示されます。
今回は説明のためにアプリケーションのビルドと実行を分けましたが、phonegap run androidを実行すれば、phonegap build androidを実行しなくてもアプリケーションの実行ファイルが生成されてます。