はじめに
株式会社つみきでiOSエンジニアをしている村上です。この度、映画・ドラマ・アニメのレビューサービス「Filmarks（フィルマークス）」のiOSアプリ内に、Shopifyで構築したオンラインストア「Filmarks Store」の販売商品を表示する機能を追加しました。
この機能の紹介記事はこちら
Mobile Buy SDKについて
Mobile Buy SDKは、ShopifyがiOS/Android向けに提供しているSDKで、GraphQLをベースに構築されています。このSDKを使うことで、商品情報の取得やカート機能、購入処理、顧客情報の管理など、ECサイトに必要な機能をモバイルアプリに組み込むことができます。今回は販売商品を表示するだけなので、商品情報の取得機能のみを使用しています。
実装の流れ
SDKの追加
Mobile Buy SDKをSwift Package Managerで追加します。
他にもCocoaPodsやCarthageでも導入可能です。詳しくは公式リポジトリ を参照してください。
クライアント初期化
ストアにアクセスするには、shopDomainとStorefront API用のapiKeyが必要です。
| 項目 | 説明 | 例 |
|---|---|---|
| shopDomain | ストアのドメイン | yourstore.myshopify.com |
| apiKey | Storefront APIアクセストークン | YOUR_API_KEY |
これらはShopifyストアの管理画面から取得できます。社内で運用している場合は、必要に応じてストア管理者に問い合わせてください。
商品情報を取得するには、先ほど取得したshopDomainとapiKeyを使用してShopifyのAPIと通信するためのクライアントを初期化します。
import MobileBuySDK
let client = Graph.Client(
shopDomain: "yourstore.myshopify.com",
apiKey: "YOUR_API_KEY"
)
クエリの構築
取得する情報
今回必要な商品情報と対応するフィールドは以下の通りです。
| 項目 | フィールド | 型 |
|---|---|---|
| 商品ID | id | String |
| 商品識別子 | handle | String |
| 商品名 | title | String |
| 最低価格 | priceRange.minVariantPrice.amount | Decimal |
| 商品画像 | featuredImage | URL? |
| 在庫状態 | availableForSale | Bool |
handleは商品ページURLの生成に使用します。
https://example.com/products/{handle}
クエリの構築
まず、ストア側で設定したメタフィールドを指定してフィルター条件を作成します。
let filter = Storefront.ProductFilter.create(
productMetafield: Input(orNull: Storefront.MetafieldFilter.create(
namespace: "custom",
key: "your_metafield_key",
value: metaobjectGID
))
)
metaobjectGIDは、Shopify側で商品に紐付けたメタオブジェクトのIDです。今回は自社バックエンドの作品詳細のAPIレスポンスにこの値を追加し、値が存在する場合のみ関連商品を取得・表示するようにしています。
次に、クエリを構築します。
let query = Storefront.buildQuery { $0
.collection(handle: "all") { $0
.products(first: 100, filters: [filter]) { $0
.edges { $0
.node { $0
.id()
.handle()
.title()
.featuredImage { $0.url() }
.availableForSale()
.priceRange { $0
.minVariantPrice { $0.amount() } // 最低価格を取得
}
}
}
}
}
}
-
.collection(handle: "all")でストアにある全商品を取得することができます。ストア側でコレクションを作成している場合は、.collection(handle: "コレクション名")でそのコレクションに紐付いた商品のみを取得することもできます。 -
.products(first: 100, ...)で最大100件を取得するように指定しています。Storefront APIでは全件取得する条件を指定できないので、任意の数を指定してそれ以上の商品がある場合はページネーションで対応する必要があります。
カスタムメタフィールドについて
Storefront APIにはcreatedAt（登録日時）やupdatedAt（更新日時）は標準で用意されていますが、「販売開始日」のような独自の情報は用意されていません。
例えば受注生産で「1週間後に販売開始」といったケースでは、ストア側でカスタムメタフィールドを設定することで取得できるようになります。
.metafield(alias: "metafieldStartDate", namespace: "custom", key: "sale_start_date") { $0.value() }
他に取得可能な情報
今回は使用していませんが、以下の情報も取得できます。
-
category- 商品カテゴリ -
priceRange.maxVariantPrice.amount- 最大価格 -
compareAtPriceRange- 割引前価格 -
tags- 商品タグ
データの取得
構築したクエリを初期化したクライアントを使って実行します。
client.queryGraphWith(query) { response, error in
guard error == nil, let collection = response?.collection else {
// エラー処理は省略
return
}
let products = collection.products.edges.map { $0.node }
// productsから必要な情報を取得
}
おわりに
Mobile Buy SDKを使って、Shopifyで構築したストアの商品をiOSアプリに表示する方法を紹介しました。Shopifyと連携して作品詳細画面に販売商品を表示することで、ストアへの導線を増やし、商品の販売促進が期待できます。
本記事がShopifyストアとアプリを連携したい方の参考になれば幸いです。
つみきではこのような活動を行いながら、日々Filmarksの成長を支えるエンジニアを募集しています！
Discussion