Webページにマーカーを引く技術 - ムギュウ

Webページにマーカーを引く技術

https://gyazo.com/b4403dc16896261942d7622b1de34fec

技術書典でannoについて書いた。

https://techbookfest.org/product/kXjDRtG16HhAidHErU0E3e

構成技術

Text Quote Selectorでマーカーの位置を推定する

Scrapboxにマーカーとコメントを記録する

Scrapboxからマーカーのデータを取得する

MutationObserverでWebページの変化を監視する

iframeでChrome拡張機能の機密情報を安全に表示する

画像上のテキストにもマーカーを引くオーバーレイ技術

わかりやすさの検討

色に暗黙の意味を持たせない

マーカーを引きすぎない

押せないボタンを作らず、ヘルプページを開かせる

セマンティック絵文字

身内感ある絵文字

応用例

文中リアクション

Scrapboxでコードレビュー

annoはWebのラベルライター

書かなかったこと

もっと手軽にブックマークできるbergもどうぞ。

独自要素がない。

Intl.Segementer

letter spacingを計算するため。

Scrapboxで共有する仕組み

図解したほうがよさそう。

妙に複雑だし、書く必要ないかな。

Collaborate with anno

コメントやアイコンを他人と共有する。