ハイブリッドアプリを制作するためのフレームワークは、多数のプラットホームやアプリストアで使用できるコードを開発者が書き込めるようにしてあります。フレームワークは開発の簡易化、生産性の向上をもたらしますが、アプリのアップデートをリリースするためには、いまだにアプリストアの審査を経なければならず、審査が開発サイクルを遅らせています。
マイクロソフトのCodePushを使えば、即座にコードのアップデートをアプリに反映できます。私が最近書いた『Easy App Publishing with React Native and Siphon』で紹介しているSiphonと類似しています。CodePushはいまのところCordovaとReact Nativeアプリをサポートしていて、実用的なコマンドラインツールがあります。
制作するもの
記事では、Cordovaを使ったシンプルなアプリの作り方を紹介します。主に焦点を当てるのは、アプリストアにアップデートを申請しない、CodePushの使い方や設定などです。
始めてみよう
SitePointには、すべてのプラットフォームやモバイルデバイスに対応するCordovaを設定したりインストールしたりするための広範囲なガイド『Quick Tip – Using and Installing Cordova』があります。Cordovaを使ったことがない人は、一読されることをお勧めします。
Cordovaのインストールと設定が終了したら、次にCodePushコマンドラインツールをインストールします。
npm install -g code-push-cli
MicrosoftやGitHubアカウントを使い、CodePushに登録します。下記のコマンドを使って認証タブを開きます。
code-push register
Cordovaアプリを制作
下記のコマンドを使いCordovaでアプリを制作します。
cordova create CordovaMobileApp
プロジェクトディレクトリを検索して、Androidプラットフォームを追加します。
cordova platform add android
デフォルトのアプリをビルドします。
cordova build android
デバイスで使える.apkファイルが作成されます。すぐに動かしたい場合は、次のようにします。
cordova run android
今回は、モバイルアプリケーションにシンプルなユーザーインターフェイスを制作するためにjQuery Mobileを使います。CordovaMobileAppディレクトリのプロジェクトを開き、wwwフォルダにあるeditindex.htmlを次のように書き換えます。
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Cordova Mobile App</h1>
</div>
<div data-role="content">
<p>Welcome to Cordova App, CodePush</p>
</div>
</div>
</body>
</html>
変更したデータを保存し、アップデートされた.apkファイルを反映するためアプリを再構築します。
Androidデバイスにデプロイすると、アップデートされたユーザーインターフェイスが表示されます。
アプリにCode Updatesをリリース
シンプルなアプリが制作できました。次に、コードをリリースするサービスを使って登録します。
code-push app add CordovaMobileApp
いったんアプリを登録すれば、プロダクションやステージングに必要な開発キーを入手できます。開発キーはあとで使うので記録しておきます。アプリを登録したら、必要なCodePushプラグインをインストールします。
cordova plugin add cordova-plugin-code-push@latest
プラグインがインストールされたら、モバイルアプリケーションのconfig.xmlファイルに、CodePush開発キーを追加します。
<platform name="android">
<preference name="CodePushDeploymentKey" value="YOUR-DEPLOYMENT-KEY" />
</platform>
次に、プロダクション、または、ステージングキーのどちらかを追加します。「Content Security Policy（CSP）」に準拠したプラットフォームにアクセスできるか確かめるために、index.htmlに以下のメタ情報を追加します。
<meta http-equiv="Content-Security-Policy" content="default-src https://codepush.azurewebsites.net 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *" />
CodePushサーバーからの変更をアプリに同期させるために、deviceReadyイベントを呼び出す必要があります。www/js/index.jsを開き、onDeviceReady関数に次のコードを追加します。
onDeviceReady: function() {
app.receivedEvent('deviceready');
codePush.sync();
}
すでにモバイルアプリケーションをデバイスにデプロイしたので、index.htmlでユーザーインターフェイスを変更し、CodePushを使ってアップデートをリリースします。
index.html内のメッセージを下記のように変更します。
<p>Welcome to Cordova App, CodePush - UPDATE</p>
次に、アプリをリリースする準備をします。公式の方法ではモバイルアプリケーションを準備してリリースするために下記のコードを使います。
code-push release-cordova <appName> <platform>
しかし、どういうわけか、私の場合はうまくいきませんでした。もし、上記の方法でうまくいかない場合は、次の2つのコマンドを使ってください。
cordova prepare android
code-push release CordovaMobileApp ./platforms/android/assets/www 0.0.1
0.0.1はconfig.xmlのバージョン番号です。
アプリをリリースしたあと、デバイスにインストールされたアプリを再起動してアップデートします。
（原文：Push Code Updates to Apps Instantly with CodePush）
［翻訳：Karin Hwang］
［編集：Livit］
