つれづれなるおぎの

雑記の極み

amazonからscrapboxへ書籍情報を保存するbookmarklet

個人開発

概要

↓の機能を拡張したものを作成した scrapbox.io

動機

大学生になってやたら本を触るようになった結果、どの本に書いてあったっけ……が多発した。 また今年度から一人暮らしをするにあたって、本の所在がもっとごちゃるのが容易に想像がつく。

いい感じに本を管理するシステムが欲しい！！！！！！

欲しい機能

  • 本の所在地の設定（実家、家、図書館、etc.）
  • バーコードスキャンで登録
  • Amazonから登録
  • 自由に感想・タグ付けしたい

既存の候補

実はかなり要件を満たしているものがある

Readee

readee.rakuten.co.jp

大体ほしいものが揃っているのだが

  • PCからの使用をあまり想定していない
  • 楽天のサービスなので、Amazonに対応する未来が見えない

と、個人的には結構致命的な弱点がある。

一方でISBNスキャンや本棚登録など、実体のある本に対する処理はとてもよくできており、更にcsvエクスポートもできる。すごい。

改めて要件を洗い出してみると、

  1. 蔵書&感想管理
  2. 欲しい本や覗いただけの本をメモ

の2パターンに分けられそう。

このうち1のみであればReadeeで十分。

2についてなのだが、このような「とりあえずメモしておきたい」系に強いのが

Scrapbox

scrapbox.io

ネットワーク型のメモ帳なので、メモのレベルが大体等しいものをひとまとめに管理するのが得意。 めちゃめちゃ使い倒すなら、とにかくタグ付けを頑張って検索でゴッソリとれるようにするのがよさそう。

今回は、1メモに対して1冊の情報を扱えるのでうってつけ。 （他にも日記、問題解説、議事録など、単位当たり1メモの運用ができるものに使うとよさげ）

AmazonからbookmarkletでScrapboxのページを作成するのは既出で以下。

AmazonからScrapboxにスクラップするブックマークレット - Scrapbox研究会

追加で欲しいものは

  • 強制的に本棚のタグをつける
  • もうちょい情報を引っ張ってきてほしい
    • 分類、説明など
  • いくつかバグがある

この辺りを解消させる。

後はReadee -> Scrapboxの部分についてだが、csvエクスポートからpythonのseleniumでちゃちゃっと書ければいいかなと（未実装）

(Readeeはこんな感じでまとまりました)

できたもの

デモ

機能説明

  • Amazonの書籍ページで機能
  • Scrapboxに本のタイトルをページ名、以下の情報を本文に追加
    • 入力フォーム
      • スペース区切りで単語を入力
      • 単語がそのままタグとして送信
    • ラジオボタン
      • ハードコーディングされた選択肢を表示
      • 初期値が設定されているので、選択を強要
      • 選択されたものをタグとして送信
    • その他の情報
      • リンクで書影を送信
      • 著者をリンク形式で送信
      • レビューの星、出版社、出版年、ランキングのカテゴリをタグとして送信
      • 本の説明をそのまま送信
  • 送信ボタンで新規タブにScrapboxへページ作成
    • Scrapboxがurlで管理しているため、存在しないページタイトルのurlを開くと新規で作成されたことになる

コード

github

github.com

下に書いた参考にしたコードを魔改造して超融合しただけなので、細かい部分は追っていません（特にパネルクラスの部分）

もし使用したい場合は

  1. main.jsの最下部にあるScrapboxのurlを自身のプロジェクトのものに
  2. ラジオボタン設定部分をお好きに変更
  3. コンパイル

の3点を行えばよいと思います。

初のJSコードなので拙さ丸出しだと思うので、もしご指摘あれば伝えて頂けると大喜びです。

残っている問題点

  • 同名ページがある場合、送信した内容がさらに追加されて二重になってしまう
    • ページが存在するか確認しようとしたが
      • urlにレスポンスがあるかどうかは、Scrapbox自体の仕様が「存在しないページのurlの場合新規作成」なので、必ず返ってきてしまう
      • プロジェクトのページを取得しスクレイピングのようにするのは、セキュリティで弾かれる（Content Security Policy）
    • となり、一旦やめた
    • Ctrl+Zで戻せるので、そこまで気にしなくていいかな
  • 電子書籍と紙書籍でタイトルが変わる（スペースの区切り方とかが変わったりしている）
    • これはAmazon側が悪い
    • 一応タイトルをISBNにすれば回避できるのかな？？
    • 使っていくうちに、タイトルの変わり方が分かればハック的に解決できそう
  • 各種エラー処理がほぼない
    • これも使いながら確認する
  • コードが読みにく過ぎる

参考にしたもの

開発Tips

フロント・ナンモ・ワカラン的には色々と勉強になったことがあったので備忘録。

bookmarklet tips

そもそもbookmarkletは、bookmarkをクリックするだけでjsを動かすという実にシンプルなもの。

qiita.com

フロント・ナンモ・ワカラン的には障壁が小さくてとても助かった。

ただいくつか躓いた点があるのでメモ

コメント

jsでは普通コメントは//で書くが、最終的には一行になるので以降のコードが全てコメントアウトされてしまう。 基本的にインラインのコメント/**/を用いるとよさそう。

開発環境

いちいち

  1. ブックマーク左クリック
  2. 編集
  3. コードコピペ
  4. クリックして実行

するのがめんどくさい。

既に頭のいい人が考えてくれていた。

ブックマークレットの開発環境を考えてみた · GitHub

ただフロント・ナンモ・ワカラン的にはサーバーを立てる？？ナニソレ？？となった。

既に頭のいい人が考えてくれていた。

Live Server - Visual Studio Marketplace

VSCodeの拡張で、ワンクリックでlocalサーバーを立ててくれる。 今回はjsファイルのみが触れればokなので、細かい設定とかは気にしなくてヨシ！！！

chrome拡張のScriptAutoRunnerに、DOMへ対象のjsファイルをscriptとして突っ込むコードをパパっと書いて

(function (u) { var s = document.createElement(`script`); s.src = u; document.body.appendChild(s) })
("http://127.0.0.1:5500/library-manager/main.js")

後はvscodeの左下のボタンをﾎﾟﾁｰとすれば、F5のみで即実行できる！やったねたえちゃん！

かんそう

頭のいい人いっぱいいるなあ