> ## Documentation Index > Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt > Use this file to discover all available pages before exploring further. # 商品コレクションの取得 > Web またはモバイルアプリケーションで、Kameleoon Product Recommendation APIを使用して商品コレクションを取得・表示する方法を学びます。 このガイドでは、Kameleoon HTML要素を埋め込むことなく、Product Recommendation APIを使用して **商品コレクション** を取得する方法について説明します。 以下のエンドポイントを使用します。 * **[Retrieve collection](../all-endpoints/Recommend/get-collection)** ## なぜAPIを使用するのか？ モバイルアプリケーションではAPIを使用してください。 ニーズに応じて、このアプローチには複数の利点があります。 * **完全な制御**: デザインとUX基準に合わせてバリエーション表示をカスタマイズできます。 * **より優れたパフォーマンス**: スクリプトベースのソリューションと比較して、最適化されたAPI呼び出しによりページ読み込み遅延を低減します。 * **デバッグの容易さ**: 標準ツールを使用して、クライアントのコードベース内で統合をログ記録、監視、デバッグできます。 * **サードパーティスクリプトへの非依存**: 直接呼び出しを使用することで、外部スクリプトを回避し、潜在的な競合を減らし、セキュリティポリシーに準拠できます。 * **SPA対応**: シングルページアプリケーションに直接統合することで、タイミングの問題を回避し、クライアント側ルーティングに適合します。 * **広告ブロッカーに強い**: サードパーティスクリプトや特定のHTMLマーカーなしで、実験を一貫して配信します。広告ブロッカーがKameleoonに与える影響の詳細については、**[FAQ](../../../feature-experimentation/technical-reference/faq-global#how-do-ad-blockers-affect-kameleoon)** を参照してください。 ## 目的 推奨エンジンから商品コレクションを取得し、フロントエンドにレンダリングします。たとえば、以下の画像はホームページにレンダリングされたコレクションを示しています。 ![Product Collections](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images/api-tutorial/product-collections.jpg) ## 要件 * **Store ID (`shop_id`)** を持つ有効なKameleoonアカウント。 * Kameleoonアプリの **Recommendations** > **Settings** > **Store settings** から `shop_id` を取得してください。必要に応じてキーについてカスタマーサクセスマネージャーにお問い合わせください。 ![Store Key](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images/api-tutorial/store-key.jpg) * ダッシュボードのProduct Collectionsセクションからの `collection_id`。このセクションには、構成されたコレクションとそのIDが一覧表示されています。 ![Collection ID](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images/api-tutorial/collection-id.jpg) * **Device ID (`did`)** および **Session ID (`sid`)**。（履歴的なデバイス／ユーザーデータに依存するフィルターまたはアルゴリズムを使用する場合のみ必要）。 * **Kameleoon Web Experimentation** の場合、以下のクッキーから取得します。 * `KameleoonProducts_device_id` → **Device ID (`did`)** * `KameleoonProducts_session_code` → **Session ID (`sid`)** * それ以外の場合は、これらの値を手動で生成してください。 ## ステップ ### 1. クッキーを取得する（Kameleoon Web Experimentationのみ） バックエンド実装やKameleoon Web Experimentationを使用しない環境では、これらの値を手動で生成してください。詳細については **[Initエンドポイント](../all-endpoints/Initialize/init)** を参照してください。 ```javascript theme={null} function getCookie(name) { const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)')); if (match) return match[2]; } const did = getCookie('KameleoonProducts_device_id'); const sid = getCookie('KameleoonProducts_session_code'); ``` ### 2. クエリリクエスト **エンドポイント:** ```sqlite3 theme={null} GET https://api.products.kameleoon.com/collection/{%collection-id%} ``` `{collection-id}` を [要件](#requirements) の値に置き換えてください。 | パラメータ | 型 | 必須 | 説明 | | :------------ | :----- | :---- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `shop_id` | String | True | Store Key | | `did` | String | False | Device ID | | `location` | String | False | ユーザーのロケーション | | `sid` | String | False | 一時的なユーザーセッションID | | `external_id` | String | False | ローカルシステムまたはCRM内のユーザーの一意の識別子。（Kameleoon VisitorCodeとの正確なマッチングを確保するために、まずIDをKameleoon Custom Dataとして保存してください。Custom Dataの設定時に、**Use this custom data as a unique identifier for cross-device matching** を有効にして、両システム間のユーザーアクティビティを連携させてください）。 | プラットフォームをまたいでユーザーごとにコレクションをパーソナライズするには、`did` の代わりにKameleoon Custom Dataとして設定された `external_id` を使用してください。 **例:** ```bash theme={null} curl -X GET -L 'https://api.products.kameleoon.com/collection/7' \ -H 'Content-Type: application/json' \ -d '{ "did": "abc123-kam-device-id", "shop_id": "shop_4567_example", "sid": "session_7890_example", }' ``` ### 3. レスポンス | 名前 | 型 | 説明 | | :--------- | :-------- | :------------------------------------------------------------------------------------------------------- | | `products` | オブジェクトの配列 | 商品情報。各オブジェクトには [これらのプロパティ](../all-endpoints/Recommend/get-collection#products-オブジェクト配列のフィールドリスト) が含まれます。 | | `html` | String | コレクションを作成したときのHTMLテンプレート。 | モバイルアプリは `html` を無視できます。 APIはCSSを返さないため、出力のスタイルは手動で設定する必要があります。 **例:** ```json theme={null} { "products": [ { "name": "NIKE | TODDLER ROSHE ONE", "url": "https:\/\/kameleoon-store.myshopify.com\/products\/nike-toddler-roshe-one?variant=40023417520292&recommended_by=collection&recommended_code=5", "category_ids": [ "1", "295508017316" ], "barcode": "NK-02-black-4", "vendor_code": "NI", "brand": "Nike", "leftovers": "lot", "rating": 4, "fashion_feature": "child", "fashion_wear_type": "shoe", "fashion_original_sizes": [ "4" ], "picture": "https:\/\/images.products.kameleoon.com\/resize-images\/180\/9fa630bf863db7a87fc6d5fd2a188f\/3919225.jpg", "categories": [ { "id": "1", "url": "https:\/\/kameleoon-store.myshopify.com\/collections\/all?recommended_by=collection&recommended_code=5", "name": "Men", "level": "1", "url_handle": "\/collections\/all?recommended_by=collection&recommended_code=5" }, { "id": "295508017316", "parent_id": "1", "url": "https:\/\/kameleoon-store.myshopify.com\/collections\/all?recommended_by=collection&recommended_code=5", "name": "Men - Sneakers", "level": "2", "url_handle": "\/collections\/all?recommended_by=collection&recommended_code=5" } ], "price_formatted": "$ 70", "price_full_formatted": "$ 70.00", "price": 70, "price_full": 70, "image_url": "https:\/\/cdn.shopify.com\/s\/files\/1\/0564\/9180\/2788\/products\/0ea90fb43c087d165cbf985098cc951e_grande.jpg?v=1622707552", "image_url_handle": "\/s\/files\/1\/0564\/9180\/2788\/products\/0ea90fb43c087d165cbf985098cc951e_grande.jpg?v=1622707552", "image_url_resized": { "120": "https:\/\/images.products.kameleoon.com\/resize-images\/120\/9fa630bf863db7a87fc6d5fd2a188f\/3919225.jpg", "140": "https:\/\/images.products.kameleoon.com\/resize-images\/140\/9fa630bf863db7a87fc6d5fd2a188f\/3919225.jpg", "160": "https:\/\/images.products.kameleoon.com\/resize-images\/160\/9fa630bf863db7a87fc6d5fd2a188f\/3919225.jpg", "180": "https:\/\/images.products.kameleoon.com\/resize-images\/180\/9fa630bf863db7a87fc6d5fd2a188f\/3919225.jpg", "200": "https:\/\/images.products.kameleoon.com\/resize-images\/200\/9fa630bf863db7a87fc6d5fd2a188f\/3919225.jpg", "220": "https:\/\/images.products.kameleoon.com\/resize-images\/220\/9fa630bf863db7a87fc6d5fd2a188f\/3919225.jpg", "310": "https:\/\/images.products.kameleoon.com\/resize-images\/310\/9fa630bf863db7a87fc6d5fd2a188f\/3919225.jpg", "520": "https:\/\/images.products.kameleoon.com\/resize-images\/520\/9fa630bf863db7a87fc6d5fd2a188f\/3919225.jpg", "original": "https:\/\/cdn.shopify.com\/s\/files\/1\/0564\/9180\/2788\/products\/0ea90fb43c087d165cbf985098cc951e_grande.jpg?v=1622707552" }, "url_handle": "\/products\/nike-toddler-roshe-one?variant=40023417520292&recommended_by=collection&recommended_code=5", "currency": "$", "_id": "3919225", "id": "NK-02-black-4", "stock_quantity": 19, "fashion_colors": [ "black" ], "params": [ { "key": "Size", "values": [ "4" ] }, { "key": "Color", "values": [ "black" ] } ], "group_id": "02" }, { "name": "CONVERSE | TODDLER CHUCK TAYLOR ALL STAR AXEL MID", "url": "https:\/\/kameleoon-store.myshopify.com\/products\/converse-chuck-taylor-all-star-ii-hi?variant=40023416471716&recommended_by=collection&recommended_code=5", "category_ids": [ "1", "295508017316" ], "barcode": "C-02-black-13", "vendor_code": "CO", "brand": "Converse", "leftovers": "few", "rating": 2, "fashion_sizes": [ "13" ], "fashion_feature": "adult", "fashion_gender": "m", "fashion_wear_type": "shoe", "fashion_original_sizes": [ "13" ], "picture": "https:\/\/images.products.kameleoon.com\/resize-images\/180\/9fa630bf863db7a87fc6d5fd2a188f\/3927216.jpg", "categories": [ { "id": "1", "url": "https:\/\/kameleoon-store.myshopify.com\/collections\/all?recommended_by=collection&recommended_code=5", "name": "Men", "level": "1", "url_handle": "\/collections\/all?recommended_by=collection&recommended_code=5" }, { "id": "295508017316", "parent_id": "1", "url": "https:\/\/kameleoon-store.myshopify.com\/collections\/all?recommended_by=collection&recommended_code=5", "name": "Men - Sneakers", "level": "2", "url_handle": "\/collections\/all?recommended_by=collection&recommended_code=5" } ], "price_formatted": "$ 140", "price_full_formatted": "$ 140.00", "price": 140, "price_full": 140, "image_url": "https:\/\/cdn.shopify.com\/s\/files\/1\/0564\/9180\/2788\/products\/23550440c4ccab05e4fc1ebd85e742cc_grande.jpg?v=1622707545", "image_url_handle": "\/s\/files\/1\/0564\/9180\/2788\/products\/23550440c4ccab05e4fc1ebd85e742cc_grande.jpg?v=1622707545", "image_url_resized": { "120": "https:\/\/images.products.kameleoon.com\/resize-images\/120\/9fa630bf863db7a87fc6d5fd2a188f\/3927216.jpg", "140": "https:\/\/images.products.kameleoon.com\/resize-images\/140\/9fa630bf863db7a87fc6d5fd2a188f\/3927216.jpg", "160": "https:\/\/images.products.kameleoon.com\/resize-images\/160\/9fa630bf863db7a87fc6d5fd2a188f\/3927216.jpg", "180": "https:\/\/images.products.kameleoon.com\/resize-images\/180\/9fa630bf863db7a87fc6d5fd2a188f\/3927216.jpg", "200": "https:\/\/images.products.kameleoon.com\/resize-images\/200\/9fa630bf863db7a87fc6d5fd2a188f\/3927216.jpg", "220": "https:\/\/images.products.kameleoon.com\/resize-images\/220\/9fa630bf863db7a87fc6d5fd2a188f\/3927216.jpg", "310": "https:\/\/images.products.kameleoon.com\/resize-images\/310\/9fa630bf863db7a87fc6d5fd2a188f\/3927216.jpg", "520": "https:\/\/images.products.kameleoon.com\/resize-images\/520\/9fa630bf863db7a87fc6d5fd2a188f\/3927216.jpg", "original": "https:\/\/cdn.shopify.com\/s\/files\/1\/0564\/9180\/2788\/products\/23550440c4ccab05e4fc1ebd85e742cc_grande.jpg?v=1622707545" }, "url_handle": "\/products\/converse-chuck-taylor-all-star-ii-hi?variant=40023416471716&recommended_by=collection&recommended_code=5", "currency": "$", "_id": "3927216", "id": "C-02-black-13", "stock_quantity": 5, "fashion_colors": [ "black" ], "params": [ { "key": "Size", "values": [ "13" ] }, { "key": "Color", "values": [ "black" ] } ], "group_id": "04" } ], "html": "