以前、夫婦で共有できる家計簿アプリをGoogleフォームで作ってみました。
スマホ片手にレシートの情報をぱっと入力すると…
自動で家計簿Googleスプレッドシートが作成されるという代物です。
Googleフォームの基本機能＋α で簡単に作れるので、読者の方から「記事を読んで実際に作ってみました」という声もいただきました。ありがとうございます。
一覧画面小さすぎ問題
しばらく使っていると問題点が浮上しました。
「あれ？このレシートって入力したっけ？」「前回散髪に行ったのはいつだったっけ？」といったときに家計簿をスマホで見たくなり、Googleスプレッドシートアプリを開くのですが…
ポチッ…
めちゃめちゃ小さくて見づらい！！！
未だに4インチの初代iPhoneSEを使い続けている私も悪いんですが、スマホの小さな画面でGoogleスプレッドシートを直接見るのは可視性が悪すぎます。なんとかならんものか。
そうだ、閲覧用アプリを作ろう！
Googleスプレッドシートのデータを見やすくするための閲覧用アプリ（ビューワー）を作ろうと思い至りました。スマホに適したサイズで家計簿を一覧表示できて、検索・照会ができれば十分です。
しかしアプリ開発環境を整えるとなると結構大変。Googleスプレッドシートをいい感じにスマホ用に変換できるSaaSがあればよいんだけどなあ…… そんな都合の良いものあるわけ……
ありました。
Glide
https://www.glideapps.com/
無料で5分でアプリが作れるという自信満々なキャッチコピー
どうやらGoogleスプレッドシートを簡易データベースのように扱い、手軽にPWA(Progressive Web Apps)を開発できるサービスのようです。
「本当にそんな手軽に作れるのか？」と疑いながら、Googleアカウントでログインして、「Create App」＞「From Google Sheet」から家計簿Googleスプレッドシートを選び、編集画面で表示したい列やレイアウトをいじってみたところ……
ｼﾞｬｼﾞｬﾝ!!!
本当に爆速でいい感じのビューワーができました！ 機能が多すぎず、マニュアルを読まなくても直感的に作れるのが最高ですね！
いくつか工夫した点を紹介しておきます。
工夫1：1つのフィールドに複数の項目を表示する
一覧画面は「Title」「Details」「Caption」「Image」から成ります。1つのフィールドにはGoogleスプレッドシートの1つの列（カラム）しか対応付けられない仕様のようです。「Title」に「日付」と「金額」の両方を表示したかったので、一工夫しました。
ポイントは「画面表示用のスプレッドシートを別途作る」です。
Googleフォームの入力内容が蓄積されるスプレッドシートとは別に、Glideでの画面表示用のスプレッドシートを作成しました。データベースでいうビューのようなイメージで、メイン（実表）となる家計簿スプレッドシートをIMPORTRANGE関数で参照して画面表示用のスプレッドシート（ビュー）を作成し、表示したいフォーマットに合わせて列を加工しています。
日付(yyyy/MM/dd) + 半角空白 + 金額(¥###0)。列全体の加工にはARRAYFORMULA関数を使うと楽。
全体の流れを図示すると、次のようになります。
全体の流れ
もとのスプレッドシートに列追加するのではなく、別途スプレッドシートを作ったのは、今後入力画面（Googleフォーム）に新たな項目を追加した際に列が自動で上書きされてしまう可能性があると考えたからです。入力内容を格納するためのスプレッドシートに閲覧画面用の余計な列を含めるのは設計的にも望ましくないですしね。
工夫2：入力内容を即時反映させる
メインユーザーである妻からの指摘で気づいたのですが、入力内容がGlideの画面に反映されるまでにタイムラグがあるようです。試してみたところ数分待っても反映されないことがしばしば。これはいけない。
Glideの公式マニュアルを読んでも解決策が載っておらず非常に困ったのですが、Qiitaで裏技が紹介されていました。
スイッチ・コンポーネントは、フィールドにチェックボックスを付けるものですが、動作には強制リフレッシュを伴うので、リロードの代わりに使うことができます。
スプレッドシート上のON/OFFを更新するための「スイッチ」を、リロードボタンとして使っちゃうというコペルニクス的転回です。頭良い！
早速私も実装しました。
これで手動ではありますが、任意のタイミングで即時反映できるようになりました。
工夫3：Glideの無料枠上限内に収める
2019年11月に運用開始してから半年ほどゴキゲンに使ってたのですが、2020年5月に突然使用不能に陥りました。
ストレージがいっぱいという警告メッセージ。左上のレコード数は「500/500」で赤くなってます。
いつかはこうなるだろうなと予想はしていたのですが、Glideの無料枠上限である500レコードに引っかかってしまったようです。
対策として、画面表示用のスプレッドシートの件数を500件に絞ることにしました（IMPORTRANGE関数の範囲を調整することで実現）
工夫1で画面表示用のスプレッドシートをメインのスプレッドシートから独立させていたのが、功を奏しました。
補足：直近500行を取得する方法
IMPORTRANGE関数で直近500行を取得する方法を詳しく教えてほしいというはてブコメントをいただいたので、補足しておきます。下記のように関数を駆使して直近500行（厳密には499行）を取得してます。
=IMPORTRANGE(
"スプレッドシートのURL",
"A"&TO_TEXT(
COUNTA(
IMPORTRANGE(
"スプレッドシートのURL",
"B:B"
)
)-500+2
)&":J"
)
わかりやすくするために改行を入れました。COUNTA関数でシートの行数を取得しています。例えばシートの行数が2000行だとすると
=IMPORTRANGE( "スプレッドシートのURL", "A1502:J" )
となり、A1502からJ2000までの499行を取得できます。これにヘッダー1行を足すと、ちょうど500行になります。
まとめ
Glideを使ってノンコーディングで簡単にGoogleスプレッドシートの閲覧用アプリを作ることができました。家計簿だけでなく幅広い応用の可能性がありそうです。今回は紹介しきれませんでしたが、写真挿入、グラフ生成、地図作成など、様々な機能があり、バージョンアップでどんどん新機能も増えていってます。Googleドライブ上で持て余しているデータがある人は是非Glideでアプリ化してみてはいかがでしょうか。
素材提供：GoogleスプレッドシートとGoogleフォームのアイコンは「アイコン8」のフリー素材を使用しました
2021-04-18：「直近500行を取得する方法」を追記
