はじめに

先日書いた包括的なIT支援とは別の方面から、やはり能登の震災関連のオファーがあったのでやってみたお話です。

先日の第一報

概要

自宅でお風呂に入れない方向けのシャワー施設があり、そこの予約です。

現状

施設は、４つのシャワールームがある
- ＝予約枠が同じ時刻で4枠ある
１人30分の制限をつけて、30分ごとに予約している
- 事情・例外がいろいろある
  - 家族で来て２つ同時に使いたいとか
  - １時間連続で使いたいとか
  - 小さな子がいて２人とか
営業時間は、9:00～21:00
- 9:00～9:30、・・・、20:30～21:00で、12時間x2=24枠
- 施設が４つなので、24x4=94枠/日
現状は、電話で受けて紙に書いている
- これがかなり煩雑とのこと（確かに大変そう）

要件

必須

利用者
- スマホ・PCで、予約する
- 氏名と連絡先を入れる
- 他の人の氏名は見えず、特定の時間に予約可否のみ知れる
- ご年配の方が多い
管理者は
- 予約者の氏名、連絡先を見られる
- 変更、キャンセルができる
システム
- 無料で
- 早く

できれば

予約者
- 自分の予約時間を見られる
- 自分の予約時間をキャンセルできる

実現

ご年配の方も使われるので、なるべく大きめに、なるべく見やすくしています。
あまり詰め込んでいないので、スマホでも大体同じように見えます。
あ、上は管理者が見た画面で、管理者ログインしない場合は、名前のところに「×」と出るだけです。

ちなみに、リクルートが提供している、AirReserve（エアーリザーブ）というサービスがあります。こちらも、無料で利用できます。

ただ、予約する際にメールアドレス必須のユーザー登録が必要。ご高齢の方が、自宅のお風呂に入る代わりに使うような施設で、メールアドレスを入れるということ。最初だけ誰かが助けてあげないといけないかもしれないですね。いちおう今回はお見送りというか、選択肢として残してはありますが、とりあえず置いておきました。

いろいろな要望を盛り込んでるうちに、メンテナンス性とか保守性とか、継続して使い続けることを考えると、AirReserveを使う方がよい、となるかもしれない。

けど、ゆるくて乗っ取られたりいたずらされる可能性があるけど、ご高齢の方が楽なログインが、ちゃんとしたサービスでは難しい気がします。

技術

Apps Scriptで、GETメソッドでHTMLを返す仕組み（バックエンド）があり、そのHTML（フロントエンド）はReactで作ります。
データの保存先は、Apps ScriptからGoogle Spread Sheetへアクセスして、表形式で保存です。

Apps Scriptでは、GETでトップページ、その後のフロント→バックの通信は、フロントからバックの関数を呼べるというすばらしい仕組みのおかげで、すごく楽な関係です。（わかっていれば楽だと思えるけど、フロントとバックの区別がわからなくなる人、いるだろうなぁ。）

具体的な手法は、「GAS React」などでググると、開発環境の構築ブログがそこそこ出てきます。私は、ReactをViteでビルドして、index.htmlにして、GASへデプロイしました。
私が参考にさせてもらったサイトは下記。

感想

GASでのウェブアプリは初めての挑戦だったので、１歩進むごとにコケる感じでした。Reactの領域に持ってくればサクサクっと進むんだけど。
でも結果的に２日でできたので、コケた後に起き上がるのはそんなにつらくないです。

大きめに躓いた場所は、、、

躓き１：デバッグ環境が構築できない

Reactをローカルで動かすことはできるんですが、クライアントとサーバーのやり取りと、サーバーとGoogle Spread Sheetとのやり取りのコードは動かせないので、実質、クライアントでのデバッグはできないです。

また、TypeScriptをビルドしたコードをデプロイしてるので、本番環境のJavaScriptでコードが読めない。いい方法があったら教えてください。

方法は、console.logを打って状況を得るだけ。CGIの時代を思い出しましたｗ

躓き２：フロントとサーバのやり取り

フロントからバックの関数を呼ぶ際に、プリミティブ以外の型を渡すとエラーになり、プリミティブ以外を返すとしれっとnullになること。知ってれば、避けられることです。

躓き３：npmでモジュールをインストールすると重くなる

Reactとして、ダイアログの出し方、ハンバーガーメニューの出し方（管理者用）もちょっと躓きました。npm installでモジュールを使っていけばクリアはできるけど、どんどん容量が大きくなるのでちょっと心配でした。

結局気にしないことにしました。🙈

躓き４：GASのインデックスは１から

GASで、何かと要素の順番が1から始まるんですが、0で設定しても1として動く、という親切(?)仕様がちょいちょいあってかえって混乱すること。

一番悩んだのは、シートの移動。月ごとに１シート作ることにしたのですが、適当なところに作られるシートを、適切なところに挿入したくて躓きました。

おわりに

GAS + Googleサービスの選択肢は、私にとってとても大きな一歩でした。

その理由の１点目が、小さくていいという話。世の中で、これくらいでいいのにっていうサービスは本当にたくさんあると思うので。社内ツールとか、個人の管理用とか。閉じた空間で利用するには本当に便利。

理由の２点目は、機能を広げる話。Spread SheetだけでなくGoogle Driveへ保存とかGoogle Mapとの連携もできそうです。

もし、うちの組織向けにこんなの作ってほしいなーとかご要望があれば、ご連絡ください！