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

アプリコンソールを使用したアプリの作成および編集 creating-and-editing-apps-using-the-apps-console

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

  • User
CAUTION
AEM 6.4 の拡張サポートは終了し、このドキュメントは更新されなくなりました。 詳細は、 技術サポート期間. サポートされているバージョンを見つける ここ.
NOTE
Adobeは、単一ページアプリケーションのフレームワークベースのクライアントサイドレンダリング（React など）を必要とするプロジェクトでは、SPA Editor を使用することをお勧めします。 詳細情報を参照してください。

AEMモバイルアプリケーションの開発プロセスは、様々な専門知識を持つユーザーがモバイルアプリケーションの開発に貢献することを認識します。 次のプロセスマップは、コンテンツ作成者やアプリケーション開発者がタスクを実行する一般的な順序を示しています。

chlimage_1-10

マーケターのタスクの実行方法に関する情報は、このページに表示されます。 開発者のタスクについて詳しくは、 PhoneGap アプリケーションの構築を参照してください。

モバイルアプリケーションの構造 the-structure-of-mobile-applications

AEM Mobileには、モバイルアプリケーションを作成するための Phonegap App ブループリントが用意されています。 ブループリントは、作成するアプリケーションの構造を定義します。 アプリケーションは、次の項目で構成されます。

  • ルートページ。
  • アプリケーションの言語のバリエーション。
  • 言語バリエーションのホームページ。

Phonegap アプリのルート the-root-of-a-phonegap-app

AEMで作成したモバイルアプリケーションのルートページがアプリコンソールに表示されます。

ルートページは、アプリケーションの作成時に指定されたアプリケーションの宛先のパスプロパティの下に保存されます（デフォルトのパスは/content/phonegap/apps です）。 ページ名は、アプリケーションの Name プロパティです。 例えば、サイトのルートページのデフォルト URL の名前は次のとおりです。 myphonegapapp が http://localhost:4502/content/phonegap/apps/myphonegapapp.html.

chlimage_1-146

PhoneGap アプリの言語バリエーション the-language-variation-of-a-phonegap-app

ルートページの最初の子ページは、アプリケーションの言語のバリエーションです。 各ページの名前は、アプリケーションが作成される言語です。 例えば、アプリケーションの英語バリエーションの名前は、English です。

注意： デフォルトの PhoneGap ブループリントは、英語のアプリケーションのみを作成します。 開発者は、より多くの言語のバリエーションを作成できるようにブループリントを変更できます。

chlimage_1-147

言語ページは、次の 2 つの目的を果たします。

  • ページコンテンツは、アプリケーションの言語バリエーションのスパッシュページです。
  • ページプロパティは、コンテンツの更新のリクエストに使用する URL や、クラウドビルドとAdobe Analytics Services 統合への接続に関する情報など、アプリケーションのデザイン上の側面を制御します。

chlimage_1-148

ホームページ the-home-page

アプリケーションを開くと、アプリケーションの言語バリエーションのホームページ（index.html ページ）が表示されます。ホームページには、アプリケーション内の様々なページへのリンクのメニューが表示されます。 段落システムを使用して、コンテンツを作成するためのコンポーネントをページに追加できます。

モバイルアプリケーションの作成 creating-a-mobile-application

モバイルアプリケーションは、ページ構造とプロパティを定義するブループリントに基づいています。 次のアプリケーションプロパティを設定できます。

  • タイトル： アプリケーションのタイトル。
  • 宛先のパス： リポジトリ内でアプリケーションが保存される場所。 アプリ名に基づいてパスを作成する場合は、デフォルトのままにします。
  • 名前： 既定値は、空白文字が削除された Title プロパティの値です。 この名前は、CQ 内でアプリケーションを参照するために使用されます。例えば、アプリケーションを表すリポジトリノードなどです。
  • 説明： アプリケーションの説明。
  • サーバー URL: Over-the-Air(OTA) コンテンツを提供する URL が、アプリケーションに対して更新されます。 デフォルト値は、アプリケーションの作成に使用されるインスタンスのパブリッシュサーバー URL です（Externalizer サービスから取得されます）。 これは、認証が必要なオーサーではなく、パブリッシュサーバーインスタンスである必要があります。

また、アプリケーションのサムネールとして使用する画像ファイルを指定し、使用するPhoneGap Build設定を選択し、使用するモバイルアプリ分析設定を選択することもできます。 この画像は、Experience Managerのモバイルアプリコンソール内でモバイルアプリを表すためのサムネールとしてのみ使用されます。

ビルドクラウドサービスや、AdobeMobile Services SDK プラグインをアプリに統合するための追加のタブが存在します（オプション）。

  • ビルド：ここで、「設定を管理」をクリックし、build.phonegap.com ビルドサービスを設定します。 その後、ドロップダウンから、新しく作成した PhoneGap Build クラウドサービスを選択できます。
  • 分析：「設定を管理」をクリックし、 AdobeMobile Services SDK クラウドサービス。 次に、ドロップダウンから、新しく作成した Mobile Service を選択して、モバイルアプリに統合できます。
NOTE
開発者はAEM PhoneGap スターターキットを使用してアプリを作成し、コンソールに追加できます。

次の手順では、タッチ UI を使用してモバイルアプリケーションを作成します。

  1. レールで、「アプリ」をクリックします。

  2. 「作成」アイコンをクリックまたはタップします。

  3. （オプション）「詳細設定」タブで、アプリケーションの説明を入力し、必要に応じてサーバー URL を変更します。

  4. （オプション）アプリケーションのコンパイルにPhoneGap Buildを使用している場合、「ビルド」タブで、使用する設定を選択します。

    PhoneGap Build 設定を作成するには、「設定を管理」をクリックします。

  5. （オプション）SiteCatalystを使用してアプリケーションアクティビティを追跡する場合、「Analytics」タブで、使用する設定を選択します。

    モバイルアプリ設定を作成するには、「設定を管理」をクリックします。

  6. （オプション）アプリケーションアイコンを指定するには、「参照」ボタンをクリックし、ファイルシステムから画像ファイルを選択して、「開く」をクリックします。

  7. 「作成」をクリックします。

モバイルアプリケーションのプロパティの変更 changing-the-properties-of-a-mobile-application

モバイルアプリケーションを作成した後、プロパティを変更できます。

タイトル、説明およびアイコンを変更 change-the-title-description-and-icon

  1. レールで、「アプリ」をクリックまたはタップします。

  2. 設定するアプリケーションを選択し、「ページプロパティを表示」アイコンをクリックします。

  3. プロパティの値を変更するには、編集アイコンをクリックまたはタップします。

  4. Basic プロパティと Advanced プロパティを設定し、完了アイコンをクリックまたはタップします。

アプリケーションの言語バリエーションの設定 configure-a-language-variation-of-the-application

  1. レールで、「アプリ」をクリックまたはタップします。

  2. アプリ管理コンソール内で、編集するモバイルアプリケーションにドリルインします。 設定するアプリケーションの言語バージョンを選択し、「アプリケーションプロパティを表示」アイコンをクリックします。

  3. プロパティの値を変更するには、編集アイコンをクリックまたはタップします。

  4. 「基本」、「詳細」、「ビルド」および「Analytics」の各タブでプロパティを設定し、完了アイコンをクリックまたはタップします。

モバイルアプリケーションのコンテンツのオーサリング authoring-the-content-of-a-mobile-application

モバイルアプリケーションを作成したら、アプリケーション UI として使用するコンテンツを追加します。

  1. レールで、「アプリ」をクリックまたはタップします。
  2. アプリケーションをクリックまたはタップし、「英語」をクリックまたはタップします。
  3. 必要に応じてホームページを編集するか、子ページを追加します。

モバイルアプリケーションへのコンテンツの移動 moving-content-to-mobile-applications

AEMパブリッシュインスタンスのコンテンツ同期キャッシュは、モバイルアプリケーション用のコンテンツのリポジトリとして使用されます。

  • 開発者がアプリケーションをコンパイルする際に、コンテンツ同期キャッシュ内のコンテンツがアプリケーションに含まれます。
  • キャッシュ内のコンテンツは、インストールされたモバイルアプリケーションで、アプリケーションのコンテンツを更新するために使用できます。

モバイルアプリケーションには、更新されたアプリケーションコンテンツをダウンロードおよびインストールする「更新」コマンドが含まれています。 アプリケーションインスタンスが更新リクエストを送信すると、コンテンツ同期は、アプリケーションが最後に更新またはインストールされた時点から変更されたコンテンツを特定し、新しいコンテンツを提供します。

chlimage_1-149

更新されたコンテンツをアプリケーションで使用できるようにするには、コンテンツ同期キャッシュを更新します。 キャッシュを初めて更新すると、すべての公開済みコンテンツが追加されます。 その後の更新では、前回の更新以降に変更された公開済みコンテンツのみが追加されます。

コンテンツ同期では、更新が発生したタイミングも追跡します。 この情報を使用して、コンテンツ同期は、モバイルアプリケーションに送信するキャッシュの更新を決定できます。

キャッシュを更新するインスタンスで、次の手順を実行します。 例えば、アプリケーションがパブリッシュインスタンスからの更新を要求する場合は、パブリッシュインスタンスで手順を実行します。

  1. レールで、「アプリ」をクリックまたはタップし、アプリケーションをクリックまたはタップします。

  2. スプラッシュページを選択し、「キャッシュを更新」アイコンをクリックまたはタップします。

アプリテンプレートの使用 using-app-templates

これは、Apps 6.1 Feature Pack 2 で利用できる機能で、既存のアプリテンプレートを活用してAEM内で新しいアプリを作成する簡単な方法を提供します。

アプリテンプレートとは これは、アプリのベースラインまたは基盤を表すページテンプレートおよびコンポーネントの集まりと考えてください。
別のアプリのテンプレートに基づいて新しいアプリを作成する場合、作成元のアプリを表す開始点を持つアプリが表示されます。

この機能を利用するには、既存のモバイルアプリテンプレート（またはアプリテンプレートを持つアプリ）がインストールされている必要があります。

最新のAEM Apps 6.1 サンプルパッケージには、Geometrixxアプリの更新バージョンとアプリテンプレートが含まれています。 または、テンプレートも提供する StarterKit をインストールすることもできます。

アプリテンプレートに基づいて新しいアプリを作成する手順は次のとおりです。

  1. 最新のAEM Apps 6.1 機能パックおよびリファレンスサンプルパッケージがインストールされていることを確認します。
  2. 左側のパネルで「アプリ」をクリックします。

chlimage_1-1

  1. 上部の「 +作成」ボタンをクリックし、「アプリを作成」を選択します。
  2. アプリテンプレートのリストが表示されたら、次のいずれかを選択します。

chlimage_1-2

  1. 次へをクリックします。

  2. アプリ ID とタイトルを指定しますが、名前と説明も含めることができます。

    1. さらに、AEMのアセットを参照することで、PNG（サポートされている PhoneGap アイコン形式）をアイコンとして指定できます。
    2. アプリを管理タイルでアプリを作成した後で、これらのすべてのフィールドを編集できます。 アプリ ID を除き、アプリ ID を設定した後は変更できません。

chlimage_1-150

  1. 作成ボタンをクリックすると、「完了」（アプリカタログビューに戻る）または「アプリを管理」（アプリダッシュボードを開く）の 2 つのオプションが表示されます。
  2. 作成したら、新しいアプリがアプリカタログに表示されます。

chlimage_1-3

  1. アプリをクリックして開くと、既存のアプリのテンプレートに基づいて新しいアプリが正常に作成されます。
NOTE
AEMからGeometrixx Outdoors参照アプリパッケージをアンインストールし、そのテンプレートに基づいてアプリを作成した場合、そのアプリは機能しなくなります。 Geometrixx Outdoorsアプリは削除できますが、他のモバイルアプリで使用される場合はアプリテンプレートを残す必要があります。

サンプルGeometrixx Outdoorsアプリの詳細 exploring-the-sample-geometrixx-outdoors-app

Geometrixx Outdoorsアプリは、デフォルトの PhoneGap アプリケーションブループリントの機能と、サンプルのモバイルコンポーネントの機能を示す、サンプルの PhoneGap アプリケーションです。

アプリケーションを開くには、レールから「モバイルアプリケーション」をクリックし、「アプリケーションGeometrixx Outdoors」を選択します。

一般的なページ機能 —Geometrixxモバイルアプリ common-page-features-geometrixx-mobile-app

モバイルアプリの各ページには、次の機能が含まれています。

  • 親ページに戻るための戻るボタン。 なお、「戻る」ボタンは「ホーム」ページには表示されません。

  • コマンドとリンクのメニューを提供する拡張可能なレール：

    • ロケーションページを開きます。
    • 買い物かごを開きます。
    • ログインします。
    • アプリケーションを更新します。

  • コンポーネントを追加し、コンテンツを作成するための段落システム。

ホームページ —Geometrixxモバイルアプリ the-home-page-geometrixx-mobile-app

ホームページのコンテンツは、次のナビゲーションツールで構成されます。

  • 「ギア」、「レビュー」、「ニュース」、「会社概要」の子ページへのリンクを提供するメニューリストコンポーネント。
  • 子ページを表示するスワイプカルーセルコンポーネント。

「歯車」ページ —Geometrixxモバイルアプリ the-gear-page-geometrixx-mobile-app

「歯車」ページでは、製品ページにアクセスできます。 メニューリストコンポーネントを使用すると、「ギア」ページの子ページにアクセスできます。 子ページは、Web サイトが特集する製品のカテゴリです。

  • シーズン
  • アパレル
  • 性別
  • アクティビティ

各カテゴリページは、歯車ページと同じコンテンツ構造を使用します。 カルーセルは、製品のサブカテゴリである子ページにアクセスできます。 サブカテゴリページには、製品ページへのリンクを提供する製品リストが含まれます。

製品ページ —Geometrixxモバイルアプリ the-products-page-geometrixx-mobile-app

製品ページとその子ページの階層は、製品ページの分類システムを実装します。 階層の各ブランチの最下位のページは、ng 製品コンポーネントを含む製品ページです。

アプリのユーザーは、製品ページを使用できません。 「歯車」ページから各製品ページにアクセスできます。

レビューページ —Geometrixxモバイルアプリ the-reviews-page-geometrixx-mobile-app

「戻る」ボタンが含まれます。 段落システムを使用して、コンポーネントを追加できます。

アプリを使用している場合、英語ページのカルーセルから「レビュー」ページを表示できます。

ニュースページ —Geometrixxモバイルアプリ the-news-page-geometrixx-mobile-app

「戻る」ボタンが含まれます。 段落システムを使用して、コンポーネントを追加できます。

アプリを使用する場合、ニュースページは英語ページのカルーセルから利用できます。

「会社概要」ページ —Geometrixxモバイルアプリ the-about-us-page-geometrixx-mobile-app

会社概要ページには、複数の 2 列の行コンポーネントが含まれています。 各列には、画像またはテキストコンポーネントが含まれます。 コンポーネントは編集可能で、段落システムはコンポーネントを追加できます。

アプリケーションを使用している場合、英語ページのカルーセルから「会社概要」ページを使用できます。

場所ページ —Geometrixxモバイルアプリ the-locations-page-geometrixx-mobile-app

場所ページには、場所コンポーネントが含まれています。

アプリケーションを使用する場合、英語ページのメニューリストからロケーションページを使用できます。

サンプルモバイルコンポーネント sample-mobile-components

モバイルアプリケーションのページをオーサリングする際に、サイドキックでいくつかのコンポーネントを直ちに使用できます。 コンポーネントは、PhoneGap コンポーネントグループに属しています。

スワイプカルーセルコンポーネントは、サイトページを表示および移動するためのツールです。 このコンポーネントには、ページリンクのリストの上にあるページの画像を順番に繰り返すカルーセルが含まれます。 コンポーネントを編集して、公開するページとカルーセルの動作を指定します。

画像は、特定の方法で画像に関連付けられたページのカルーセルに表示されます。 ページが画像と関連付けられていない場合は、リンクのリストのみが表示されます。

chlimage_1-151

「カルーセルプロパティ」タブ

カルーセルの動作を設定します。

  • 再生速度：各画像が表示されてから次の画像が表示されるまでの時間（ミリ秒単位）です。
  • 遷移時間：画像の切り替えに使用するアニメーションの時間（ミリ秒）。
  • コントロールのスタイル：画像間の移動に使用するコントロールのタイプ。

「プロパティをリスト」タブ

ページリストの生成方法を指定します。

  • 次を使用してリストを作成：カルーセルに含めるページを指定するために使用するメソッド。 「ページリストの作成」を参照してください。
  • 並べ替え順：ページリストの並べ替えに使用するページプロパティを選択します。 例えば、ページをタイトルでアルファベット順に並べ替えるには、jcr:title を選択します。
  • 制限：含めるページの最大数。 このプロパティは、検索ベースでページリストを作成する場合に適しています。

ページリストの作成 building-the-page-list

スワイプカルーセルコンポーネントは、「次を使用してリストを作成」プロパティに次の値を提供します。 編集ダイアログは、選択した値に応じて変わります。

子ページ

このコンポーネントは、特定のページのすべての子ページをリストします。 この値を選択した後、「子ページ」タブでページを選択するか、値を指定しないで現在のページの子をリストします。

固定リスト

含めるページのリストを指定します。 この値を選択した後、「固定リスト」を選択したときに表示される「固定リスト」タブでリストを設定します。

  • ページを追加するには、「項目の追加」をクリックし、ページを参照します。
  • 上下の矢印アイコンを使用して、リスト内でページを移動します。
  • リストからページを削除するには、削除ボタンをクリックします。

Order By プロパティは、固定リストの順序には影響しません。

検索

キーワード検索の結果を使用してリストに入力します。 検索は、指定したページの子で実行されます。

  1. 検索のルートページを指定するには、Start In プロパティを使用してページパスを選択します。 現在のページの下で検索するパスを指定しません。
  2. 「検索クエリ」プロパティに、検索キーワードを入力します。

詳細検索

を使用してリストに入力 Querybuilder クエリ。

画像 image

アプリコンテンツに画像を追加します。

テキスト text

アプリケーションコンテンツにリッチテキストを追加します。

ストアの場所 store-locations

ストアの場所コンポーネントは、ユーザーにビジネスアウトレットを検索するためのツールを提供します。

  • 検索
  • デバイスの GPS 座標に近い位置または遠い位置のリスト。

このコンポーネントでは、リポジトリに各ストアのロケーション情報が含まれている必要があります。 サンプルの場所は、/etc/commerce/locations/adobe ノードにインストールされます。 chlimage_1-152

2 列の行 two-column-row

ページにコンポーネントを並べて追加できます。

chlimage_1-153

recommendation-more-help
547b817b-14b5-4d82-aa0f-a64750e0e592