Webページにマーカーを引く技術
https://gyazo.com/b4403dc16896261942d7622b1de34fec
技術書典
で
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
コメントやアイコンを他人と共有する。