見出し画像

【GAS】Gメール投稿するだけでWEBページの掲載画像を更新できる、かんたん日報表示システム（3）～ログイン画面を表示する部分の解説～

Particlemethod

離れた所にいるグループ内のメンバーに対して情報を共有したい場合、しばしばWEBページや電子メール（あるいは他のメッセージアプリ）が利用されます。

WEBページは、固定したURLでアクセスできるので、受け手が最新の情報を繰り返し確認しやすい一方、情報を集約してアップする管理者の負担が大変になります。

他方で、電子メールやメッセージアプリは、特定の管理者に頼らず情報を発信し合えるものの、スレッドが次から次へと流れてくるので、見返す時に最新情報が把握しにくい短所があります。

そこで、これらの手法のいいところ取りをした、かんたんなシステムをGAS（Google Apps Script）で作ってみました。最新情報として共有する情報は画像データ2つ程度としました。

このシステムは、固定されたURLにアクセスしてWEBページとして最新情報を閲覧できる一方で、掲載している画像情報については、特定のアドレスに電子メールで発信して投稿するだけで、管理者を介さずに自動的に更新されるというものです。WEBページを閲覧制限するためのログイン画面も加えました。

システム概要は以下となります。以下のイステムで、直近の投稿画像が2つまで、WEBページとして自動掲載されます。

たとえば、夏休み中に、輪番で植木に水やりする場合に、当番の人が植木の現状を簡単にグループに伝える・・・などの用途に使えるかもしれません。

固定されたWEBページは以下の様なもので、日に1つだけ画像投稿がある前提の仕様となっています。

前回は、システムの構成内容をご紹介しましたが、今回の記事では、具体的なGASのコードの中身をご説明します。

このシステムは、アクセスの都度、Gメールによる画像投稿の中身をチェックし、Gドライブ経由で更新画像を埋め込む処理を行っています。シンプルな仕組みですが速度は遅いので、簡単な日報の用途を想定しました。

GASのシステムの振り返り～プロジェクト内に、2つのテンプレート、3つのスクリプトで構成～


今回のシステムでは、プロジェクトファイルの中に、2つのテンプレートと、3つのスクリプトを用意しています。

テンプレート①：LoginForm.html・・・最初にログインする時のWEBページです。

テンプレート②：INDEX.html・・・メインのWEBページ、つまり日報そのものです。

スクリプト①：ログイン.gs・・・ログイン用のWEBページを表示し、ユーザが入力したパスワードを、続いて起動する日報表示用のスクリプトに引き渡します。

スクリプト②：かんたん日報表示.gs・・・ログイン用のスクリプトがから引き継いだパスワードが適切であれば、日報のWEBページを表示します。

スクリプト③：作品の抽出と保存.gs・・・Gメールを検索して、新たな画像ファイルがあればGoogleドライブに保存し、スプレッドシートのリストを更新します。

日報システムは、これらを含むGASのプロジェクトと、GoogleのクラウドサービスであるGメール、Googleドライブ、Googleスプレッドシートが連携して作動します。


Gメールは、投稿画像の受け入れ口となります。

Gドライブは、受け入れ画像をストック場所です。

スプレッドシートは、ストック画像をリストで管理します。


ユーザの操作に沿って、順に内容をご説明していきます。

ユーザのログイン画面表示～簡単なパスワード認証の方法：doGet（）関数による起動と、WEBページからのPostによるメイン画面の呼び出し～


このシステムでは、特定のグループ内でだけ情報を共有できる様に、最初にログイン画面を表示し、簡単なパスワード認証を行う様にしています。


この部分では、以下のモジュールが稼働します。


スクリプト：ログイン.gs・・・ログイン用のWEBページを表示し、ユーザが入力したパスワードを、続いて起動する日報表示用のスクリプトに引き渡します。

テンプレート：LoginForm.html・・・最初にログインする時のWEBページです。

どちらも短いコードですので、全文を掲載します。

ログイン.gs

//★★★★doGet関数はURLから呼び出された時に実行する関数｜１つだけ定義できます★★★★
function doGet(e){

//投稿画像をGメールのスレッドから検索しリストを更新
fetchFile_List()

//ログイン画面であるOpenFoam.HTMLをWEBページとしてレスポンスする
  var myOpenHTML = HtmlService.createTemplateFromFile('LoginForm');
  return myOpenHTML.evaluate().addMetaTag("viewport", "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0");
}



ログイン.gsには、doGet( )というデプロイURLにアクセスすると自動実行される関数を記述しており、テンプレート「LoginForm」をWEBページとしてレスポンスするための以下のコードを記述しています。

var myOpenHTML = HtmlService.createTemplateFromFile('LoginForm');
return myOpenHTML.evaluate()

上のコードの意味は、以下の様な内容です。
・createTemplateFromFile('テンプレート名)で、使用テンプレートを宣言
・evaluate()で、宣言したテンプレートをWEBページとしてレスポンス

その他、Gメールで受信した画像をチェックする、fetchFile_List()というユーザー定義関数をこのタイミングで実行させています。この関数の内容は後述します。

上記のスクリプトにより、以下のWEBページがユーザのブラウザに表示されます。

デモとしてあえてパスワードtokoを表示しています

このWEBページの元となるテンプレートLoginForm.htmlのコードは以下となります。

LoginForm.html

<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>

<body>
  <h1>ログインフォーム</h1>
  <p>
    <!---デモなのでパスワードを表示させています---->
    パスワードを入力ください（toko）
  </p>

  <!---POST送信します。自分自身のリンクへaction【↓ここから】--->
  <!---｜デプロイIDは各自のものを’★～★’部に記入--->

  <form method="post" action="https://script.google.com/macros/s/★デプロイID★/exec">
    <p>
      <!---相手先では、e.parameter.＜name要素名＞で取り出せます--->
      <label>パスワード：<input type="text" name="PW"></label>
    </p>
    <p>
      <input type="submit" value="送信する">
    </p>
  </form>
  <!---POST送信します【↑ここまで】--->
</body>
</html>

★デプロイID★の部分には、プロジェクトをデプロイした後に付与される、デプロイIDを記入し、再度同じURLでデプロイします。

ごくシンプルなHTMLテキストですが、このモジュールでキーとなる部分は以下の<form>タグの部分です。

<form
　method="post"
　action="https://script.google.com/macros/s/★デプロイID★/exec">

　　<input type="text" name="PW">

　　<input type="submit" value="送信する">

</form>

＜form＞タグは、WEBページの中でデータ送信を実装する際に使われますが、タグの中に、以下を記述することで、GASのプロジェクト内にあるdoPost()関数を起動することができます。
　　　
　method="post"
　action="https://script.google.com/macros/s/★デプロイID★/exec">

デプロイIDはコードを書いている段階では判りませんので、適当なテキストで最初はコードを記述しておき、一旦デプロイした後に得られたIDでコードを修正し、修正版で更新（新規にデプロイしなおすとIDが変わってしまうので注意）する方法を取ります。

その際、タグの中に入力ボックスと送信ボタンを記述しておくと、ユーザが情報をGASに送って関数を起動させることができます。

入力ボックスは以下の要領で記述します。
　<input type="text" name="変数名">

GASの側では、変数名＝入力値　として、入力値と変数名がセットで認識されます。複数の入力ボックスがあった場合に混乱しないための仕様です

送信ボタンは以下の要領で記述します。
　<input type="submit" value="ボタン上の文字">


ここでは、ログインパスワードを以上のコードでGASに送り、doPost内でパスワードの合否を判定する様にしています。

ここまでの一連の流れを図示すると、以下の様になります。


なお、<form>などHTMLで実装される機能は、GASの機能ではなく、HTMLを解釈しているブラウザの機能である点にご注意ください。（HTMLはブラウザのマクロ言語といっても良いでしょう）


（補足）GASに備わった、ユーザとサーバの相互連携機能


WEBアプリを作る際、難しいのはユーザ側で操作されるブラウザと、サーバ側のプログラムを連携させる部分ですが、テンプレートとスクリプトで、この機能をアマチュアでも容易に実装できる点が、GASの素晴らしい点です。

GASでこの部分で主に3つの手段を提供していますので、ここで改めてご紹介したいと思います。

doGET（）関数

ブラウザからデプロイURLにアクセスすることで、起動することができる関数です。関数内にテンプレートをレスポンスする記述をしておくと、ユーザ側からは、あたかもWEBページにアクセスした様に見えます。

doPOST（）関数

WEBページ内の<Form>タグからのPOST送信により、起動することができる関数です。PSOT送信の際にユーザに入力させたデータを利用した処理させることができます。

関数内にテンプレートをレスポンスする記述をしておくと、ユーザ側からは、新しいWEBページが開かれた様に見えます。

Google.Script.Run.関数名（）

Ajax（エイジャックス、アジャックス）という、ブラウザに備わった、ユーザ・サーバ間の非同期通信機能を利用できる様にした関数で、テンプレート内の＜script＞セクション内で、JavaScriptコードとして記述します。

ボタンの押下などに連動して作動する様にしておくと、GAS内で同じ関数名（）の関数が起動し、ブラウザからGASでデータを送るとともに、GAS側からレスポンスを受け取る事もできる様になります。

受け取ったレスポンスを利用して、新たなWEBページを開くことなく、WEBページの内容を更新させる処理も可能です。

さて、この後はGASの側でログイン認証して、Gメールの投稿画像を取り込んだり、日報ウィンドウを開いたりするのですが、この説明は次回の記事といたします。


←前の記事はこちら

次の記事はこちら⇒


この記事が気に入ったらサポートをしてみませんか？