ドキュメントAEM 6.5モバイルガイド

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

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • トピック：

作成対象：

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

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

GitHub から入手できるコードを使用してモバイルアプリケーションを構築する方法を説明する詳細な手順の記事は、 こちらから入手できます。

アプリケーションのPublish インスタンスへの移動 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 Assetsをダウンロード」アイコンをクリックします。

    CLI Assetsのアイコンをダウンロードします。このアイコンは、タブレットのアイコンが重なっていることを示しています 。

  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 BetaのBeta バージョンでは、ビルドが正常に完了してもインボックス通知は作成されません。

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

    ビルドのインストールについて詳しくは、PhoneGap Buildのドキュメントを参照してください。

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

次の手順 the-next-steps

構築プロセスの次のステップは、 アプリの構造について学ぶことです。

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