ブックマーク代わりにScrapboxに貯めていくブックマークレットを作った（タグ自動生成つき）
Pocket ()やEvernoteを使ってブラウザに依存せずにあとで読みたいページなどを管理していた。またQiitaのいいねやGitHubのスターなどサービスごとの機能をブックマーク代わりにしていた。こういうブックマークは「将来、引出したいな」と思っているから貯めている。 そういうときに、どこに保存したのかも含め検索すると複数のサービスにまたがると検索がしづらくなる。
個人のメモでCosenseを公開と非公開を使っていて、できればそれにまとまる方が後々の検索の効率が上がり、素早く欲しいものが将来引き出せると思った。 できたもの
以下のように好きなサイトでブックマークのアイコンを押すだけで簡単にCosenseにブックマークができる。 https://gyazo.com/420c4271e07c3e843ffea89181613c20
そして、ページのタイトルを形態素解析して自動でタグ付けもしてくれる。これによりブックマークと既存のページ間でCosenseの強力なリンクが活用できる。 非常にシンプルな形態素解析でクライアントサイドだけで完結して、外部のサーバーにアクセスしたりせずに形態素解析できる。 生成されるCosenseのタイトルは「B: 」から始まるにして一目見てもブックマークのページだと判別できるようにした。理由はリンクがあるだけで他のページと異なり自動でページの内容の質が低めな傾向があると思ったから。あと検索エンジンにインデックスされた時にもはてなブックマークの[B]! ...に似た目印になると思った。 ブックマークを検索から除外
「好きなキーワード -B:」のように-B:または-b:をつけると検索から除外できる。
#ブックマーク, #bookmarkが必ずつくため、ブックマーク一覧も簡単にできる（Cosenseの力）。 いますぐ試したい！
ブックマークレット生成Nippに飛んで"Input"のところに 自分のCosenseのプロジェクトURL（https://scrapbox.io./your-project-name）またはyour-project-nameを入力するとブックマークレットが自動生成される。 https://gyazo.com/aa5bed6aa8db1150543a41a0206452e0
そのままこのページに載せるとコードが占有してしまうのと今後改良が重ねやすいようにGitHubで管理することにした。 以下にminifyしたブックマークレットがある。横にスクロールして最後に行くとhttps://scrapbox.io/nwtgckという文字列があると思う。これを自分のプロジェクトに変えてブックマークレットとして保存すれば好きに保存できる。
https://gyazo.com/5289f03504c4e63b8cfb5753e0c40524
（長いので変更後はminifyしてブックマークレットにする必要があった。）
（せっかくGitで管理しているのでそこらへんの自動生成もしたい気もする。） code:js
(() => {
// ここを自分のURLに変えましょう！
// Clean title for Scrapbox title
const cleanSiteTitle = document.title.replace(/[\\`]/g, ''); const title = B: ${cleanSiteTitle};
const tagsStr = tags.map(s => #${s.replace(/ /g, "_")}).join(" ");
const body = `\
${tagsStr}
[${document.title.replace(/`/g, '')} ${location.href}] `;
const url = ${scrapboxUrl}/${encodeURIComponent(title)}?body=${encodeURIComponent(body)};
window.open(url);
})();
const scrapboxUrl = ...は自分のものに変えるべき。
Cosenseは/ページのタイトル?body=ページの内容にアクセスするとページがないときは新規作成になりあるときは追記される仕様になっている。 そのためScrapboxのタイトルを変えなければ二重にブックマークしたことは把握できる。
tagsの配列に要素を増やしたり、減らしたり好きにカスタマイズできる。
Cosenseのページのタイトルに[, ]や ` が含まれるとリンクしづらくなるため削除している。 [記事タイトル https://...]の記事タイトルも ` が’含まれるとリンクできないので削除している。
現在の形態素解析の対象がタイトルだけだが、本文（<article>内）の文字全体にして頻度の高いものをタグにするのも一つ。Twitterや特定のサービスならDOMを解析してツイートの引用をしてCosenseに載せることもできそう。 より高精度な解析をしたくなったら動的に<script src=...で外部の大きなスクリプトを読み込んだり、サーバーに問い合わせて強力な解析をすることもできると思う。
クライアントサイドだけで完結するシンプルな形態素解析 以下のようにすると現在のタイトルから名詞（変数nouns）を取り出せた。
code:js
const segmenter = new TinySegmenter();
const segs = segmenter.segment(document.title);
const nouns = segs.filter(s => "A", "H", "K".includes(segmenter.ctype_(s))); segmenter.ctype_()を使うと単語の種類がわかる様子（上記の説明にはなくコードを読んで発見した）。
例えば、"リモートワークでも活躍するScrapboxの魅力"を分かち書きした後のの.ctype_()を見てみると以下のようになる。 code:js
const segmenter = new TinySegmenter();
const segs = segmenter.segment("リモートワークでも活躍するScrapboxの魅力");
// => "リモートワーク","K"],"で","I","も","I","活躍","H","する","I","Scrapbox","A","の","I",["魅力","H" おそらく"A"はアルファベット、"H"はひらがな、"K"はカタカナだと思う。
見た感じ昔のブラウザでも対応できるようにvarなどが使われている印象がある。
@masuiさんはブックマーク専用のプロジェクトを作ってブックマークしているみたい。 おまけ: 自動タグ付けは良いのか？
過度に自動化しすぎると有益なメモが検索時に埋もれたりブックマークページが関連リンクに大量に出現する問題も起こるかもしれないと考えている。
しばらく使ってみてブックマークは自動タグ付けをやめて、 #ブックマークタグだけにするなどするかもしれない。いまは使い心地を試す段階だと思っている。
以下の要望が実装または改良されて実装されると、#ブックマークタグだけでもそのリンクをちゃんと読んで情報を整理すると自然とリンクされるようになることも期待できる。
あと現状ではこの非公開のCosenseに対してブックマークをする予定。公開している/nwtgckは読んでメモしたい内容などを載せる感じで今まで通り書くと思う。