iOS アプリ

サンプルアプリケーションは、Adobe Experience Manager（AEM）のヘッドレス機能を調べるうえで役に立ちます。この iOS アプリケーションでは、永続クエリを使用して AEM の GraphQL API でコンテンツに対してクエリを実行する方法を示します。

AEM ヘッドレスを備えた iOS SwiftUI アプリ

GitHub のソースコードを表示

前提条件

次のツールをローカルにインストールする必要があります。

Xcode (macOSが必要 )
Git

AEM の要件

iOS アプリケーションは、次の AEM デプロイメントオプションと連携します。すべてのデプロイメントにWKND Site v2.0.0 以降をインストールする必要があります。

iOS アプリケーションは AEM パブリッシュ環境に接続するように設計されていますが、iOS アプリケーションの設定で認証が提供されている場合、AEM オーサーからコンテンツを取得できます。

使用方法

adobe/aem-guides-wknd-graphql リポジトリのクローンを作成します。
```
$ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
```
Xcode を起動し、フォルダー ios-app を開きます。
Config.xcconfig ファイルを変更し、ターゲットの AEM パブリッシュサービスに一致するように AEM_SCHEME と AEM_HOST を更新します。
```
// The http/https protocol scheme used to access the AEM_HOST
AEM_SCHEME = http
// Target hostname for AEM environment, do not include http:// or https://
AEM_HOST = localhost:4503
```
AEM オーサーに接続する場合は、AEM_AUTH_TYPE およびサポートする認証プロパティを Config.xcconfig に追加します。

基本認証

AEM_USERNAME と AEM_PASSWORD は、WKND GraphQL コンテンツにアクセスできるローカル AEM ユーザーを認証します。
```
AEM_AUTH_TYPE = basic
AEM_USERNAME = admin
AEM_PASSWORD = admin
```
トークン認証

AEM_TOKEN はアクセストークンであり、WKND GraphQL コンテンツへのアクセス権を持つ AEM ユーザーを認証します。
```
AEM_AUTH_TYPE = token
AEM_TOKEN = abcd...0123
```
Xcode を使用してアプリケーションを作成し、アプリケーションを iOS シミュレーターにデプロイします。
WKND サイトからのアドベンチャーのリストがアプリケーションに表示されます。アドベンチャーを選択すると、アドベンチャーの詳細が開きます。アドベンチャーリストビューで、AEM からのデータを取り込んで更新します。

コード

以下は、iOS アプリケーションの構築方法、AEM ヘッドレスに接続して GraphQL 永続クエリを使用してコンテンツを取得する方法、およびそのデータを表示する方法の概要です。完全なコードは GitHub にあります。

永続クエリ

AEM ヘッドレスのベストプラクティスに従って、iOS アプリケーションは AEM GraphQL 永続クエリを使用してアドベンチャーデータをクエリします。アプリケーションでは、次の 2 つの永続クエリを使用します。

wknd/adventures-all 永続クエリ。AEM のすべてのアドベンチャーを要約されたプロパティセットとともに返します。この永続クエリは、初期ビューのアドベンチャーリストを制御します。

# Retrieves a list of all adventures
{
    adventureList {
        items {
            _path
            slug
            title
            price
            tripLength
            primaryImage {
                ... on ImageRef {
                _path
                mimeType
                width
                height
                }
            }
        }
    }
}

wknd/adventure-by-slug 永続クエリ。slug（アドベンチャーを一意に識別するカスタムプロパティ）によって、完全なプロパティセットを含む単一のアドベンチャーを返します。この永続クエリで、アドベンチャーの詳細ビューが強化されます。

# Retrieves an adventure Content Fragment based on it's slug
# Example query variables:
# {"slug": "bali-surf-camp"}
# Technically returns an adventure list but since the the slug
# property is set to be unique in the CF Model, only a single CF is expected

query($slug: String!) {
  adventureList(filter: {
        slug: {
          _expressions: [ { value: $slug } ]
        }
      }) {
    items {
      _path
      title
      slug
      activity
      adventureType
      price
      tripLength
      groupSize
      difficulty
      price
      primaryImage {
        ... on ImageRef {
          _path
          mimeType
          width
          height
        }
      }
      description {
        json
        plaintext
      }
      itinerary {
        json
        plaintext
      }
    }
    _references {
      ...on AdventureModel {
        _path
        slug
        title
        price
        __typename
      }
    }
  }
}

GraphQL 永続クエリの実行

AEM の永続クエリは HTTP GET で実行されるので、Apollo などの HTTP POST を使用する一般的な GraphQL ライブラリは使用できません。代わりに、AEM に対する永続クエリ HTTP GET リクエストを実行するカスタムクラスを作成します。

AEM/Aem.swift は AEMヘッドレスとのすべてのやり取りに使用される Aem クラスをインスタンス化します。パターンは次のとおりです。

各永続クエリには、対応するパブリック関数（例：getAdventures(..) または getAdventureBySlug(..)）があり、iOS アプリケーションのビューが呼び出されて、アドベンチャーデータを取得します。
パブリック関数は、AEM ヘッドレスへの非同期 HTTP GET リクエストを呼び出すプライベート関数 makeRequest(..) を呼び出し、JSON データを返します。
次に、各パブリック関数は JSON データをデコードし、必要なチェックや変換を行ってから、アドベンチャーデータをビューに返します。
- AEM の GraphQL JSON データは、AEM/Models.swift で定義された構造体／クラスを使用してデコードされます。これは、AEM ヘッドレスから返された JSON オブジェクトにマップされます。

    /// # getAdventures(..)
    /// Returns all WKND adventures using the `wknd-shared/adventures-all` persisted query.
    /// For this func call to work, the `wknd-shared/adventures-all` query must be deployed to the AEM environment/service specified by the host.
    ///
    /// Since HTTP requests are async, the completion syntax is used.
    func getAdventures(completion: @escaping ([Adventure]) ->  ()) {

        // Create the HTTP request object representing the persisted query to get all adventures
        let request = makeRequest(persistedQueryName: "wknd-shared/adventures-all")

        // Wait fo the HTTP request to return
        URLSession.shared.dataTask(with: request) { (data, response, error) in
            // Error check as needed
            if ((error) != nil) {
                print("Unable to connect to AEM GraphQL endpoint")
                completion([])
            }

            if (!data!.isEmpty) {
                // Decode the JSON data into Swift objects
                let adventures = try! JSONDecoder().decode(Adventures.self, from: data!)

                DispatchQueue.main.async {
                    // Return the array of Adventure objects
                    completion(adventures.data.adventureList.items)
                }
            }
        }.resume();
    }

    ...

    /// #makeRequest(..)
    /// Generic method for constructing and executing AEM GraphQL persisted queries
    private func makeRequest(persistedQueryName: String, params: [String: String] = [:]) -> URLRequest {
        // Encode optional parameters as required by AEM
        let persistedQueryParams = params.map { (param) -> String in
            encode(string: ";\(param.key)=\(param.value)")
        }.joined(separator: "")

        // Construct the AEM GraphQL persisted query URL, including optional query params
        let url: String = "\(self.scheme)://\(self.host)/graphql/execute.json/" + persistedQueryName + persistedQueryParams;

        var request = URLRequest(url: URL(string: url)!);

        // Add authentication to the AEM GraphQL persisted query requests as defined by the iOS application's configuration
        request = addAuthHeaders(request: request)

        return request
    }

    ...

GraphQL 応答データモデル

iOS では、JSON オブジェクトを型指定されたデータモデルにマッピングすることが好まれています。

src/AEM/Models.swift は、AEM の JSON 応答によって返される AEM JSON 応答にマップされる decodable Swift 構造体とクラスを定義します。

ビュー

SwiftUI は、アプリケーションの様々な表示で使用されます。 Apple は、SwiftUI を使用してリストとナビゲーションを構築するための入門チュートリアルを提供しています。

WKNDAdventuresApp.swift

アプリケーションのエントリには AdventureListView が含まれ、その .onAppear イベントハンドラーは aem.getAdventures() を介してすべてのアドベンチャーデータを取得するために使用されます。共有 aem オブジェクトはここで初期化され、他のビューには EnvironmentObject として公開されます。
Views/AdventureListView.swift

（aem.getAdventures() からのデータに基づく）アドベンチャーのリストを表示し、AdventureListItemView を使用している各アドベンチャーのリスト項目を表示します。
Views/AdventureListItemView.swift

アドベンチャーリストの各項目を表示します（Views/AdventureListView.swift）。
Views/AdventureDetailView.swift

タイトル、説明、価格、アクティビティタイプ、プライマリ画像など、アドベンチャーの詳細を表示します。このビューは、aem.getAdventureBySlug(slug: slug) を使用して完全なアドベンチャーの詳細のクエリを AEM に対して実行します。ここで、slug パラメーターは選択リストの行に基づいて渡されます。

リモート画像

アドベンチャーコンテンツフラグメントで参照される画像は、AEM が提供します。この iOS アプリは、GraphQL 応答のパス _path フィールドを使用し、プレフィックス AEM_SCHEME と AEM_HOST を付けて完全修飾 URL を作成します。

認証が必要な AEM 上の保護されたリソースに接続する場合は、資格情報も画像リクエストに追加する必要があります。

SDWebImageSwiftUI および SDWebImage は、AdventureListItemView 表示と AdventureDetailView 表示にアドベンチャー画像を取り込む AEM からリモート画像を読み込むために使用されます。

aemクラス（AEM/Aem.swift）は、次の 2 つの方法で AEM 画像の使用を容易にします。

aem.imageUrl(path: String) はビューで使用され、AEM のスキームとホストを画像のパスに追加して、完全修飾 URL を作成します。

// adventure.image() => /content/dam/path/to/an/image.png
let imageUrl = aem.imageUrl(path: adventure.image())
// imageUrl => http://localhost:4503/content/dam/path/to/an/image.png

Aem の convenience init(..) は、iOS アプリケーションの設定に基づいて、画像 HTTP リクエストに HTTP 認証ヘッダーを設定します。

基本認証が設定されている場合、すべての画像リクエストで基本認証が行われます。

/// AEM/Aem.swift
///
/// # Basic authentication init
/// Used when authenticating to AEM using local accounts (basic auth)
convenience init(scheme: String, host: String, username: String, password: String) {
    ...

    // Add basic auth headers to all Image requests, as they are (likely) protected as well
    SDWebImageDownloader.shared.setValue("Basic \(encodeBasicAuth(username: username, password: password))", forHTTPHeaderField: "Authorization")
}

トークン認証が設定されている場合、すべての画像リクエストでトークン認証が行われます。

/// AEM/Aem.swift
///
/// # Token authentication init
///  Used when authenticating to AEM using token authentication (Dev Token or access token generated from Service Credentials)
convenience init(scheme: String, host: String, token: String) {
    ...

    // Add token auth headers to all Image requests, as they are (likely) protected as well
    SDWebImageDownloader.shared.setValue("Bearer \(token)", forHTTPHeaderField: "Authorization")
}

認証なしが設定されている場合、画像リクエストで認証は行われません。

SwiftUI ネイティブの AsyncImage でも同様のアプローチを使用できます。AsyncImage は iOS 15.0 以降でサポートされています。

iOS アプリ

前提条件

AEM の要件

使用方法

コード

永続クエリ

GraphQL 永続クエリの実行

GraphQL 応答データモデル

ビュー

リモート画像

その他のリソース

Business.Adobe.com リソース

このページ

次を表示：

学習

ドキュメント

コミュニティ

サポート

リソース

アドビアカウント

Adobe