もう審査待ちでイラつかない!CodePushならアプリの更新はいつでもできる

2016/07/12

Jay Raj

19

Articles in this issue reproduced from SitePoint
Copyright © 2016, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com. Translation copyright © 2016, KADOKAWA ASCII Research Laboratories, Inc. Japanese syndication rights arranged with SitePoint Pty Ltd, Collingwood, Victoria,Australia through Tuttle-Mori Agency, Inc., Tokyo

アプリストアの審査不要でコードを差し替えられる「CodePush」。審査時間が大幅に短くなっているとはいえ、ちょっとした不具合の解消やテスト目的なら便利かも(CordovaとReact Nativeで作られたハイブリッドアプリに限られますが)。

ハイブリッドアプリを制作するためのフレームワークは、多数のプラットホームやアプリストアで使用できるコードを開発者が書き込めるようにしてあります。フレームワークは開発の簡易化、生産性の向上をもたらしますが、アプリのアップデートをリリースするためには、いまだにアプリストアの審査を経なければならず、審査が開発サイクルを遅らせています。

マイクロソフトの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

Default Cordova Mobile App

今回は、モバイルアプリケーションにシンプルなユーザーインターフェイスを制作するために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デバイスにデプロイすると、アップデートされたユーザーインターフェイスが表示されます。

Cordova Mobile App User Interface

アプリに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のバージョン番号です。

アプリをリリースしたあと、デバイスにインストールされたアプリを再起動してアップデートします。

14656755524bdba959-eef3-4752-a555-48c42b5ee45c

(原文:Push Code Updates to Apps Instantly with CodePush

[翻訳:Karin Hwang]
[編集:Livit

Copyright © 2016, Jay Raj All Rights Reserved.

Jay Raj

Jay Raj

ソフトウェアエンジニアでライターです。Code HandbookTech Illuminationで時折ブログを書きます。

Loading...