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