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