第7章 — モバイルアプリからのAEM Content Servicesの使用

チュートリアルの第7章では、ネイティブのAndroidモバイルアプリを使用して、AEM Content Servicesのコンテンツを使用します。

Androidモバイルアプリ

このチュートリアルでは、シンプルなネイティブAndroidモバイルアプリ​を使用して、AEM Content Servicesによって公開されたイベントコンテンツを使用および表示します。

Androidの使用はほとんど重要ではありません。消費するモバイルアプリは、iOSなど、あらゆるモバイルプラットフォーム向けのあらゆるフレームワークで記述できます。

Androidは、Windows、macOSおよびLinux上でAndroidエミュレーターを実行する機能と、その人気、およびAEM開発者がよく理解できる言語であるJavaとして記述できるので、チュートリアルに使用されます。

このチュートリアルのAndroidモバイルアプリは、Androidモバイルアプリの作成方法やAndroid開発のベストプラクティスを伝える方法を示すものではなく、モバイルアプリケーションからAEM Content Servicesを利用する方法を示すものです。

AEM Content Servicesがモバイルアプリのエクスペリエンスを促進する仕組み

モバイルアプリとコンテンツサービスのマッピング

  1. Events APIページの​画像コンポーネント​で定義される​logo
  2. Events APIページの​テキストコンポーネント​で定義された​タグ行
  3. この​イベントリスト​は、設定済みの​コンテンツフラグメントリストコンポーネント​で公開される、イベントコンテンツフラグメントのシリアル化から派生します。

モバイルアプリのデモ

ローカルホスト以外で使用するためのモバイルアプリの設定

AEMパブリッシュが​http://localhost:4503​で実行されていない場合、ホストとポートをモバイルアプリのSettingsで更新して、AEMパブリッシュホスト/ポートのプロパティを指すことができます。

モバイルアプリのローカルでの実行

  1. Android Studioをダウンロードしてインストールし、Androidエミュレーターをインストールします。
  2. ​Androidファイル APK の ダウンロードGitHub /アセット/ wknd-mobile.x.x.xapk
  3. Android Studio​を開きます。
    • Android Studioの初回起動時に、Android SDKをインストールするよう求めるプロンプトが表示されます。 デフォルトを受け入れ、インストールを終了します。
  4. Android Studioを開き、「Profile」または「Debug APK」を選択します。
  5. 手順2でダウンロードしたAPKファイル(wknd-mobile.x.x.x.apk)を選択し、「OK」をクリックします。
    • 新しいフォルダーを作成」または「既存の​を使用」というプロンプトが表示されたら、「既存の​を使用」を選択します。
  6. Android Studioの初回起動時に、「プロジェクト」リストの​wknd-mobile.x.x​を右クリックし、「モジュール設定を開く」を選択します。
    • モジュール/ wknd-mobile.x.x.x /依存関係タブ​で、Android API 29プラットフォーム​を選択します。 「 OK 」をタップして、変更を閉じ、保存します。
    • これをおこなわないと、エミュレーターを起動しようとすると、「Android SDKを選択してください」というエラーが表示されます。
  7. AVDマネージャー​を開くには、ツール/AVDマネージャー​を選択するか、上部のバーにある​AVDマネージャー​アイコンをタップします。
  8. AVD Manager​ウィンドウで、「+仮想デバイスを作成…」をクリックします。​を返します。
    1. 左側で、「電話」カテゴリを選択します。
    2. ピクセル2​を選択します。
    3. 次へ」ボタンをクリックします。
    4. Q​を​APIレベル29​で選択します。
      • AVD Managerの初回起動時に、バージョン管理されたAPIをダウンロードするよう求められます。 「Q」リリースの横にある「ダウンロード」リンクをクリックし、ダウンロードとインストールを完了します。
    5. 次へ」ボタンをクリックします。
    6. 完了」ボタンをクリックします。
  9. AVDマネージャ​ウィンドウを閉じます。
  10. 上部のメニューバーで、「設定を実行/編集」ドロップダウンから​wknd-mobile.x.x​を選択します。
  11. 選択した​設定を実行/編集​の横にある​実行​ボタンをタップします
  12. ポップアップで、新しく作成した​Pixel 2 API 29​仮想デバイスを選択し、「OK」をタップします
  13. WKND Mobileアプリがすぐに読み込まれない場合は、エミュレーターのAndroidホーム画面で​WKND​アイコンを探してタップします。
    • エミュレーターが起動してもエミュレーターの画面が黒のままの場合は、エミュレーターウィンドウの横にあるエミュレーターのツールウィンドウで​power​ボタンをタップします。
    • 仮想デバイス内をスクロールするには、クリック&ホールドしてドラッグします。
    • AEMのコンテンツを更新するには、上部から更新アイコンまでプルダウンします。
      が表示され、リリースされます。

モバイルアプリコード

この節では、最もやり取りが多く、AEM Content ServicesとそのJSON出力に依存するAndroidモバイルアプリコードについて説明します。

読み込み時に、モバイルアプリは、モバイルアプリを駆動するコンテンツを提供するように設定されたAEM Content ServicesエンドポイントであるHTTP GET/content/wknd-mobile/en/api/events.model.jsonにします。

イベントAPIの編集可能なテンプレート(/content/wknd-mobile/en/api/events.model.json)はロックされているので、モバイルアプリはコード化して、JSON応答内の特定の場所にある特定の情報を探すことができます。

概要レベルのコードフロー

  1. WKND Mobileアプリを開くと、/content/wknd-mobile/en/api/events.model.jsonにあるAEMパブリッシュに対してHTTP GETリクエストが呼び出され、モバイルアプリのUIに入力するコンテンツが収集されます。
  2. AEMからコンテンツを受け取ると、モバイルアプリの3つのビュー要素(ロゴ、タグ行、イベントリスト)のそれぞれが、AEMのコンテンツで初期化されます。
    • AEMコンテンツをモバイルアプリのビュー要素にバインドするために、各AEMコンポーネントを表すJSONは、Java POJOにオブジェクトがマッピングされ、Androidビュー要素にバインドされます。
      • 画像コンポーネントJSON →ロゴPOJO →ロゴImageView
      • テキストコンポーネントJSON → TagLine POJO →テキストImageView
      • コンテンツフラグメントリストJSON →イベントPOJO →イベントリサイクラービュー
    • モバイルアプリコードは、より大きなJSON応答内の既知の場所が原因で、JSONをPOJOにマッピングできます。「image」、「text」および「contentfragmentlist」のJSONキーは、バッキングAEMコンポーネントのノード名によって決まります。 これらのノード名が変更されると、JSONデータから必要なコンテンツをソースする方法が分からなくなるので、モバイルアプリは動作しなくなります。

AEM Content Servicesエンドポイントの呼び出し

以下は、モバイルアプリのMainActivityで、AEM Content Servicesを呼び出して、モバイルアプリエクスペリエンスを推進するコンテンツを収集する役割を果たすコードの要約です。

protected void onCreate(Bundle savedInstanceState) {
    ...
    // Create the custom objects that will map the JSON -> POJO -> View elements
    final List<ViewBinder> viewBinders = new ArrayList<>();

    viewBinders.add(new LogoViewBinder(this, getAemHost(), (ImageView) findViewById(R.id.logo)));
    viewBinders.add(new TagLineViewBinder(this, (TextView) findViewById(R.id.tagLine)));
    viewBinders.add(new EventsViewBinder(this, getAemHost(), (RecyclerView) findViewById(R.id.eventsList)));
    ...
    initApp(viewBinders);
}

private void initApp(final List<ViewBinder> viewBinders) {
    final String aemUrl = getAemUrl(); // -> http://localhost:4503/content/wknd-mobile/en/api/events.mobile.json
    JsonObjectRequest request = new JsonObjectRequest(aemUrl, null,
        new Response.Listener<JSONObject>() {
            @Override
            public void onResponse(JSONObject response) {
                for (final ViewBinder viewBinder : viewBinders) {
                    viewBinder.bind(response);
                }
            }
        },
        ...
    );
}

onCreate(..) はモバイルアプリの初期化フックで、JSONを解析して値を要素にバ ViewBinders インドする3つのカスタムを登録し View ます。

initApp(...) が呼び出され、AEMパブリッシュ上のAEM Content Servicesエンドポイントに対して、コンテンツを収集するためのHTTPGETリクエストがおこなわれます。有効なJSON応答を受け取ると、JSON応答が各ViewBinderに渡されます。このは、JSONを解析してモバイルView要素にバインドします。

JSON応答の解析

次に、LogoViewBinderを見てみましょう。これは簡単ですが、いくつかの重要な考慮事項に焦点を当てています。

public class LogoViewBinder implements ViewBinder {
    ...
    public void bind(JSONObject jsonResponse) throws JSONException, IOException {
        final JSONObject components = jsonResponse.getJSONObject(":items").getJSONObject("root").getJSONObject(":items");

        if (components.has("image")) {
            final Image image = objectMapper.readValue(components.getJSONObject("image").toString(), Image.class);

            final String imageUrl = aemHost + image.getSrc();
            Glide.with(context).load(imageUrl).into(logo);
        } else {
            Log.d("WKND", "Missing Logo");
        }
    }
}

bind(...)の最初の行は、コンポーネントが追加されたAEM Layout Containerを表すキー​:items → root → :items​を使用してJSON応答を下に移動します。

ここから、画像コンポーネントを表す​image​という名前のキーをチェックします(このノード名→ JSONキーは安定していることが重要です)。 このオブジェクトが存在する場合は、 Jackson ObjectMapperライブラリを介してカスタム画像POJOに読み取り、マッピングされます。 画像POJOについては、以下で説明します。

最後に、ロゴのsrcがGlideヘルパーライブラリを使用してAndroid ImageViewに読み込まれます。

AEM Content ServicesはJCRパス(例: aemHost /content/dam/wknd-mobile/images/wknd-logo.png)を参照先のコンテンツに追加します。

ザイメージPOJO

オプションですが、Gsonなどの他のライブラリで提供されるJackson ObjectMapperや類似の機能を使用すると、複雑なJSON構造をJava POJOにマッピングするのに役立ち、ネイティブのJSONオブジェクト自体を直接処理する必要はありません。 この単純なケースでは、 image JSONオブジェクトのsrcキーを、 @JSONProperty注釈を使用して、画像POJOのsrc属性に直接マッピングします。

package com.adobe.aem.guides.wknd.mobile.android.models;

import com.fasterxml.jackson.annotation.JsonProperty;

public class Image {
    @JsonProperty(value = "src")
    private String src;

    public String getSrc() {
        return src;
    }
}

JSONオブジェクトから多くのデータポイントを選択する必要があるイベントPOJOは、単純な画像よりもこの手法のメリットがあります(srcが必要です)。

モバイルアプリのエクスペリエンスの参照

これで、AEM Content Servicesがネイティブのモバイルエクスペリエンスを引き出す方法を理解できたので、学習した内容を使用して、次の手順を実行し、変更がモバイルアプリに反映されていることを確認できます。

各手順の後、モバイルアプリをプルして更新し、モバイルエクスペリエンスの更新を確認します。

  1. 新しいEventコンテンツフラグメント​を作成して公開します。
  2. 既存の​コンテンツフラグメント​を非公開にするEvent
  3. タグ行​に更新を発行します

これで完了です

AEMヘッドレスチュートリアルを完了しました。

AEMコンテンツサービスとAEM as a Headless CMSの詳細については、Adobeの他のドキュメントおよびイネーブルメントに関する資料を参照してください。

このページ