グリッド

グリッドは、サプライヤーと在庫のリストを表し、インタラクティブで予約可能なグリッドUIを通じて詳細を表示します。グリッドは、キュレーションリストや保存された検索からの任意の在庫を表示することができます。ユーザーは、個別のカードと同じ方法でグリッドとやり取りしますが、1つの追加機能があります：

もっと見るボタンをクリックしてグリッドをページネーションできます（さらにアイテムがある場合）。

上は、部屋タイプカードのリストを表示するグリッドの例です。

この記事の残りの部分では、グリッドの作成、カスタマイズ、ユーザーへの公開方法を説明します。

グリッドの種類

グリッドには3種類あります：

キュレーションリストに基づくグリッド。
保存された検索に基づくグリッド。
ロケーションとソート基準に基づくグリッド（ランキンググリッド）。

キュレーションリストグリッド

これは、キュレーションリストに収集した在庫を使用し、そのリストを予約可能な旅行在庫に変換してユーザーに表示するグリッドです。

作成

メインナビバーから Inventory > Curated Lists に移動します。この例では、Favorites リストを使用します。まだ Favorites に何も追加していない場合は、Searchで方法を学んでください。

Favorites リストの Actions ボタンをクリックします。
Create a grid ボタンをクリックします。
新しいウィンドウが表示され、グリッドの名前を入力できます。以下を参照。
OK ボタンをクリックして続行します。

グリッドが作成されました。メインナビバーから Tools > Grids に移動し、Curated Grids タブをクリックして新しいグリッドを確認してください。

カスタマイズ

フォームでは、以下の方法でグリッドをカスタマイズできます：

グリッドの内容を覚えやすい名前を付けます。
このグリッドに適用したいカスタマイズを選択します。
ユーザーが最初に見るカードの表面を選択します。デフォルトはその在庫のネイティブフェイスです。
カードに使用するバッジを選択します。バッジは、エコフレンドリーなどの集約指標で在庫を比較するのに役立ちます。
Webクローラーが使用するキーワードをカンマ区切りで追加します。
ユーザーに表示したい言語でタイトルと説明を追加します。
Save ボタンをクリックして続行します。

上の画像は、グリッドに利用可能なすべてのアクションを示しています：

Update グリッドの設定を更新します。
Add to WinkLinks グリッドをWinkLinksアカウントに追加します。
Embed このグリッドをGridとしてウェブサイトに埋め込む方法を表示します。
Use with WordPress 当社のWordPressプラグインを使ってこのグリッドをウェブサイトに埋め込む方法を表示します。

以下でこれらのオプションのいくつかを詳しく説明します。

埋め込み

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="LIST"
       id="9a212b5e-62a7-11ef-ac3f-42004e494300"
    ></wink-content-loader>

    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>

    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

グリッドをサイトに埋め込む方法は以下の通りです：

3行目はWinkのスタイルをサイトに埋め込む方法を示しています。
6〜9行目は、wink-content-loader Webコンポーネントを使い、コード用にグリッドを取得する方法を示しています。
11行目はJavascriptをサイトに埋め込む方法を示しています。
13行目は、wink-app-loader Webコンポーネントを使い、ページレベルの設定を取得する方法を示しています。

保存された検索グリッド

これは、保存された検索クエリの在庫を使用し、検索結果を予約可能な旅行在庫に変換してユーザーに表示するグリッドです。

作成

メインナビバーから Inventory > Saved searches に移動します。まだ保存された検索を作成していない場合は、Searchで方法を学んでください。

保存された検索の Actions ボタンをクリックします。
Create a grid ボタンをクリックします。
新しいウィンドウが表示され、グリッドの名前を入力できます。以下を参照。

OK ボタンをクリックして続行します。

グリッドが作成されました。メインナビバーから Tools > Grids に移動し、Saved Search Grids タブをクリックして新しいグリッドを確認してください。

カスタマイズ

フォームでは、以下の方法でグリッドをカスタマイズできます：

グリッドの内容を覚えやすい名前を付けます。
このグリッドに適用したいカスタマイズを選択します。
ユーザーが最初に見るカードの表面を選択します。デフォルトはその在庫のネイティブフェイスです。
カードに使用するバッジを選択します。バッジは、エコフレンドリーなどの集約指標で在庫を比較するのに役立ちます。
Webクローラーが使用するキーワードをカンマ区切りで追加します。
ユーザーに表示したい言語でタイトルと説明を追加します。
Save ボタンをクリックして続行します。

埋め込み

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="LIST"
       id="be3130d5-62a7-11ef-ac3f-42004e494300"
    ></wink-content-loader>

    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>

    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

グリッドをサイトに埋め込む方法は以下の通りです：

3行目はWinkのスタイルをサイトに埋め込む方法を示しています。
6〜9行目は、wink-content-loader Webコンポーネントを使い、コード用にグリッドを取得する方法を示しています。
11行目はJavascriptをサイトに埋め込む方法を示しています。
13行目は、wink-app-loader Webコンポーネントを使い、ページレベルの設定を取得する方法を示しています。

ランキンググリッド

作成

Tools > Grids に移動し、Ranked Grid タブをクリックしてランキンググリッドを作成します。Create ranked grid ボタンをクリックしてください。

カスタマイズ

フォームでは、ランキンググリッドを以下の方法でカスタマイズできます：

目的地を選択します。例：東京。
グリッドの内容を覚えやすい名前を付けます。例：東京のエコフレンドリーホテル。
このグリッドに適用したいカスタマイズを選択します。
ユーザーが最初に見るカードの表面を選択します。デフォルトはその在庫のネイティブフェイスです。
物件をソートする特性を選択します。例：エコフレンドリー度。
Webクローラーが使用するキーワードをカンマ区切りで追加します。
ユーザーに表示したい言語でタイトルと説明を追加します。
Save ボタンをクリックして続行します。

ランキンググリッドを保存すると、ランキンググリッドページにリダイレクトされ、グリッドは世界に共有する準備が整います。

上の画像は、ランキンググリッドに利用可能なすべてのアクションを示しています：

Update グリッドの設定を更新します。
Add to WinkLinks ランキンググリッドをWinkLinksアカウントに追加します。
Embed このグリッドをGridとしてウェブサイトに埋め込む方法を表示します。
Use with WordPress 当社のWordPressプラグインを使ってこのカードをウェブサイトに埋め込む方法を表示します。

以下でこれらのオプションのいくつかを詳しく説明します。

埋め込み

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="RANKED"
       id="2483d55e-62a5-11ef-ac3f-42004e494300"
    ></wink-content-loader>

    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>

    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

グリッドをサイトに埋め込む方法は以下の通りです：

3行目はWinkのスタイルをサイトに埋め込む方法を示しています。
6〜9行目は、wink-content-loader Webコンポーネントを使い、コード用にランキンググリッドを取得する方法を示しています。
11行目はJavascriptをサイトに埋め込む方法を示しています。
13行目は、wink-app-loader Webコンポーネントを使い、ページレベルの設定を取得する方法を示しています。

API

グリッドを管理したい開発者は、Developers > API > Inventoryをご覧ください。

さらに読む

当社のWeb Componentsコレクションについて詳しく学ぶ。
Wink WordPressプラグインについて詳しく学ぶ。