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

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

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

chlimage_1-10

マーケタータスクの実行方法については、このページを参照してください。 開発者向けタスクについては、「PhoneGap アプリケーションの構築」を参照してください。

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

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

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

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

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

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

chlimage_1-147

言語ページは、次の 2 つの目的で使用されます。

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

chlimage_1-148

ホームページ the-home-page

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

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

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

  • タイトル: アプリケーションのタイトル。

  • 宛先のパス: アプリケーションが格納されるリポジトリ内の場所。 デフォルトのままにすると、アプリ名に基づいてパスが作成されます。

  • 名前: デフォルト値は、スペース文字が削除されたタイトルプロパティの値です。 名前は、CQ 内でアプリケーションを参照するために使用されます。例えば、アプリケーションを表すリポジトリーノード用に使用します。

  • 説明: アプリケーションの説明。

  • サーバー URL: アプリケーションに Over-the-Air (OTA)コンテンツのアップデートを提供する URL。 デフォルト値は、アプリケーションの作成に使用されるインスタンスのパブリッシュサーバー URL (Externalizer サービスから取得される)です。 注意:認証が必要なオーサーインスタンスではなく、パブリッシュサーバーインスタンスを指定する必要があります。

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

Cloud Service を構築し、AdobeMobile Services SDK プラグインをアプリに統合するための追加の(およびオプションの) タブが存在します。

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

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

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

  2. 作成アイコンをクリックします。

    正方形の中にプラス記号が表示された「作成」アイコン。

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

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

    PhoneGap ビルド構成を作成するには、[ 構成の管理 ] をクリックします。

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

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

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

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

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

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

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

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

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

    円の中に「I」と表示されている「ページプロパティを表示」アイコン

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

    鉛筆で示される編集アイコン。

  4. 基本プロパティと詳細プロパティを設定し、完了アイコンをクリックします。

    チェックマーク記号で示された「完了」アイコン。

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

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

  2. アプリAdmin Console内で編集するモバイルアプリをクリックしてドリルインします。 構成するアプリケーションの言語バージョンを選択し、[ アプリケーション プロパティの表示 ] アイコンをクリックします。

    円の中の文字 I で示される「アプリケーション・プロパティの表示」アイコン。

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

    鉛筆で示される編集アイコン。

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

    チェックマーク記号で示された「完了」アイコン。

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

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

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

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

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

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

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

chlimage_1-149

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

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

キャッシュを更新するインスタンスに対して、次の手順を実行します。 例えば、アプリケーションがパブリッシュインスタンスに更新をリクエストしている場合は、パブリッシュインスタンスで手順を実行します。

  1. パネルで「アプリ」をクリックし、アプリケーションをクリックします。

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

    ストライプのバーにリサイクル記号が表示されたキャッシュの更新アイコン。

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

これは、Apps 6.1 機能パック 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

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

製品ページは、アプリケーションユーザーは使用できません。 歯車ページからは、各製品ページにアクセスできます。

レビューページ - 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

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

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

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

chlimage_1-151

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

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

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

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

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

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

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

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

子ページ

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

固定リスト

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

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

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
2eeeb575-8007-40cc-a72d-206fbc4ddd4b