見ているウェブページをさくっとメモる
書いた人 satoryu
これはScrapbox Advent Calendar 2021 6日目の記事です。
ブラウザで何か調べ物をしていて、見ているページのある部分を引用したくなることってありますよね。
その際に、
1. Scrapboxに新しいページを作成して、
2. 記録したいウェブページのURLをコピペして、
3. 引用したい部分を選択してコピペする
のようなステップを踏むと思います。
これをもっとさくっとできるようにブックマークレットが提供されています。
でも、このブックマークレットだと新しく作成されたページの本文にはURLしか記載されません。
もっと視認性をよくしよう！
Scrapboxは、ページに画像があればホーム画面のページ一覧でその画像を表示してくれます。
画像があると、そのページのイメージが湧きやすくなります。
ということで、そういったページの視認性がよくなるブックマークレットを作ってみました。
設定方法
下記のURLをブラウザのブックマークに追加してください。
javascript:(function () { var title = window.prompt( 'Scrap "Scrapbox" to Tatsuya Sato's project.', document.title); if (!title) return; var lines = []; let og_image_tag = document.querySelector('meta[property="og:image"]'); if (og_image_tag) { let og_image_url = og_image_tag.content; if (!/^http(s)?:\/\//.test(og_image_url)) { og_image_url = "https://" + og_image_url; } if (!/\.\d{3, 4}$/.test(og_image_url)) { og_image_url = og_image_url + "?.png"; } lines.push("[" + og_image_url + "]"); } lines.push("", "[" + window.location.href + " " + document.title + "]"); var quote = window.getSelection().toString(); if (quote.trim()) lines = lines.concat( quote.split(/\n/g).map(function (line) { return " > " + line; })); lines.push(""); var body = encodeURIComponent(lines.join("\n")); window.open( "https://scrapbox.io/satoryu1981/" + encodeURIComponent(title.trim()) + "?body=" + body); })(); 分かりづらいですが、上のURLは一行です。
追加する際に、URL中の後半にある
https://scrapbox.io/satoryu1981/ の satoryu1981 を普段お使いのScrapboxのプロジェクトの名前に変更してください。仕組み
ブックマークレットの中身のJavaScriptを読みやすく整形したものが下記のコードです。
bookmarklet.js(function () {
var title = window.prompt(
'Scrap "Scrapbox" to Tatsuya Sato's project.',
document.title
);
if (!title) return;
var lines = [];
let og_image_tag = document.querySelector('meta[property="og:image"]');
if (og_image_tag) {
let og_image_url = og_image_tag.content;
if (!/^http(s)?:\/\//.test(og_image_url)) {
og_image_url = "https://" + og_image_url;
}
if (!/\.\w{3, 4}$/.test(og_image_url)) {
og_image_url = og_image_url + "?.png";
}
lines.push("[" + og_image_url + "]");
}
lines.push("", "[" + window.location.href + " " + document.title + "]");
var quote = window.getSelection().toString();
if (quote.trim())
lines = lines.concat(
quote.split(/\n/g).map(function (line) {
return " > " + line;
})
);
lines.push("");
var body = encodeURIComponent(lines.join("\n"));
window.open(
"https://scrapbox.io/satoryu1981/" +
encodeURIComponent(title.trim()) +
"?body=" +
body
);
})();やっていることはとてもシンプルで、ウェブページのOGP画像を取得して、それを作成するScrapboxのページ本文の冒頭に挿入しています。
見ているウェブページをサクッとメモるためにブックマークレットを活用してはどうでしょうか。