generated at
Webページにマーカーを引く技術
技術書典でannoについて書いた。
https://techbookfest.org/product/kXjDRtG16HhAidHErU0E3e


はじめに
annoとは

構成技術
Text Quote Selectorでマーカーの位置を推定する
Scrapboxにマーカーとコメントを記録する
Scrapboxからマーカーのデータを取得する
MutationObserverでWebページの変化を監視する
iframeでChrome拡張機能の機密情報を安全に表示する
画像上のテキストにもマーカーを引くオーバーレイ技術

わかりやすさの検討
色に暗黙の意味を持たせない
マーカーを引きすぎない
押せないボタンを作らず、ヘルプページを開かせる
セマンティック絵文字
身内感ある絵文字

応用例
文中リアクション
Scrapboxでコードレビュー
annoはWebのラベルライター

おわりに


書かなかったこと
もっと手軽にブックマークできるbergもどうぞ。
独自要素がない。
Intl.Segementer
letter spacingを計算するため。
Scrapboxで共有する仕組み
annopage
図解したほうがよさそう。
妙に複雑だし、書く必要ないかな。
Collaborate with anno
コメントやアイコンを他人と共有する。