algolia - ゆるふわキャンパー

algolia

A collection of 8 posts

Improved blog search page

Improved blog search page

このブログの内容は Algolia にインデックスし Algolia API を使って検索できるようにしています。自分の記事を見返すタイミングがしばしばあるので、その時はこれを使い Alfred ワークフローからインクリメンタルサーチして目的の記事を開いたり、あと地味にブログ内の静的ページとして検索ページを用意したりしています。 * algolia - ゆるふわキャンパー今回はそのブログ内の検索ページを改善してみました！ Before: After: 検索ページを設定してから長いこと (3 年くらい) 素朴な見た目のままだったのですが、しばらくみない間に Algolia のドキュメントが充実してきてフロントエンドさっぱりわからないマンでもなんとかチュートリアルを元にそれっぽいものができるような状態になっていたので (ありがたい 🙏) 今回検索ページの改修に踏み切ってみたのでした。主に以下の点で改善されています。 😊 * 検索結果が大きく、見やすく表示されるようになった。 * 記事の概要を出すようにした。 * 記事のサムネイル画像を出すようにした。

Search my blog posts with Alfred

Search my blog posts with Alfred

自分のブログ記事を検索する Alfred ワークフローを作った。 * GitHub - lorentzca/alfred-myblog-workflow: Search blog posts. 「前困った MySQL ログインのあれなんだっけ」「Terraform のあれなんだっけ」みたいに以前自分で調べたことを改めて参照したいことがちょくちょくあるので作りました。ブログ内にも検索用の固定ページはありますが、 Alfred のほうがブラウザを開くまでもなくシュッと使えるのでワークフローにしました。私のブログは Algolia にインデックスを作っていて、 API で全文検索できるようにしているので、それを叩いている感じです。 Go の Algolia 公式クライアントを使っています。 * GitHub - algolia/algoliasearch-client-go: Algolia Search API Client for Go Algolia の使い方から検索方法等の諸々については以下。 * algolia - ゆるふわキャンパー一応

Search Algolia index data with Golang client

Search Algolia index data with Golang client

このブログの記事検索にAlgoliaを使っています。 * algolia - ゆるふわキャンパー Algoliaはjsonでデータをクラウドにアップロードし、APIで検索したいキーワードを投げて結果を得ることの出来るサービスです。 AlgoliaはREST API以外にも一通り有名どころの言語のライブラリを提供しています。今回はGolangのライブラリを使用して、私のブログの記事を検索してjsonで結果を得るところまでやってみます。準備としてとりあえずalgoliasearchをインストールしておきます。 go get github.com/algolia/algoliasearch-client-go/algoliasearch 簡単なことからやってみるまずはQuick Startに従ってサンプルデータの検索をやってみます。 Quick Startではデータを登録する例から始まっていますが、今回はサンプルデータを手で直接Algoliaに登録しちゃいます。 contactsという名前でIndexを作成します。早速登録したデータに

Scroll dropdown menu

Scroll dropdown menu

以前algoliaを使ってblogに検索窓を設置しました。 * Trying out Algolia * Install Algolia Search on Ghost * Completion of Algolia in-site search box 無事検索出来るようになって嬉しいのですが、「検索結果7個はちょっと少ない...。」そこで検索結果を増やした所、「ドロップダウンメニューが画面外まで伸びてしまう...。」と言う問題に直面したので、ドロップダウンメニューをスクロールさてみました。やり方意外に簡単で、CSSだけで出来ました。overflowを使い、ボックスが250px以上の場合はスクロールさせるようにしました。良いやり方なのかはわからんちん。検索結果は7個から21個にしました。 background-color: #fff; border: 1px solid #999; border-top: none; + overflow: scroll; +

Completion of Algolia in-site search box

Completion of Algolia in-site search box

Trying out Algoliaで敗北しInstall Algolia Search on Ghostで中途半端ながらにAlgoliaを使ったサイト内検索ボックスを設置してきました。 Install Algolia Search on Ghostで書いたように検索結果を強調表示してしまうがゆえに、urlにemタグが挿入されてしまうのが問題でした。今回それが解決できたので書く！解決方法正規表現でemタグを除去。思いつきでjsの文字列置換があるか調べたらあった！ので、それを使った。 * String.prototype.replace() - JavaScript | MDN このように書いていたのを、 suggestion: function(suggestion) { document_root = "https://ghost.ponpokopon.me/"; slug = suggestion._highlightResult.slug.value; url = document_roo

Compare in-site search engine

Compare in-site search engine

blogにサイト内検索を設置するために幾つか試してきたので比較する。試してきたのは以下の4つ。 * Swiftype - Site search and enterprise search * Algolia | Hosted cloud search as a service * googleカスタム検索 * GitHub - jamalneufeld/ghostHunter: A Ghost blog search engine 試してみた時のメモ(googleとghostHunterはメモってない…)。 * Use swiftype in ghost * Install Algolia Search on Ghost それぞれ導入のしやすさ、見た目、検索の速さ、検索結果の正確さ、お金で比べた！ * 導入のしやすさ: 導入の簡単さを示す * 見た目: 検索ボックスや検索結果の見た目の良さ * 検索の速さ: 検索結果が早く返ってくるかどうか * 検索結果の正確さ: 欲しい情報が返ってくるかどうか

Install Algolia Search on Ghost

Install Algolia Search on Ghost

Trying out Algoliaでは大敗北しましたが、今回無理やり検索結果に一致したページに飛べるように半分なった！のでメモ。やりたいこと！検索ボックスで検索した結果としてタイトルの文字列を返したい。またそのタイトルはタイトルの記事へのリンクになって欲しい。検索ボックスの見た目を変えたい。トップページの記事一覧のように画面に合わせてボックスの大きさを伸縮したい。また、Free版を使っているので、algoliaのロゴを検索ボックス付近に設置しなければならない。やったこと JS * suggestion._highlightResult..valueで検索したときに返すattributeを決定できるみたいなので、検索結果に表示する文字列はsuggestion._highlightResult.title.valueで良い * ある文字列をリンクにするためにはlink()メソッドが使えそう * link先のurlはhttps://ghost.ponpokopon.me/とsuggestion._highlightResul

Trying out Algolia

Trying out Algolia

2016/12/28追記 algoliaシリーズ * Install Algolia Search on Ghost * ghostブログにalgoliaの検索ボックスを導入する AlgoliaというSaaSの全文検索エンジンが良さそう。 * Algolia | Hosted cloud search as a service 料金体系。 * 無料 * 有料に比べ機能に制約がある * サイトに設置する際はAlgoliaのロゴを一緒に表示しなければならない * 有料 * 無料版に比べなんか多機能な感じ(こなみ) ブログに設置できないか試してみた。が、挫折！！！！！！！！！！！！！！！ Algoliaの設定自体はできたんだけど、それをうまくサイトに組み込んで検索結果から該当のページに飛ばす部分はユーザーに任されていて、そこで死んだ。でもやったところまではメモる。以下の内容はだいたいチュートリアルの流れに従っている。 Algoliaの設定 Algoliaの仕組みは、検索対象にしたいデ