概要

ユーザーが検索窓に任意のキーワードを入力し、アイテムを探すことが可能

主な利用箇所

実装方法

リクエストパラメータ：検索情報取得API

パラメータ	用途
p	検索文字列
c	ユーザを特定するパラメータ分析を利用した機能を使用する場合は指定が必要 [本パラメータを必要とする機能の例] ・人気キーワード、0件ヒットキーワード、もしかして、など

javascript
https://xxx/xx.xml?q=ワイン&c=1234512345

レスポンス

xml
<response>
  <query>
    <q>ワイン</q>
    <limit>10</limit>
    <page>1</page>
    <sort nil="true"/>
    <qf nil="true"/>
    <hl>0</hl>
    <mm nil="true"/>
    <fq nil="true"/>
    <facet>true</facet>
    <facet_limit nil="true"/>
    <stats>false</stats>
    <suggest_item_test nil="true"/>
    <el>true</el>
    <d>10</d>
    <sf nil="true"/>
    <pt nil="true"/>
    <sbd nil="true"/>
    <gf nil="true"/>
    <glimit>1</glimit>
    <gpage>1</gpage>
    <gsort nil="true"/>
    <gt>true</gt>
    <df nil="true"/>
    <ff nil="true"/>
    <spt nil="true"/>
  </query>
  <result>
    <total>5</total>
    <items>
      <item>
        <id>wine_c</id>
        <title>ル・プティ・シュヴァル／ワイン</title>
        <url>
          <value>/products/1</value>
        </url>
        <price>38000.0</price>
        <img_url>
          <value>https://xxx/xxx.jpg</value>
        </img_url>
        <score>1.8117082</score>
      </item>
      〜省略〜
    </items>
    <facet_fields>
      <facet_field field="ctg1">
        <option value="14" count="5"/>
        <option value="18" count="5"/>
        <option value="19" count="3"/>
        <option value="20" count="1"/>
        <option value="21" count="1"/>
      </facet_field>
    </facet_fields>
    <facet_field_names>
      <facet_field_name field="ctg1">カテゴリー</facet_field_name>
    </facet_field_names>
    <suggestions nil="true"/>
    <ranges>
      <range field="price" min="20.0" max="356000.0"/>
    </ranges>
    <relation_words>
      <relation_word word="wain">ブドウ</relation_word>
    </relation_words>
    <relation_contents>
      <relation_contentable>
        <relation_content>
          <title>ワイン入荷</title>
          <url>https://xxx/announcements/4</url>
          <text/>
          <image_url>https://xxx/xxx.jpg</image_url>
        </relation_content>
      </relation_contentable>
    </relation_contents>
    <suggest_items>
      <suggest_item>
        <id>wine_c</id>
        <title>ル・プティ・シュヴァル／ワイン</title>
        <url>
          <value>/products/1</value>
        </url>
        <price>38000.0</price>
        <img_url>
          <value>https://xxx/xxx.jpg</value>
        </img_url>
        <suggest_item_id>1047</suggest_item_id>
      </suggest_item>
    </suggest_items>
  </result>
  <status>0</status>
</response>

JavaScript実装例

html
<script id="api"></script><!--リクエスト用-->
<form id="search" method="GET">
  <input type="text" id="keyword" name="q" >
  <button type="submit">検索</button>
</form>

javascript
// formの遷移を無効化し検索を実行
window.onload = function() {
  var form = document.querySelector('form');
  form.addEventListener('submit', function (event) {
    event.preventDefault();
    search(document.getElementById('keyword').value);
  });
}();

// search関数を実行することで検索情報取得APIを取得可能。
function search(keyword) {
  var search_api_url = "https://<ドメイン>/<サービス名>/search.json";
  
  var searchParams = new URLSearchParams();
  searchParams.set("q", keyword);
  searchParams.set("callback", "doCallback");
  var sc = document.createElement("script");
  sc.type = 'text/javascript';
  sc.src = search_api_url + "?" + searchParams.toString();
  sc.id = 'tmp_api';
  var parent = document.getElementById("api");
  parent.parentNode.insertBefore(sc,parent);
  document.getElementById('tmp_api').remove();
}

function doCallback(response) {
  console.log(response);
  // 以下、表示処理
}

JavaScriptでcパラメータを指定する場合の実装方法

javascript
// formの遷移を無効化し検索を実行
window.onload = function() {
  var form = document.querySelector('form');
  form.addEventListener('submit', function (event) {
    event.preventDefault();
    search(document.getElementById('keyword').value);
  });
}();

// search関数を実行することで検索情報取得APIを取得可能。
function search(keyword) {
  var search_api_url = "https://<ドメイン>/<サービス名>/search.json";
  
  var searchParams = new URLSearchParams();
  searchParams.set("q", keyword);
  searchParams.set("callback", "doCallback");
  var sc = document.createElement("script");
  sc.type = 'text/javascript';
  sc.src = search_api_url + "?" + searchParams.toString();
  sc.id = 'tmp_api';
  var parent = document.getElementById("api");
  parent.parentNode.insertBefore(sc,parent);
  document.getElementById('tmp_api').remove();
}

function doCallback(response) {
  console.log(response);
  // 以下、表示処理
}

var cookiename = "c";

function isLocalStorageAvailable() {
  if (!('localStorage' in window)) return false;
  try {
    localStorage.test = '';
    return true;
  } catch (e) {
    return false;
  }
}

function getCookie(key) {
  if (!key) return;
  var cookies = document.cookie.split(/; */);
  for (var i = 0; i < cookies.length; i++) {
    var entry = cookies[i];
    var keyValue = entry.split('=', 2);
    var k = keyValue[0];
    if (k != key) continue;
    return decodeURIComponent(keyValue[1]);
  }
  return null;
}

function setCookie(key, value, options) {
  if (!options) options = {};
  var values = [];
  if (value === null || value === undefined) {
    value = '';
    options.expires = -1;
  }
  values.push(key + "=" + encodeURIComponent(value));

  // expires
  var expires = new Date();
  if (typeof options.expires == 'number') {
    expires.setTime(expires.getTime() + options.expires * 24 * 60 * 60 * 1000);
  } else if (options.expires && options.expires.toUTCString) {
    expires = options.expires;
  } else {
    expires.setTime(expires.getTime() + 2 * 365 * 24 * 60 * 60 * 1000);
  }
  values.push("; expires=" + expires.toUTCString());

  // path
  if (options.path) {
    values.push("; path=" + options.path);
  }

  // domain
  if (options.domain) {
    values.push("; domain=" + options.domain);
  }

  document.cookie = values.join('');
}

function getLocalStorageC() {
  if (!('localStorage' in window)) return;
  if (!isLocalStorageAvailable()) return false;
  var c = localStorage.getItem(cookiename);
  if (c) return c;
  c = getCookie(cookiename);
  if (!c) c = (parseInt(Math.random()*100000000000, 10)).toString();
  localStorage.setItem(cookiename, c);
  return c;
}

function getCParameter() {
    var cookie = getLocalStorageC() || getCookie(cookiename);
    if (cookie == null) {
      var expire = new Date();
      expire.setTime(expire.getTime() + (1000 * 60 * 60 * 24 * 365 * 2));
      c = (parseInt(Math.random()*100000000000, 10)).toString();
      setCookie(cookiename, c, {path: '/', expires: expire});
      cookie = c
    }
    return cookie;
}

フリーワード検索

概要

主な利用箇所

実装方法

リクエストパラメータ：検索情報取得API

レスポンス

JavaScript実装例

JavaScriptでcパラメータを指定する場合の実装方法