アドビは、シングルページアプリケーションフレームワークをベースにしたクライアント側のレンダリング(React など)を必要とするプロジェクトには SPA エディターを使用することをお勧めします。詳細情報を参照してください。
AEM Mobile アプリケーション開発プロセスでは、さまざまな専門知識を持つユーザーがモバイルアプリケーション開発に寄与することが認められています。次のプロセスマップは、コンテンツ作成者およびアプリケーション開発者がタスクを実行する一般的な順序を示しています。
このページでは、マーケティング担当者のタスクを実行する方法について説明します。開発者のタスクについては、PhoneGap アプリケーションの構築を参照してください。
AEM Mobile では、モバイルアプリケーションを作成するための PhoneGap アプリのブループリントが提供されます。ブループリントは、作成するアプリケーションの構造を定義したものです。アプリケーションは、次の項目で構成されています。
AEM で作成するモバイルアプリケーションのルートページは、アプリコンソールに表示されます。
ルートページは、アプリケーションの作成時に指定された、アプリケーションの「宛先のパス」プロパティの下に格納されます(デフォルトのパスは /content/phonegap/apps です)。ページ名は、アプリケーションの「名前」プロパティです。例えば、サイトのルートページのデフォルト URL の名前は次のとおりです。 myphonegapapp
が http://localhost:4502/content/phonegap/apps/myphonegapapp.html
.
ルートページの最初の子ページは、アプリケーションの言語バリエーションです。各ページの名前は、アプリケーションの作成に使用される言語です。例えば、アプリケーションの英語バリエーションの名前は English です。
注意: デフォルトの PhoneGap ブループリントは、英語アプリケーションのみを作成します。開発者は、追加の言語バリエーションも作成できるようにブループリントを変更できます。
言語ページは、次の 2 つの目的を果たします。
ホームページ(アプリケーションの言語バリエーションの index.html ページ)は、アプリケーションを開いたときに表示されます。ホームページでは、ユーザーはアプリ内のさまざまなページへのリンクが配置されたメニューを利用できます。段落システムでは、コンテンツを作成するためのコンポーネントをページに追加できます。
モバイルアプリケーションは、ページ構造およびプロパティを定義するブループリントに基づいています。次のアプリケーションプロパティを設定できます。
タイトル:アプリケーションのタイトル。
宛先のパス:アプリケーションが格納されるリポジトリ内での場所。デフォルトのままにすると、アプリ名に基づいてパスが作成されます。
名前:デフォルト値は、「タイトル」プロパティの値から空白文字を除外した値です。この名前は、CQ 内でアプリケーションを参照するために使用されます(例えば、アプリケーションを表すリポジトリノードなど)。
説明:アプリケーションの説明。
サーバー URL:アプリケーションに対して無線(OTA)によるコンテンツ更新を提供する URL。デフォルト値は、アプリケーションの作成に使用するインスタンスのパブリッシュサーバー URL です(Externalizer サービスから取得されます)。これは、認証が必要なオーサーではなく、パブリッシュサーバーインスタンスである必要があります。
アプリケーションサムネールとして使用する画像ファイルを提供したり、使用する PhoneGap Build 設定を選択したり、使用するモバイルアプリ分析設定を選択したりすることもできます。この画像は、Experience Managerのモバイルアプリコンソール内でモバイルアプリを表すためのサムネールとしてのみ使用されます。
その他の(オプションの)タブは、ビルドクラウドサービス向けで、Adobe Mobile Services SDK プラグインをアプリに統合する場合に使用します。
開発者は、AEM PhoneGap スターターキットを使用してアプリを作成し、コンソールに追加できます。
次の手順では、タッチ UI を使用して、モバイルアプリケーションを作成します。
レールで、「アプリ」をクリックします。
「作成」アイコンをクリックまたはタップします。
(オプション)「詳細」タブで、アプリケーションの説明を指定し、必要に応じてサーバー URL を変更します。
(オプション)PhoneGap Build を使用してアプリケーションをコンパイルしている場合には、「ビルド」タブで、使用する設定を選択します。
PhoneGap Build 設定を作成するには、「設定を管理」をクリックします。
(オプション)SiteCatalyst を使用してアプリケーションアクティビティをトラッキングしている場合には、「分析」タブで、使用する設定を選択します。
モバイルアプリケーション設定を作成するには、「設定を管理」をクリックします。
(オプション)アプリケーションアイコンを指定するには、「参照」ボタンをクリックして、ファイルシステムから画像ファイルを選択し、「開く」をクリックします。
「作成」をクリックします。
モバイルアプリケーションを作成したら、プロパティを変更できます。
レールで、「アプリ」をクリックまたはタップします。
設定するアプリケーションを選択し、「ページのプロパティを表示」アイコンをクリックします。
プロパティ値を変更するには、「編集」アイコンをクリックまたはタップします。
「基本」および「詳細」のプロパティを設定し、「完了」アイコンをクリックまたはタップします。
レールで、「アプリ」をクリックまたはタップします。
アプリ管理コンソール内で、クリックして編集対象のモバイルアプリケーションを表示します。設定するアプリケーションの言語バージョンを選択し、「アプリケーションのプロパティを表示」アイコンをクリックします。
プロパティ値を変更するには、「編集」アイコンをクリックまたはタップします。
「基本」、「詳細」、「ビルド」、「分析」の各タブでプロパティを設定し、「完了」アイコンをクリックまたはタップします。
モバイルアプリケーションを作成したら、アプリケーション UI として使用するコンテンツを追加します。
AEM パブリッシュインスタンスのコンテンツ同期キャッシュは、モバイルアプリケーション向けのコンテンツのリポジトリとして使用されます。
モバイルアプリケーションには、更新されたアプリケーションコンテンツをダウンロードしてインストールする「更新」コマンドが含まれます。アプリケーションインスタンスが更新要求を送信すると、コンテンツ同期は前回のアプリケーションの更新またはインストール後に変更されたコンテンツを特定し、新規コンテンツを提供します。
更新されたコンテンツをアプリケーションで利用できるようにするには、コンテンツ同期キャッシュを更新します。初めてキャッシュを更新すると、公開済みのすべてのコンテンツが追加されます。以後の更新では、前回の更新以降に変更された公開済みコンテンツのみが追加されます。
コンテンツ同期は、更新が行われた日時もトラッキングします。この情報を利用して、コンテンツ同期はモバイルアプリケーションに送信するキャッシュ更新を特定できます。
キャッシュを更新するインスタンスに対して次の手順を実行します。例えば、アプリケーションがパブリッシュインスタンスに更新を要求する場合は、パブリッシュインスタンスでこの手順を実行します。
レールで、「アプリ」をクリックまたはタップし、アプリケーションをクリックまたはタップします。
スプラッシュページを選択し、「キャッシュを更新」アイコンをクリックまたはタップします。
これは、Apps 6.1 Feature Pack 2 で利用できる機能で、既存のアプリテンプレートを活用してAEM内で新しいアプリを作成する簡単な方法を提供します。
アプリテンプレートとはアプリのベースラインまたは基盤となるページテンプレートおよびコンポーネントをひとまとめにしたものと考えることができます。新規アプリを別のアプリのテンプレートに基づいて作成すると、作成元アプリと同じ開始点からアプリを作成することができます。
この機能を利用するには、既存のモバイルアプリテンプレートが必要です(またはアプリテンプレートを含むアプリがインストールされている必要があります)。
最新のAEM Apps 6.1 サンプルパッケージには、Geometrixxアプリの更新バージョンとアプリテンプレートが含まれています。 または、テンプレートも提供する StarterKit をインストールすることもできます。
アプリテンプレートに基づいて新しいアプリを作成する手順は次のとおりです。
次へをクリックします。
アプリの「ID」および「タイトル」を指定します。ただし、「名前」および「説明」も含めることをお勧めします。
Geometrixx Outdoors 参照アプリパッケージを AEM からアンインストールした場合、そのテンプレートに基づいて作成したアプリは機能しなくなります。Geometrixx Outdoorsアプリは削除できますが、他のモバイルアプリで使用される場合はアプリテンプレートを残す必要があります。
Geometrixx Outdoors アプリは、デフォルトの PhoneGap アプリケーションブループリントの機能およびサンプルのモバイルコンポーネントの機能を体験できるサンプルの PhoneGap アプリケーションです。
アプリケーションを開くには、レールから「モバイルアプリケーション」をクリックし、「Geometrixx Outdoors アプリ」を選択します。
モバイルアプリの各ページには、次のような機能があります。
親ページに戻るための「戻る」ボタン。「戻る」ボタンはホームページには表示されないことに注意してください。
コマンドおよびリンクのメニューを提供する拡張可能なレール。
コンポーネントを追加し、コンテンツを作成するための段落システム。
ホームページのコンテンツは、次のナビゲーションツールで構成されています。
「ギア」ページでは、ユーザーは製品ページにアクセスできます。メニューリストコンポーネントでは、「ギア」ページの子ページにアクセスできます。子ページは、Web サイトに掲載している製品のカテゴリです。
各カテゴリページは、「ギア」ページと同じコンテンツ構造を使用します。カルーセルでは、製品のサブカテゴリである子ページにアクセスできます。サブカテゴリページには、製品ページへのリンクを掲載した製品リストが含まれています。
「製品」ページとその子ページの階層は、製品ページの分類体系を実装したものです。階層の各ブランチの最下位ページは、ng 製品コンポーネントが含まれている製品のページです。
アプリケーションユーザーが「製品」ページを使用することはできません。「ギア」ページでは、各製品ページにアクセスできます。
「戻る」ボタンが含まれています。段落システムでは、コンポーネントを追加できます。
アプリケーションを使用する場合、「レビュー」ページは英語ページのカルーセルから使用可能です。
「戻る」ボタンが含まれています。段落システムでは、コンポーネントを追加できます。
アプリケーションを使用する場合、「ニュース」ページは英語ページのカルーセルから使用可能です。
「会社概要」ページには、2 列の行コンポーネントがいくつか含まれています。各列には、画像コンポーネントまたはテキストコンポーネントが含まれています。コンポーネントは編集可能で、段落システムではコンポーネントを追加できます。
アプリケーションを使用する場合、「会社概要」ページは「英語」ページのカルーセルから使用可能です。
「ロケーション」ページには、ロケーションコンポーネントが含まれています。
アプリケーションを使用する場合、「ロケーション」ページは「英語」ページのメニューリストから使用可能です。
モバイルアプリケーションのページを作成する場合は、複数のコンポーネントがサイドキックですぐに使用可能になります。これらのコンポーネントは、PhoneGap コンポーネントグループに属しています。
スワイプカルーセルコンポーネントは、サイトページを参照および移動するためのツールです。コンポーネントに含まれるカルーセルによって、ページリンクリストの上部にページの画像が順に表示されます。公開するページおよびカルーセルの動作を指定するには、このコンポーネントを編集します。
カルーセルに画像が表示されるのは、独自の方法で画像が関連付けられているページであることに注意してください。ページが画像に関連付けられていない場合には、リンクリストのみが表示されます。
「カルーセル」のプロパティタブ
カルーセルの動作を設定します。
「リスト」のプロパティタブ
ページリストの生成方法を指定します。
スワイプカルーセルコンポーネントによって、「リストを選択」プロパティの次の値が提供されます。編集ダイアログは、選択する値に応じて異なります。
子ページ
このコンポーネントは、特定のページのすべての子ページをリストします。この値を選択した後、「子ページ」タブでページを選択するか、または値を指定しないで現在のページの子をリストします。
固定リスト
含めるページのリストを指定します。この値を選択した後、「固定リスト」を選択すると表示される「固定リスト」タブでリストを設定します。
「並べ替え順」プロパティは、固定リストの順序には影響を与えません。
検索
キーワード検索の結果を使用して、リストに値を入力します。検索は、指定したページの子で実行されます。
詳細検索
Querybuilder クエリーを使用して、リストに値を入力します。
アプリケーションコンテンツに画像を追加します。
アプリケーションコンテンツにリッチテキストを追加します。
ストアの場所コンポーネントでは、ユーザーはビジネスアウトレットを検索するためのツールを利用できます。
このコンポーネントを利用するには、リポジトリに各ストアの位置情報が含まれている必要があります。サンプルのロケーションが /etc/commerce/locations/adobe ノードにインストールされています。
1 ページにコンポーネントを並べて追加できます。