Touma Hoshino

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

/icons/square-alternate_lightgray.svg 目次

あなたは読書家ですか?

Notionはあなたが今までに読んだ本とそのノートを管理するための最適なツールです。

今回紹介する自動化ワークフローを作っておくと、

  1. ワンクリックでAmazonの書籍ページから本の情報を自分のデータベースに保存できる
  2. タイトル、書影、URL、著者、概要、出版社、発売日がデータベースのプロパティに自動で保存される

という仕組みを構築することができます。

一旦仕組化されれば、どんどん自分の本棚に情報が蓄積されていくため自分だけの図書館を作ることが可能です。

そのための方法をステップバイステップで紹介していきます!


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

こちらはGumroadで無料公開しています。

このテンプレートは以下の機能を含みますが、詳細な説明はこの記事では省かせていただきます。(テンプレ内に使い方の説明があります!)

  • 書籍から得た引用・名言の登録とランダムピック機能
  • 未読・読中・読了の書籍管理
  • ウィッシュリスト・読書メモ・レビュー機能

書籍管理

Gumroadにはカスタマーが値段をつけれる機能があるのですが、無料でゲットする場合は金額欄に「0」と入力してカートに追加してください。

また、ダウンロードにはメアドの入力が必要ですが変なメールを送りつけたりしないので安心してください。

0円でダウンロード

image

2⃣ Bardeenの登録方法

Chromeの拡張機能Bardeenは以下のページからアクセスします。

Bardeen AI: Workflow Task Automation Software

Chromeの拡張機能追加に進む

image

Chromeに拡張機能を追加します。

拡張機能の追加

image

Bardeenの無料登録を行います。

Googleアカウントで行うと簡単です。

アカウントの作成

image

これで下準備は完了です!

Bardeenの設定画面

image

ここからはAmazonから商品情報を取得するための設定をしていきます。

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

まずは取得したい本のページにアクセスします。

今回は最近僕が読んでいる「NO FLOP!」で解説していきます。

Google×スタンフォード NO FLOP! 失敗できない人の失敗しない技術

登録した拡張機能を有効にして「Alt+B」もしくはブラウザ右上のBadeenアイコンをクリックしてBardeenを開きます。

画面上部にある「Scraper」をクリックして、「New Scraper Template」を選択します。

スクレイパーテンプレートの作成

image

該当ページのURLを入力するか「Focused Tabs」からNO FLOP!のページを選択します。

取得したいページを選択

image

シングルページか複数商品などのマルチページを選択するか聞かれるのでSingle pageを選択します。

Single pageを選択

image

Templateの名前を「Amazon書籍データ」として Start building をクリックします。

Start buildingで次に進む

image

そうすると、HTMLの各要素を選択できる画面になります。

要素の選択画面

image

まず、URLを取得したいので右上にあるActionsから+ボタンを押します。

URL情報の取得①

image

次にプルダウンを選択して「Page Link」を選択してチェックをつけます。

そうすると、画面下に取得したデータが表示されているのがわかります。

URL情報の取得②

image

次にタイトルを取得したいのでタイトルにマウスをフォーカスしてクリックします。するとポップアップが出てきます。今回はテキストを取得したいのでGet Textのまま右側のチェックボックスを押してGet Dataを押します。

タイトルの取得

image

そうすると先ほどと同じように画面下に今取得したデータが表示されるので名前を「title」と付けておきます。これはあとでNotionのデータベースと紐づけるときに使用します。この要領でほかの要素も取得していきます。

各要素に名前を付ける

image

次は書影のデータを取得します。これもクリックすると勝手にイメージ画像としてGet Imageで取得してくれるのでチェックボックスにチェックを入れて先に進みます。名前は「image」とします。

次に著者を「author」として登録します。リンクになっている著者はテキストを取得するかリンクを取得するか選べるのでテキストを選択して登録をします。

著者データを取得

image

次は説明文です。「discription」と名前を付けます。

説明文を取得

image

出版社と発売日も取得しておきます。それぞれ「publisher」と「release date」と名前を付けます。

うまくとれていれば画面下のデータ情報はこんな感じになるはずです。

取得データの確認

image

画面右下の「Save Template」を押してテンプレートの作成を終わります。

テンプレートの作成が終わると今作成したスクレイピングの処理が入った「Playbook」が1つ作成されています。右側にある「・・・」マークから編集で名前を付けておきます。

Playbookが作成される

image

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

Bardeen×Notionのコネクト設定をします。

ページ左上の「Create」ボタンを押します。

image

左上の+ボタンを押してスクロールするとNotionが見つかるのでAddボタンを押して追加します。

image

そのままConnectを押すとNotionへのアクセス確認のページが表示されます。ここでは手順1⃣で複製した書籍管理テンプレートのページ、またはその上位のページを選択してください。

ご自分の書籍管理ページがある方はそのページを選択してください。

これでBardeenがあなたのNotionデータベースに変更を加えることができるようになります。

image

ページにアクセス権限を追加

image

これで接続が完了しました。うまく接続できていればNotion側でBardeenのアクセスが許可されていることが確認できます。

Bardeenとのコネクトの確認

image

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

これでNotionとBardeenでデータを連携する準備が整いました。最後はその連携を自動化するPlaybookを構築していきます。

名前を付けておいた「Amazon×Notion自動化」Playbookを編集します。

Playbookを編集

image

するとビルダーの編集画面になり、「Scrape data on active tab」の処理に先ほど作成した「Amazon書籍データ」のテンプレートが選択されているのが確認できます。

image

ここでテンプレートが選択されていない場合はScraperを選択し、Using scraper templateのところを自分で作成した「Amazon書籍データ」を選択します。

image

次に、取得してきたデータをNotionに登録するための設定していきます。

Scraperの右矢印の先にある+ボタンを押して「New Action」を選択します。

image

左サイドバーのNotionアイコンをクリックし、「Update or add Notion page」を選択します。

image

To databaseの入力欄に「Books」と入力すると実際にコネクトされたデータベースが候補として出てくるので選択します。

コネクトされてるデータベースを選択

image

書籍管理のデータベース名は「Books」です

image

次に取得したデータとNotionのプロパティをそれぞれ連携していきます。

まず、Notion側の「URL」に対応した左の欄をクリックします。

すると候補が出てくるので「Scrate data on active tab」を選択します。

「URL」に対応した欄をクリックすると候補が出てくる

image

選択すると、手順3⃣で書籍情報を取得するテンプレートを作ったときに付けた名前が出てきます。「url」を選択します。

image

同じ要領ですべて選択していきます。

他の要素(例えば読了日)はページから取得できる要素ではないので空のままで大丈夫です。

url → URL image → カバー画像 publisher → 出版社 title → 名前 release date → 発売日 author → 著者 discription → 説明対応表

設定がすべて完了したらこんな感じになってればOKです。Doneを押して完了します。

image

これですべての設定は完了です!

取得したい書籍ページからBardeenを開いた状態でPlaybookをクリックすると処理が始まります。

Dataタブから取得したデータを確認し、それがNotionに登録されていればOKです!お疲れさまでした!

Bardeenからの取得結果

image

書籍情報がNotionのデータベースに登録された

image

最後に

最後まで読んでいただきありがとうございます!

自動化の仕組みを理解するまでは少し難しく感じるかもしれませんが、一度設定してしまえばあとはずっと使えるものなので頑張って設定してみてください!

もしわからないところなどあればコメントやXにてご連絡いただければ幸いです。

それでは良い読書ライフを!