見ているウェブページをさくっとメモる

ブラウザで何か調べ物をしていて、見ているページのある部分を引用したくなることってありますよね。

その際に、

1. Scrapboxに新しいページを作成して、

3. 引用したい部分を選択してコピペする

のようなステップを踏むと思います。

これをもっとさくっとできるようにブックマークレットが提供されています。

でも、このブックマークレットだと新しく作成されたページの本文にはURLしか記載されません。

もっと視認性をよくしよう！

Scrapboxは、ページに画像があればホーム画面のページ一覧でその画像を表示してくれます。

https://gyazo.com/938e941edee7d1d2c6571569a9a9ce2c

画像があると、そのページのイメージが湧きやすくなります。

ということで、そういったページの視認性がよくなるブックマークレットを作ってみました。

設定方法

下記の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は一行です。

仕組み

ブックマークレットの中身のJavaScriptを読みやすく整形したものが下記のコードです。

code: bookmarklet.js

(function () {

var title = window.prompt(

'Scrap "Scrapbox" to Tatsuya Sato's project.',

document.title

);

if (!title) return;

var lines = [];

if (og_image_tag) {

let og_image_url = og_image_tag.content;

if (!/^http(s)?:\/\//.test(og_image_url)) {

}

if (!/\.\w{3, 4}$/.test(og_image_url)) {

og_image_url = og_image_url + "?.png";

}

}

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(

encodeURIComponent(title.trim()) +

"?body=" +

body

);

})();

見ているウェブページをサクッとメモるためにブックマークレットを活用してはどうでしょうか。