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

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

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

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

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

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

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

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

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

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

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

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

ホームページ the-home-page

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

これは、Apps 6.1 機能パック 2 で使用可能な機能で、AEM内で新しいアプリを作成するために、既存のアプリテンプレートを簡単に使用できます。

アプリテンプレートとは これは、アプリのベースラインまたは基盤を表すページテンプレートおよびコンポーネントのコレクションと考えることができます。
別のアプリのテンプレートに基づいてアプリを作成すると、そのアプリが作成された元のアプリを表す出発点を持つアプリが取得されます。

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

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

アプリテンプレートに基づいてアプリを作成する手順：

サンプル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 コンポーネントグループに属しています。

スワイプカルーセル swipe-carousel

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

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

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

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

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

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

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

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

子ページ

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

固定リスト

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

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

検索

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

詳細検索

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

画像 image

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

テキスト text

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

ストアの場所 store-locations

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

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

2 列の行 two-column-row

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