👍👍👍ひと言メモスマホから本のバーコード読み取ってNotionで読書録を作成するアプリを作れるGAS!URLhttps://qiita.com/nyoroko/items/452a8db449862f31ab2b?utm_content=buffere9609&utm_medium=social&utm_source=twitter.com&utm_campaign=bufferカテゴリDBカテゴリNotion関連ブログはじめまして。インディーゲームを作っております、nyorokoと申します。ゲームづくりの他に読書が好きで、「読書録を簡単に作成・管理することはできないか?」という問題意識があり、タイトルの通りのアプリを作ってみました。完成したものNotionとは?Notion公式サイトNotionとは、タスク管理やメモ等を一元的に行うことのできるアプリです。Evernoteと似ていると思うのですが、無料で複数のデバイスから使用可能であるなどの違いがあります。私はPC、iPhone、iPadなど様々なデバイスを使用しているため、メモアプリとしてはNotionを使っております。今回は、そのNotionを使って読書録を作ってみようと考えました。ちなみに、この記事もNotionで下書きを作成しております。アプリの実装方法について大まかな処理の流れ以下のようなフローで読書録を作成します。取得した本の情報をNotionに送信どうアプリ化するか?まず、ウェブアプリとして実装します。理由としては、様々なデバイスで使用できることなどが挙げられます。Script)を活用します。GASには、Googleアカウントさえあれば開発環境の整備が不要Google謹製であり情報が多く、安定している無料であるなどの多くの利点があるためです。GASでプロジェクトを作成GASについてはネット上に情報が多く存在しておりますので、詳細は割愛いたします。この記事が参考になると思います。「index.html」を作成デフォルトで作成される「コード.js」に、以下のコードを書き込みます。同階層に「index.html」を作成します。これにより、ウェブアプリとして公開した際に、「index.html」が表示されます。quaggaJSの使用バーコードを読み取ってISBNを取得するために、quaggaJSを使用します。quaggaJSについては、この記事が参考になります。今回は、2.で作成したindex.htmlにソースコードをそのまま追記させていただきました。これで、バーコードを読み取ってISBNを取得する部分が完成しました。いやはや、素晴らしいライブラリですね...!quaggaJSですが、2017年以降メンテナンスされていないようです。今回はGASでの実装なので関係ないのですが、localhost以外のサイトではhttpsでないと利用できません。APIを使用しました。サムネイル画像が小さかったため、本の画像のみAmazonを使用しました。画像を取得することとし、まずは対応するinput要素をHTML部分に作成します。(HTMLについても情報が多いため、詳細は割愛いたします。「index.html」のJavaScript部分におけるfunctionのサンプルコードは以下の通りです。HTML部分のidに応じて改変してご利用ください。APIを使用して、取得した本の情報を送信します。下準備として、データベースの作成およびIDを取得する必要があり、この記事が参考になります。データベースのフィールドとしては、上記で取得する項目の他に、「State」フィールドを追加しました。後続の工程で、デフォルトでは「興味あり」というセレクト項目が送信されるようにします。APIに接続すると、CORSエラーが発生してしまいます。そのため、間にGASを挟むことでCORSエラーを回避しました。具体的には、「コード.gs」に以下のコードを追記し、「index.html」側のフォームからdoPostを呼び出すことでCORSエラーを回避しました。JSONの構造についてはこの記事を参考にしました。見栄えの調整(スキップ可)このままだと「index.html」の見栄えが良くないのですが、CSSを編集するのは手間であるため、今回はBootstrapを用いてイケてるデザインにしました。iOSの場合はウェブサイトをホーム画面に追加する機能がありますので、あたかもネイティブアプリかのような見栄えにすることができます。初投稿ということで、至らぬところが多かったと思いますが、少しでもご参考になれば幸いでございます。「アプリを作った」と言いつつ、先人が作った素晴らしいライブラリやAPIをフルに活用させていただいておりますので、感謝の念に堪えません。最後に、私はインディーゲームを開発しております。無料でサクッと遊べますので、ぜひリンク先だけでもご覧いただけますと幸甚です。