[Obsidian] 読書メモを取るために、Bookmarklet を作ったの巻
久しぶりに、Chrome の Bookmarklet とか作りました。ええ、勿論 Obsidian のためです。きっかけは、読書結果を残すためのテンプレートをどうしようかな、がスタートです。
なるほど、Amazon の書籍情報を引っ張り出してくるのか、考えてもみなかった…考えない人生ツライ。と言うことで、Bookmarklet を自分向けに作り直してみました。
それがこちらの Scrapbox にあります。
元々のコードを次のようにリファクタリングして、自分のわかりやすいように書き換えました。
古い Javascript から ES5/6 仕様へ
行数削減 (古い人なので、複雑でも短ければ勝利的な考え方ある。良くない)
if 文の排除 (現時点ではまだ一つ残ってるけど)
var やめて、全部 const 化
Amazon アフィリエイトIDは、定義を先頭に
表示するフォーマットの変更
メタデータを使いたかったので、表示用とメタデータ用とでデータを準備しました
久しく Javascript触ってなかったけど、元のコードがあればいけますね。良かった。
現時点でのコードを、一応残しておきます。恥ずかしげもなく。
javascript: {
const AMAZON_AFFILIATE_ID='cluboshiire-22'
// 書籍名の取得
const productTitle = document.getElementById("productTitle");
const ebooksProductTitle = document.getElementById("ebooksProductTitle");
const title = productTitle ? productTitle.innerText.trim() : ebooksProductTitle.innerText.trim();
// ASIN の取得
const asinId = document.getElementById('ASIN');
const asin = asinId ? asinId.value : document.getElementsByName('ASIN.0')[0].value;
//登録情報欄を取得
let detail = document.getElementById('detailBullets_feature_div');
if (!detail) {
const subdoc = document.getElementById("product-description-iframe").contentWindow.document;
detail = subdoc.getElementById("detailBullets_feature_div");
}
// 出版関係の情報を取得 (ここでは出版日付だけ)
const pubdata = detail.innerText.split(/\n/);
const publish_date = pubdata[2].slice(10); //出版日付
// 書籍のタイトルとリンク貼り
const url = `https://www.amazon.co.jp/exec/obidos/ASIN/${asin}/${AMAZON_AFFILIATE_ID}`;
const link = `[${title}](${url})`;
// 選択範囲を取得する
const isSelection = window.getSelection().toString();
const selection = isSelection ? `> ${isSelection.replace(/(\W+)( )(\W+)/g,'$1$3').replace(/\n/g,'\n> ')}` : "";
// 書影の取得
const imgBlkFront = document.getElementById("imgBlkFront");
const ebooksImgBlkFront = document.getElementById("ebooksImgBlkFront");
const imageurl = imgBlkFront ? imgBlkFront.getAttribute("src") : ebooksImgBlkFront.getAttribute("src");
const mdimage = `\n\n`;
// 著者情報の取得
const authors = [];
const viewAuthors = [];
document.querySelectorAll('.author').forEach((c) => {
var at = c.innerText.replace(/\r?\n/g, '').replace(/,/, '');
var pu = at.match(/\(.+\)/);
var ct = at.replace(/\(.+\)/, '').replace(/ /g, '');
viewAuthors.push(`[[${ct}]]${pu}`);
authors.push(ct);
});
// 表示する内容
const lines = `---\ntitle: ${title} \nauthor: [${authors.join(',')}]\nasin: ${asin}\npublish_date: ${publish_date}\n---\n${link}\n${viewAuthors.join('\n')}${mdimage}\n${selection}\n`;
document.getElementById('bookDescription_feature_div').innerHTML = `<textarea style="height:500px">${lines}</textarea>`;
}選択している範囲も引用して取ってこられるのが、めっちゃ便利で困ってます。
再利用性を考えると、引用してない方が楽なんだけど、どうしようかなとか考え込んでます。表示するための情報は取得しているので、あとは表示部分をどうするかだけですね。一番下の方だけ、ちょっとフォーマット直せば好きにできます。
この辺のどこを元にしたとかそういうのも、全部 Obsidian に残ってます。当たり前だけど。マジヤバイ。
