Apache Cordova を使用してモバイルで Chrome アプリを実行する

Chrome アプリをモバイルで実行するためのツールチェーンは早期デベロッパー プレビューの段階です。必要に応じて GitHub Issue TrackerChrome アプリ デベロッパー フォーラムを使用してフィードバックをお寄せください。 Stack Overflow、または Google+ デベロッパー ページ

パソコンとモバイルの両方で動作する Chrome アプリ

概要

Apache ベースのツールチェーンを使用して、Android と iOS で Chrome アプリを実行できます。 Cordova は、ネイティブ コードでモバイルアプリを構築するためのオープンソースのモバイル開発フレームワークです。 実装する方法を学びました

Apache Cordova では、アプリケーションのウェブコードをネイティブ アプリケーション シェルでラップして、 ハイブリッド ウェブアプリを Google Play や Apple App Store で配布できます。Apache Cordova を使用するには 既存の Chrome アプリの場合、ccac ordova c hrome a pp)コマンドラインを使用します。 ツールです。

参考情報

さっそく始めましょう。

ステップ 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/toolssdk/platform-toolsPATH 環境変数に追加します。
    • 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">

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">

オプション B: IDE を使用して開発とビルドを行う

Android

  1. Eclipse で、File -> を選択します。Import
  2. Android を選択 >Existing Android Code Into Workspace
  3. cca で作成したパスからインポートします。
    • インポートするプロジェクトが 2 つあり、そのうちの 1 つは *-CordovaLib です。
  4. [Play] ボタンをクリックしてアプリを実行します。 <ph type="x-smartling-placeholder">
      </ph>
    • すべての Java アプリケーションと同様に、実行構成を作成する必要があります。通常 許可を求めるメッセージが初めて 自動的に表示されます
    • デバイス/エミュレータも、初めて管理する必要があります。

iOS

  1. ターミナル ウィンドウで次のように入力して、Xcode でプロジェクトを開きます。

    cd YourApp
    open platforms/ios/*.xcodeproj
    
  2. 適切なターゲットを設定していることを確認します。

    左上([実行] ボタンと [停止] ボタンの横)に、ターゲット プロジェクトを選択するプルダウンがあります。 ダウンロードしますCordovaLib ではなく YourApp が選択されていることを確認します。

  3. 再生ボタンをクリックします。

アプリのソースコードに変更を加える

HTML、CSS、JavaScript ファイルは、cca プロジェクト フォルダの www ディレクトリにあります。

重要: www/ に変更を加えた後は、デプロイする前に cca prepare を実行する必要があります。 説明します。コマンドラインから cca buildcca runcca emulate を実行している場合は、 自動的に行われます。Eclipse/XCode を使用して開発している場合は、 cca prepare を手動で設定します。

デバッグ

モバイル版の Chrome アプリは、Cordova アプリケーションのデバッグと同じ方法でデバッグできます。

ステップ 4: 次のステップ

モバイル Chrome アプリが動作するようになったら、 利用できます

モバイル マニフェスト

モバイル プラットフォームにのみ適用される Chrome アプリの設定があります。Google では、 これらを含む www/manifest.mobile.json ファイルに、特定の値は全体を通じて参照されます。 プラグインのドキュメントとこのガイドを ご覧ください

これらの値は適宜調整する必要があります。

アイコン

モバイルアプリのアイコン解像度は、パソコンの Chrome アプリよりも若干高くなります。

Android の場合、次のサイズが必要です。

  • 36 ピクセル、48 ピクセル、78 ピクセル、96 ピクセル

iOS アプリの場合、必要なサイズは iOS 6iOS 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 ストアに公開するには:

  1. 2 つの Android バージョン ID を更新してから、cca prepare を実行します。

    • android:versionName は、www/manifest.jsonversion キーを使用して設定します(これにより、 デスクトップ パッケージ化アプリのバージョンなどです。
    • android:versionCode は、www/manifest.mobile.jsversionCode キーを使用して設定します。
  2. platforms/android/ant.properties を編集(または作成)して、key.storekey.alias を設定する プロパティ(Android デベロッパー向けドキュメントをご覧ください)

  3. プロジェクトをビルドします。

    ./platforms/android/cordova/build --release
    
  4. platforms/android/ant-build/ 内にある署名済みの .apk を見つけます。

  5. 署名したアプリケーションを Google Play デベロッパー コンソールにアップロードします。

iOS App Store に公開する

  1. www/manifest.mobile.jsCFBundleVersion キーを設定してアプリのバージョンを更新します。 cca prepare を実行します。
  2. platforms/ios ディレクトリにある Xcode プロジェクト ファイルを開きます。

    オープン プラットフォーム/ios/*.xcodeproj

  3. Apple の App Distribution Guide の手順に沿って進めます。

特記事項

Chrome アプリを初めて使用する場合の最大の問題点は、一部のウェブ機能が無効になっていることです。 ただし、そのうちのいくつかは現在 Cordova 内で機能しています。

Chrome アプリは、設定済みのモバイルでは動作しない場合があります。モバイルへの移行に関する一般的な問題:

  • 画面が小さい場合(特に縦向きの場合)でレイアウトの問題が発生します。
    • 推奨される修正方法: CSS メディアクエリを使用して、コンテンツを小さい画面向けに最適化します。
  • chrome.app.window で設定した Chrome アプリのウィンドウ サイズは無視され、代わりに サイズを指定する必要があります。
    • 推奨される修正: ハードコードされたウィンドウ ディメンションを削除する。さまざまなサイズのアプリを設計し、 考えています
  • ボタンやリンクが小さいと、指でタップしにくくなります。
    • 推奨される修正方法: タップ ターゲットを 44 x 44 ポイント以上に調整します。
  • タッチ スクリーンには存在しないが、マウスカーソルを合わせると予期しない動作が発生する。
    • 推奨される修正: カーソルを合わせるだけでなく、プルダウンやツールチップなどの UI 要素を有効にする タップします。
  • タップの遅延 300 ミリ秒。

サポートされている 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 リリースノートをご覧ください。