LoginSignup
9
8

More than 1 year has passed since last update.

@takatama(高玉 広和)

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

Last updated at Posted at 2023-02-26

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

以前は画面の再読み込みが必要なことがあったのですが、AppSheetから直接Apps Scriptを呼び出す機能を使うことで再読み込みが不要になり、バーコードを読めば画面が確実に更新されるようになりました。AppSheetでバーコードからISBNを読み取り、Apps Scriptで書籍の情報を追記する、という連携をしています。

次の手順で作っていきます。

  1. Google Books APIの動作を確認
  2. Googleスプレッドシートを作成
  3. スタンドアロンのApps Scriptを作成
  4. AppSheetアプリを作成

Google Books APIの動作を確認

Google Books APIを使って、ISBNから書籍の情報を取得します。情報を参照するだけならAPI Keyは不要です。

利用するパラメーターは国コードを表すcountryと、ISBNで検索するq=isbn:の2つです。書籍「リーダブルコード」ならcountry=jp、q=isbn:9784873115658として、URL https://www.googleapis.com/books/v1/volumes?country=jp&q=isbn:9784873115658 を作ります。

Googleスプレッドシートを作成

書籍の情報を記録できるよう、新しくGoogleスプレッドシートを作成します。スプレッドシート名はMyLibrary、シート名はBooksに変更しました。

次に、列を設計していきます。AppSheetを使いこなすには、データベースを設計する「データモデリング」がとても重要です。

Google Books APIから返却されるJSONを抜粋すると、次のようになっています

{
  "items": [{
    "volumeInfo": {
      "title": "リーダブルコード",
      "subtitle": "より良いコードを書くためのシンプルで実践的なテクニック",
      "authors": [
        "Dustin Boswell",
        "Trevor Foucher"
      ],
      "publisher": "O'Reilly Media, Inc.",
      "publishedDate": "2012-06",
      "description": "読んでわかるコードの重要性と方法について解説",
      "imageLinks": {
        "thumbnail": "http://books.google.com/books/content?id=Wx1dLwEACAAJ&printsec=frontcover&img=1&zoom=1&source=gbs_api"
      }
    }
  }]
}

そこで、以下の9つの列を準備します。最初のISBNをキーにして「同じISBNの本は一冊しか蔵書にない」とします（同じISBNの本を読み取るとエラーになります）。最後にcreatedAtを追加して、この列を作成した時刻を入れることにします。

image.png

ISBN title subtitle authors publisher publishedDate description thumbnail createdAt

スタンドアロンのApps Scriptを作成

続いて、Apps Scriptを作成します。ISBNを指定するとGoogle Books APIを使ってシートに書籍の情報を追記するスクリプトです。

ここで、大事な注意事項があります。AppSheetから呼び出せるのはスタンドアロンのApps Scriptです。（スプレッドシートの拡張機能からApps Scriptを作るのではなく）単独のApps Scriptを作成しましょう。Google Drive上で右クリックをして、Google Apps Scriptを作成します。

image.png

名前はMyLibraryにしました。作成したApps Scriptをダブルクリックしてスクリプトエディターを開き、次のコードを記述します。SHEET_URLには先程作成したスプレッドシートのURLを記述します。

// 注意！スプレッドシートのURLに書き換えてください
const SPREADSHEET_URL = 'https://docs.google.com/spreadsheets/d/XXXXXXXXXXXXXXXXXXX/edit#gid=0';

function fetchBookInfo(isbn) {
  const url = `https://www.googleapis.com/books/v1/volumes?country=jp&q=isbn:${isbn}`;
  const res = UrlFetchApp.fetch(url);
  const json = JSON.parse(res.getContentText());
  return json.items[0].volumeInfo;
}

function updateBook(isbn) {
  const sheet = SpreadsheetApp.openByUrl(SPREADSHEET_URL).getSheetByName('Books');
  const rowIndex = sheet.getDataRange().getValues().findIndex(row => row[0] == isbn); // ISBNが数字or文字なので===ではなく==で比較。
  if (rowIndex === -1) throw `ISBNが"${isbn}"の行がありません。`;
  const info = fetchBookInfo(isbn);
  const row = [isbn, info.title, info.subtitle, info.authors.join(', '), info.publisher, new Date(info.publishedDate), info.description, info.imageLinks.thumbnail, new Date()];
  sheet.getRange(rowIndex + 1, 1, 1, row.length).setValues([row]);
}

function testFetchBookInfo() {
  console.log(fetchBookInfo(9784873115658));
}

function testUpdateBook() {
  updateBook(9784873115658)
}

fetchBookInfo(isbn)は、指定したISBNの書籍の情報をGoogle Books APIを使って取得し、JSON形式で返却します。
updateBook(isbn)は、Booksシートの1列目にISBNが記述されているとき、そのISBNの書籍の情報をその行に追記します。

記述できたら保存して、testFetchBookInfo()を実行しましょう。権限が求められたら許可をします。実行ログに書籍の情報が表示されればOKです。

image.png

次にtestUpdateBook()を実行します。すると、次のようなエラーが実行ログに表示されます。

image.png

BooksシートにISBN9784873115658の行が存在しないためエラーになりました。AppSheetがバーコードを読み取ってISBNをBooksシートに記入し、それをトリガーにApps Scriptで書籍の情報を取得する、という前提でApps Scriptを準備しています。

そこで、BooksシートのISBN列に9784873115658を記述します。

image.png

再度、スクリプトエディターでtestUpdateBook()を実行します。今度は実行ログにエラーが表示されず、Booksシートに情報が追記されました（もしエラーが表示される場合は、この先で対処法を示します）。

image.png

ISBN title subtitle authors publisher publishedDate description thumbnail createdAt
9784873115658 リーダブルコード Dustin Boswell, Trevor Foucher より良いコードを書くためのシンプルで実践的なテクニック O'Reilly Media, Inc. 2012-06 読んでわかるコードの重要性と方法について解説 image 時刻

もし実行ログに次のエラーが表示される場合、これまでの作業が十分か確認してください。

  • Exception: Unexpected error while getting the method or property openByUrl on object SpreadsheetApp.
    • SPREADSHEET_URLにスプレッドシートのURLを正しく記述したか、確認してください。
  • TypeError: Cannot read properties of null (reading 'getDataRange')
    • スプレッドシートのシートシート1の名前をBooksに変更したか、確認してください。

AppSheetを作成

Apps Scriptが正常に動作することを確認できたら、AppSheetのアプリを作成します。AppSheetアプリがバーコードを読み取って新しい行にISBNを保存すると、それをトリガーにApps Scriptを実行し書籍の情報を追記します。

スプレッドシートの上部メニュー「拡張機能」から「AppSheet > Create an app」を選びます。

image.png

少し待つと、AppSheetのアプリが出来上がります。Customize your appボタンを押して、先に進みましょう。

image.png

ここから、Data（データ）とView（ビュー）を調整していきます。

Data > Books

左ペインDataを選択し、Booksを選択します。

ISBNは、REQUIRE?（必須）とSCAN?（バーコード）をチェックします。

NAME TYPE REQUIRE? INITIAL VALUE SCAN?
_RowNumber Number
ISBN Text（変更） ✔ ✔（変更）　
title TExt
subtitle Text
authors Text
publisher Text
publisedDate Date（変更） 外す（変更） 空にする（変更）
description LongText（変更）
thumbnail Thumbnail（変更） 外す（変更）
createdAt DateTime 外す（変更） =NOW()（変更）

保存すると、右側の画面プレビューに書影のサムネイルが表示されます。

image.png

Views > Books

ここからはViewの調整です。左ペインのスマホアイコンでViewsに切り替えて、PRIMARY NAVIGATIONからBooksを選びます。

View typeはdeckにします。

View Optionsは次の通りです。

  • Sort by
    • publishedDateになっているのを削除
  • Main Image
    • thumbnail
  • Primary header
    • title
  • Secondary header
    • authors
  • Summary column
    • publishedDate

image.png

Automation

ここからは、ISBNが追加されるとApps Scriptを実行するように設定していきます。左ペインのロボットアイコンを押します。Create my first automationボタンを押します。

image.png

Create a new botボタンを押します。

image.png

ここからはEVENTとPROCESSをそれぞれ設定します。EVENTはこのBotを実行するトリガーになるイベントを設定し、PROCESSは実行される処理を設定します。Configure eventボタンを押します。

image.png

Create a custom eventを選択します。

image.png

右側の画面プレビューが設定画面に切り替わります。切り替わらない場合はギアアイコンを押してください。

image.png

EVENTは次のように設定します。

  • Event Type
    • Data Change
    • Adds only
  • Table
    • ISBN

image.png

今度は、画面真ん中でAdd a stepボタンを押してPROCESSを設定します。Create a custom stepを押します。

image.png

PROCESSは次のように設定します。

  • Settings
    • Call a script
  • Table name
    • ISBN
  • Apps Script Project
    • （作成したApps Script）
  • Function Name
    • updateBook(isbn)
  • Function Parameters
    • =[ISBN]
  • Return Value
    • チェックなし
  • Run asynchronously
    • チェックなし

image.png

なお、Apps Script Projectを選ぶときに、ファイルを選択するように言われます。ここで、単独のApps Scriptを選択しないとエラーになります。

image.png

動作確認

お疲れ様でした！これで設定は完了です。忘れずに画面右上のSAVEボタンを押しましょう。

動作を確認してみます。画面右側のプレビューでスマホアイコンを押します。

image.png

プラスアイコンを押して、新しい本を追加します。ISBNに4774142042を入力して、Saveボタンを押します。

image.png

次のように表示されればOKです。もしうまく行かない場合は、画面右上のSAVEボタンを押したか確認してください。

image.png

もし期待通りに動作しない場合は、Automation Monitorを確認してみてください。何かヒントが得られるかもしれません。左ペインの下から2番目Manageアイコン > Monitor > Automation Monitor > Lauch automation monitor で起動します。

image.png

画面下部Runsを選択すると、Automationが実行された様子を確認できます。

image.png

まとめ

Googleスプレッドシート、Google Apps Script、AppSheetを使って、無料の蔵書管理アプリを作ってみました。AppSheetからスタンドアロンのApps Scriptを呼び出せるようになったおかげで、より高度なアプリを作れるようになりました。

もし、バーコードを連続して読み取りたい場合は次のスクリプトを参考にしてください。AppSheetを使わずApps Scriptオンリーで作っていきますが、こちらも無料で実現できます。

9
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
9
8