2018/7/12
Tag : search algolia

Algolia試してみる

Algolia の名前だけは聞いてたけど、、、

Algolia | Fast, Reliable and Modern Search and Discovery
https://www.algolia.com/

ちょっと触ってみる。

検索用JSONのテンプレート

[
{% for entry in craft.entries.section('article') %}
    {
    "title": "{{ entry.title }}",
    "date": "{{ entry.postDate|atom }}",
    "permalink": "{{ entry.url }}",
    "text": "{{ entry.contentBody | striptags | replace('/\\n/','') | json_encode }}"
    }{% if loop.last %}{% else %},{% endif %}
{% endfor %}
]

とりあえずこれで出力して、その JSON を保存して Algolia の管理画面からアップロード。

あとはチュートリアルにあったのそのまま

Building an instant search result page | Tutorials | Algolia Documentation
https://www.algolia.com/doc/tutorials/search-ui/instant-search/build-an-instant-search-results-page/instantsearchjs/#html

HTML

<!doctype html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.min.css">
  <!-- Always use `2.x` versions in production rather than `2` to mitigate any side effects on your website,
  Find the latest version on InstantSearch.js website: https://community.algolia.com/instantsearch.js/v2/guides/usage.html -->
  <link rel="stylesheet" type="text/css" href="/css/search.css">

<script type="text/html" id="hit-template">
  <div class="hit">
    <div class="hit-content">
      <h2 class="hit-name"><a href="{{permalink}}">{{title}}</a></h2>
    </div>
  </div>
</script>
</head>
<body>
  <header>
    <div>
       <input id="search-input" placeholder="Search for products">
       <!-- We use a specific placeholder in the input to guides users in their search. -->
    </div>
  </header>
  <main>
      <div id="hits"></div>
      <div id="pagination"></div>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.min.js"></script>
  <script src="/js/app.js"></script>
</body>

CSS

https://github.com/algolia/examples/blob/master/instant-search/instantsearch.js/assets/style.css

の内容をそのまま

JS

var search = instantsearch({
  // Replace with your own values
  appId: 'T7UM1NWU2W',
  apiKey: '32e0fb4b50e143ff3c9b33b1d7285ab8', // search only API key, no ADMIN key
  indexName: 'asset.mersy418.com',
  urlSync: true,
  searchParameters: {
    hitsPerPage: 10
  }
});

// Add this after the previous JavaScript code
search.addWidget(
  instantsearch.widgets.searchBox({
    container: '#search-input'
  })
);

// Add this after the previous JavaScript code
search.addWidget(
  instantsearch.widgets.hits({
    container: '#hits',
    templates: {
      item: document.getElementById('hit-template').innerHTML,
      empty: "We didn't find any results for the search <em>\"{{query}}\"</em>"
    }
  })
);

// Add this after the other search.addWidget() calls
search.addWidget(
  instantsearch.widgets.pagination({
    container: '#pagination'
  })
);

search.start();

とりあえず動いた

https://asset.mersy418.com/search.html

更新したら都度 Algolia にデータ投げるとかいろいろやることあるけどとりあえず。
まぁ、サクサクですね。

← 記事一覧に戻る