目次
Claspでローカルで編集できるようにする
Google Apps Scriptをバックエンドにして、フロントエンドのWebアプリからスプレッドシートを変更するにあたって、HTMLの開発が必要となってくる。HTMLの開発をGoogle Apps Scriptのエディタで行うには、変更のたびにデプロイを行う必要があることからあまり効率が良いとは言えない。また、将来的にWebアプリ部分はReactを導入していきたいので、GAS+HTMLをローカル環境で開発できるようにしたい。
ローカル環境で開発するために、Claspを導入する。Claspはローカルにプロジェクトを新規作成、もしくはクローンし、変更後にアップロードとデプロイまでをコマンドで行うことができるツールである。Claspの導入には以下のサイトを参考に実施した。
一通り、claspの設定を完了したので、これまで作成したプロジェクトをローカルにクローンする。クローンは以下のコマンドで一発で完了したが、スクリプトIDを探すのに少し悩んだが、左側のメニューの設定内で見つけることができた。
clasp clone <scriptId>
デブロイ設定は、プロジェクト内のappsscript.jsonで管理されている。今回のWebアプリは自分以外の人間がアクセスできるとまずいので、次の設定とした。
{
"timeZone": "Asia/Tokyo",
"dependencies": {},
"exceptionLogging": "STACKDRIVER",
"runtimeVersion": "V8",
"webapp": {
"executeAs": "USER_DEPLOYING",
"access": "MYSELF"
}
}HTMLを作成してWebアプリで表示する
ます、ローカル環境で、index.htmlを作成する。index.htmlには、最初は以下の記述をデフォルトで記述しておく。これは、GASのエディタで新規作成したときも同じように作成される。
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Hello World!!</h1>
</body>
</html>次にGAS側で、doGet()を次のように記述する。
function doGet(e) {
const template = HtmlService.createTemplateFromFile('index');
return template.evaluate();
}最後に、これらのプロジェクトをプッシュして、
clasp pushデプロイコマンドを実行すると、ブラウザでWebアプリが表示できるようになる。
clasp deploy --description <デプロイの説明>２回目以降のデプロイの場合は、デブロイIDを指定する必要がある。
clasp deploy --deploymentId <デプロイID> --description <デプロイ説明>Webアプリからスプレッドシートを読み書きする
WebアプリからGASを実行してスプレッドシートを変更し、変更結果を取得するには、次の非同期処理を実装する必要がある。Webアプリには、JavaScriptを記述することができるが、GASはGoogle側で実行される仕組みであるため、このような非同期処理が必要となるらしい。
google.script.run.withSuccessHandler(function(sendMailAddressList) {
window.sendMailAddressList = sendMailAddressList;
// セレクタを生成
createSendMailAddressBox();
// 更新ボタンを有効化
btn_updateSendMailAddress.disabled = null;
}).getSendMailAddressList();これは、生存確認の送信先のメールアドレスのリストをGASで取得して、Web表示を更新するコードの一例です。
getSendMailAddressListメソッドが、GASで作成したAPIです。これを実行すると、getSendMailAddressListは非同期でGoogle側で処理され、その結果がwithSuccessHandlerの引数返ってくるというもの。実行速度はそれほど早くはなく、感覚的に1~2秒は掛かっている気がするが、速度重視のサービスではないので、これで問題ない。
Webアプリの全容を紹介
生存確認の日時確認用のUI
生存確認システムへの最終アクセス日時を確認できるようにした。最終アクセス日は、Webアプリを表示した時刻になるので、必ず現在時刻が表示されることになる。
ついでに前回のアクセス日も分かるようにした。これで、アクセス日がちゃんと保存されているという安心感が得られると思う。
生存確認メールの送信設定
生存確認のメールを送信のON/OFFを切り替えられるようにした。生存確認メールは、トリガーという機能を用いて定期的に送信の可否をチェックしており、トリガーが設定されているかどうかを問い合わせたうえで、初期表示を行うようにしている。
また、ONとOFFが切り替わった際には、トリガーの登録もしくは削除が行われるようにした。
送信日の設定
生存確認のメールは一ヶ月間の間で、どの日にメールを送るかを日単位で設定できるようにしている。
設定はチェックボックスを用意して、好きな日にチェックをいれて、[送信日の更新]ボタンを押すことで、スプレッドシートの情報が書き換わり、送信日が変更されるという仕様とした。
ちなみに、チェックボックスは31日分用意されている。
送信時刻の設定
送信時刻は、上記で設定した送信日のどの時間帯にメールを送るかを設定する。
日ごとに時間を設定する方法も検討したが、送信日が曜日で設定できるわけではないので、メリットが感じられないことから、時間の設定は一つだけとした。
時間は、ドロップダウンリストで0時から23時の時間帯を選択できるようにしており、時間を選択後に、[送信時間の更新]を実行することで、スプレッドシートの情報を書き換える。
トリガーによる実行は、あくまでもその時間の何処かで呼ばれるというくらいのモノのようで、設定時刻になった時に呼ばれる訳では無いという点は覚えておきたい。
送信先アドレスの設定
最後は、生存確認メールの送信先アドレスを設定するためのUIを用意した。送信先アドレスは、複数設定ができるようにテキストボックスを縦に並べている。
[削除]ボタンを押すことで、アドレスを削除できるし、[追加]ボタンを押すと、空のテキストボックスが追加される仕組みになっている。
追加と削除を行ったあとに、[送信アドレスの更新]ボタンを押すことで、スプレッドシートの情報を書き換える。
アドレスのフォーマットチェックは行っていないので、今後チェックを入れる仕様も追加したい。
まとめ
スプレッドシートは複数のシートが存在しており、直接編集で設定を行う場合はシートから目的の設定を探し出す必要があり、またセルには自由に入力ができるため、入力の方法を間違えるだけでもシステムのバグに繋がりかねない。
今回、WebアプリでHTMLを導入することで、設定項目が一つのシートにまとまっており、かつ入力方法も決められるため、設定変更のストレスが無くなった。
ただ、通常のHTMLと比べて、複数のファイル(HTML + CSS + JAVA)に分けて実装することができない。そのためHTML内にGAS呼び出しのコードを大量に記述することになり、可読性が悪くなっている。また、UIについても今回はデザインには拘らずに通常のタグをそのまま利用するだけのものにしている。システムの開発が一段落ついたら、Reactに置き換える方法を試してみたいと思う。