esa.io （以下、esa）に気軽にメモを書くための拡張であるツイバミの新しいバージョンをリリースしました。色々内部的に変えたのでminor versionを上げて 0.2.1 => 0.3.0 にしました。
（そういえばこのブログ作ったのツイバミのリリースについてを日本語で書きたくなったからなのでした リポジトリに置いてるやつ は英語で書くことにしているけど要点しか書かないようにしているので、あれやこれや雑記的なことや今後の自分のためのメモをブログに書いていこうという感じです）
ツイバミとは
esaに「ちょっとメモしたい」感じで記事を書くためのchrome拡張です。拡張を開いたらタイトルと本文を入れる部分が表示されて、それらに何か書いて保存ボタンを押すと記事が投稿されます。保存先となるチームや必要なAPIのトークンは先にオプションページで設定します。 メモ用なのでWIPでしか保存できません。あと（APIがないのもあるけど）プレビュー機能もありません。ちょっとそのへんのメモ帳に書いておくのをやりたかった感じです。調べものをしているときにブラウザからショートカットキーで呼び出せるので、最終的にesaに保存しないまでもてメモしたりするのにも使えます。 ちなみに表記がツイバミだったりﾂｲﾊﾞﾐだったりtsuibamiだったりしますが特にどの表記とは決めていません。
リポジトリは https://github.com/yoshihara/tsuibami 、 使い方のページはhttps://esa-pages.io/p/sharing/1303/posts/251/eca7d0957129c38ab04b.html になります。
0.3.0で変わった機能
機能は目立った追加という追加はしておらず、フォーカス移動や記事更新時の挙動の修正が主になります。
まず記事を作るポップアップを開いたときに、フォーカスが変なところにはいってたりするのを直しました。基本はポップアップを開いたらタイトルにフォーカスが入りますが、タイトルに文字が入ってたら本文の方にフォーカスが入ります。また保存時にタイトルと本文の中身をクリアするかを選べるのですが、もしクリアした場合はタイトルに入るようにしました。
あとタイトルでTABを押したら本文にフォーカスが入るようにしたつもりができてなかったので直し、ついでにEnterを押しても同じ動作になるようにしました。この辺はwebでesaの記事編集画面を開いたときと同じ挙動になっています。
フォーカス関連の修正だと、本文にフォーカスがある状態でポップアップを閉じ、再度開くと閉じたときの位置にカーソルがあるようにしてたつもりができてなかったのを直しました。typoが原因でした。つらい。
フォーカス以外の修正では、保存時にタイトルがすでに存在していたり、特定の場合に更新ではなく新規作成になってしまう場合があったのを直しました。esaは同じタイトルの記事を新規作成しようとすると、タイトル末尾に (1) のように番号を振って同名になるのを避けているらしいのですが、そもそもツイバミではタイトルが同じであれば既存の記事の更新とみなして更新するようにしていたつもりでした。が、その「同名のタイトルか」という絞り込みをツイバミでしていた部分にバグがあって毎回新規作成になってしまっており、その結果同じようなタイトルの記事がたくさんできる、という状況でした。基本的に一度esaに保存したらツイバミ上で書き換えることをあんまりしてなかったので、気づくのが遅れました。どなたかこのバグを踏んでいましたらご不便をおかけして申し訳ありません（特にissue立てされてないので大丈夫なのかな？）
なお、esaだと (1) のような番号が振ってあるタイトル（例えば hoge (1) のような）の記事がすでにある場合、 hoge というタイトルで記事を新しく作ろうとすると、タイトルが hoge (2) のように変更されるようです（仮に hoge という記事が存在しない場合でもそうなるっぽい）その場合、保存前と後でポップアップで表示しているタイトルが変わってしまうので、保存のAPIで返ってくるレスポンスを見て表示しているタイトルを更新するようにしました。
あと表示しているタイトルを更新しなければいけないパターンがもう一つあって、「タイトル無しで保存した場合」です。タイトルなしで保存した場合、私の手元で確認した限りは Users/{screen_name}/Untitled-{n} のようなタイトル（とカテゴリ）に変更されるようです。その場合も上と同様の処理を行って、ポップアップで正しい記事タイトルが表示されるようにしました。
次に、見た目ではなく内部的に変わったのは、「前回保存した記事のリンク」に必要な情報として保存しておくものを変えました。前までは記事IDを保存していたのですが、処理の都合と強度的な理由により、URLをまるごと保存しておくことにしました。こうすると0.3.0より前のツイバミを使っていた場合に限り、0.3.0初回起動時の「前回保存した記事のリンク」が開けなくなるのですが、今回バージョンだけは記事リンクが保存されていない場合は従来のやり方で記事リンクを表示するようにしました。割とエッジケースだとは思うのですがまあ大した処理ではないので対応しました。次回リリース時点ではこの対応を消してURLを保存した状態にする予定です（今気づいたけどIDあったらリンク作ってそれを改めて保存しておけばよかった）
あとはすっごい細かい話ですがオプション画面でEnter押しても保存されるようにしました。
機能面以外で変わったこと
ツイバミの今回のリリースでバグを直したいのと同時にやりたかったのが「コードの整理」でした。というのも前まではひとまずテストで作ったコードをベースに機能追加していて、とても見づらい上にどこで何をしているのかわからなかったのでした。大した規模じゃないから行けるだろうと思っていたのですが、割と状況による処理の違いが結構あるのでこれはいしんどいぞ、しかし今後もメンテしたいぞというわけでがっつり手を入れ、ついでに周辺ツールも入れたりしました。具体的には↓のような感じです。
- strict modeにした（つけたつもりだった事案）
- クラスを作ってUI・esa API利用部分・記事情報・ポップアップ部分のコードを分離した
- webpack導入した
- それに伴って外部ライブラリのうちnpm packageがあるものはnpm packageを使うようにした
- yarn使うようにした（しかしnpmそのままでもいい気もしている）
- Promiseを直接使ってたところを （部分的に）async/awaitに置き換えた（ajax部分でjQuery使ってるのでその周りはそのままだけどそもそもjQueryを使わないようにしたい）
- テストを追加した（一部分だけ・カバレッジ的には半分ぐらいだけど、書いてないのはjQueryのメソッド呼び出して終わりみたいなラッパーな関数がほとんど）
- テストを自動で回すためにCircleCIを使うようにした
- eslint/prettierを導入した
- hamlではなくpugを使うようにした（hamlのためにgem installしなくてすむようになった）
なんというか多少まともになったかなぐらいの感じがします。テストが完全に追加されているわけではないですが、一旦区切りつけないといつまで経ってもリリースできないので一旦切り上げました。割とバグを放置してしまっていたので早めに出したかったのでした。もっと時間作るように頑張ろう….。
あとjestを使ってテストを書いたのですが、 describe とかを見るとついrspecのノリで書いてしまって非同期処理のテストとかコールバック呼ばれたかどうかのテストとかでとてもハマりました。 Object.assign が引数破壊するの忘れててテストの順番によってテストの成功失敗が変わるとかやっていました。あとrspecだとdescribe/contextでクラスが分かれるのでついそのノリで変数とかのスコープを考えてしまって変な値になるとかしました。知識が足りないのもあるけどスイッチング処理が上手く行ってないので精進します。。
次回リリースまでにやりたいこと
- テスト追加続き
- jQuery依存をなくす
- 依存パッケージのアップグレード
- タイトル・本文のクリアをする機能がほしい
- 前回保存した記事のリンク部分の互換性削除＆それに伴ってコードが整理できるはずなのでしたい
- （優先度低め）Firefox版を作る
というあたりです。自分で便利に使っているので割とちゃんとメンテしたいと思っており、そのための下地を作っている感じかなーという感じです。力尽きたのでこの辺で終わります。