Notion テンプレート学習リソースデータベースブログニュースレター
Notion テンプレート学習リソースデータベースブログニュースレター

Chromeの拡張機能でNotionの書籍データベースに属性情報を取り込む仕組み

あなたは読書家ですか？
Notionはあなたが今までに読んだ本とそのノートを管理するための最適なツールです。
今回紹介する自動化ワークフローを作っておくと、
  1. ワンクリックでAmazonの書籍ページから本の情報を自分のデータベースに保存できる
  1. タイトル、書影、URL、著者、概要、出版社、発売日がデータベースのプロパティに自動で保存される
という仕組みを構築することができます。
一旦仕組化されれば、どんどん自分の本棚に情報が蓄積されていくため自分だけの図書館を作ることが可能です。
そのための方法をステップバイステップで紹介していきます！

1⃣ 書籍管理のテンプレート

こちらはGumroadで無料公開しています。
このテンプレートは以下の機能を含みますが、詳細な説明はこの記事では省かせていただきます。（テンプレ内に使い方の説明があります！）
  • 書籍から得た引用・名言の登録とランダムピック機能
  • 未読・読中・読了の書籍管理
  • ウィッシュリスト・読書メモ・レビュー機能
Gumroadにはカスタマーが値段をつけれる機能があるのですが、無料でゲットする場合は金額欄に「0」と入力してカートに追加してください。
また、ダウンロードにはメアドの入力が必要ですが変なメールを送りつけたりしないので安心してください。
0円でダウンロード

2⃣ Bardeenの登録方法

Chromeの拡張機能Bardeenは以下のページからアクセスします。
Chromeの拡張機能追加に進む
Chromeに拡張機能を追加します。
拡張機能の追加
Bardeenの無料登録を行います。
Googleアカウントで行うと簡単です。
アカウントの作成
これで下準備は完了です！
Bardeenの設定画面
ここからはAmazonから商品情報を取得するための設定をしていきます。

3⃣ BardeenからAmazonのページ情報を取得する方法

まずは取得したい本のページにアクセスします。
今回は最近僕が読んでいる「NO FLOP!」で解説していきます。
登録した拡張機能を有効にして「Alt＋B」もしくはブラウザ右上のBadeenアイコンをクリックしてBardeenを開きます。
画面上部にある「Scraper」をクリックして、「New Scraper Template」を選択します。
スクレイパーテンプレートの作成
該当ページのURLを入力するか「Focused Tabs」からNO FLOP!のページを選択します。
取得したいページを選択
シングルページか複数商品などのマルチページを選択するか聞かれるのでSingle pageを選択します。
Single pageを選択
Templateの名前を「Amazon書籍データ」として Start building をクリックします。
Start buildingで次に進む
そうすると、HTMLの各要素を選択できる画面になります。
要素の選択画面
まず、URLを取得したいので右上にあるActionsから+ボタンを押します。
URL情報の取得①
次にプルダウンを選択して「Page Link」を選択してチェックをつけます。
そうすると、画面下に取得したデータが表示されているのがわかります。
URL情報の取得②
次にタイトルを取得したいのでタイトルにマウスをフォーカスしてクリックします。するとポップアップが出てきます。今回はテキストを取得したいのでGet Textのまま右側のチェックボックスを押してGet Dataを押します。
タイトルの取得
そうすると先ほどと同じように画面下に今取得したデータが表示されるので名前を「title」と付けておきます。これはあとでNotionのデータベースと紐づけるときに使用します。この要領でほかの要素も取得していきます。
各要素に名前を付ける
次は書影のデータを取得します。これもクリックすると勝手にイメージ画像としてGet Imageで取得してくれるのでチェックボックスにチェックを入れて先に進みます。名前は「image」とします。
次に著者を「author」として登録します。リンクになっている著者はテキストを取得するかリンクを取得するか選べるのでテキストを選択して登録をします。
著者データを取得
次は説明文です。「discription」と名前を付けます。
説明文を取得
出版社と発売日も取得しておきます。それぞれ「publisher」と「release date」と名前を付けます。
うまくとれていれば画面下のデータ情報はこんな感じになるはずです。
取得データの確認
画面右下の「Save Template」を押してテンプレートの作成を終わります。
テンプレートの作成が終わると今作成したスクレイピングの処理が入った「Playbook」が1つ作成されています。右側にある「・・・」マークから編集で名前を付けておきます。
Playbookが作成される

4⃣ BardeenとNotionデータベースの連携方法

Bardeen×Notionのコネクト設定をします。
ページ左上の「Create」ボタンを押します。
左上の＋ボタンを押してスクロールするとNotionが見つかるのでAddボタンを押して追加します。
そのままConnectを押すとNotionへのアクセス確認のページが表示されます。ここでは手順1⃣で複製した書籍管理テンプレートのページ、またはその上位のページを選択してください。
ご自分の書籍管理ページがある方はそのページを選択してください。
これでBardeenがあなたのNotionデータベースに変更を加えることができるようになります。
ページにアクセス権限を追加
これで接続が完了しました。うまく接続できていればNotion側でBardeenのアクセスが許可されていることが確認できます。
Bardeenとのコネクトの確認

5⃣ Bardeenで自動化するPlaybookの作成方法

これでNotionとBardeenでデータを連携する準備が整いました。最後はその連携を自動化するPlaybookを構築していきます。
名前を付けておいた「Amazon×Notion自動化」Playbookを編集します。
Playbookを編集
するとビルダーの編集画面になり、「Scrape data on active tab」の処理に先ほど作成した「Amazon書籍データ」のテンプレートが選択されているのが確認できます。
ここでテンプレートが選択されていない場合はScraperを選択し、Using scraper templateのところを自分で作成した「Amazon書籍データ」を選択します。
次に、取得してきたデータをNotionに登録するための設定していきます。
Scraperの右矢印の先にある＋ボタンを押して「New Action」を選択します。
左サイドバーのNotionアイコンをクリックし、「Update or add Notion page」を選択します。
To databaseの入力欄に「Books」と入力すると実際にコネクトされたデータベースが候補として出てくるので選択します。
コネクトされてるデータベースを選択
書籍管理のデータベース名は「Books」です
次に取得したデータとNotionのプロパティをそれぞれ連携していきます。
まず、Notion側の「URL」に対応した左の欄をクリックします。
すると候補が出てくるので「Scrate data on active tab」を選択します。
「URL」に対応した欄をクリックすると候補が出てくる
選択すると、手順3⃣で書籍情報を取得するテンプレートを作ったときに付けた名前が出てきます。「url」を選択します。
同じ要領ですべて選択していきます。
他の要素（例えば読了日）はページから取得できる要素ではないので空のままで大丈夫です。
url　→　URL image　→　カバー画像 publisher　→　出版社 title　→　名前 release date　→　発売日 author　→　著者 discription　→　説明対応表
設定がすべて完了したらこんな感じになってればOKです。Doneを押して完了します。
これですべての設定は完了です！
取得したい書籍ページからBardeenを開いた状態でPlaybookをクリックすると処理が始まります。
Dataタブから取得したデータを確認し、それがNotionに登録されていればOKです！お疲れさまでした！
Bardeenからの取得結果
書籍情報がNotionのデータベースに登録された

最後に

最後まで読んでいただきありがとうございます！
自動化の仕組みを理解するまでは少し難しく感じるかもしれませんが、一度設定してしまえばあとはずっと使えるものなので頑張って設定してみてください！
もしわからないところなどあればコメントやXにてご連絡いただければ幸いです。
それでは良い読書ライフを！