Kindleで買った本をまるっとブクログへ登録する

# できたこと

Kindleで買った本をまるっと [ブクログ](https://booklog.jp/) に登録したくなり、
いろいろやってみたら **できました**

直前に

https://qiita.com/Tomonobu3110/items/35163bf12d2885fa11f5

という記事を書きましたが、別アプローチでやってみてたらできた、という話になります

# 手順

**(1)** [Kindle Cloud Reader](https://read.amazon.co.jp/kindle-library) を開きます

**(2)** 表示を「リスト」にします (※追記@3/24 「グリッド」でも動くようにしました)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/7de28ee6-d654-65d5-2c70-5201e34d698e.png)

**(3)** リストを一番下までスクロールします
下スクロールするとリストが動的に伸びるので、頑張って一番下までスクロールしましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/e6e08deb-b9ef-7765-819f-f20cc4249706.png)

**(4)** F12を押してデベロッパーツールを表示して、コンソールに以下のJavaScriptをコピペして実行します
```JavaScript
getKindleAsinList = function () {
    const FILE_NAME = 'KindleAsinList.txt';

    // <ul> 要素を取得
    const ul = document.getElementById('row') || document.getElementById('cover');

    // <li> 要素のリストを取得
    const liList = ul.getElementsByTagName('li');

    // リストの中身を出力
    var csvData = "";
    Array.prototype.forEach.call(liList, li => {
        const asin = li.getElementsByTagName('div')[0].getAttribute('data-asin');
        if (asin) {
          console.log(asin);
          csvData += asin + "\n";
        }
    });

    // Export CSV File
    var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
    var blob = new Blob([bom, csvData], {
        type: 'text/csv'
    });
    var url = (window.URL || window.webkitURL).createObjectURL(blob);
    var link = document.createElement('a');
    link.download = FILE_NAME;
    link.href = url;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

getKindleAsinList();
```

**(5)** `KindleAsinList.txt` というファイルがダウンロードされるので保存してください

**(6)** `KindleAsinList.txt` をテキストエディタで開きます

**(7)** [ブクログ](https://booklog.jp/) の まとめて登録 から [ISBN登録](https://booklog.jp/input) を選びます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/054524f3-ff86-b276-beaa-ce5bd346cda7.png)

(8) ISBN/ASINコードの欄に `KindleAsinList.txt` の内容をコピペします

(9) カテゴリ、読書状況、タグを適当に決めて「まとめて登録する」を押します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/b989f329-b825-0d8f-1cc2-35ec4511e941.png)

**注意事項**ですが、[ブクログ](https://booklog.jp/) の [まとめて登録(ISBN)](https://booklog.jp/input) は一度に上限100冊までのようです。
100冊を超える場合は、100行づつコピペしてください。
これはこれで面倒なので、時間があったら何とかしようと思います。

以上です

# アプローチ

[Kindle Cloud Reader](https://read.amazon.co.jp/kindle-library) の書籍リストのHTMLを眺めていたところ、
本のリストが `<li>` で列挙され、その中の `<div>` にASINコードが含まれているのを見つけました
JavaScriptでDOMをたどって、目的のタグからASINコードを `getAttribute` で引き抜いてきています

参考までに本のリストの `<li>` はこんな構造になっています (2023年3月23日時点)
ASINのほかに書籍名と著者名は含まれています
残念ながら購入日は含まれていません
```HTML
<li class="_11lsG_chr1kjQD0SLGGyNl  _3CFVV8uVQRCCRmpES8cx8K" tabindex="0">
  <div aria-labelledby="
      plansBadge-B08D6B4MJB
      cover-B08D6B4MJB
      title-B08D6B4MJB
      author-B08D6B4MJB
      percentage-read-B08D6B4MJB
    " data-asin="B08D6B4MJB" data-resource-type="EBOOK" class="_3cDmi8xyroMAefeEDpSCc8">
    <div class="_1JC09ExCWicQrzvIAkWq34 _3bhApM-mNUxf-ynkeWb8Hl" id="coverContainer-B08D6B4MJB">
      <div class="_1C_Zm4Mhyc833h7XJtCCVx" aria-hidden="true">
        アフターデジタル２ ＵＸと自由 (Japanese Edition)
      </div>
      <a class="_9LIp7PLRk3m1eU9xI77mx">
        <img id="cover-B08D6B4MJB" draggable="false" class="Pc7fbfdgSgc3DxfcbCQfO _1vplkUEwqIG4HbQQrrdNVD" src="https://m.media-amazon.com/images/I/51K7WPkAvaL._SY400_.jpg" alt="" itemprop="">
      </a>
    </div>
    <div class="kZxME44S37q3fcY6df_Yn">
      <div class="sNvPMjb0opjWivruxb45B ">
        <div id="title-B08D6B4MJB">
          <p class="_2czmS0An9GDlVR9xgpCNOC">アフターデジタル２ ＵＸと自由 (Japanese Edition)</p>
        </div>
        <div id="author-B08D6B4MJB">
          <p class="_33h88ogkqT8qrfT1uutvBI">藤井 保文</p>
        </div>
      </div>
    </div>
  </div>
</li>
```

# 参考記事

https://qiita.com/Tomonobu3110/items/35163bf12d2885fa11f5

https://qiita.com/taka_hira/items/8a9181c0733de2c9f8ee