Google Apps Script (GAS)で動的HTMLページを作成する方法!

Google Apps Script (GAS)で動的HTMLページを作成する方法!
Google Apps Script (GAS)で動的HTMLページを作成する方法!
ビジネス

便利なGASレシピ集!に戻る場合は以下から

便利なGASレシピ集! – [2019年最新版]

2019年5月22日

はじめに

今回のビジボットは、Google Apps Script (GAS) を使って動的なHTMLページを作成します。誰でもURLを開けばGoogle Apps Script (GAS) をつかったWebアプリケーションページが表示され、今回はURLを入れるとURLに指定したパラメータを付与する事ができます。

それでは早速始めていきます!

1.作成するWebアプリケーション

POINT

今回は、特定のURLの後ろにパラメーターを自動で付与して生成するアプリケーションを作成します。
Google Apps Script (GAS)だけで入力する画面と、入力した値を受け取って処理するコードを用意する事ができます。

作成される画面イメージは以下です。
付与したいパラメータを指定して、セットするURLを上のインプットボックスに入れます。
その後、生成ボタンを押すと下のインプットボックスにパラメータが付与されたURLが自動的に生成される仕組みです。

ビジボットURL作成画面
ビジボットURL作成画面

2.Google Apps Scriptを作成

POINT

GoogleDriveからGoogle Apps Scriptを新規作成します。
今回はスプレッドシートを使って情報のインプットやアウトプットはない為、スクリプトエディタのみを立ち上げて作成します。

GoogleDriveで『新規』を押すと、以下表示がされるので、『その他』 > 『Google Apps Script』を選択して立ち上げます。

Google Apps Scriptを指定
Google Apps Scriptを指定

3.GASコード

POINT

2つのファイルを作成します。
1つ目は入力するフォームを生成する.htmlファイル。
2つ目は入力フォームから受け取ったデータを処理する.gsファイル。

それぞれのファイルを作成していきます。

.htmlファイル

スクリプトエディタの画面に表示されている『ファイル』をクリックすると、『新規作成』 > 『HTMLファイル』をクリックしてファイルを作成します。

.htmlファイルを作成する
.htmlファイルを作成する

ファイル名は『index.html』と記入して、OKを押します。

index.htmlのファイル名をつける
index.htmlのファイル名をつける

上記手順で進めると、index.htmlのファイルがGoogle Apps Script (GAS)を記述するスクリプトエディタの画面上で操作する事ができます。
このindex.htmlから先に入力フォームを生成します。

index.htmlの作成完了
index.htmlの作成完了

.htmlコード

HTMLコード

上記、Bootstrapも入れてデザイン部分もカスタマイズしたりとHTMLで出来る事は基本できます。また、自分でCSSを書く事も出来るので本格的なページを作成する事も可能です。
ただし、ヘッダーには以下表示が必ずついてます。

GASのWebアプリケーションヘッダ
GASのWebアプリケーションヘッダ

actionのURL取得方法

action=”https://script.google.com/macros/s/***/exec”>にセットするURLは以下手順で取得します。
スクリプトエディタの画面に表示されている『公開』をクリックすると、『ウェブアプリケーションとして導入…』をクリックします。

クリックすると、情報を指定するフォームが表示されるので以下のように指定します。

次のユーザーとしてアプリケーションを実行:
『ウェブアプリケーションにアクセスしているユーザー』
アプリケーションにアクセスできるユーザー:
『全員』

最後に『導入』をクリックすればOKです。

ウェブアプリケーションとして導入
ウェブアプリケーションとして導入

最後に、以下画面が表示されるので、以下画面に表示されているURL部分を該当部分にセットします。

ウェブアプリケーションURL
ウェブアプリケーションURL

.gsコード

var html = HtmlService.createTemplateFromFile(‘index’);
は、HTMLのindex.htmlのファイル名を指定します。

var url = e.parameter.url;
var params = e.parameter.radio;
は、コメントに書いてある通りindex.htmlファイルのname=”~~”の部分に該当します。

GASコード
GASログ

最後は処理した情報を再度HTML側に返して、それをHTML側で表示します。

value=”<?=url?>”とは

index.htmlのファイルに記載されているコードですが、Google Apps Script (GAS)からHTMLファイルにデータを受け取った場合は”<?=*****?>”というような書き方を行い、GAS側から受け取ったデータを表示する事ができます。

↓↓実際のサイトはこちら↓↓

https://script.google.com/macros/s/AKfycbz1V5z1WRE5d-Py1IFpXkgmzx8S-VCg2eLahWsXIMIxE79oBms/exec

今回はここまでです!
HTMLを使った画面を作成して、スプレッドシートでDB代わりに利用したらもっともっとGASが出来る領域が広がっていけそうですね。
最後までありがとうございました!