[Obsidian] 読書メモを取るために、Bookmarklet を作ったの巻

 久しぶりに、Chrome の Bookmarklet とか作りました。ええ、勿論 Obsidian のためです。きっかけは、読書結果を残すためのテンプレートをどうしようかな、がスタートです。

Obsidianでの読書メモの作り方

Amazonの書誌情報を「Obsidian」に取り込むブックマークレットーいつもていねいにAmazonの書誌情報を「Obsidian」に取り込むブックマークレット

なるほど、Amazon の書籍情報を引っ張り出してくるのか、考えてもみなかった…考えない人生ツライ。と言うことで、Bookmarklet を自分向けに作り直してみました。
それがこちらの Scrapbox にあります。

Get book information from Amazon - obsidian

元々のコードを次のようにリファクタリングして、自分のわかりやすいように書き換えました。

• 古い 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![|100](${imageurl})\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 に残ってます。当たり前だけど。マジヤバイ。