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

最終更新日: 2023-12-07
  • トピック:
  • Mobile
    このトピックの詳細を表示
  • 作成対象:
  • User
メモ

Adobeは、単一ページアプリケーションのフレームワークベースのクライアントサイドレンダリング(React など)を必要とするプロジェクトでは、SPA Editor を使用することをお勧めします。 詳細情報

アプリケーションをビルドして、テスト用またはアプリストアに公開用に、デバイスまたはシミュレーターにインストールします。 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コンテンツをアプリケーションに含めるために、AEMは、モバイルアプリケーションのコンテンツ、コンテンツ同期設定、その他の必要なアセットを含む ZIP ファイルを作成します。 ZIP ファイルをダウンロードして、ビルドに含めます。

ビルド環境の準備

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

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

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

    npm install -g phonegap
    

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

    この端末は、一連の HTTPGETコマンドの結果を示します。 インストールが正常に完了すると、次の例のように、ターミナルはライブラリのインストール先を示します。

    /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 Assets をダウンロード」アイコンをクリックします。

    重複するタブレット記号で示される CLI Assets アイコンをダウンロードします。

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

  5. ZIP ファイルの内容を抽出します。

PhoneGap CLI を使用したビルド

PhoneGap CLI を使用して、アプリケーションをコンパイルしてインストールします。 PhoneGap CLI の使用方法について詳しくは、 PhoneGap コマンドラインインターフェイス (https://docs.phonegap.com/en/3.0.0/guide_cli_index.md.html) ドキュメントを参照してください。

  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 Operations」領域で、「Cloud Service」をクリックします。

  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. スプラッシュページを選択し、「リモートビルド」アイコンをクリックします。

    2 つの丸い歯車が示すリモートアイコンを作成します。

    注意: ビルドが正常に完了した場合、AEM Beta バージョンではインボックス通知が作成されません。

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

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

    メモ

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

次の手順

構築プロセスの次の手順は、 アプリの構造.

このページ