Chrome DevToolsの拡張による検索アルゴリズム改善サイクルの高速化
Helpfeelエンジニアのniboshiです
Helpfeel DevToolsという検索アルゴリズム開発者向けのChrome拡張を作ってます
Helpfeel検索アルゴリズムの内部情報を可視化するツールです
アジェンダ
Helpfeel検索アルゴリズムの特徴と課題
Helpfeel DevToolsが何を解決するのか
Chrome DevTools拡張ってどうやるの
Helpfeel DevToolsの設計と実装のポイント
Helpfeel検索アルゴリズムの特徴
クライアントサイド検索
最初に全てのデータセットをダウンロードして、ブラウザ上で検索アルゴリズムを実行
クエリの柔軟な解釈
単なる文字列一致だけでなく、動詞抽出や曖昧検索を駆使
おお〜分かりやすい
詳しくは本当に役立つFAQ検索システムを目指してを参照
検索アルゴリズム改善の難しいところ
検索結果の根拠がわからない
本番データで検索しないと原因特定が難しい
contactが並び替えると
nota になってマッチしているの面白いこりゃわからんなー 
なるほど…w
いや、並び替えじゃなくて
nta と nota じゃないか？たぶんそうですね
そうですね。1文字欠損でのマッチですね。 
なるほど
こうなったらいいな
Elementsパネルのように検索結果の詳細をDevToolsで見れるといいのでは?
↓極めて漠然としたアーキテクチャ図
Redux DevToolsで学ぶDevTools開発
Redux DevToolsはReduxのActionを可視化するChrome拡張
今回実現したいこととほぼ同じ！
コードを読むとChrome DevToolsの仕組みがわかりそうなのでやっていきましょう
Chrome DevTools登場人物紹介
Content Script: WebページのDOM操作などが行える
Background Script: Chrome拡張インストール後に常時起動しているプロセス
Panel: DevToolsに表示されるタブみたいなやつ
Redux DevToolsのアーキテクチャ
※ Redux DevToolsはChrome拡張のv2アーキテクチャですが、現在はv3が推奨されています
Web Pageから直接Panelにメッセージを送ることはできない
Panel上のUIは普通のWebとして実装できる
Redux DevToolsのUIはReactとReduxで実装されている
DevToolsのDevToolsを開いてデバッグできる！
w
今一文でDevToolsって5回ぐらい言ってた
NetworkパネルみたいにChromeの情報を取得したい時はどうするの?
Chrome DevTools Protocolを使ってChromeとWebSocket経由で通信
つまり任意の言語から利用できる
CMコーナー
たいへんかわいらしい表紙 by
GoでDevTools Protocolを叩いて遊ぶ本です
Helpfeel DevToolsの実装
↓極めて具体的なアーキテクチャ
基本的にRedux DevToolsを踏襲
Reduxは使っていないのでbackground scriptとDevTools Panelの間はPortによるmessage passingでコミュニケーション
イベント設計
Helpfeel Devtoolsでは2種類のイベントを定義しています
マッチイベント
match.json{
"type": "MATCH", // マッチイベント
"reason": "PERFECT", // 完全一致
"faqs": ["スタバには週何回行きますか", "スタバのおすすめフラペチーノはなんですか"]
}検索結果がなぜ表示されているのかの分析等に利用する
ライフサイクルイベント
検索の開始/終了、クエリの前処理完了、etc...
lifecycle.json{
"type": "LIFECYCLE", // マッチイベント
"reason": "QUERY_PREPROCESS/START", // クエリの前処理開始
"query": "スタバ"
}どのフェーズで問題が起きているのかの特定に利用する
完成
検索結果がリアルタイムに可視化される
Backgroundでハンドリングされたイベントの様子
DevToolsが開発フローをどう改善したか
Before
意図しない挙動が報告されると、アルゴリズム職人が勘と経験で直していた
検索アルゴリズム内部のどのフェーズで問題が発生しているのかを把握するまでに時間がかかっていた
After
アルゴリズムにそこまで詳しくなくても、検索結果の根拠が分かるようになった
チーム内での検索アルゴリズムの理解が一気に進みましたよね。これはすごかった
バグ報告から10分で原因特定ができるようになった
簡単な修正であれば1日でPRの作成＆リリースができるようになった
たしかにログ出すだけでも調査できないことはないですね
ただ検索1回分だけでも割と情報量が多いので、何らかの形で可視化したほうが楽かな〜とは思います
圧倒的成果ですごい
すごい 
まとめ
Helpfeelの検索アルゴリズムを可視化するChrome DevTools拡張を作っている
DevTools拡張開発はおなじみのWebテクノロジーで開発できて意外とハードルが低い
Redux DevToolsのような本体でイベント発行→DevToolsで可視化というスキームを利用して、Webアプリの挙動が簡単に把握できるようになった
検索アルゴリズムをどんどん改善できるようになってハッピー
補足すると、niboshiさん入社初月（というか2週間ぐらい）で突然このツールが爆誕して開発チームに衝撃が走りました
Helpfeel以外にも応用できる範囲すごそう
