Scrapboxにマーカーとコメントを記録する
annoでWebページにマーカーを引くとき、Scrapboxには以下のようなデータが記録される。
code: scrapbox
annos://example.com/
🍀
domain
コメントhata.iconlike.icon
https://gyazo.com/88bff5ddf3055d06d80f0a71f55dfa35
[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] ⇨ hata6502.icon
[like.icon] ⇨ like.icon
マーカーの位置は、Text Quote Selectorを含むURLとして記録されている。
URLは本来URLエンコードされている必要があるが、Scrapboxでは一部の文字をエンコードせずに書き込める。
以下のURLをScrapboxに書き込んでクリックすると、同じWebページが開く。
エンコードしたURL
https://premy.hata6502.com/#e=premy&p=%0A++++%0A++++%0A++%0A%0A&s=%E3%81%8A%E7%B5%B5%E3%81%8B%E3%81%8D%E3%81%99%E3%82%8B%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%83%98%E3%83%93%E3%81%AE%E6%8A%9C%E3%81%91%E6%AE%BB%E4%BA%BA%E9%96%93%E3%81%A8%E3%82%AB%E3%83%A1%E3%81%AE%E3%82%AD%E3%83%A1%E3%83%A9%E5%B9%BC%E7%94%9FDin
一部の文字をエンコードしないURL
https://premy.hata6502.com/#e=premy&p=%0A++++%0A++++%0A++%0A%0A&s=お絵かきするインストールヘビの抜け殻人間とカメのキメラ幼生Din
日本語をエンコードしないことで、短く読みやすいURLを生成できる。
annoでは正規表現のUnicodeプロパティを利用して、簡易的にURL生成している。
Unicodeプロパティ
\p{scx=Hiragana} ひらがなにマッチする。
\p{scx=Katakana} カタカナにマッチする。
\p{scx=Han} 漢字にマッチする。
code: https://github.com/hata6502/anno/blob/main/src/url.ts
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(match0), match0);
}
return encoded;
};