Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
27
Help us understand the problem. What are the problem?

AppSheetと20行のGoogle Apps Scriptで作るバーコード蔵書管理アプリ

GoogleのノーコードツールAppSheet、Googleスプレッドシート、Google Apps Scriptを組み合わせて、蔵書管理アプリを無料で作りました。スマホのカメラを使い、バーコードを読むだけでじゃんじゃん登録できるのでとても便利です!

image.png

この記事を書くにあたって、ノーコード(AppSheet)でバーコードを読み取ってGASを使った蔵書管理を参考にさせていただきました。どうもありがとうございます!

今回はWebhookを使わないシンプルな構成で実現してみました。Google SheetsのChangeイベントを使っています。画面の再読み込みが必要なこともありますが十分実用的です。

Googleスプレッドシートの準備

「AppSheetを使うには、まずスプレッドシートから」

AppSheetの特徴は、先にデータソースを作るところにあります。
OpenBD APIのsummaryが次のような形式になっているので、

"summary": {
  "isbn": "9784873115658",
  "title": "リーダブルコード : より良いコードを書くためのシンプルで実践的なテクニック",
  "volume": "",
  "series": "",
  "publisher": "オライリー・ジャパン : オーム社",
  "pubdate": "2012-06",
  "cover": "https://cover.openbd.jp/9784873115658.jpg",
  "author": "Boswell,Dustin/著 Foucher,Trevor/著 角征典/翻訳 フォシェトレバー/著 ほか"
}

それに合わせてGoogleスプレッドシートで、次のようにカラムを設計しました。なお、最初にID列を作ったのは、AppSheetでいい感じに動かすための工夫です。

image.png
シート名はBooksにしてあります。

Google Apps Scriptの準備

スプレッドシートに新しいISBNが登録されることをトリガーとして、そのISBNにひもづく書誌・書影情報をOpenBD APIで取得します。

Googleスプレッドシートのメニュー Tools > Script Editor で記述していきます。

function fetchBookSummary(isbn) {
  const url = 'https://api.openbd.jp/v1/get?isbn=' + isbn;
  const res = UrlFetchApp.fetch(url);
  const json = JSON.parse(res.getContentText());
  return json[0].summary;
}

function getDate(strDate) {
  return new Date(strDate.slice(0, 4), strDate.slice(4, 6), strDate.slice(6, 8));
}

function onChangeSheet(e) {
  const sheet = SpreadsheetApp.getActive().getSheetByName('Books');
  sheet.getDataRange().getValues().forEach((row, i) => {
    const isbn = row[1], title = row[2];
    if (!isbn || title) return;
    const s = fetchBookSummary(isbn);
    sheet.getRange(i + 1, 1, 1, row.length).setValues([[row[0], isbn, s.title, s.publisher, getDate(s.pubdate), s.cover, s.author, row[7]]]);
  });
}

fetchBookSummary() は、UrlFetchAppを使って OpenBD API を呼び出しsummaryを返却します。

onChangeSheet() は、スプレッドシートが変更されたときに呼び出します。Booksシートのデータをすべて読み込み、ISBN列にデータはあるけれど、タイトル列にデータがない場合に、fetchBookSummary() を使って書誌情報を取得し、スプレッドシートに書き戻します。

忘れずにトリガーを設定

ソースコードの準備ができたら、スプレッドシートを変更したときに onChangeSheet() を呼び出すようにトリガーを設定します。Script Editorの左ペインの時計マーク Triggersを選択し、右下の Add Trigger ボタンを押します。

image.png

Select event type を On change にしてください。

image.png

ここまで準備ができたら、ISBN列に例えば9784873115658を入力してみましょう。少し時間が立つと、自動的に書誌情報が表示されます。

AppSheetの準備

ここまででスプレッドシート側の準備ができました。
スプレッドシートのメニュー Tools > AppSheet > Create an app で、AppSheetのアプリを作ります。
AppSheet側でいい感じに準備をしてくれますが、間違って解釈していないか調整していきます。

AppSheetのデータスキーマを確認

まずはデータが肝心です。

AppSheetがBooksテーブルを自動的に作ってくれています。細かい調整をするために、左ペイン Data > 上部タブ Columns を開きます。最終的には次のようにしました。

image.png

私は次のような調整をしました。

  • ID
    • SHOW?とSEARCH?を外して、入力画面から見えなくする
  • ISBN
    • TypeはNumberからTextに変更する
    • REQUIRE?をチェックする
    • SCAN?をONにして、バーコードリーダーを有効にする
  • PubDate
    • REQUIRE?を外す
    • INITIAL VALUEがTODAY()だったので消す
  • Cover
    • TypeをThumbnailに変更して、書影を表示する
    • REQUIRE?を外す
  • Created At
    • TypeをTextからDateTimeに変更する
    • INITIAL VALUEをNOW()にする

AppSheetのViewを確認

次に画面を見ていきます。Booksビューを作ってくれています。左ペイン UX > 上部タブ Views を開いて調整していきます。

image.png

  • View type
    • cardをdeckに変更します
  • View Options
    • Sort byでPubDateが有効になっていたので削除しました

AppSheetのアプリプレビューを確認

ColumnsとViewsを確認したら、画面右側のプレビューを確認します(もしプレビュー画面が見えていない場合は、画面右はじにある左向きの三角マークを押してください。)。

といっても、プレビューではバーコードリーダーが使えないので、確認できるのは一部です。

image.png

プレビュー画面の右下にあるプラスボタンを押すと、本の登録フォームが表示されます。この時、ISBNの欄の右はじにQRコードアイコンが表示されていることを確認してください(もし表示されていなければ、ColumnsのSCAN?をチェックしてください)。

image.png

手入力でISBNを入力したときに、正しく情報が取得できるかを確認します。ISBNの欄に9784873115658を入力して、プレビュー画面下のSaveを押します。

すると、ISBNだけが登録された状態になります。

image.png

そのまま待っていると書誌情報が表示されます。タイミングによってはプレビュー画面が更新されないことがあるので、画面が変わらない場合は右上の回転矢印アイコンを押して再読み込みしてください。

image.png

スマホアプリで確認

プレビューでの動作を確認できたら、いよいよスマートフォンのカメラを使って試してみます。
アプリストアから AppSheet アプリをインストールしてログインし、左上のメニューから Created by me を選ぶと自分が作ったアプリ一覧が表示されます。

プレビューと同じように、右下のプラスアイコンを押して、ISBNの欄のQRコードアイコンを押すとカメラが起動します。本には2つのバーコードがついていますが、上の方(978からはじまるISBN)を読み取ります。ISBNの欄に978からはじまる数字が入力されたら、Saveボタンを押してください。私の環境では5秒程度で本の情報が表示されました。

まとめ

次の手順で無料の蔵書管理アプリを作ってみました。

  • Googleスプレッドシート
    • データ構造を決める
    • Web APIで情報を取得し、スプレッドシートに反映するGoogle Apps Scriptを作る
    • スプレッドシートに情報が入力されたら、上記スクリプトを実行するトリガーを作る
  • AppSheet
    • 上記スプレッドシートからアプリを作る
    • プレビューでバーコードリーダー以外の動作を確認する
    • スマホにAppSheetアプリをインストールして動作確認する

スプレッドシートのChangeイベントを使うことで、Webhookを使わない構成にできました。Webhookのエンドポイントを公開せずにすむので安心です。

バーコードが使ったアプリをこんなに簡単に作ることができて驚きです。データベースをスマホで確認したい、といった単純な用途にAppSheetはピッタリですね!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
27
Help us understand the problem. What are the problem?