Kindle本リストをブクログへ登録するJavaScriptをブックマークレット化する

# 本記事の内容

以下で作ったJavaScriptをブックマークレット化する手順です

https://qiita.com/Tomonobu3110/items/10f2f39560c8ad135312

以下の2つのサイトにお世話になります

https://www.toptal.com/developers/javascript-minifier

https://ytyng.github.io/bookmarklet-script-compress/

# 手順

## 1. minify

[JavaScript Minifier & Compressor | Toptal(R)](https://www.toptal.com/developers/javascript-minifier) で、JavaScriptのコードを短縮します

短縮結果

```JavaScript
(getKindleAsinList=function(){let e=document.getElementById("row")||document.getElementById("cover"),t=e.getElementsByTagName("li");var a="";Array.prototype.forEach.call(t,e=>{let t=e.getElementsByTagName("div")[0].getAttribute("data-asin");t&&(console.log(t),a+=t+"\n")});var l=new Uint8Array([239,187,191]),n=new Blob([l,a],{type:"text/csv"}),d=(window.URL||window.webkitURL).createObjectURL(n),i=document.createElement("a");i.download="KindleAsinList.txt",i.href=d,document.body.appendChild(i),i.click(),document.body.removeChild(i)})();
```

## 2. ブックマークレット化

[Bookmarklet スクリプト変換](https://ytyng.github.io/bookmarklet-script-compress/) で、ブックマークレット化して登録用HTMLを作成します

1. スクリプトに **1** で minify したスクリプトをコピペ
1. ブックマークレット名を適当に決め、ブックマークレットに変換 ボタンを押す
1. 緑のボタンが表示されるので、ブックマークツールバーにドラッグ＆ドロップ
1. **以下、ブックマークレット登録ページの作成方法**
1. 右クリック --> 名前を付けて保存
1. 新しくエディタを開いて、保存した html の内容をコピー
1. 以下の部分を消す
    1. css/jsファイルのインポート部分
      head > link > bootstrap.min.css
             script > jquery.min.js
             script > bootstrap.min.js
    2. body内の不要部分
      body > form (ブックマークレット名などの) ※formを囲うdivごと不要
             script
1. title, header の文字列 "Bookmarklet スクリプト変換" を、適当なものに書き換える
1. (1)で一緒に保存された bootstrap.min.css をエディタで開いて、内容をコピペして、<style> ... </style> で囲む
1. 名前を付けて保存。文字コードはUTF-8、改行はLF

ブックマークレット登録用スクリプト
```HTML
<!DOCTYPE html>
<!-- saved from url=(0052)https://ytyng.github.io/bookmarklet-script-compress/ -->
<html lang=""><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <title>Kindle to ブクログ ブックマークレット登録</title>
</head>

<body>

<header>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <h3>Kindle to ブクログ ブックマークレット登録</h3>
      </div>
    </div>
  </div>
</header>

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div id="output-area"><hr><a class="btn btn-success" href="javascript:(getKindleAsinList%3Dfunction()%7Blet%20e%3Ddocument.getElementById(%22row%22)%7C%7Cdocument.getElementById(%22cover%22)%2Ct%3De.getElementsByTagName(%22li%22)%3Bvar%20a%3D%22%22%3BArray.prototype.forEach.call(t%2Ce%3D%3E%7Blet%20t%3De.getElementsByTagName(%22div%22)%5B0%5D.getAttribute(%22data-asin%22)%3Bt%26%26(console.log(t)%2Ca%2B%3Dt%2B%22%5Cn%22)%7D)%3Bvar%20l%3Dnew%20Uint8Array(%5B239%2C187%2C191%5D)%2Cn%3Dnew%20Blob(%5Bl%2Ca%5D%2C%7Btype%3A%22text%2Fcsv%22%7D)%2Cd%3D(window.URL%7C%7Cwindow.webkitURL).createObjectURL(n)%2Ci%3Ddocument.createElement(%22a%22)%3Bi.download%3D%22KindleAsinList.txt%22%2Ci.href%3Dd%2Cdocument.body.appendChild(i)%2Ci.click()%2Cdocument.body.removeChild(i)%7D)()%3Bvoid(0);">Kindle to ブクログ</a><small>&nbsp;&nbsp;これをブックマークツールバーにドラッグ&amp;ドロップ</small></div>
    </div>
  </div>
</div>

<style>
(略 : ここに bootstrap.min.css の内容をコピペします)
</style>

</body></html>
```

## 3. ブックマークレット登録

**2** で作ったHTMLをブラウザで開き、指示に従ってブックマークレットを登録します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/5500f7e2-f1f5-275c-9226-56d70ebeae5b.png)

## 4. Kindleから本のリストを取得

1. [Kindle Cloud Reader](https://read.amazon.co.jp/kindle-library) を開きます
1. リストを一番下までスクロールします
    下スクロールするとリストが動的に伸びるので、頑張って一番下までスクロールしましょう
1. 登録したブックマークレットをクリックして、KindleAsinList.txt を保存します
1. [ブクログ](https://booklog.jp/) の まとめて登録 から [ISBN登録](https://booklog.jp/input) を選び、KindleAsinList.txt の内容をコピペします

以上です