モバイルで Chrome アプリを実行するためのツールチェーンは、早期デベロッパー プレビュー版です。フィードバックがございましたら、GitHub Issue Tracker、Chrome アプリ デベロッパー フォーラム、Stack Overflow または Google+ のデベロッパー ページからお気軽にお寄せください。
概要
Android と iOS で Chrome アプリを実行するには、Apache Cordova に基づくツールチェーンを使用します。Apache Cordova は、HTML、CSS、JavaScript を使用してネイティブ機能を備えたモバイルアプリを構築するためのオープンソース モバイル開発フレームワークです。
Apache Cordova は、アプリケーションのウェブコードをネイティブ アプリケーション シェルでラップします。これにより、ハイブリッド ウェブアプリを Google Play や Apple App Store で配布できます。既存の Chrome アプリで Apache Cordova を使用するには、cca（cordova c hrome a pp）コマンドライン ツールを使用します。
参考情報
- Cordova で開発する際には、いくつかの特別な考慮事項があります。考慮事項のセクションに記載しています。
- モバイルでサポートされている Chrome API を確認するには、API ステータスのページをご覧ください。
- ツールチェーンのない Android デバイスで Chrome アプリをプレビューするには、Chrome Apps Developer Tool（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 シミュレータにデプロイするために必要）
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 という名前のディレクトリにデフォルトのモバイル Chrome アプリ プロジェクトを作成するには、次のコマンドを実行します。
cca create YourApp
すでに Chrome アプリをビルドしていて、それをモバイル プラットフォームに移植する場合は、--link-to フラグを使用して、そのアプリへのsymlinkを作成できます。
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 シミュレータでアプリを実行するには:
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 つは
- 再生ボタンをクリックしてアプリを実行します。
- （すべての Java アプリケーションと同様に）実行構成を作成する必要があります。通常、初めてこのプロンプトは自動的に表示されます。
- デバイスやエミュレータは初回も管理する必要があります。
iOS
ターミナル ウィンドウで次のコマンドを入力して、Xcode でプロジェクトを開きます。
cd YourApp open platforms/ios/*.xcodeproj適切なターゲットを作成していることを確認します。
左上（[実行] ボタンと [停止] ボタンの横）に、対象のプロジェクトとデバイスを選択するためのプルダウンがあります。
CordovaLibではなくYourAppが選択されていることを確認します。再生ボタンをクリックします。
アプリのソースコードの変更
HTML、CSS、JavaScript ファイルは、CCA プロジェクト フォルダの www ディレクトリにあります。
重要: www/ に変更を加えた後、アプリケーションをデプロイする前に cca prepare を実行する必要があります。コマンドラインから cca build、cca run、または cca emulate を実行する場合、準備ステップは自動的に実行されます。Eclipse/XCode を使用して開発している場合は、cca prepare を手動で実行する必要があります。
デバッグ
モバイル版の Chrome アプリは、Cordova アプリケーションのデバッグと同じ方法でデバッグできます。
ステップ 4: 次のステップ
動作するモバイル Chrome アプリが完成しました。モバイル デバイスでのエクスペリエンスを改善する方法はたくさんあります。
モバイル マニフェスト
モバイル プラットフォームにのみ適用される特定の Chrome アプリの設定があります。これらを格納する www/manifest.mobile.json ファイルが用意されています。具体的な値は、プラグインのドキュメントとガイド全体で参照されています。
この値は適宜調整してください。
アイコン
モバイルアプリでは、デスクトップ版 Chrome アプリよりも多くのアイコン解像度が必要になります。
Android の場合は、次のサイズが必要です。
- 36 ピクセル、48 ピクセル、78 ピクセル、96 ピクセル
iOS アプリの場合、必要なサイズは iOS 6 と iOS 7 のどちらをサポートするかによって異なります。必要なアイコンの最小数は次のとおりです。
- iOS 6: 57 px、72 px、114 px、144 px
- iOS 7: 72 ピクセル、120 ピクセル、152 ピクセル
完全なアイコンリストは、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 のアプリでは、アプリの読み込み中に短いスプラッシュ画面が表示されます。platforms/ios/[AppName]/Resources/splash には、デフォルトの Cordova スプラッシュ画面のセットが含まれています。
必要なサイズは次のとおりです。
- 320px x 480px + 2x
- 768 ピクセル x 1,024 ピクセル + 2x（iPad 縦向き）
- 1,024 ピクセル x 768 ピクセル + 2x（iPad 横向き）
- 640 px x 1,146 px
現時点では、スプラッシュ画面の画像は cca によって変更されません。
ステップ 5: 公開する
プロジェクトの platforms ディレクトリには、Android 用と iOS 用の 2 つの完全なネイティブ プロジェクトがあります。これらのプロジェクトのリリース バージョンをビルドして、Google Play または iOS App Store に公開できます。
Google Play ストアに公開する
Android アプリを Google 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 Console にアップロードします。
iOS App Store に公開する
www/manifest.mobile.jsでCFBundleVersionキーを設定してcca prepareを実行し、アプリのバージョンを更新します。platforms/iosディレクトリにある Xcode プロジェクト ファイルを開きます。platforms/ios/*.xcodeproj を開きます。
Apple のアプリ配信ガイドに沿って対応してください。
特記事項
Chrome アプリを初めて使用する場合は、一部のウェブ機能が無効になっていることに注意してください。ただし、現在、これらの機能のいくつかは Cordova 内で動作しています。
Chrome アプリは、モバイルではすぐには動作しない場合があります。モバイルへの移行に関する一般的な問題:
- 小画面（特に縦向き）でのレイアウトの問題。
- 推奨される修正方法: CSS メディアクエリを使用して、小さい画面向けにコンテンツを最適化します。
- chrome.app.window で設定された Chrome アプリのウィンドウ サイズは無視され、代わりにデバイスのネイティブ サイズが使用されます。
- 推奨される修正: ハードコードされたウィンドウ サイズを削除し、さまざまなサイズを念頭に置いてアプリを設計します。
- 小さなボタンやリンクは、指でタップするのが難しい。
- 推奨される修正方法: タップ ターゲットを 44 x 44 ポイント以上に調整します。
- タッチスクリーンに存在しないマウスのホバーに依存している場合の予期しない動作。
- 推奨される修正方法: ホバーに加えて、タップ時にプルダウンやツールチップなどの UI 要素を有効にします。
- タップ遅延 300 ミリ秒。
- 推奨される修正: FT Labs の FastClick JavaScript ポリフィルを使用します。
- 背景情報については、こちらの HTML5Rocks の記事をご覧ください。
サポートされている Chrome API
次のようなコア Chrome API の多くが、モバイル向け Chrome アプリで利用可能になりました。
- identity - OAuth2 を使用してユーザーをログインさせる
- payments - モバイルアプリ内で仮想アイテムを販売します
- pushMessaging - サーバーからアプリにメッセージを push します。
- ソケット - TCP と UDP を使用してネットワーク経由でデータを送受信する
- 通知（Android のみ）- モバイルアプリからリッチ通知を送信できます。
- storage - Key-Value データをローカルに保存、取得する
- syncFileSystem - Google ドライブを基盤とするファイルを保存、取得する
- アラーム - タスクを定期的に実行する
- アイドル - マシンのアイドル状態が変化したときに検出します。
- power - システムの電源管理機能をオーバーライドします。
ただし、すべての Chrome JavaScript API が実装されているわけではありません。また、Chrome デスクトップの機能のすべてがモバイルで利用できるわけではありません。
<webview>タグがない- IndexedDB なし
- getUserMedia() なし
- 塩化ナトリウム不使用
進捗状況は API のステータスページで確認できます。
Chrome アプリ デベロッパー ツール
Android 向け Chrome Apps デベロッパー ツール（ADT）は、上記の説明のように開発ツールチェーンを設定しなくても Chrome アプリをダウンロードして実行できるスタンドアロンの Android アプリです。既存の Chrome アプリ（.crx としてパッケージ化済み）を Android デバイスですばやくプレビューする場合は、Chrome ADT を使用します。
Android 版 Chrome ADT は現在、プレアルファ版です。試すには、ChromeADT.apk リリースノートでインストール手順と使用方法をご覧ください。