web知識0大学生がGASを使い、3日でサーバーレス機材管理システムを作る
僕がサークルのためのwebアプリを作成した時の話を書きます。
私が大学で所属しているサークルは、写真系のサークルです。そのサークルでは一眼レフカメラなどの機材貸出を自由にできるのですが、貸出の手続きがめんどくさかったり、誰が何を借りているのかの管理が雑だったりという状況でした(笑)。
当時はプログラミングを勉強しだして数ヶ月が経ったころで、何か人のためになるものを作ってみたいと思っているところでした。そこで機材貸出手続きの煩雑さをなくし、かつ管理も簡単に行えるシステムを作ろうと思い立ちました。
まず考えたのは、当時Swiftを勉強中だったのでiPhoneアプリとして作ろうと考えましたが、サークルにはAndroidユーザーもいたので却下！（Xamarinなどで作ってもいいが当時は知らなかった...）
次にwebアプリ。これならインターネットに繋がりさえすればみんなが使えるからいいのでは?しかし、サーバーやデータベースの知識はないし、そもそもサーバーなどを使うとなると自分が卒業したときに(文系の学生もいるため)後輩がシステムの保守に苦労するのではと...。
そこで調べた結果、Google Apps Script(以下、GAS)を使おうと決めました。サーバーはGoogleのものだから管理もいらないし、簡易データベースのようなものとしてGoogleスプレットシートも使える！web公開できるので誰もが使える！何より自分が卒業してから機材が増えても、後輩はスプレッドシートに追加機材の名前を書くだけでいい！
じゃあ、GASで作ってみるぞっと...
シート1枚目にはこんな感じで↓
シート2枚目にはこんな感じ↓
シート3枚目はこんな感じ↓
これだけでプログラムからデータを書き込めば、簡易データベースみたいに使えるからラクチン♪
そして、プログラムを書く
開いたら、あとはプログラムをカタカタと書くだけ...
こんな感じ↓
htmlと.gs(google scriptの略?)ファイルで構成されてます。
.gsは基本的にはJavaScriptです。それにGoogleのサービス(スプレッドシートへの書き込みやGmail送信など)を使えるようにしたもの、みたいな感じです。
まだまだ未熟な時期でしたので汚いコードですね...笑
それでもプログラムを見たいもの好きな方はこちらへどうぞ↓
追記
リファクタリングを行い、コードの大幅な修正を行いました。
基本的には貸出、返却ボタンを押すとJavaScriptを実行して入力データを取得。そのデータを.gsファイルの関数でスプレッドシートと比較しながらエラーチェック。エラーがあるならどういうエラーかをString文で返し、問題なしなら貸出返却の記録をスプレッドシートに書き込み完了メッセージをStringで返す。そのString文をhtmlファイル内のJavaScriptでalertするという流れです。(詳しくはコードを見てください)
プログラムができたら、webアプリとして導入
「公開」→「ウェブアプリケーションとして導入」
「自分(~~~@gmail.com)」と「全員(匿名ユーザーを含む)」を選択。これでURLさえ知っていれば誰でもwebアプリにアクセスできるようになります。
更新を押すとURLが現れます。これがwebアプリのURLになります。以後、プログラムを更新しても同じURLです。
ここで、僕がつまずいたことを二点。
1. 上記で行ったURLは「https://script.google.com/~~~~/exec」になっていると思います。しかし、「最新のコード」いうリンクをクリックして開くのは「https://script.google.com/~~~~/dev」。何が違うのかというと、プログラムを変更するとdevにはすぐに適用されるが、execは上の写真でプロジェクトバージョンを変更して更新ボタンを押さないと適用されない。devは開発中の確認用、execは正式公開用ということだろう。
2. gs内でdoGet()関数を書かないとhtmlに記述したのが表示されない。
function doGet() {
return HtmlService.createTemplateFromFile(htmlファイル名).evaluate().setTitle(webアプリ名(ブラウザのタブに表示される));
}
これを書いておかないと、URLにアクセスしても(Getリクエストしても)htmlファイルが返ってこないので表示されない。（当たり前と言えば当たり前だが...(^^;;）
では、URLにアクセスして試すと.....
ちゃんとスプレッドシートの状態に応じて、返ってくるメッセージが変わっています👏
貸出受付メッセージが出たものは貸出記録がスプレッドシートに書き込まれています(^^)
ここまで実装して色々と大変だったことを...
1. JavaScriptファイルを保存できないのでhtmlファイル内の<script>タグに直書きしなければならない.....
2. JavaScriptからgoogle.script.run.(.gs内の関数名)で.gsの関数を呼び出せるが、非同期であること。
3. gsからの結果をJavaScriptの呼び出し元で受け取ること
特に2,3が大変でした。
2については最初、google.script.run.(.gs内の関数名)で.gsの関数を呼び出していました。しかし、非同期なので3ができない.....。調べて見るとどうやらgoogle.script.run.withSuccessHandler(xxx).(.gs内の関数名)で解決できる模様(xxxは.gs内の関数実行した後に実行する関数)。で、html内で
function xxx(str){
alert(str);
}
ように書くと.gsのreturn結果がstrに格納されていて無事アラート画面が出ました😆
+α、返却期限を過ぎていたら返却催促のメールを行うようにして見ました。
シート1枚目の貸出状況を確認して、貸出中の人の返却期限を今日の日付と比較。期限を過ぎていたらその人の学籍番号をもとにシート2枚目からメールアドレスを取得。あとは、メール送信という流れです。(詳しくはコードを見てください。.gsのcheck関数です。)
あとはトリガーを設定
時計見たいなマークをクリック
こんな感じに設定↓
これだけで自動的に毎日9時ごろにcheck関数を実行してくれるのですごいラク♪
無事メールが届きました😁
QRコード読み取りでデータ入力もできるようにしましたが、これはネットの先人のものをいただいてきました 笑
————————————————————
これで貸出返却手続きが1分足らずでできるようになりました！さらに誰が何をいつまで借りていてるのかもスプレッドシートを見るだけで一目瞭然です。返却記録も残せるし、返却催促も勝手にやってくれるので、すごい楽になりました^_^
今回GASを使って思ったことは、
GAS便利すぎーー！！！
サーバー•データベースレスでwebアプリが作れるし、doGet(e)でパラメータeに応じたGetリクエスト処理もできるので自作APIも作れちゃう！！(これについては別記事で)
web関係知識、JavaScript経験ともに0な私でも2、3日で作れましたので、非常におススメです( ^ω^ )
