会社ではesaで 日報/yyyy/mm/dd/誰それ みたいな感じのカテゴリで日報を書いています。が、「あれ、昨日の日報何書いたっけ？」みたいに前後日の日報が見たくなることがありました。（日報を前日の記事のコピーから書いていて、リンクを消していない場合は多分そのリンクをたどればいいと思うのですが、私は消してしまっているので）
というのが私以外にも社内に何人かいた（はず）ので、それを助けるようなesaの拡張を作りました。
どんな拡張か
https://chrome.google.com/webstore/detail/yyyymmddesa/cjnieklajijeakoommahokclaegffdai
yyyymmddesa （やまだえさ）という名前です。私は yyyymmdd のことを（むかしtwitterか何かで見た）「やまだ形式」と呼んでいるので、そこから名前をつけています。
リンク先見るといきなりバージョンが 0.2.1 ですが、これは0.1.0系をリンク限定公開（リンクを知っている人だけが見れる）ようにして社内にだけURLを展開していたからです。とりあえず動くものをやっつけで作り、ちゃんと作り直したら一般公開しよう…と思っていたら半年以上かかってしまいました :innocent:
この拡張は何をするかというと、esaで yyyy/mm/dd を含むカテゴリの記事を開いた時、その記事を作った人のそれより前の日付の記事と、それより後の日付で存在する記事のリンクを表示します。たとえば 日報/2018/11/11/hyoshihara04 , 日報/2018/11/12/hyoshihara04 , 日報/2018/11/13/hyoshihara04 というカテゴリの記事があった時、 日報/2018/11/12/hyoshihara04 の記事を開くと 11/11の記事と11/13の記事のリンクが表示されます。ちょうど下の画像のような感じです。
なお、前後の日付は連続していなくてもリンクは表示されます。例えば 11/12の次の記事が12/01とかであっても問題ないようにしています（正確には前後2ヶ月間以内であれば表示されます）
使い方
- esaを開いて、
Settings>Applicationsを開き、Personal access tokensでtokenを作成する（read権限だけで問題ないです） - 拡張をインストール
- オプションページを開く
esa tokenのところに先程作ったtokenを貼り付けてsave
これで、該当する記事を開いて待つと、リンクが表示されるはずです。
前後の記事はesaのAPIを使って取得しているのですが、前後2ヶ月分をまとめて取得して chrome.storage にキャッシュとして保存しているので、2回目以降はすぐに表示されます。もしキャッシュに該当する記事がなければ、APIで取得し直します。もし期待したリンクが出てこないなど挙動がおかしいところがあったら、オプションのページからキャッシュをクリアしてください。それでもだめならバグだと思うので issue登録 をお願いします。
今後の予定
オプションページがやっつけなのでなんとかしたいです。
あとesa tokenは、もし可能ならesaのOAuthの仕組みを使ってみたいなと思っています。
実装について
- 記事のIDはURL、カテゴリと作成者は記事ページのDOMから取得しています
- IDを取得したら、カテゴリなどはAPIで記事の情報を取得する方法と（今も）ちょっと迷っています
- 今のやり方にしているのは、画面に見えているのをそのまま使ったほうがAPIのリクエスト減らせて結果として動作も速いからです
- ただ、これだとUIの変更に弱いので硬い方にしたい気持ちもあります
- 0.1.0系だともうちょっと細かめに記事を取得したりキャッシュを保存したりしていたのですが、色々細かい場合に対応しにくかった（そしてテストが大変だった）ので、0.2.0系では「今見ている記事の月の前後2ヶ月分」とざっくり取得するようにしました
- カテゴリの日付と記事作成日が比例するわけではない（「昨日の日報書き忘れてた」などのパターンがあるので）ため、カテゴリの日付を取得したら前後2ヶ月を計算してOR検索で引っ張ってきてます
- 例えば
in:日報/2018/08/ user:hyoshihara04という検索クエリをORでつないで発行してます
- jestでなるべくテストを書いたのですがまだ慣れない…
- ついrspecの勢いで書いてしまってスコープとかでよく混乱しました
- あとモックの貼り方とかのベストプラクティスがよくわかってないので手探りで書いています（テストはできてるはずなのでいいのですが、もっと良い書き方があったらそちらに倣いたい）
innerTextじゃなくてtextContentを使おうと思いつつつい癖でinnerTextを書いてしまう…- ちなみにjestでは
innerTextはundefinedになる（参考）のを知らなくてちょっとハマりました
- ちなみにjestでは