Chrome アプリをモバイルで実行するためのツールチェーンは早期デベロッパー プレビューの段階です。必要に応じて GitHub Issue Tracker や Chrome アプリ デベロッパー フォーラムを使用してフィードバックをお寄せください。 Stack Overflow、または Google+ デベロッパー ページ。
概要
Apache ベースのツールチェーンを使用して、Android と iOS で Chrome アプリを実行できます。 Cordova は、ネイティブ コードでモバイルアプリを構築するためのオープンソースのモバイル開発フレームワークです。 実装する方法を学びました
Apache Cordova では、アプリケーションのウェブコードをネイティブ アプリケーション シェルでラップして、
ハイブリッド ウェブアプリを Google Play や Apple App Store で配布できます。Apache Cordova を使用するには
既存の Chrome アプリの場合、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: 次からダウンロードできるインストール実行可能ファイルを使用して Node.js をインストールします。 nodejs.org.
- 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 以降
<ph type="x-smartling-placeholder">
- </ph>
- Android ADT Bundle にバンドルされている Android SDK と Android デベロッパー ツールをインストールします。
sdk/toolsとsdk/platform-toolsを PATH 環境変数に追加します。- OS X: Android SDK に付属する Eclipse のバージョンには JRE 6 が必要です。次の場合 Eclipse.app で JRE 6 のインストールを求めるメッセージが表示されません。JRE 6 は Mac App Store から入手してください。
- Linux: Android SDK には 32 ビットのサポート ライブラリが必要です。Ubuntu の場合は、次のコマンドで取得します。
apt-get install ia32-libs。
- Apache Ant
<ph type="x-smartling-placeholder">
- </ph>
apache-ant-x.x.x/binを PATH 環境変数に追加します。
iOS をターゲットに設定
iOS 開発は OS X 上でのみ可能です。また、次のものをインストールする必要があります。
- Xcode 5 以降（Xcode コマンドライン ツールを含む）
- ios-deploy（iOS デバイスへのデプロイに必要）
<ph type="x-smartling-placeholder">
- </ph>
npm install -g ios-deploy
- ios-sim（iOS シミュレータへのデプロイに必要）
<ph type="x-smartling-placeholder">
- </ph>
npm install -g ios-sim
- 省略可: iOS デベロッパーとして登録する
<ph type="x-smartling-placeholder">
- </ph>
- これは、実際のデバイスでテストする場合やアプリストアに送信する場合に必要です。
- iPhone/iPad シミュレーターのみを使用する場合は、登録をスキップできます。
cca コマンドライン ツールをインストールする
npm を使用して cca をインストールします。
npm install -g cca
後でツールチェーンを新しいリリースで更新するには、npm update -g cca を使用します。
コマンドラインから次のコマンドを実行して、すべてが正しくインストールされていることを確認します。
cca checkenv
出力された cca のバージョン番号と、Android SDK または iOS SDK に関する確認が表示されます。
インストールできます。
ステップ 2: プロジェクトを作成する
次のコマンドを実行して、YourApp という名前のディレクトリにデフォルトのモバイル Chrome アプリ プロジェクトを作成します。
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<ph type="x-smartling-placeholder">- </ph>
- 注: これを行うには、エミュレータをセットアップしておく必要があります。これを設定するには、
android avdを実行します。androidを実行して、追加のエミュレータ イメージをダウンロードします。インテルイメージの実行を高速化するには、 Intel の HAXM をインストールします。
- 注: これを行うには、エミュレータをセットアップしておく必要があります。これを設定するには、
- 接続された Android デバイスでアプリを実行するには:
cca run android
iOS
- iOS Simulator でアプリを実行するには:
cca emulate ios - 接続された iOS デバイスでアプリを実行するには:
cca run ios<ph type="x-smartling-placeholder">- </ph>
- 注: これを行うには、デバイスにプロビジョニング プロファイルを設定しておく必要があります。
オプション B: IDE を使用して開発とビルドを行う
Android
- Eclipse で、
File-> を選択します。Import。 Androidを選択 >Existing Android Code Into Workspace。ccaで作成したパスからインポートします。- インポートするプロジェクトが 2 つあり、そのうちの 1 つは
*-CordovaLibです。
- インポートするプロジェクトが 2 つあり、そのうちの 1 つは
- [Play] ボタンをクリックしてアプリを実行します。
<ph type="x-smartling-placeholder">
- </ph>
- すべての 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 アプリの設定があります。Google では、
これらを含む www/manifest.mobile.json ファイルに、特定の値は全体を通じて参照されます。
プラグインのドキュメントとこのガイドを
ご覧ください
これらの値は適宜調整する必要があります。
アイコン
モバイルアプリのアイコン解像度は、パソコンの Chrome アプリよりも若干高くなります。
Android の場合、次のサイズが必要です。
- 36 ピクセル、48 ピクセル、78 ピクセル、96 ピクセル
iOS アプリの場合、必要なサイズは iOS 6 と iOS 7 のどちらをサポートするかによって異なります。 最低限必要なアイコン数は次のとおりです。
- iOS 6: 57 ピクセル、72 ピクセル、114 ピクセル、144 ピクセル
- 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 版のアプリでは、アプリの読み込み中に短いスプラッシュ画面が表示されます。デフォルトの Cordova スプラッシュ セット
画面は platforms/ios/[AppName]/Resources/splash に含まれています。
必要なサイズは次のとおりです。
- 320 x 480 ピクセル + 2 倍
- 768 x 1,024 ピクセル + 2 倍（iPad 縦向き）
- 1024 x 768 ピクセル + 2 倍（iPad 横向き）
- 640 x 1,146 ピクセル
現在、スプラッシュ画面の画像は cca によって変更されていません。
ステップ 5: 公開する
プロジェクトの platforms ディレクトリには、2 つの完全なネイティブ プロジェクトがあります。1 つは Android 用、もう 1 つは Android 用です。
1 つは iOS 向けですこれらのプロジェクトのリリース バージョンをビルドして、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 デベロッパー コンソールにアップロードします。
iOS App Store に公開する
www/manifest.mobile.jsでCFBundleVersionキーを設定してアプリのバージョンを更新します。cca prepareを実行します。platforms/iosディレクトリにある Xcode プロジェクト ファイルを開きます。オープン プラットフォーム/ios/*.xcodeproj
Apple の App Distribution Guide の手順に沿って進めます。
特記事項
Chrome アプリを初めて使用する場合の最大の問題点は、一部のウェブ機能が無効になっていることです。 ただし、そのうちのいくつかは現在 Cordova 内で機能しています。
Chrome アプリは、設定済みのモバイルでは動作しない場合があります。モバイルへの移行に関する一般的な問題:
- 画面が小さい場合（特に縦向きの場合）でレイアウトの問題が発生します。
- 推奨される修正方法: CSS メディアクエリを使用して、コンテンツを小さい画面向けに最適化します。
- chrome.app.window で設定した Chrome アプリのウィンドウ サイズは無視され、代わりに
サイズを指定する必要があります。
- 推奨される修正: ハードコードされたウィンドウ ディメンションを削除する。さまざまなサイズのアプリを設計し、 考えています
- ボタンやリンクが小さいと、指でタップしにくくなります。
- 推奨される修正方法: タップ ターゲットを 44 x 44 ポイント以上に調整します。
- タッチ スクリーンには存在しないが、マウスカーソルを合わせると予期しない動作が発生する。
- 推奨される修正: カーソルを合わせるだけでなく、プルダウンやツールチップなどの UI 要素を有効にする タップします。
- タップの遅延 300 ミリ秒。
- 推奨される修正: FT Labs の FastClick JavaScript ポリフィルを使用します。
- 背景情報については、こちらの HTML5Rocks の記事をご覧ください。
サポートされている Chrome API
モバイル版 Chrome アプリで、次のような主要な Chrome API を利用できるようにしました。
- identity - OAuth2 を使用してユーザーのログインを行う
- payments - アプリ内で仮想アイテムを販売します
- pushMessaging - サーバーからアプリにメッセージを push します。
- sockets - TCP と UDP を使用してネットワーク経由でデータを送受信します。
- 通知（Android のみ）- モバイルアプリからリッチ通知を送信できます。
- storage - Key-Value データをローカルに保存および取得します。
- syncFileSystem - Google ドライブでサポートされるファイルを保存および取得します。
- alarms - タスクを定期的に実行する
- idle - マシンのアイドル状態に変化があったことを検出する
- power - システムの電源管理機能をオーバーライドします。
ただし、すべての Chrome JavaScript API が実装されているわけではありません。パソコン版 Chrome の一部の機能は、 利用可能な数:
<webview>タグなし- IndexedDB なし
- getUserMedia() なし
- 塩化ナトリウム不使用
進捗状況は [API ステータス] ページで確認できます。
Chrome アプリ デベロッパー ツール
Android 用 Chrome アプリ デベロッパー ツール（ADT）はスタンドアロンの Android アプリで、次のことができます。 上記のように開発ツールチェーンを設定せずに Chrome アプリをダウンロードして実行する。使用 既存の Chrome アプリ（.crx としてパッケージ化済み）をすばやくプレビューする場合に、Chrome ADT ダウンロードしてください
Chrome ADT for Android は現在、プレアルファ版リリースです。試してみるには、 インストールと使用方法については、ChromeADT.apk リリースノートをご覧ください。