どうも。つじけ（tsujikenzo）です。このシリーズでは 「スマホカメラで位置・ユーザー・時刻情報を送信するアプリ」 について全3回でお送りします。今日は最終回です。
前回のおさらい
前回は、 「ウェブアプリの公開準備をする」 として、doGet()関数を書きました。ウェブアプリのURLが発行されましたので、ブラウザなどでアクセスすると、実行できます。
しかし、このままでは、 [現在地] を送信することができません。そこで今回は、 「URLにパラメータを設定する」 をお送りします。
URLにパラメータを渡す
URLには パラメータ と呼ばれる、独自の情報を追加できます。
たとえば、こちらのブログですが、トップページのURL末尾は「.com」です。
https://tonari-it.com/
このサイトで、サイト内検索（”Python”など）をしてみると、URLが変更されます。「.com」以降に追加されている文字列を 「パラメータ」 と呼びます。「パラメータ」とは 「外から入力される、または与えられる値」 です。
パラメータは、「?以降の文字列」 で、○○=○○○○となっている場合は、doGet()関数やdoPost()関数で、変数に代入処理されていることが多いです。（サーバー上の処理は他にもさまざまあります）
//?s=PythonはURL「https://tonari-it.com/」のパラメータ
パラメータに現在地情報を追加する
このパラメータを利用して、現在地情報を追加します。現在地の変数は何でもかまいませんが、今回は [locate] とします。場所情報として「エントランス」を代入します。
?locate=エントランス
前回、ウェブアプリのURLをコピーしました。そのウェブアプリURLの末尾に、パラメータをつなげましょう。（パラメータは日本語のままで大丈夫です）
https://script.google.com/macros/s/{デプロイID}/exec?locate=エントランス
ウェブアプリを実行してみる
それではこのURLを、ブラウザに貼り付けてみましょう。※{デプロイID}にはご自身のデプロイIDを入力してください。
キーボードの [Enter] キーを押すと実行されますが、はじめて実行する際は、認証画面が表示されます。
認証方法の説明は割愛します。
ブラウザに 「送信完了しました。」 と表示されていれば成功です。
Gmailの下書きを確認すると、下書きが作成されています。
URLのエンコードとQRコード化
URLは、文字列のままだと、ユーザーは入力が大変です。そこでよく使われている手法が 「スマホでQRコードを読み取る」 です。現在はさまざまなサイトで、「ウェブアプリURLをQRコードに変換」 できますので楽チンです。
日本語URLのエンコード
ただし、ひとつ問題があります。URLは日本語のままだと、QRコードに変換できません。なので、別途こちらなどのサイトで、日本語をエンコードします。
エンコードされた文字列をコピーします。
エンコードされたパラメータは、このようになります。
?locate=エントランス
↓
?locate=%E3%82%A8%E3%83%B3%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B9
これを、ウェブアプリURL末尾につなげましょう。
https://script.google.com/macros/s/{デプロイID}/exec?locate=%E3%82%A8%E3%83%B3%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B9
URLのQRコード化と配布
こちらのサイトでは、URLをQRコードに変換してくれます。
URL欄に、ウェブアプリURLを貼り付けます。
URLを貼り付けて、最後に [作成する] をクリックします。
QRコードが作成されました。そのまま画像としてコピーしても構いませんし、カスタマイズして、ダウンロードすることも可能です。
ご自身のスマホからQRコードを読み込んでブラウザを立ち上げてみましょう。
パソコンと同様に、このような表示されたら成功です。
Gmailの下書きも作成されています。
URLのQRコード配布
QRコードは印刷などして、パウチ化するなど、目的のエリアに備え付けます。
LINEなどの登録によく使われる手法ですね。
今回の例だと「エントランス」に印刷したQRコードを設置して、 通りかかるユーザーにスマホで読み取ってもらう 、ということです。
デプロイURLを変更せずにGASを更新する
これまではGmailの下書きを作成する関数でした。動くことが確認できたので、予定どおり、Gmailを送信するGASに書き換えます。
まず、doGet()関数をコメントアウトします。
新しいスクリプトファイルを作成します。名前はなんでもかまいません。今回は 「コード2.gs」 を作成しました。
コード2.gsファイルに下記のようにコードを書きます。これまでのdoGet()関数とほとんど同じですが、Gmailを送信する関数名が違います。
/**
* 現在地情報をパラメータにもつウェブアプリから送信される
*
* @param {object} イベントオブジェクト
* @return テキストメッセージ
*/
function doGet(e) {
sendEmailFromWebApp_(e);
return ContentService.createTextOutput('送信完了しました。');
}
サブ関数もこのように変更します。
/**
* doGet()関数からイベントオブジェクトを受け取ってメールを送信する関数
*
* @param {object} イベントオブジェクト
* @return none
*/
function sendEmailFromWebApp_(e) {
//ユーザーアカウント取得
const user = Session.getActiveUser().getEmail();
//現在時刻を取得
const d = new Date();
const now = Utilities.formatDate(d, 'JST', 'YYYY月MM月dd日HH時mm分ss秒');
//現在地を取得
const locate = e.parameter.locate;
//Gmail用の変数を準備
const recipient = 'admin@hogehoge.com';
const subject = '[ウェブアプリ]ユーザーが「現在地」を報告しました';
const body = `
タイトル:${subject}
ユーザーアカウント:${user}
場所:${locate}
時刻:${now}
`;
//Gmailを送信
GmailApp.sendEmail(recipient, subject, body);
}
デプロイを更新する
右上の [デプロイ] から [デプロイを管理] をクリックします。[新しいデプロイ]を選択してしまうと、URLを新しく生成しますので、注意しましょう。
「デプロイを管理ウインドウ」が開いたら、右上のペンアイコン [編集] をクリックします。
[バージョン] メニューをクリックし、 [新バージョン] を選択します。
[説明] にはバージョンが上がったことを書いておきましょう。
URLが変更されていないことを確認して、最後に、最下部の [デプロイ] をクリックします。
「デプロイを更新しました」と表示されたら完了です。 [完了] をクリックしてウインドウを閉じます。
URLは変更されていませんので、先ほどのQRコードを読み込むと、Gmailが送信されます。
送信先アドレスに設定していたGmailを確認すると、メールを受信しています。
まとめ
以上で、 「パラメータに現在地情報を設定したURLをQRコード化し、ユーザーに読み取ってもらうだけで、管理者にGmailが送信される。」 というアプリを作成しました。
パラメータの数だけQRコードを発行する必要がありますが、ユーザーはスマホで撮影するだけですので、大幅な業務効率化がはかれます。また、今回はGmailで送信しましたが、スプレッドシートに集計したり別の関数を走らせたり、可能性は無限大です。現場で作業する従業員には、手書き事務処理の廃止はもちろん、 「PCを開かずに作業が完結する」 ことを目指したいものですね。
この後も、さまざまな業務効率化のアイディアが生まれると思います。その都度記事にしたいと思いますので、お楽しみに。
