Scrapboxにマーカーとコメントを記録する
annoでWebページにマーカーを引くとき、Scrapboxには以下のようなデータが記録される。
scrapboxCopied!
[annos://example.com/]
[🍀 https://example.com/#e=domain&p=%0A%0A++++Example+Domain%0A++++This+&s=+is+for+use+in+illustrative+exam]> domainコメント[hata.icon][like.icon]
[annos://example.com/] マーカーを引いたWebページのURL。
https://example.com/ におけるマーカーであることを表す。
[🍀 https://example.com/#e=domain&p=%0A%0A++++Example+Domain%0A++++This+&s=+is+for+use+in+illustrative+exam] Webページ内におけるマーカーの位置を、Text Quote Selectorとして記録している。
exact (e)
domain prefix (p)
\n\n Example Domain\n This suffix (s)
is for use in illustrative exam コメント[hata.icon][like.icon] コメントおよびアイコン。
Scrapboxのアイコン記法で表現している。
以下のようなアイコンを、Scrapboxプロジェクトに登録してある。
[hata.icon] ⇨ [like.icon] ⇨ マーカーの位置は、Text Quote Selectorを含むURLとして記録されている。
URLは本来URLエンコードされている必要があるが、Scrapboxでは一部の文字をエンコードせずに書き込める。
以下のURLをScrapboxに書き込んでクリックすると、同じWebページが開く。
エンコードしたURL
一部の文字をエンコードしないURL
日本語をエンコードしないことで、短く読みやすいURLを生成できる。
annoでは正規表現のUnicodeプロパティを利用して、簡易的にURL生成している。
Unicodeプロパティ
\p{scx=Hiragana} ひらがなにマッチする。 \p{scx=Katakana} カタカナにマッチする。 \p{scx=Han} 漢字にマッチする。https://github.com/hata6502/anno/blob/main/src/url.tsCopied!
export const encodeForScrapboxReadableLink = (uriComponent: string) => { let encoded = encodeURIComponent(uriComponent);
for (const match of uriComponent.matchAll( /[\p{scx=Hiragana}\p{scx=Katakana}\p{scx=Han}]/gu )) { encoded = encoded.replace(encodeURIComponent(match[0]), match[0]); }
return encoded;};