Scrapbox でアイコンを簡単に挿入できるツールを作った話
自己紹介
mizdra.icon mizdra (みずどら)
株式会社はてな Webアプリケーションエンジニア
肩書: フロントエンドエキスパート
フロントエンド技術の啓蒙
社内縦断サブ会 (フロントエンド会) の運営
早速本題
Scrapbox 使ってますか?
Helpfeel さんのドキュメンテーションサービス
今使ってるのも Scrapbox
はてな社内でも使ってる
スタック情報や議事録を記録してる
(ここまで60秒)
議事録しぐさ
アイコン記法([ユーザ名.icon])で発言者を表現する
mizdra.icon 来期の目標を教えて下さい
baby.icon あうあうあー (ハイハイしたい)
mizdra.icon 応援してます
発言者が複数いる時に便利
不便な点
他人のアイコンの挿入が難しい
ショートカットキーがない
[]を入力 => ユーザ名を入力 => Tab キーで選択 => Ctrl キーでアイコン挿入モードON => Enter
実演タイム
baby.icon
https://gyazo.com/3cecf7bab936131c64127f0d69527808
会議の議事録を取っている時は、会話のスピードに追いつかないといけない
mizdra.icon なんとかしたい
(ここまで2:00)
作りました
実演タイム
Ctrl + Lで表示 => 絞り込み => Tabで選択 => Enter で挿入
baby.icon
技術的な工夫
プログラマブルな API
充実したテスト
(ここまで 2:40)
プログラマブルな API
ユーザとしては色々カスタマイズしたい
キーボードショートカット変えたい
絞り込みのアルゴリズム変えたい
個人開発でカスタマイズ性を実現するのは面倒くさい
機能モリモリにしようにも、工数が足りない
そこでプログラマブルな API を露出させてる
code:script.js
import {
registerIconSuggestion,
} from '/api/code/customize/icon-suggestion/script.js';
registerIconSuggestion({
// 前方一致で絞り込んだり...
matcher: forwardMatcher,
// 曖昧一致で絞り込んだり...
// matcher: fuzzyMatcher,
});
ユーザにコードを書かせて、何でもできるように
(ここまで3:30)
充実したテスト
バグ報告や機能の追加をしようにも...
触ったらどこか壊れるんじゃないか/動作確認面倒だな...となりがち
やがて放置されてしまう
そこで icon-suggestion では...
大量にユニットテストを書いてバグがないことを検証してる
C0 カバレッジ: 91%
E2E テストもある
ヘッドレスブラウザ使って scrapbox 上でテストしてる
テストの恩恵
気軽にコードを触れるようになった
リリースサイクルが短くなった
1機能足したらすぐリリース
新規にテストコードを書き足すのが簡単
既存のテストをお手本に、真似して書ける
テストコード書くの思ったほど苦じゃない
まとめ
議事録サクサク取れるツール作った
個人開発ならではの工夫
プログラマブルな API で、高い拡張性を提供
テストを書いて身動きしやすく
参考