モバイルアプリケーションのビルド

メモ

アドビは、シングルページアプリケーションフレームワークをベースにしたクライアント側のレンダリング（React など）を必要とするプロジェクトには SPA エディターを使用することをお勧めします。詳細情報を参照してください。

アプリケーションをビルドし、デバイスやシミュレーターにインストールして、テストを実行したり、App Store に公開したりできます。PhoneGap コマンドラインインターフェイスを使用してアプリケーションをローカルでビルドすることも、PhoneGap Build を使用してクラウドでビルドすることもできます。

GitHub から入手できるコードを使用してモバイルアプリケーションをビルドする方法についてステップバイステップで完全に解説した記事をこちらから参照できます。

パブリッシュインスタンスへのアプリケーションの移動

パブリッシュインスタンスにアプリケーションファイルを移動すると、モバイルアプリケーションのインストール済みインスタンスにコンテンツ更新を提供したり、公開済みコンテンツを使用してアプリケーションをビルドしたりできます。アプリケーションは、リポジトリの 2 つのノードブランチで構成されています。

  • /content/phonegap/apps/<application name>:作成者が作成およびアクティブ化する Web ページ。
  • /content/phonegap/content/<application name>:アプリケーション設定ファイルとコンテンツ同期設定。
メモ

パブリッシュインスタンスにアプリケーションファイルを移動しない場合、コンテンツ作成者はコンテンツ同期キャッシュを更新できません。

必要なのは、 /content/phonegap/content/<application name> パブリッシュインスタンスにブランチします。 のファイル /content/phonegap/apps/<application name> ブランチは、作成者がページをアクティベートすると移動されます。

AEM には、コンテンツを一括してパブリッシュインスタンスに移動する方法が 2 つ用意されています。

例えば、phonegapapp という名前のモバイルアプリケーションを作成するとします。ノード /content/phonegap/content/phonegapapp をパブリッシュインスタンスに移動する必要があります。

ヒント：​パッケージをオーサーインスタンスからパブリッシュインスタンスに移動するには、パッケージに対して「レプリケーション」コマンドを使用します。

chlimage_1-16

PhoneGap コマンドラインインターフェイスを使用したビルド

PhoneGap コマンドラインインターフェイス（CLI）を使用して、コンピューター上で PhoneGap アプリケーションをコンパイルします。AEM コンテンツをアプリケーションに含めるには、モバイルアプリケーションのコンテンツ、コンテンツ同期設定およびその他の必要なアセットを含む ZIP ファイルを作成します。ZIP ファイルをダウンロードしてビルドに含めます。

ビルド環境の準備

PhoneGap CLI を使用してビルドするには、Node.js および PhoneGap クライアントユーティリティをインストールする必要があります。次の手順を実行するには、インターネット接続が必要です。

  1. ダウンロードとインストール Node.js.

  2. ターミナルまたはコマンドプロンプトを開き、次のノードコマンドを入力して PhoneGap ユーティリティをインストールします。

    npm install -g phonegap

    Unix または Linux システムでは、コマンドの前に sudo というプレフィックスを付けることが必要になる場合があります。

    一連の HTTP GET コマンドの結果がターミナルに表示されます。インストールが正常に完了すると、次の例のように、ライブラリのインストール先がターミナルに表示されます。

    /usr/local/bin/phonegap -> /usr/local/lib/node_modules/phonegap/bin/phonegap.js
phonegap@3.3.0-0.19.6 /usr/local/lib/node_modules/phonegap
├── pluralize@0.0.4
├── colors@0.6.0-1
├── semver@1.1.0
├── qrcode-terminal@0.9.4
├── shelljs@0.1.4
├── optimist@0.6.0 (...)
├── prompt@0.2.11 (...)
├── phonegap-build@0.8.4 (...)
├── connect-phonegap@0.8.1 (...)
└── cordova@3.3.0-0.1.1 (...)

  3. （オプション）ターゲットにするモバイルプラットフォーム用の SDK を入手してください。

    • iOS プラットフォーム向けのアプリをビルドするには、最新バージョンの Xcode をインストールします。
    • Android アプリをビルドするには、Android SDK をインストールします。

コンテンツ ZIP ファイルのダウンロード

モバイルアプリケーションのコンテンツをファイルシステムに移動します。

  1. モバイルアプリケーションページで、アプリケーションを選択します。

  2. （オプション）完全インストール向けのアプリケーションをビルドするには、ツールバーで「キャッシュをクリア」アイコンをクリックまたはタップします。

    メモ

    キャッシュには、インストール済みアプリケーションのコンテンツ更新が保持されています。キャッシュを消去すると、キャッシュされたすべての更新が無効になります。

  3. ツールバーで、「CLI アセットをダウンロード」アイコンをクリックまたはタップします。

  4. ZIP ファイルを保存した後、成功ダイアログで「閉じる」をクリックします。

  5. ZIP ファイルのコンテンツを抽出します。

PhoneGap CLI を使用したビルド

PhoneGap CLI を使用して、アプリケーションをコンパイルしてインストールします。PhoneGap CLI の使用方法について詳しくは、 PhoneGap コマンドラインインターフェイス ドキュメント。

  1. ターミナルまたはコマンドプロンプトを開き、ダウンロードしたアプリ ZIP ファイルに現在のディレクトリを変更します。例えば、次の例では、ディレクトリが ng-app-cli.1392137825303.zip ファイルに変更されます。

    cd ~/Downloads/ng-app-cli.1392137825303

  2. ターゲットにするプラットフォーム用の phonegap コマンドを入力します。例えば、次のコマンドは Android 向けのアプリをビルドします。

    phonegap build android

PhoneGap Build を使用したビルド

PhoneGap クラウドサービスを使用して、アプリをビルドします。この手順を実行するには、まず PhoneGap Build 設定を作成する必要があります。

PhoneGap Build への接続

AEM 内から PhoneGap Build サービスを使用できるように、PhoneGap Build 設定を作成します。モバイルアプリケーションをビルドするときに使用する PhoneGap Build アカウントのユーザー名とパスワードを指定します。

  1. ツールページを開きます(http://localhost:4502/tools.html).

  2. 「CQ の操作」領域で、「クラウドサービス」をクリックします。

  3. PhoneGap Build の「今すぐ設定」リンクをクリックします。

    chlimage_1-17

  4. 設定を作成ダイアログで、Title プロパティの値を入力します。デフォルトでは、Name プロパティの値はタイトルから導出されますが、自分で名前を入力することもできます。「作成」をクリックします。

  5. PhoneGap Build 設定ダイアログで、PhoneGap Build のユーザー名とパスワードを入力し、「OK」をクリックします。

PhoneGap Build の使用

PhoneGap Build にアプリケーションリソースを送信して、さまざまなモバイルプラットフォーム向けにコンパイルします。

  1. モバイルアプリケーションページで、モバイルアプリケーションを開きます（http://localhost:4502/mobile.html/content/phonegap）。

  2. （オプション）完全インストール用のアプリケーションをビルドするには、アプリケーションを選択し、「キャッシュをクリア」アイコンをクリックします。

    メモ

    キャッシュには、インストール済みアプリケーションのコンテンツ更新が保持されています。キャッシュを消去すると、キャッシュされたすべての更新が無効になります。

  3. スプラッシュページを選択し、「リモートビルド」アイコンをクリックします。

    注意：​ベータバージョンの AEM Beta は、ビルドが正常に完了したときにインボックス通知を作成しません。

  4. 成功ダイアログボックスで、「PhoneGap Build」をクリックしてAdobe PhoneGap Buildページを開きます。 https://build.phonegap.com/apps. アプリが表示されるまで待機している場合には、PhoneGap Build ステータスページを確認できます。

    ビルドのインストールについて詳しくは、 PhoneGap Build文書.

    メモ

    無料 PhoneGap Build アカウントでは、1 つのプライベートアプリケーションが許可されています。それ以上プライベートアプリケーションをビルドしようとすると、PhoneGap Build は失敗します。

次の手順

ビルドをおこなったら、次にアプリの構造について学習します。

このページ