「あのサイトどこいったっけ？」を解決するChrome拡張「Custom Browsing History」を作りました。
自己紹介
はじめまして、うめちゃんです。
仕事と趣味でサービス開発をしています。
プロフィール: https://umechanhika.github.io/
この記事では、私が作成した「カスタマイズ可能な閲覧履歴、CustomBrowsingHistory」というChrome拡張機能を紹介させていただきます。
制作背景
このサービスは、私が業務の中で感じていた課題を解決するために作成しました。
IT企業に勤めている方なら少なからずやっていると思うのですが、私は普段仕事をする時に「業務要件が定義された資料」や「デザインの資料」、「開発中にググって見つけたトラブルシューティングの記事」など、様々なウェブ上の資料やサイトを閲覧します。
これらの資料やサイトに関して、私は下記のような課題を感じていました。
-
ブックマークする程ではないけど、後で見返したくなる時がある
私が仕事をしていてよくあるのが、「前に見せてもらった他部署のGoogleスライド資料ってどこにあったっけ？」とか「あの時見つけたトラブルシューティングの記事をまた見たいんだけどどうやって探そう」とか「先々週リリースした案件の仕様を見返したいんだけどどっから辿れるっけ？」とかとか、ブックマークする程ではないけど後で見返したくなる資料というのが度々出てきて、その度にそれらを探すのに苦労していました。 -
あるサイトの閲覧履歴を見るためには、一度そのサイトを開かないといけない
例えば、私が仕事でよく使う社内ドキュメントをまとめているサイトConfluence（以下、コンフル）ですが、コンフルの閲覧履歴を見るには一度コンフルを開かないといけません。
本来であれば直接コンフルの閲覧履歴に飛びたい、もっと言うと直接見返したいページに飛びたいのに、一度ブラウザで新規タブを開きコンフルにアクセスしさらにそこから閲覧履歴をタップしないといけないという手間が発生することに面倒臭さを感じていました。 -
サイト固有の閲覧履歴ページが使いづらい
例えば、私が仕事でよく使うデザインツールFigmaには閲覧履歴ページ(Recentページ)があります。これ自体は最近閲覧したファイルが見れていいのですが、Figmaのデザイン上各ファイルにマウスカーソルをホバーさせないとファイルタイトルが表示されないため、Recentページ内でタイトルを文字列検索して特定のファイルを探そうとしてもどのファイルが検索に引っ掛かったかぱっと分からないため、非常に使いづらさを感じていました。
これらの課題を解決するために、私は今回「カスタマイズ可能な閲覧履歴、CustomBrowsingHistory」を作成しました。
サービス紹介
CustomBrowsingHistoryは一言で表すと、前述の通り「カスタマイズ可能な閲覧履歴」です。
特定のサイトをオプションから設定することで、そのサイトだけに絞った閲覧履歴を見ることができます。
よく見るサイトや、閲覧履歴機能がないサイトを設定することで、ツールバーのアイコンからすぐにそのサイトの閲覧履歴を見ることができます。
設定情報はGoogleアカウントに紐付いているので、別の端末でこの拡張機能をインストールした場合も同じ情報を見ることができます。
サイトの設定にはURLのhost, path, queryを指定します。
サイトによっては特定ページを表すURLがpathで一意になっていたりクエリパラメータで一意になっていた様々だったので、それらを考慮してこのような仕様に決めました。
こうすることで例えば「会社のドキュメントツールの特定プロジェクト配下のみの閲覧履歴」だったり「よく見る技術ブログのみの閲覧履歴」を設定することができます。
サイトの設定をした後にツールバーから拡張機能のアイコンをタップすると、指定したhost, path, queryに当てはまるサイトの過去3ヶ月間の閲覧履歴が表示されます。
技術選定・実装詳細
-
実装言語には生HTML, CSS, JavaScriptを利用
Chrome拡張機能は、HTML, CSS, JavaScriptだけで作成できます。
今回は要件が単純だったことと、要件さえ決まっていれば使う道具(フレームワーク等)は後からいくらでも入れられると考え、HTML, CSS, JavaScriptを生のまま実装しました。 -
閲覧履歴にはchrome.historyを利用
このサービスはChromeが提供しているユーザーの閲覧履歴を取得することができるAPIchrome.history APIを利用しています。（この拡張機能をインストールする際に閲覧履歴を取得する旨が表示されると思います。）
しかし、元々は閲覧履歴を自前で実装しようとしていました。
こちらもChromeが提供しているユーザーが表示しているサイトの情報が取得できるchrome.webNavigation APIを使って閲覧情報を都度ローカルに保存しようとしていたのですが、このAPIから取得できる情報に時々欠損がありタイトルが取れないことがあったりfaviconが取れないことがあったりしたことと、ローカルに保存できるデータ量にも上限があったため、chrome.historyに変更しました。 -
オプション設定にはchrome.storage.syncを利用
Chrome拡張機能のデータ保存にはchrome.storage APIが利用できます。
chrome.storage APIにはlocalとsyncの2種類が存在し、localはブラウザのローカルストレージに、syncはChromeのデータ共有機能を用いてGoogleアカウントに紐付けてデータが保存されます。
この拡張機能ではsyncを利用することで、別の端末のChromeに拡張機能をインストールしたとしても同じ設定を引き継げるようにしています。 -
chrome.runtime.onInstalledでプリセットデータを設定
このサービスの最大の弱みなのですが、このサービスはユーザーの設定に基づいて情報を提供するタイプの機能なので、ユーザーがオプションを設定しないと何もできません。
その欠点を少しでも補うように、初回インストール時に何ができるサービスなのかユーザーが理解するのを助けるために、インストール時点でオプションが既に1つ設定されています。（Google検索の履歴を設定しています。）
chrome.runtime.onInstalledを使うことで、拡張機能のインストールイベントをコールバックで受け取ることができるため、このコールバック内でプリセットデータを設定するようにしています。
おわりに
今回の記事はいかがだったでしょうか。
ぜひコメント欄に感想などを書いていただけると嬉しいです！
それと、ぜひこのChrome拡張機能を使ってみてください！
きっとみなさんのお役に立てるはずです。
それでは、最後まで読んでいただいてありがとうございました！
最後にリンクを貼って終わりにしたいと思います。
Discussion
めっちゃ使い心地が良くて僕でも使いこなせました。
神ツールだって思ってます。
@taka_power8000 さん
コメントありがとうございます！
このようなポジティブなコメントが継続開発の支えになります、本当にありがとうございます！
今後も改善を続けていきますので、よろしくお願いいたします。