AmazonToScrapboxブックマークレット自分用

/icons/hr.icon

※2023/09/28修正あり

code:js

javascript:(function () {

// Amazonでなければ無効

const href = window.location.href;

if(!href.includes('www.amazon.co.jp') || !href.includes('/dp/')) return alert('Amazonの書籍ページではありません。');

// 自分のScrapboxのプロジェクトURLを指定

const projectName = 'hoge';

// 書名の欄を取得する

const titleElm = document.getElementById('productTitle');

// 取得した書名をデフォルト値としてページタイトルを決める

let title = window.prompt('選択範囲を概要としてスクラップします。', titleElm.textContent.trim()).trim();

if (!title) return;

title = '『' + title + '』'; // 『』をつける

// サブタイトル（書名直後のバージョンと発売日が書いてある部分）を取得する

const subtitleElm = document.getElementById('productSubtitle');

const sub = subtitleElm ? '\n' + subtitleElm.textContent : ''; // サブタイトルがあれば内容を取得して頭に改行を付与

// 選択範囲を取得する

const getSelection = window.getSelection(); // 選択範囲を文字列として取得

let selection = '';

if (getSelection && getSelection.toString()) { // 選択範囲があるとき

selection = getSelection.toString().replace(/(\W+)( )(\W+)/g, '$1$3'); // 字間に時々紛れている半角スペースを除去

selection = '\n>' + getSelection.toString().replace(/\n/g, '\n> '); // 行ごとに引用の「>」を付与

}

// 書影を取得する

const image = document.getElementById('landingImage');

// const image = document.getElementById('imgBlkFront') || document.getElementById('ebooksImgBlkFront'); // HTML変更前

const imageSrc = image.getAttribute('src');

// 著者を取得する

const authors = [];

const authorElms = document.getElementsByClassName('author');

for (const elm of authorElms) {

const content = elm.textContent.replace(/\r?\n|\t/g, '').replace(/,/, '');

const category = content.match(/\(.+\)/); // (著)などの部分

const authorName = content.replace(/\(.+\)/, '').replace(/ /g, '');

}

// 以上の情報を、実際に書き込みたい形に整えてひとつの文字列にまとめる（必要があれば任意の文字列を付け足す）

// エンコードしてURLをつくる

// URLを開いてページを作成（または同名のページに追記）

window.open(url);

})();

2023/02/21　全体書き直し（挙動の変更はほぼありません）

2023/09/28　書影のidが変更されているのを修正　なお、全体的にコードが綺麗でないため後ほど改良版を作ります

/icons/hr.icon

経緯

今年に入ってからJavaScriptをゼロから勉強している

ブックマークレットも作ってみよう！

正規表現もよくわからないので覚えよう！

どういう要素に対して何をどうすればいいのかがわかりやすいので初心者としてとても勉強になる

自分に要る要素を取捨選択・追加して自分仕様のブックマークレットにしよう！

私の環境だと古めの本について4冊に1冊くらいうまくいかない🤔

→中古本しかない本だからだ！

教材にしたコードからの具体的な変更

書名・書影・著者情報の部分を採用

（複雑度が高い部分はまだ自分の力量不足で触るとバグの元になるので取り除く）

新たにサブタイトル（書名後ろの「単行本 – 1996/12/1」などの部分）の取得、選択範囲を引用記法で書き込み、の二点を追加

書籍によっては著者情報取得の際にタブ文字が紛れる場合があるのを解消

変数名の意味が自分でわかるように一部変更（初心者ゆえ）

ブックマークレットを使う際に表示する文言を自分用に変更

code:old.js

javascript:(function(){

// 書名を取得する

var ttl = document.getElementById("productTitle");

if (!ttl) var ttl = document.getElementById("ebooksProductTitle");

// 取得した書名をデフォルト値としてページタイトルを決める

var title = window.prompt('選択範囲を概要としてスクラップします。', ttl.innerText.trim());

if (!title) return;

// 『』をつける

title = '『'+ title +'』';

// サブタイトルを取得する

var subttl = document.getElementById("productSubtitle");

var sub;

if(subttl) {

sub = "\n" + subttl.innerText; // 後のために改行を付与　タグに囲まれたテキスト部分を取得

} else {

sub = ""; // サブタイトルが空のとき（そのケースがあるかわからないがとりあえずundifined防止）

}

// 選択範囲を取得する

var select = window.getSelection().toString();　// 選択範囲を文字列として取得

if (select){ // 選択範囲があるとき

select = select.replace(/(\W+)( )(\W+)/g,'$1$3'); // 字間に時々紛れている半角スペースを除去

select = "\n> " + select.replace(/\n/g,'\n> '); // 行ごとに引用の「>」を付与

}else{ // 選択範囲が空のとき

select = "";

};

// 書影を取得する

var image=document.getElementById("imgBlkFront");

if (!image) var image = document.getElementById("ebooksImgBlkFront");

// src属性の中身（＝画像URL）を取得する

var imageurl = image.getAttribute("src");

// 著者を取得する（※1）

var authors = [];

var c = document.getElementsByClassName('author');

for (g = 0; g < c.length ;g++){

var pu = at.match(/\(.+\)/);

var ct = at.replace(/\(.+\)/,'').replace(/ /g,'');

}

// 以上の情報を、実際に書き込みたい形に整えてひとつの文字列にまとめる（※2）

// URLの形にするためにエンコード

var body = encodeURIComponent(lines);

// 自分のプロジェクトのURLとして開いてページを作成（または同名のページに追記）（※3）

})();

※1

タブ文字除去部分だけ新たに追加

※2

ここで順番やテンプレートを自分好みにする

各要素の意味

※3

プロジェクト名を自分のものに変更すること

https://gyazo.com/2507754e7805a6f3f62fc666dcef6a20

実際に使う時

1. テキストエディタにコードをコピーする

2. ※2※3を整える

3. ブックマークのURLに貼れる形に整形する

コメントアウトと改行を除去して全体を一行にまとめる

コメントアウトは正規表現で例えば「// .*$」を「」（空）に置換とかで多分消えます

改行は正規表現で「\n」を「」に置換で除去する

（まとめて「// .*$|\n」を「」に置換で一行になります）

もしくは、Scrapboxの公開プロジェクトに書いて読み込む

その場合コメントアウトを消したり一行にまとめたりする必要はない

ただし非公開プロジェクトだと機能しない（多分）

4. ブラウザのブックマークを新たに作ってURL部分に貼り、適当な名前をつけて保存する

https://gyazo.com/b1217ff41ddb890cbdfc0562542ef82f

5. Amazonのページでブックマークをクリックする

（その前に概要欄に取り込みたいところがあれば選択しておく）

https://gyazo.com/59777657e66c054333801244272dd82a

ブックマークをクリックしてタイトルを確認する

https://gyazo.com/e37c21bdaa1f99a2afd8fe2d2de0ebb2

（この時タイトルが選択状態になってるから文言が紛らわしかったな…）

成功するとこうなる

https://gyazo.com/218be3f1225f63a34da0bfd1f17c01e9

どうでもいい話

「のらてつ版」にしようかとも思ったが、別に他の人にも使ってもらうブックマークレットとしてリリースしたいわけではなく、「自分に合わせて作る例」のひとつとして書いているだけなので「自分用」ということにした