モバイル版 Chrome アプリを実行するためのツールチェーンは、早期デベロッパー プレビュー版です。フィードバックがございましたら、GitHub Issue Tracker、Chrome アプリ デベロッパー フォーラム、Stack Overflow、Google+ デベロッパー ページからお気軽にお寄せください。
概要
Android と iOS で Chrome アプリを実行するには、Apache Cordova に基づくツールチェーンを使用します。ツールチェーンは、HTML、CSS、JavaScript を使用してネイティブ機能を備えたモバイルアプリを作成するためのオープンソースのモバイル開発フレームワークです。
Apache Cordova は、アプリケーションのウェブコードをネイティブ アプリケーション シェルでラップし、Google Play や Apple App Store からハイブリッド ウェブアプリを配布できるようにします。既存の Chrome アプリで Apache Cordova を使用するには、cca（c ordova c hrome a pp）コマンドライン ツールを使用します。
補足資料
- Cordova で開発する際には、特に注意すべき点がいくつかあります。考慮事項のセクションをご覧ください。
- モバイルでサポートされている Chrome API を確認するには、API ステータスのページをご覧ください。
- ツールチェーンを使用せずに Android デバイスで Chrome アプリをプレビューするには、Chrome アプリ デベロッパー ツール（ADT）を使用します。
さっそく始めましょう
ステップ 1: 開発ツールをインストールする
モバイル版 Chrome アプリのツールチェーンは iOS 6 以降と Android 4.x 以降をターゲットとすることができます。
すべてのプラットフォームに対する開発の依存関係
Node.js バージョン 0.10.0 以降と
npmが必要です。- Windows: nodejs.org からダウンロード可能なインストール実行可能ファイルを使用して Node.js をインストールします。
- OS X または Linux: インストール実行可能ファイルは nodejs.org から入手することもできます。root アクセス権の必要がない場合は、nvm でインストールする方が便利な場合もあります。例:
curl https://raw.github.com/creationix/nvm/master/install.sh | sh source ~/.bash_profile || source ~/.profile || source ~/.bashrc nvm install 0.10 nvm alias default 0.10
Android をターゲットとする
Android 向けのアプリを開発する場合は、以下もインストールする必要があります。
- Java JDK 7（以降）
- Android SDK バージョン 4.4.2 以降
- Android ADT Bundle にバンドルされている Android SDK と Android デベロッパー ツールをインストールします。
sdk/toolsとsdk/platform-toolsを PATH 環境変数に追加します。- OS X: Android SDK に付属する Eclipse のバージョンには JRE 6 が必要です。Eclipse.app を開いたときに JRE 6 のインストールが求められない場合は、Mac App Store から入手してください。
- Linux: Android SDK には 32 ビットのサポート ライブラリが必要です。Ubuntu では、
apt-get install ia32-libsでこれらを取得します。
- Apache Ant
apache-ant-x.x.x/binを PATH 環境変数に追加します。
iOS をターゲットに設定
なお、iOS 開発は OS X 上でのみ実施できます。加えて、以下をインストールする必要があります。
- Xcode 5（以降）（Xcode コマンドライン ツールを含む）
- ios-deploy（iOS デバイスへのデプロイに必要）
npm install -g ios-deploy
- ios-sim（iOS Simulator へのデプロイに必要）
npm install -g ios-sim
- 省略可: iOS デベロッパーとして登録する
- これは、実際のデバイスでのテストやアプリストアへの送信に必要です。
- iPhone/iPad シミュレータのみを使用する場合は、登録をスキップできます。
cca コマンドライン ツールをインストールする
npm を介して cca をインストールします。
npm install -g cca
後で新しいリリースでツールチェーンを更新するには: npm update -g cca
コマンドラインから次のコマンドを実行して、すべてが正しくインストールされていることを確認します。
cca checkenv
出力された cca のバージョン番号と、Android または iOS の SDK のインストール確認が表示されます。
ステップ 2: プロジェクトを作成する
YourApp という名前のディレクトリにデフォルトのモバイルアプリ プロジェクトを作成するには、次のコマンドを実行します。
cca create YourApp
すでに作成した Chrome アプリをモバイル プラットフォームに移植する場合は、--link-to フラグを使用してシンボリック リンクを作成します。
cca create YourApp --link-to=path/to/manifest.json
既存の Chrome アプリのファイルをコピーするには、--copy-from フラグを使用します。
cca create YourApp --copy-from=path/to/manifest.json
まだ Chrome アプリをお持ちでない場合は、モバイル サポート付きの Chrome アプリのサンプルのいずれかを試してみる。
ステップ 3: 開発
アプリケーションをビルドして実行できる方法は 2 つあります。
- 方法 A: コマンドライン、
ccaツールを使用する。 - 方法 B: Eclipse や Xcode などの IDE を使用する。IDE の使用は完全に任意です（ただし、多くの場合は、ハイブリッド モバイルアプリの起動、構成、デバッグに役立ちます）。
オプション A: コマンドラインを使用して開発とビルドを行う
cca で生成されたプロジェクト フォルダのルートから、次のコマンドを実行します。
Android
- Android Emulator でアプリを実行するには:
cca emulate android- 注: テストを行うには、エミュレータをセットアップする必要があります。これを設定するには、
android avdを実行します。androidを実行して、追加のエミュレータ イメージをダウンロードします。Intel イメージの実行を高速化するには、Intel の HAXM をインストールします。
- 注: テストを行うには、エミュレータをセットアップする必要があります。これを設定するには、
- 接続された Android デバイスでアプリを実行するには:
cca run android
iOS
- iOS Simulator でアプリを実行するには:
cca emulate ios - 接続された iOS デバイスでアプリを実行するには:
cca run ios- 注: これを行うには、デバイスにプロビジョニング プロファイルを設定する必要があります。
オプション B: IDE を使用して開発とビルドを行う
Android
- Eclipse で、[
File] -> [Import] を選択します。 - [
Android] > [Existing Android Code Into Workspace] を選択します。 ccaで作成したパスからインポートします。- インポートするプロジェクトが 2 つ（そのうちの 1 つが
*-CordovaLib）必要があります。
- インポートするプロジェクトが 2 つ（そのうちの 1 つが
- [Play] ボタンをクリックしてアプリを実行します。
- （すべての Java アプリケーションと同様に）実行構成を作成する必要があります。通常、初回になると自動的に入力を求めるメッセージが表示されます。
- 初回はデバイス/エミュレータを管理する必要があります。
iOS
ターミナル ウィンドウで次のように入力して、Xcode でプロジェクトを開きます。
cd YourApp open platforms/ios/*.xcodeproj適切なターゲットを作成していることを確認します。
左上（[Run] ボタンと [Stop] ボタンの横）には、ターゲット プロジェクトとデバイスを選択するためのプルダウンがあります。
CordovaLibではなくYourAppが選択されていることを確認します。再生ボタンをクリックします。
アプリのソースコードに変更を加える
HTML、CSS、JavaScript ファイルは、cca プロジェクト フォルダの www ディレクトリにあります。
重要: www/ を変更した後は、アプリケーションをデプロイする前に cca prepare を実行する必要があります。コマンドラインから cca build、cca run、または cca emulate を実行している場合は、準備手順が自動的に行われます。Eclipse または Xcode を使用して開発している場合は、cca prepare を手動で実行する必要があります。
デバッグ
モバイル版 Chrome アプリは、Cordova アプリをデバッグすると同じ方法でデバッグできます。
ステップ 4: 次のステップ
モバイルアプリが正常に機能するようになったので、モバイル デバイスでのエクスペリエンスを向上させるさまざまな方法を紹介します。
モバイル マニフェスト
Chrome アプリの設定の中には、モバイル プラットフォームにのみ適用されるものがあります。これらを格納するために www/manifest.mobile.json ファイルを作成しました。特定の値は、プラグインのドキュメントとこのガイド全体で参照されています。
必要に応じて値を調整してください。
アイコン
モバイルアプリは、デスクトップの Chrome アプリよりもアイコンの解像度が多少高くなければなりません。
Android の場合、次のサイズが必要です。
- 36px、48px、78px、96px
iOS アプリの場合、必要なサイズは、iOS 6 と iOS 7 のどちらをサポートしているかによって異なります。最低限必要なアイコン数は次のとおりです。
- iOS 6: 57px、72px、114px、144px
- iOS 7: 72px、120px、152px
完全なアイコンリストの場合、manifest.json ファイルは次のようになります。
"icons": {
"16": "assets/icons/icon16.png",
"36": "assets/icons/icon36.png",
"48": "assets/icons/icon48.png",
"57": "assets/icons/icon57.png",
"72": "assets/icons/icon72.png",
"78": "assets/icons/icon78.png",
"96": "assets/icons/icon96.png",
"114": "assets/icons/icon114.png",
"120": "assets/icons/icon120.png",
"128": "assets/icons/icon128.png",
"144": "assets/icons/icon144.png",
"152": "assets/icons/icon152.png"
}
アイコンは、cca prepare を実行するたびに、各プラットフォームの適切な場所にコピーされます。
スプラッシュ画面
iOS のアプリでは、アプリの読み込み中に短いスプラッシュ画面が表示されます。デフォルトの Cordova スプラッシュ画面のセットは platforms/ios/[AppName]/Resources/splash に含まれています。
必要なサイズは次のとおりです。
- 320 x 480 ピクセル + 2 倍
- 768 x 1,024 ピクセル + 2x（iPad 縦向き）
- 1024 x 768 px + 2x（iPad の横向き）
- 640 x 1,146 ピクセル
現在、スプラッシュ画面の画像は cca によって変更されていません。
ステップ 5: 公開する
プロジェクトの platforms ディレクトリには、完全なネイティブ プロジェクトが 2 つ（Android 用と iOS 用）あります。これらのプロジェクトのリリース バージョンをビルドして、Google Play や iOS App Store に公開できます。
Play ストアに公開
Android アプリを Play ストアに公開するには:
2 つの Android バージョン ID を更新してから、
cca prepareを実行します。android:versionNameはwww/manifest.jsonのversionキーを使用して設定されます（これにより、デスクトップのパッケージ化アプリのバージョンも設定されます）。android:versionCodeは、www/manifest.mobile.jsでversionCodeキーを使用して設定されます。
platforms/android/ant.propertiesを編集（または作成）して、key.storeプロパティとkey.aliasプロパティを設定します（Android デベロッパー ドキュメントを参照）。プロジェクトをビルドします。
./platforms/android/cordova/build --releaseplatforms/android/ant-build/内にある署名済みの .apk を見つけます。署名したアプリを Google Play デベロッパー コンソールにアップロードします。
iOS App Store に公開する
www/manifest.mobile.jsでCFBundleVersionキーを設定してアプリのバージョンを更新し、cca prepareを実行します。platforms/iosディレクトリにある Xcode プロジェクト ファイルを開きます。オープン プラットフォーム/ios/*.xcodeproj
Apple の App Distribution ガイドに沿って対応します。
特記事項
Chrome アプリを初めて使用する場合の最大の問題は、一部のウェブ機能が無効になっていることです。ただし、そのうちのいくつかは現在 Cordova 内で動作します。
モバイルでは、Chrome アプリをそのままでは機能しないことがあります。モバイルへの移行に関する一般的な問題には、次のようなものがあります。
- 小画面（特に縦向き）でのレイアウトの問題。
- おすすめの修正: CSS メディアクエリを使用して、小さい画面向けにコンテンツを最適化します。
- chrome.app.window を介して設定された Chrome アプリのウィンドウ サイズは無視され、デバイスのネイティブ サイズが使用されます。
- 推奨修正: ハードコードされたウィンドウ サイズを削除し、さまざまなサイズを念頭に置いてアプリを設計してください。
- 小さいボタンやリンクは指でタップしにくい。
- おすすめの修正: タップ ターゲットを 44×44 ポイント以上に調整します。
- マウスホバーに依存している、タッチ スクリーンにはない予期しない動作
- 推奨修正: カーソルを合わせるだけでなく、タップ時にプルダウンやツールチップなどの UI 要素を有効にします。
- 300 ミリ秒のタップ遅延。
- 推奨される修正: FT Labs の FastClick の JavaScript ポリフィルを使用してください。
- 背景情報については、HTML5Rocks の記事をご覧ください。
サポートされている Chrome API
次のような Chrome アプリの主要な API をモバイル版 Chrome アプリで利用できるようにしました。
- identity - OAuth2 を使用してユーザーのログイン
- 支払い - モバイルアプリでバーチャル アイテムを販売
- pushMessaging - サーバーからアプリにメッセージを push する
- sockets - TCP と UDP を使用してネットワーク上でデータを送受信
- 通知（Android のみ）- モバイルアプリからリッチ通知を送信します。
- storage - Key-Value データをローカルで保存および取得
- syncFileSystem - Google ドライブでサポートされるファイルを保存および取得します。
- アラーム - タスクを定期的に実行します
- idle - マシンのアイドル状態の変化を検出します。
- power - システムの電源管理機能をオーバーライドします。
ただし、すべての Chrome JavaScript API が実装されているわけではありません。また デスクトップ版 Chrome の一部の機能は モバイルでは利用できません
<webview>タグなし- IndexedDB なし
- getUserMedia() がない
- NaCl 不使用
進行状況は [API ステータス] ページで確認できます。
Chrome アプリ デベロッパー ツール
Android 向け Chrome アプリ デベロッパー ツール（ADT）はスタンドアロンの Android アプリで、前述のように開発ツールチェーンを設定しなくても Chrome アプリをダウンロードして実行できます。Android デバイスで既存の Chrome アプリ（すでに .crx としてパッケージ化されているもの）を簡単にプレビューする場合は、Chrome ADT を使用します。
Chrome ADT for Android は現在、プレアルファ版リリースです。試してみるには、ChromeADT.apk リリースノートでインストールと使用方法をご確認ください。