Google SpreadSheetとGlideとGAS(Google Apps Script)で図書管理アプリをお手軽に作成する

この記事を読むのに必要な時間は約 15 分です。

スプレッドシートからお手軽にPWAアプリが作成できる「Glide」と言うものの存在を知ったので早速サンプルアプリを作成してみました。
作成したサンプルアプリは以下

作成したアプリ

このアプリケーションをスマホで開くとPWAアプリとして扱えます。
そのため、ホーム画面に保存などをすると以降アプリっぽく使えます。
パッと作ってみてGlideでできることできないことなどもわかったためそういった知見についても共有したいと思います。
※GASやGlideについては軽くは説明しますが詳細はそれぞれ公式のリンク貼っておくのでそちらでどうぞ。

この記事はこんな人におすすめ

アプリ作成を勉強中の人
お手軽にアプリを作成してみたい人
GASやGlideを使ってみたい人

それでは早速作っていきます。

　　　Content

1 GAS（Google Apps Script）とは
2 Glideとは
3 SpreadSheet x GAS x Glideで図書管理アプリケーション作成
4 まとめ

GAS（Google Apps Script）とは

Gmailのアカウントがあれば無料で使えるGoogleのサービスです。
Javascriptをベースに動くプログラムで、ウェブアプリケーションを作成したり、簡易的なサーバーとして利用することができます。
またGoogleのサービスなので各種Googleサービス（SpreadSheetやGmail、Google Driveなど）との連携が簡単に行えます。
今回は主にSpreadSheetに記載したISBNコードから図書データを取得するために利用します。

Glideとは

コードを書かずにスプレッドシートを読み込ませるだけでアプリケーションが作成できるサービスです。

Glide公式

Glide | Watch and Learn

恐らく説明するより見せた方が早いので画像を貼っておくと、具体的には以下の画像のような感じです。

Glideで作成したアプリケーション

右側がスプレッドシートで、左側がGlideのアプリケーション作成画面です。
単純にスプレッドシートの内容を読み込んでいるだけですが、表示形式を自由に変えられたり、表示情報を変更することができます。

また、編集を許可するとGlideアプリ上の修正をスプレッドシートに直接反映させたり、Glideアプリ上で追加したアイテムをスプレッドシートに反映させたりすることができます。
今までスプレッドシートをDBに様々なアプリケーションを作成したりしていましたが、Glideはそれをテンプレ化したアプリケーション作成サービスになります。
できることはある程度限られているため、作成できるアプリケーションはあくまでも情報を整理したようなアプリケーションにはなりますがそれでもこれだけお手軽に作成できるのはなかなか使い勝手が良いです。

詳細画面は比較的自由にカスタマイズできる

先ほどのリスト表示はクリックすると情報の詳細が確認できます。

一覧画面は表示できる情報がある程度限られていましたが、詳細画面は比較的自由に表示情報が追加できます。
デフォルトだと、スプレッドシートの行ごとに情報が表示されますが右上のプラスボタンをクリックすると以下のように様々なコンポーネントを追加できます。

タブで複数シートの情報も参照可能

既に気づいた方もいるかもしれませんが、Glideアプリ下部にナビゲーションボタンが表示されており、複数画面の切り替えが可能になっています。
これらの画面はそれぞれスプレッドシートの各シートに対応する形になっており、様々な情報を管理することが可能です。

PWAアプリケーションとして扱える

これ結構すごいです。
スマホで開いてホーム画面に追加するとネイティブアプリかのように利用することが可能です。

STEP.1

ホーム画面に表示される

まるでネイティブアプリのような表示です。
このアイコンなどは自由に変更可能です。

STEP.2

アプリ起動画面

アプリの起動画面もぽいです！
またPWSでキャッシュベースで動くので動作もかなり早い。

STEP.3

一覧表示と詳細表示

一覧表示も余計な枠なども表示されずにスッキリ

SpreadSheet x GAS x Glideで図書管理アプリケーション作成

スプレッドシートに情報記載してGlideで表示整えたらアプリケーションとしては完成してしまうのですが、一手間加えたくなるのがエンジニア。
（一手間加えなくて良いようなサービスなのでしょうがすみません。。）
と言うのも今回「図書管理」と言うアプリを作成したのですが、図書情報を自分で入力するのは手間ということでそこを自動化できるようにしました。
具体的には図書に必ず振られている「ISBN」を入力するとそこから図書情報を引っ張ってきてくれるようにします。
そうすると、管理する人は新しい図書が追加された場合にISBNコードを入力するだけで本の情報が入力できて、それがアプリケーション側に反映されるようになります。

スプレッドシートを作成する

いつものようにまずスプレッドシートを作成します。
そして、ヘッダー行を入力していきましょう。

画像ではISBNコードも入れていますが、今はまだ入れてなくても大丈夫です。

GASを作成する

スプレッドシートのメニューからスクリプトエディタを起動してGASの画面を表示させます。

ツール　＞　スクリプトエディタ

GASのエディタ画面が表示されたら以下のコードをコピペします。

/* スプレッドシートにメニューを追加 */
function onOpen() {
  var ui = SpreadsheetApp.getUi();
  var menu = ui.createMenu('図書管理用メニュー');
  menu.addItem('図書データ取得', 'getISBNData');
  menu.addToUi();
}
function getISBNData() {
  fetchISBNData();
  Browser.msgBox('ISBNデータの取得が完了しました');
}
function fetchISBNData() {
  // ISBNコードを取得
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet()
  var range = sheet.getRange(2, 1, sheet.getLastRow() - 1);
  var data = range.getValues();
  for (var i = 0; i < data.length; i++) {
    var isbncode = data[i][0];
    // コード無しなら終了
    if(isbncode == "") break;
    // isbn桁数チェック 有効桁数: ハイフンあり14桁 / ハイフンなし13桁 / 10桁
    var isbnLen = isbncode.length;
    if(isbnLen != 14 && isbnLen != 13 && isbnLen != 10){
      range.offset(i,1).setValue("ISBN CODE Error(length?)");
      continue;
    }
    //ハイフンを削除
    isbncode = isbncode.replace( /-/ ,"");
    //isbn使用文字チェック 数字以外は許可しない
    var isbnJudge = isbncode.search( /^[0-9]+$/ );
    if( isbnJudge == -1){
      range.offset(i,1).setValue("ISBN CODE Error(value?)");
      continue;
    }
    // OpenBD APIに問い合わせ
    var response = UrlFetchApp.fetch("https://api.openbd.jp/v1/get?isbn=" + isbncode);
    // APIの結果をパース
    var resultJson = JSON.parse(response.getContentText("UTF-8"));
    if(resultJson[0] != null && resultJson[0].summary != null){
      //title
      sheet.getRange(i + 2, 2).setValue(resultJson[0].summary.title);
      //author
      sheet.getRange(i + 2, 3).setValue(resultJson[0].summary.author);
      //pubdate
      sheet.getRange(i + 2, 4).setValue(resultJson[0].summary.pubdate);
      //publisher
      sheet.getRange(i + 2, 5).setValue(resultJson[0].summary.publisher);
      //説明
      sheet.getRange(i + 2, 6).setValue(resultJson[0].onix.CollateralDetail.TextContent[0].Text);
      //cover書き込み
      sheet.getRange(i + 2, 7).setValue(resultJson[0].summary.cover);
    } else {
      //異常時
      sheet.getRange(i + 2, 2).setValue("OpenBD API Error");
    }
  }
}

一度「fetchISBNData」を実行しておきます。

実行を許可するかの画面が表示されるので、許可して実行します。
GASのソースで「/* スプレッドシートにメニューを追加 */」部分を何だろう？と思った方がいるかもしれませんが、次に説明していくので今は気にしないでください。

スプレッドシートにISBNを追加していく

ISBNの列にデータを取得するISBNを記述していきます。
記載が完了したらメニューから「図書館利用メニュー」＞「図書データ取得」をクリックします。
ここでも実行の許可を求められるので許可してください。
実行が完了すると以下のダイアログが表示されるのでOKをクリックしてください。

すると実際にデータが取得されて表示されます。

場合によってはデータが取得できなかったり、カバー画像が取得できなかったりします。
ここまでくればスプレッドシートの準備は完了です。
続いていよいよGlideに連携していきます。

Glideにスプレッドシートのデータを連携する

Glideを開きます。

初めての場合は「SIgn Up」そうでない場合は「Sign In」でログインします。
ログインにはGoogleのアカウントを使用します。
先ほどスプレッドシートを作成したアカウントでログインしてください。
左側のメニューの「New App」をクリックすると自分のスプレッドシートの一覧が表示されるので先ほど作成したスプレッドシートを指定してください。

しばらく待つとアプリが作成されて設定画面が表示されます。
あとはここで好きな表示になるように設定をすれば完成です。

基本的に触るのは「Navigation」「Screens」「Settings」のみです。
アプリが完成したら「Share app」でURLを取得しましょう。

Navigationでできること

画面下部のタブの表示の修正が主にできます。

アイコンの表示切り替え
名称の表示切り替え
アイコンの順番並び替え

などを行うことができます。

Screensでできること

こちらをメインに扱うことになるかと思います。
まず一覧画面では

レイアウトの変更
表示情報の変更

が変更できます。
次に詳細画面では

表示情報の変更
表示順序の変更
各コンポーネントの追加

が行えます。
各コンポーネントの追加に当たって必要な情報などは適宜スプレッドシートに追記する必要があります。
また、各画面で編集を許可するかどうかなども行うことができます。

注意点

スプレッドシートの情報を変更した場合は「Reload Sheet」で反映させることができますが、変更内容によってはScreensの設定をやり直す必要があったりもするので可能な限りスプレッドシートの情報を固めた上でScreensの設定に入るのが良いです。

まとめ

以上でお手軽Glideアプリケーションの作成は完了です！
簡単なアプリだともはや非エンジニアでも作成できるようになってきましたね。
最近はデザインするだけでhtmlのソースを生成できたりもするので中途半端なエンジニアリング能力は不要ですね。
このような便利なサービスは次から次へと出てくると思うのでどんどん活用して効率化していきましょう！