[アーティクル]
05/02/2016

April 2016

Volume 31 Number 4

モバイルアプリ - Ionic と TACO によるクロスプラットフォームモバイルアプリの作成

Adam Tuliper | April 2016

クロスプラットフォームアプリの開発と配置に使用できるワークフローはたくさんあり、なかなか簡単には選べません。使用する開発テクノロジにこだわり、開発から製造までのワークフロー全体が複雑になってしまうこともあります。各モバイルプラットフォームでネイティブに開発することもできますが、C#、Objective-C/Swift、Java に関して高いスキルが必要になり、C++ のスキルが求められることもあります。あるいは、Apache Cordova や Xamarin のようなクロスプラットフォームツールを選択することができます。その場合はベータテストの問題が持ち上がります。ユーザー数が数人を超えるとアプリのサイドローディングが問題になります。Windows 10 デバイスのご利用コード、iOS の TestFlight、Google Play のグループ、HockeyApp のようなプラットフォームなど、プラットフォーム固有のベータテスト配布ソリューションの利用が求められます。同様の最終結果を実現する道筋は数多く存在しますが、そこに至る過程が大きく異なります。

今回は、クロスプラットフォームアプリを作成するためのワークフローを見ていきます。つまり、ツールのインストール、開発、デバッグ、配置 (運用またはベータ)、更新というワークフローです。このワークフローでは、Ionic HTML5 モバイルアプリフレームワーク、Tools for Apache Cordova (TACO) コマンドラインツール、CodePush、および Visual Studio Code を利用します。これは Visual Studio に緊密に統合できるワークフローです。今回注目するのは TACO コマンドラインと Visual Studio Code ワークフローです。これらは Mac OS、Linux、および Windows で基本的に変わりがなく、同じツールを使用するためです。これをお読みになれば、間違いなく、Visual Studio Code または Visual Studio のどちらかを使用したいと考えるようになるでしょう。Cordova ベースのアプリを開発およびデバッグする場合、Visual Studio が最善のツールです。ただし、そのプロジェクトは各 OS 間 (Mac OS、Linux、Windows)、各コマンドライン間 (Ionic、Cordova など)、ツール間 (Visual Studio Code または Visual Studio) で、完全に相互運用可能であることを強調しておきます。Visual Studio のツールによって必要な SDK のインストールと、Windows ネイティブのデバッグと Android デバッグ向けのセットアップが自動的に行われます。

クロスプラットフォームアプリ開発を目指す Web 開発者で、Apache Cordov のことをあまりご存じない場合は、「Visual Studio と Apache Cordova でクロスプラットフォームハイブリッドアプリを作成する」(msdn.com/magazine/dn879349、英語) を参考に、このフレームワークのしくみをまず把握することをお勧めします。

Tools for Apache Cordova (TACO)

TACO は、迅速な開発と生産性向上を目的に設計された製品スイートです。Apache Cordova アプリの開発に着手する方法は複数あります。Visual Studio を使用する方法では、Android 用の高度なエミュレーターなど、必要な SDK とサードパーティーツールがすべてインストールされます。クロスプラットフォーム開発に取り組む場合は、Visual Studio Code の拡張機能によって IntelliSense や、Visual Studio Code 内からのデバッグなどの機能が提供されます。コマンドラインを使用する方法を選ぶと、TACO CLI という一連のコマンドラインユーティリティを使用して、サードパーティーの SDK をインストールできます。これらのツールはどの Cordova 互換プロジェクト (Ionic、PhoneGap など) とも連携します。後ほど必要になったときに利用できるように TACO CLI をここでインストールしておきます。

#install taco one time (**this requires Node to be installed **)
npm install taco-cli –g

次のいずれかのコマンド (使用するコマンドラインに応じて基本的に同じことが実行されます) を使用してプラットフォームを Apache Cordova アプリに追加すると、そのプラットフォームのプロジェクトの構成しか行われません。必要な SDK の確認とインストールに関しては何も実行されません。

cordova platform add android
#or
ionic platform add android
#or
taco platform add android

たとえば、Android プラットフォームには、Android SDK、Gradle、Java のような依存関係が必要ですが、これは Ionic や Cordova のコマンドラインツールでは追加されません。ただし、以下のコマンドを実行すれば、既存のプロジェクトの内部から追加できます。

taco install-reqs android

これにより Java と Android SDK のインストールに加えて、Gradle の統合と Android Debug Bridge (ADB) のサポートがインストールされます。

開発とデバッグ

クロスプラットフォームに取り組む場合、エミュレーター内部からのデバッグや、直接デバイス上でのデバッグを可能にするツールが Visual Studio Code にあります (図 1 参照)。このツールを使用するには、Visual Studio Code でフォルダーを右クリックして、[Open] (開く) を選択するか、[File] (ファイル)、[Open Folder] (フォルダーを開く) を使用します。これは、任意のクロスプラットフォーム Cordova ベースアプリで実行できます。Visual Studio 固有の手順はないため、ワークフローを Visual Studio から切り離すことができます。これは、他のツールやプラットフォームを使用しているチームと連携する場合に非常に便利な機能です。

図 1 Visual Studio Code 内部からのデバッグ

この拡張機能をインストールするには、Ctrl キーと Shift キーを押しながら P キーを押してコマンドパレットを表示し、以下のコマンドを入力します。

ext install cordova

アプリをデバッグするには、単にデバッグビューに切り替えて ([Debug] (デバッグ) アイコンをクリックするか、Ctrl キーと Shift キーを押しながら D キーを押します)、デバッグターゲットを選択し (図 1 参照)、[Start] (開始) をクリックします。これは、プラットフォーム固有の SDK を手動で、または taco install-reqs を使ってインストールしていることが前提です。

Visual Studio を頻繁に使用している場合は、コマンドラインツールから作成したフォルダーや、単に [ファイル]、[新規作成] をクリックし、[既存のコードからプロジェクトを作成] をクリックして作成したフォルダーなど、既存のプロジェクトフォルダーを操作することもできます。この手順は .jsproj ファイルと taco.json ファイルをフォルダーに追加するだけです。その後、Visual Studio からこれらのファイルを使用しながら、Mac OS や Linux 開発者が同じリポジトリを共有して Visual Studio Code やコマンドラインなどを使用することも可能です。すべて適切に連携します。当然、[ファイル] メニューの [新しいプロジェクト] をクリックして新しい Apache Cordova プロジェクトを作成することもでき、このプロジェクトもクロスプラットフォームで機能します。実に協調性があります。

IntelliSense についてはどうでしょう。Visual Studio では Ionic Pack を Visual Studio ギャラリーから直接インストールするか、bit.ly/1Vq4dIo (英語) からインストールします。その結果、スニペット、検証、および IntelliSense を利用できるようになります。Visual Studio Code の場合は Cordova Tools Extension をインストールすれば Ionic 用の IntelliSense が含まれます。

Ionic フレームワーク

Ionic は CSS フレームワークであり、JavaScript UI ライブラリです。必要に応じてこれをビルドシステムに組み込みます。通常、Ionic は Apache Cordova の上位で実行されます。Apache Cordova は、オープンソースのクロスプラットフォーム HTML/JS/CSS ネイティブアプリフレームワークです。Cordova と Ionic を併用している話をよく聞きますが、必須ではありません。たとえば、CodePen.io/ionic でコードを確認してください。Ionic は HTML、CSS、JavaScript、およびイメージにすぎません。

説得力のあるモバイルアプリを作成する場合の 1 つの課題は、各 OS のデザインガイドラインに従った外観と動作の実現です。つまり、Android ではマテリアルデザインガイドラインに従い、ユニバーサル Windows プラットフォーム (UWP) では UX ガイドラインに、iOS ではヒューマンインターフェイスガイドラインに従います。開発しているのが基幹業務アプリであれ、ゲームであれ、ユーザーには操作の反応についての想定があります。自覚しているかどうかにかかわらず、日常生活の中でデバイスやアプリなどのアイテムを使用する場合に、その流れの中で用いている細かいやり取りが存在します。

モバイルアプリでの細かいやり取りとは、アクションを実行するために画面を特定の方向にスワイプする、更新するために引っ張っる、ソーシャルメディアページで「いいね」を送る、スピンを表示する程度の単純なものです。こうしたしくみにプラットフォーム固有の方法で対処するにはどうすればよいでしょう。Ionic なら、このような細かい動作の一部に自動で対応します。たとえば、Ionic はアプリが iOS で実行されているか Android で実行されているかを検出し、図 2 に示すような、プラットフォーム固有のスピンにそっくりな CSS スタイルのスピンを使用します。スピンの Ionic タグは以下のようなカスタム HTML タグです。

<ion-spinner></ion-spinner>

図 2 Android と iOS のスピン

図 3 には、Ionic の HTML と CSS だけを使用したネイティブな外観をもつリストのサンプルコードを示しています。このコードにより、図 4 に示すような、アプリにとって適切かつネイティブな外観がもたらされます。

図 3 HTML を使用して Ionic で作成されるネイティブな外観のリスト

<div class="list">
  <a class="item item-icon-left" href="#">
    <i class="icon ion-email"></i>
    Check mail
  </a>
  <a class="item item-icon-left item-icon-right" href="#">
    <i class="icon ion-chatbubble-working"></i>
    Call Ma
    <i class="icon ion-ios-telephone-outline"></i>
  </a>
  <a class="item item-icon-left" href="#">
    <i class="icon ion-mic-a"></i>
    Record album
    <span class="item-note">
      Grammy
    </span>
  </a>
  <a class="item item-icon-left" href="#">
    <i class="icon ion-person-stalker"></i>
    Friends
    <span class="badge badge-assertive">0</span>
  </a>
</div>

図 4 Ionic で作成されたネイティブな外観のリスト

作業の開始

Ionic アプリは、Cordova アプリでローカルにパッケージ化された Web ページにすぎません。ご覧のように、カスタム HTML タグと、プラットフォーム固有の CSS スタイルがあります。Ionic アプリは、Angular の上位に構築されます。簡単な Ionic アプリを作成し、その構造を確認しましょう。Angular をよくご存知ならこの手順はすぐに終わります。あまりご存じない場合は、上位レベルのしくみから理解していくと非常に簡単です。Ionic コマンドラインインターフェイス (CLI) を使用するには、npm をインストールしておき (Nodejs.org (英語) から Node.js をインストールすると入手できます)、Git-scm.com (英語) から Git を取得している必要があります。

スタンドアロンアプリで Ionic を使用するだけの場合は、次のように bower を使って簡単にインストールできます。

bower install ionic

Visual Studio のユーザーは、(Visual Studio チームが管理する) Ionic テンプレートを利用できます。これは、[ツール]、[拡張機能と更新プログラム] の順にクリックすると表示される Visual Studio ギャラリーから入手できます。Ionic には独自のコマンドラインインターフェイス (CLI) があり、これを使うことで Ionic を非常に簡単に利用できるようになります。また、Ionic は Cordova の上位に構築されます。そこで、その方法を確認して Ionic コマンドラインから新しいアプリを作成してみます。

#install ionic and cordova (once) and create the app(s)
npm install-g ionic cordova
#create a new app using the tabs template
#Could be one of several templates – run the command:
#ionic templates
#or specify url of a custom template
ionic start myIonic tabs
cd myIonic
#add platform support to the project
ionic platform add android
ionic platform add ios

Android SDK をインストールしていないため、まだアプリを実行できません。ただし、Android SDK は TACO CLI を使って簡単にインストールできます。そのため、その方法でインストールを実行してからエミュレーターを起動します。既に説明したとおり、TACO は CLI を提供するだけではありません。Ionic、TACO、および Cordova のコマンドラインはすべて連携できます。

#install JAVA, Android SDK, Gradle, and so forth if they don’t yet exist
taco install-reqs android
#run in the browser
ionic serve
#run in an emulator
ionic emulate android

iOS について

iOS の場合、Apache Cordova アプリを実行してデバッグするには Visual Studio Code または Visual Studio を使用します。アプリをデバイス上または Apple シミュレーターで実行する場合はどこかの時点で Mac にアクセスする必要があります。そのため、既に Mac OS で作業を行っている場合は、前述のように Visual Studio Code 内から直接アプリを実行してデバッグし、デバイス上またはシミュレーター内で起動できます。

Windows 上での開発を希望する場合は複数の選択肢があります。Visual Studio を使用している場合は、Windows で Apache Ripple シミュレーターを使用できます (bit.ly/1QOqXxK、英語)。このシミュレーターは最初から iOS のシミュレーションを行えるように構成されています (図 5 参照)。(OS X の) Apple シミュレーターまたは iOS デバイス上でアプリを実行してデバッグする場合は、Xcode がインストールされた Mac と、その Mac にインストールされたリモートエージェントが必要です。これは、Visual Studio または Visual Studio Code とその Mac で通信できるようにするためです。その概要は、bit.ly/1XC36H3 (英語) で説明されています。Visual Studio Dev Essentials から Parallels の 3 か月のサブスクリプションを取得すれば、Mac 上で Windows を実行できます。最終的には、MacInCloud など、さまざまな Mac のクラウドサービスのいずれかを使用して、bit.ly/1QOrYpz (英語) に示すようにクラウドで実行できます。

図 5 Visual Studio での iOS の実行とデバッグのオプション

前述のとおり、Mac に Xcode をインストールする必要があります。ただし、taco install-reqs を使用する場合は、このコマンドにより ios-sim もインストールされ、この ios-sim を使用することでコマンドラインから iOS シミュレーターを実行できます。また、ios-deploy を使用すると、Xcode の外部で iOS デバイスにアプリをインストールしてデバッグできます。

Visual Studio Code での読み込み

この時点で、Ionic はアプリケーションフォルダーを作成しています。このフォルダーが Cordova アプリです。Visual Studio Code または Visual Studio のいずれかを読み込んで、このフォルダーをポイントすることで、アプリの操作を開始できます。ここで、Visual Studio Code の [Debug] (デバッグ) タブに移動し、ターゲットを選択して、デバッグを開始します (図 1 参照)。

ここからは、アプリの構造を見ていきます。Index.html がメインページで、Ionic と Angular を読み込みます。<ion-nav-view> など、Ionic がカスタムタグを使用しているのがわかりますが、これについては後ほど説明します。Index.html は、Angular を使用して配信されるコンテンツの他の部分をホストするルートページです。Ionic は css と js という 2 つの参照から構成され、この js に Angular が付属しています。

<!-- compiled css (from sass) output -->
<link href="css/ionic.app.css" rel="stylesheet">
<!-- ionic & angularjs bundled together js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

図 6 は、index.html の body タグを示しています。このアプリのフローは URI で制御されます。図 7 に示すように、これらの URI は app.js で登録されています。MVC 開発者の方は、この方法を考えてみてください。図 7 は後ほど拡張するほんの一部を示しています。ご覧の通り、下記では /tab と /tab/dash の 2 つの URL が処理されています。アプリが読み込まれるときには何が読み込まれるのでしょう。$urlRouterProvider.otherwise 関数では /tab/dash が既定値として提供されるため、index.html から始めると /tab/dash も処理されます。

図 6 index.html の body タグ

<body ng-app="starter">
  <!--
    The nav bar that will be updated as we navigate between views.
  -->
  <ion-nav-bar class="bar-stable">
    <ion-nav-back-button>
    </ion-nav-back-button>
  </ion-nav-bar>
  <!--
    The views will be rendered in the <ion-nav-view> directive below
    Templates are in the /templates folder (but you could also
    have templates inline in this html file if you'd like).
  -->
  <ion-nav-view></ion-nav-view>
  </body>

図 7 Angular UI ルーターを含む App.js

// app.js
// ..
  $stateProvider
// Setup an abstract state for the tabs directive
.state('tab', {
  url: '/tab',
  abstract: true,
  templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:\
.state('tab.dash', {
   url: '/dash',
  views: {
    'tab-dash': {
      templateUrl: 'templates/tab-dash.html',
      controller: 'DashCtrl'
    }
  }
})
// Extra code removed for brevity...
// If none of the above states (urls)
// are matched, use this as fallback
$urlRouterProvider.otherwise('/tab/dash');

最初の URI には abstract 属性が付いています。つまり、/tab に直接ナビゲートされることはありません。ただし、/tab の子にアクセスされるときは必ずこの URI が利用されます。既定値は /tab/dash なので、これらの URI の両方のビューが処理されることになります。Cordova アプリは Web ブラウザーではなく Web ビューで実行されるため、ユーザーが入力することになる公開 URI はありません。このナビゲーションは、href または JavaScript 経由で完全に処理されます。state では、URI に対して表示する HTML と、ビジネスロジックを処理するコントローラーを定義します。

このテンプレートの ./js/controllers.js ファイルには、各 URI テンプレートの組み合わせと結び付ける基本的なビジネスロジックを含めます。$scope 変数は、テンプレートが使用できるデータを割り当てるためだけに使用します。顧客情報を返す場合は、次のように使用します。

$scope.customer = { "firstName": "John" };

下記のコードは services.js で定義された Chat サービスからのデータを割り当てる ChatDetail コントローラーと、テンプレート内でバインドできる settings という変数に JSON オブジェクトを割り当てるコントローラーを示しています。

// controller.js
angular.module('starter.controllers', [])
// ...code omitted for brevity
.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
  $scope.chat = Chats.get($stateParams.chatId);
})
.controller('StorageCtrl', function($scope) {
  $scope.settings = {
    enableCloudStorage: true
  };
});

既定の tab インターフェイスは 2 つのテンプレートから成ります。つまり、(/tab の) tab インターフェイスと、ユーザーの選択に応じて tabs html に含まれる 3 つの子ビューのいずれかで構成されます。インターフェイスの HTML を図 8 に示します。ion-tabs と ion-tab を使用して tabs コントロールと個々のタブを定義する方法と、ion-nav-view を使用して実際の子ビューをホストする方法に注目してください。

図 8 既定の tab インターフェイスの HTML

<ion-tabs class="tabs-icon-top tabs-color-active-positive">
  <!-- Dashboard Tab -->
  <ion-tab title="Status" icon-off="ion-ios-pulse"
    icon-on="ion-ios-pulse-strong"
    href="#/tab/dash">
    <ion-nav-view name="tab-dash"></ion-nav-view>
  </ion-tab>
  <!-- Chats Tab -->
  <ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline"
    icon-on="ion-ios-chatboxes"
    href="#/tab/chats">
    <ion-nav-view name="tab-chats"></ion-nav-view>
  </ion-tab>
  <!-- Storage Tab -->
  <ion-tab title="Storage" icon-off="cloud-outline" icon-on="cloud"
    href="#/tab/storage">
    <ion-nav-view name="tab-storage"></ion-nav-view>
  </ion-tab>
</ion-tabs>

これはアプリが読み込まれたときに表示される既定の tab-dash ビューです。前述の tab-dash <ion-nav-view> の内部にレンダリングされます。

<ion-view view-title="Dashboard">
  <ion-content class="padding">
    <h2>Welcome to Ionic</h2>
    <p>
    This is the Ionic starter...
    </p>
  </ion-content>
</ion-view>

Ionic はビュー間のナビゲーションも認識します。ブラウザー内でアプリで実行中で、[戻る] ボタンをクリックした場合は前のページに移動します。Windows Phone または Android デバイスでアプリを実行中で、ハードウェアの「戻る」ボタンを使用した場合も前のビューに移動します。これは、Index.html の内部で次のように構成します。

<ion-nav-bar class="bar-stable">
  <ion-nav-back-button>
  </ion-nav-back-button>
</ion-nav-bar>

プラットフォーム固有の CSS

表示するアイコンの決定など、対応が必要なプラットフォーム固有の部分はいくつかありますが、これを実現するにはアプリを実行中のプラットフォームを把握する必要があります。プラットフォームを検出する方法はいくつかあります。device.platform を使用する既定の Cordova デバイスプラグインの JavaScript を採用できますが、これはアイコンの表示に大量の if/else ロジックが必要になります。ポイントは、アプリが Web ページで構成されることです。「単なる Web ページ」でも (WebGL のように) ネイティブに近い速度でフル 3D アプリを実行できるため、単純だとは考えないでください。ただし、今回使用しているのは単なる HTML/CSS/JS なので、アプリのスタイルの設定に使用できるのは CSS のみです。Ionic では Ionicons というライブラリが提供されており、Ionicons.com (英語) から入手できます。また、Ionicons.com/cheatsheet.html (英語) も参考にしてください。

Cordova build <platform> を実行してプラットフォーム向けにビルドする場合、変更点は 1 つだけで、<body> 要素にそのプラットフォーム用の CSS クラスを追加します。たとえば、Android でアプリを実行する場合、body タグは次のようになります。

<body class="platform-android">

これをうまく利用してプラットフォーム固有のアイコンを表示するには、Sass スタイルシート言語と Ionic アイコンを併用します。以下のコマンドは、Sass を使用して Ionic アプリを構成しています。

#tell Ionic to configure/create Sass and make the .scss file
ionic setup sass

Visual Studio を使用している場合、この手順は機能しますが、必ず最初に Task Runner Explorer を構成して Gulp タスクを実行し、Saas を CSS にコンパイルしてください。Gulp や Task Runner Explorer をご存じない方は、Grunt と Gulp に関するコラム (msdn.com/magazine/mt595751) をご覧ください。

Visual Studio を使って Web プロジェクトの LESS、Sass、CoffeeScript、JSX、ES6、および Stylus の各ファイルを自動的にコンパイルする場合は、Web Compiler 拡張機能を使用して処理します。Web Compiler については bit.ly/1O0LP3x (英語) を参照してください。今回は Gulp を使用するため Web Compiler は必要ありませんが、どちらの方法でも機能します。

ここで ./scss/ionic.app.scss ファイルを開いて一部の Sass を追加します。Sass に関する情報は大量に出回っていますが、ここで注目するのは、他の方法では実現にもっと多くのテキストを必要とすることが、Sass のおかげで CSS で可能になる点です。プラットフォーム固有のクラウドアイコンを表示したり、プラットフォーム固有のアイコンがない場合に既定のアイコンを表示する場合は、この .scss ファイルを編集して図 9 に示すようにコードを追加します。

図 9 Sass を使用してプラットフォーム固有のアイコンを定義

// Handle any platform not defined
.cloud{
  @extend .ion-ios-cloud
}
.cloud-outline{
    @extend .ion-ios-cloud-outline
}
// Android-specific
.platform-android {
  .cloud{
    @extend .ion-android-cloud
  }
  .cloud-outline{
    @extend .ion-android-cloud-outline
  }
}
// iOS-specific
.platform-ios .platform-win32{
  .cloud {
    @extend .ion-ios-cloud
  }
  .cloud-outline{
    @extend .ion-ios-cloud-outline
  }
}

次に、このための Gulp タスクを手動でトリガーして実行します。

#compile sass
gulp sass
Using gulpfile ~\myIonic\gulpfile.js
[11:28:24] Starting 'sass'...
[11:28:26] Finished 'sass' after 2.1 s
#now run it!
ionic emulate android

すぐに確認できることの 1 つに、プラットフォーム固有のタブ配置があります (図 10 参照)。このためにコードの変更は必要ありません。つまり、Ionic がそのように機能します。非常に小さなことですが、もう 1 つクラウドアイコンの違いがあります。単純な CSS の変更により、プラットフォームごとにプラットフォーム固有のアイコンをレンダリングします。

図 10 Android と iOS 上の Ionic

アプリ更新プログラムの提供

アプリはサービスです。つまり、アプリに関する健全なコミュニティを確保しようと考えるなら、一度も配置など行わずにアプリのことは忘れることです。修正プログラムや新機能を提供するために絶えず更新プログラムを配信すべきです。完全にネイティブなアプリではなく Cordova アプリを選ぶ非常に魅力的な理由は、ストア以外から更新プログラムを配信できるところにあります。たとえば、iOS のアプリの承認には数週間を要することがあります。修正プログラムや新機能をすぐに配置する必要がある場合はどうすればよいでしょう。

CodePush は Microsoft のサービスです。このサービスは、Cordova アプリのネイティブコードの変更がない限り (通常、こうした変更は、新しいプラグインを追加することによるものです)、ストア以外からアプリの更新プログラムを配信できるようにします。HTML/CSS/JavaScript などの資産に変更を加えて新しいリリースを作成できます。アプリのリリースは Microsoft Azure に格納され、CodePush によって完全に管理されるため、インフラストラクチャについて悩む必要はありません。ここでは、あるバージョンの Android Ionic アプリをクラウドにデプロイするために必要な手順を確認します。

npm install -g code-push-cli
code-push register
code-push app add myIonic

上記のコマンドにより、CodePush デプロイキーが返されます。<platform> 要素を使用して、入手したキーを /config.xml ファイルの末尾に追加します。

<widget id="com.ionicframework.myionic594688" version="0.0.1"
  xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <!-- other config removed for brevity -->
  <platform name="android">
    <preference name="CodePushDeploymentKey"
      value="YourKeyGeneratedInPriorStep" />
  </platform>
  <platform name="ios">
    <preference name="CodePushDeploymentKey"
      value="YourKeyGeneratedInPriorStep" />
  </platform> 
</widget>

ここで必要なのは、CodePush に更新プログラムをチェックするように指示し、その変更を同期することだけです。変更点が見つかったら、次回のアプリ起動時にその更新プログラムがダウンロードされて更新が行われます。チェックには非同期方式と同期方式がありますが、ここでは簡潔なことから同期方式を使用します。app.js には、Cordova API が手元にある場合に、アプリの更新プログラムをチェックする最適な場所があります。通常、Cordova アプリでは、deviceready にフックすることで準備ができたことを認識します。

window.addEventListener('deviceready', {})

Ionic を使用しているため、deviceready イベントをリッスンし、次に $ionicPlatform.ready を呼び出します。$ionicPlatform.ready は app.js のテンプレートに既に用意されています。CodePush と同期するのに必要なのはそこにコードを 1 行追加することだけです。

// app.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    window.codePush.sync();
    // ...
  });
})

/templates/tab-dash ファイルに対する小さな HTML の更新プログラムを作成しました。この変更をリリースするには、単純に Cordova に配布の準備を依頼し、それを CodePush します。まず、/config.xml にアプリのバージョンを記載する必要があります。

<widget id= "com.ionicframework.myiconic594688" version= "0.0.1"

次に、2 つの途方もなく大きな手順を行って、この変更を配布する準備を整え、CodePush サービスにプッシュします。

#get my app ready (makes changes only in the /platforms folders)
#we could also cordova prepare or taco prepare – all do the same thing
ionic prepare
#push this release up to the cloud
#we use /assets as those are the prepared html/js/css files
code-push release myIonic ./platforms/android/assets/www 0.0.1 --deploymentName Production

これで、Visual Studio Code からアプリを起動している場合に、アプリから更新プログラムをチェックするようすを Visual Studio Code デバッグコンソールで確認できます。

Debug Console
Launching for android (This may take a while)...
App successfully launched
Attaching to android
Forwarding debug port
Attaching to app.
[CodePush] An update is available.
[CodePush] Downloading update package ...
[CodePush] Package download
[CodePush] Installing update package ...
[CodePush] First update: back up package information skipped.
[CodePush] Install succeeded.

これで完了です。今回の構成では、変更を実現するためにアプリを 2 回起動することになります。1 回目では起動時に CodePush の新しいビルドが検出されることで更新プログラムがダウンロードされ、2 回目で更新プログラムが適用されたアプリが起動します。このワークフロー全体を使用できるのは、運用中またはテスト中であることに注意してください。今回説明したことはすべて、ライブはもちろん、エミュレーターでも問題なく機能し、Android エミュレーターで結果を確認できます。

まとめ

今回説明したワークフローでは、アプリを開発し、準備を行い、CodePush サービスにプッシュしました。継続的デプロイを考える場合は、bit.ly/1QpydG4 (英語) に完全なワークフローの概要が示されています。このワークフローでは追加で Visual Studio Team System からの配置と、HockeyApp を使用したベータ版の配信に対する管理が (クラッシュレポートとユーザーフィードバックも含めて) まとめられています。本格的に使い始める場合は、Subhag Oak による自己包含型の役立つワークショップが、bit.ly/1QpCwBt (英語) から参照できます

Angular と Ionic は両方とも進行中の新しいメジャーバージョンがあり (いずれも 2.x)、共に現在チェックアウトできます。本稿執筆時点ではどちらもまだリリースされていないため、ここで説明するにはやや時期尚早です。

今回は、現在のモバイルアプリ開発で最も興味深い分野の 1 つを簡単に説明しました。次のリソースから優れたドキュメントを確認し、今後の変更を把握するようにしてください。

TACO - taco.tools (英語)
Apache Cordova 用 Visual Studio Tools - taco.visualstudio.com (英語)
パフォーマンスヒント - bit.ly/24kEaIx (英語)
Ionic フレームワークのネイティブ遷移 - bit.ly/1SKFFfm (英語)
Visual Studio Tools for Apache Cordova チームブログ - bit.ly/1KBpJcH (英語)

次回お会いできるのを楽しみにしています。

Adam Tuliper は、南カリフォルニア在住のマイクロソフトのシニアテクニカルエバンジェリストです。Web 開発者、ゲーム開発者、兼 Pluralsight.com (英語) の執筆者で、すべての技術に愛着を持っています。彼には Twitter (@EugeneChuvyrov、英語) または channel9.msdn.com/Blogs/AdamsGarage (英語) から連絡できます。

この記事のレビューに協力してくれたマイクロソフト技術スタッフの Subhag Oak、Ricardo Minguez Pablos、および Ryan Salva に心より感謝いたします。

次の方法で共有

モバイルアプリ - Ionic と TACO によるクロスプラットフォームモバイルアプリの作成

Tools for Apache Cordova (TACO)

開発とデバッグ

Ionic フレームワーク

作業の開始

iOS について

Visual Studio Code での読み込み

プラットフォーム固有の CSS

アプリ更新プログラムの提供

まとめ

その他のリソース

次の方法で共有

モバイル アプリ - Ionic と TACO によるクロスプラットフォーム モバイル アプリの作成

Tools for Apache Cordova (TACO)

開発とデバッグ

Ionic フレームワーク

作業の開始

iOS について

Visual Studio Code での読み込み

プラットフォーム固有の CSS

アプリ更新プログラムの提供

まとめ

その他のリソース

モバイルアプリ - Ionic と TACO によるクロスプラットフォームモバイルアプリの作成