本のバーコードを読み取ってNotionで読書録を作成するアプリを作ってみた - Qiita
作成日
2022/02/25
オススメ度
👍👍👍
ひと言メモ
スマホから本のバーコード読み取ってNotionで読書録を作成するアプリを作れるGAS！
カテゴリDBカテゴリ
はじめまして。インディーゲームを作っております、nyorokoと申します。
ゲームづくりの他に読書が好きで、「読書録を簡単に作成・管理することはできないか？」という問題意識があり、タイトルの通りのアプリを作ってみました。
完成したもの
Notionとは？
Notionとは、タスク管理やメモ等を一元的に行うことのできるアプリです。
Evernoteと似ていると思うのですが、無料で複数のデバイスから使用可能であるなどの違いがあります。
私はPC、iPhone、iPadなど様々なデバイスを使用しているため、メモアプリとしてはNotionを使っております。
今回は、そのNotionを使って読書録を作ってみようと考えました。
ちなみに、この記事もNotionで下書きを作成しております。
アプリの実装方法について
大まかな処理の流れ
以下のようなフローで読書録を作成します。
- 本のバーコードを読み取りISBNを取得
- ISBNをキーに本の情報を取得
- 取得した本の情報をNotionに送信
どうアプリ化するか？
まず、ウェブアプリとして実装します。
理由としては、様々なデバイスで使用できることなどが挙げられます。
次に、ウェブアプリとして実装するにあたって、GAS(Google App Script)を活用します。
GASには、
- Googleアカウントさえあれば開発環境の整備が不要
- Google謹製であり情報が多く、安定している
- 無料である
などの多くの利点があるためです。
詳細な実装方法
1. GASでプロジェクトを作成
2. 「index.html」を作成
デフォルトで作成される「コード.js」に、以下のコードを書き込みます。
そして、同階層に「index.html」を作成します。
これにより、ウェブアプリとして公開した際に、「index.html」が表示されます。
Plain Text
3. quaggaJSの使用
バーコードを読み取ってISBNを取得するために、quaggaJSを使用します。
quaggaJSについては、この記事が参考になります。
今回は、2.で作成したindex.htmlにソースコードをそのまま追記させていただきました。
これで、バーコードを読み取ってISBNを取得する部分が完成しました。
いやはや、素晴らしいライブラリですね…！
quaggaJSですが、2017年以降メンテナンスされていないようです。 また、今回はGASでの実装なので関係ないのですが、localhost以外のサイトではhttpsでないと利用できません。（私はここで一度ハマりました…）
4. ISBNから本の情報を取得
この目的を達成するためには、
- Google Books API
- 楽天ブックスAPI
- 国立国会図書館サーチAPI
など様々なAPIがありますが、今回は登録不要であることなどからGoogle Books APIを使用しました。
ただ、サムネイル画像が小さかったため、本の画像のみAmazonを使用しました。
今回は、
- タイトル
- サブタイトル
- 著者
- 出版日
- ページ数
- 画像
を取得することとし、まずは対応するinput要素をHTML部分に作成します。
（HTMLについても情報が多いため、詳細は割愛いたします。）
「index.html」のJavaScript部分におけるfunctionのサンプルコードは以下の通りです。
HTML部分のidに応じて改変してご利用ください。
Plain Text
5. Notion APIの下準備
Notion APIを使用して、取得した本の情報を送信します。
下準備として、データベースの作成およびIDを取得する必要があり、この記事が参考になります。
データベースのフィールドとしては、上記で取得する項目の他に、「State」フィールドを追加しました。
後続の工程で、デフォルトでは「興味あり」というセレクト項目が送信されるようにします。
6. Notion APIを使って情報を送信
index.htmlから直接Notion APIに接続すると、CORSエラーが発生してしまいます。
そのため、間にGASを挟むことでCORSエラーを回避しました。
具体的には、「コード.gs」に以下のコードを追記し、「index.html」側のフォームからdoPostを呼び出すことでCORSエラーを回避しました。
なお、JSONの構造についてはこの記事を参考にしました。
Plain Text
7. 見栄えの調整(スキップ可)
このままだと「index.html」の見栄えが良くないのですが、CSSを編集するのは手間であるため、今回はBootstrapを用いてイケてるデザインにしました。
8. ウェブアプリとして公開
GASの画面の「デプロイ」ボタンを押し、「ウェブアプリとして公開」することで完成です！
なお、iOSの場合はウェブサイトをホーム画面に追加する機能がありますので、あたかもネイティブアプリかのような見栄えにすることができます。
初投稿ということで、至らぬところが多かったと思いますが、少しでもご参考になれば幸いでございます。
また、「アプリを作った」と言いつつ、先人が作った素晴らしいライブラリやAPIをフルに活用させていただいておりますので、感謝の念に堪えません。
最後に、私はインディーゲームを開発しております。無料でサクッと遊べますので、ぜひリンク先だけでもご覧いただけますと幸甚です。
Why not register and get more from Qiita?
- We will deliver articles that match youBy following users and tags, you can catch up information on technical fields that you are interested in as a whole
- you can read useful information later efficientlyBy "stocking" the articles you like, you can search right away