モバイルアプリケーションのビルド building-mobile-applications

NOTE
単一ページアプリケーションフレームワークを基にしたクライアントサイドレンダリング(React など)が必要なプロジェクトでは、SPA エディターを使用することをお勧めします。詳細情報

テスト用またはアプリストアへの公開用にデバイスまたはシミュレーターにインストールするアプリケーションを作成します。 PhoneGap コマンドラインインターフェイスを使用してローカルで、またはPhoneGap Buildを使用してクラウドでアプリケーションを構築できます。

GitHub から入手可能なコードを使用してモバイルアプリケーションを構築する方法を説明する完全なステップバイステップの記事が利用可能です こちら.

パブリッシュインスタンスへのアプリケーションの移動 moving-the-application-to-the-publish-instance

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

  • /content/phonegap/apps/<application name>:作成者が作成およびアクティブ化する web ページ。
  • /content/phonegap/content/<application name>:アプリケーション設定ファイルとコンテンツ同期設定。
NOTE
アプリケーションファイルをパブリッシュインスタンスに移動しない場合、コンテンツ作成者はコンテンツ同期のキャッシュを更新できません。

にファイルを移動するだけで済みます /content/phonegap/content/<application name> パブリッシュインスタンスに対するブランチ。 内のファイル /content/phonegap/apps/<application name> 作成者がページをアクティベートすると、ブランチが移動します。

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

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

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

chlimage_1-16

PhoneGap コマンドラインインターフェイスを使用した構築 building-using-the-phonegap-command-line-interface

PhoneGap Command-Line Interface (CLI)を使用して、コンピュータ上で PhoneGap アプリケーションをコンパイルします。 AEM コンテンツをアプリケーションに含めるには、AEMがモバイルアプリケーションのコンテンツ、コンテンツ同期設定、その他の必要なアセットを含む ZIP ファイルを作成します。 ZIP ファイルをダウンロードし、ビルドに含めます。

ビルド環境の準備 preparing-your-build-environment

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

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

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

    code language-shell
    npm install -g phonegap
    

    UNIX® または Linux® システムでは、コマンドの先頭にを付ける必要がある場合があります。 sudo.

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

    code language-xml
    /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 ファイルのダウンロード downloading-the-content-zip-file

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

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

  2. (オプション)完全インストール用のアプリケーションを構築するには、ツールバーの [ キャッシュのクリア ] アイコンをクリックします。

    壊れたリンク記号で示されるキャッシュ アイコンをクリアします。

    note note
    NOTE
    キャッシュには、インストールされたアプリケーションのコンテンツのアップデートが保持されます。 キャッシュをクリアすると、キャッシュされた更新がすべて無効になります。
  3. ツールバーで、「CLI アセットをダウンロード」アイコンをクリックします。

    タブレットシンボルが重なることで示される CLI アセットのアイコンをダウンロードします。

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

  5. ZIP ファイルの内容を解凍します。

PhoneGap CLI を使用したビルド using-the-phonegap-cli-to-build

PhoneGap CLI を使用してアプリケーションをコンパイルし、インストールします。 PhoneGap CLI の使用方法については、PhoneGap Command-line Interface (https://docs.phonegap.com/en/3.0.0/guide_cli_index.md.html)を参照してください。

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

    code language-shell
    cd ~/Downloads/ng-app-cli.1392137825303
    
  2. ターゲットとするプラットフォームの phonegap コマンドを入力します。 例えば、次のコマンドは Android™ 用のアプリをビルドします。

    code language-shell
    phonegap build android
    

PhoneGap Buildを使用した構築 building-using-phonegap-build

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

PhoneGap Buildへの接続 connecting-to-phonegap-build

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

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

  2. CQ Operations 領域で、「Cloud Service」をクリックします。

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

    chlimage_1-17

  4. 設定を作成ダイアログボックスで、タイトル プロパティの値を入力します。 既定では、Name プロパティの値はタイトルから派生しますが、名前を入力することもできます。 「作成」をクリックします。

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

PhoneGap Buildの使用 using-phonegap-build

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

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

  2. (オプション)完全インストール用のアプリケーションを構築するには、アプリケーションを選択して「キャッシュの消去」アイコンをクリックします。

    壊れたリンク記号で示されるキャッシュ アイコンをクリアします。

    note note
    NOTE
    キャッシュには、インストールされたアプリケーションのコンテンツのアップデートが保持されます。 キャッシュをクリアすると、キャッシュされた更新がすべて無効になります。
  3. スプラッシュページを選択し、「リモートを構築」アイコンをクリックします。

    2 つの丸歯車で示されるリモートアイコンを作成します。

    注意: AEM ベータ版のベータ版では、ビルドが正常に完了してもインボックス通知は作成されません。

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

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

    note note
    NOTE
    無料のPhoneGap Buildアカウントは、1 つのプライベートアプリケーションで使用できます。 追加のプライベートアプリケーションを作成している場合、PhoneGap ビルドが失敗します。

次の手順 the-next-steps

構築プロセスの次のステップでは、次のステップについて学習します アプリの構造.

recommendation-more-help
2eeeb575-8007-40cc-a72d-206fbc4ddd4b