全国の新型コロナウイルス感染者数・死亡者数を検索できるアプリを作成した。

🐣 はじめに

全国の新型コロナウイルス感染者数・死亡者数^[1]検索できるアプリを作成しました。作ったきっかけとしては、最近新型コロナウイルスの感染者数などが以前と比べ、報道が少なくなり、数字を気にする機会すらなくなりました。じゃあすぐ検索できるアプリを作成してみよう！と思い作成に至りました。

🎯 使用した環境

サーバーを立てると、時間やコストがかかるので、今回はGASを選択しました。GASを使ったWEBアプリやツールに興味がある人に読んでもらえたら嬉しいです。

🖊️ ソースコード

1. ログイン・メイン画面

https://github.com/sou-python/WEBAPP-COVID
2. 新規登録画面

https://github.com/sou-python/WEBAPP-COVID/tree/sign_up
3. webアプリのスプレッドシート

https://docs.google.com/spreadsheets/d/1u1DNrKdKA9PpFat1e62htaIzqqkT9Bv0KzP13D5sriQ/edit#gid=1319215739

🔗 URL

https://script.google.com/macros/s/AKfycbxNjSgeB67f7GwifVK95dzgXbGSKa8-wx8faJ1uUCgb-tJsr5UFPwo3RhzFrnO0J5d0Ug/exec

主な機能

1.新規登録画面

メールアドレス、アカウント名、パスワードを入力すると新規登録でき、ログイン画面に戻ります。登録した情報はスプレッドシートに保存されます。

2.ログイン画面

1で入力したメールアドレス、パスワードを入力し、ログイン完了するとメイン画面に遷移します。

3.検索画面

メイン画面で検索条件をクリックすると、全国の新型コロナウイルス感染者数・死亡者数を検索できます。死亡者数は日付のみ、感染者数の選択は都道府県・日付と両方選択でき、また保存用としてエクセル出力もできます。

4.FAQ・問い合わせ画面

FAQや機能改善として質問できるページも作成し、送信ボタンを押すと、入力した内容が指定のスプレッドシートに転送されます。

💡工夫したポイント

その１：待機画面

ログイン認証し、メイン画面が表示されるまでに待機画面を用意しました。
これはメイン画面に画像を使用していますが、表示されるまでにラグがあり、違和感があったためです。また、単なる待機画面だと退屈するので、javascriptでアニメーションのように動きをつけ、工夫しました。

その２：アカウント名表示

メイン画面にログインしたユーザー情報、またカーソルをあてるとログインした時のメールアドレスが表示させるようにしました。
このような簡単なWEBアプリでは必要ないと思いますが、今後大きいプロジェクトやWEBアプリなどでは必要だと思うので、今後パスワード変更やアイコン登録などを実装したいと思います。

その３：プログラム時間削減

ログイン認証をjquery内で処理できるように工夫しました。
以前はログイン認証についてはパスワードが合っているかどうかをgoogle.script.run.withSuccessHandlerメソッドを使用し、確認していました。
ログイン認証のたびに、サーバーとのやり取りをするので処理に時間がかかります。

なので、ログイン画面を立ち上げた時に、スプレッドシートのアカウント情報を読み込み、グローバル変数として保持しました。このように工夫することで、ログイン認証での処理がjquery内で処理できるようになり、大幅にログイン時間が削減することができました。

🤝 今後やっていきたいこと

メールアドレス、ユーザー情報をメイン画面で見れることは良いと思いましたが、urlのパラメータとしてメールアドレス、ユーザー情報を記載することはセキュリティ上、とても危険だと感じました。今後はユーザーIDを発行したり、パスワードなどをハッシュ値に変換して管理するなど、セキュリティについて危機管理を高めようと思います。

🍵 おわりに

今回は初めてWEBアプリを作成し、ZENNを活用しレポートとしてまとめました。何事も初めてで、コードの書き方や気になることは多いと思いますが、ぜひコメントでお願いします！！

環境としてGASを選択しましたが、Google独自のプロパティや、GASだから使用できないCDNもあったりで、いろいろ苦悩しました。このような簡単で作成できるのは便利ですが、大きな企画やプログラムだと独自でサーバー立ててした方がいいですね、、。

他にもいろいろと取り組んでいるので、隙を見て発信していきたいと思います。
それでは！👋

脚注

1. ここでの情報は以下URLを参照しています。
   https://corona.go.jp/dashboard/