便利なGASレシピ集!に戻る場合は以下から
Contents
はじめに
今回のビジボットは、Google Apps Script (GAS) を使って動的なHTMLページを作成します。誰でもURLを開けばGoogle Apps Script (GAS) をつかったWebアプリケーションページが表示され、今回はURLを入れるとURLに指定したパラメータを付与する事ができます。
それでは早速始めていきます!
1.作成するWebアプリケーション
今回は、特定のURLの後ろにパラメーターを自動で付与して生成するアプリケーションを作成します。
Google Apps Script (GAS)だけで入力する画面と、入力した値を受け取って処理するコードを用意する事ができます。
作成される画面イメージは以下です。
付与したいパラメータを指定して、セットするURLを上のインプットボックスに入れます。
その後、生成ボタンを押すと下のインプットボックスにパラメータが付与されたURLが自動的に生成される仕組みです。

2.Google Apps Scriptを作成
GoogleDriveからGoogle Apps Scriptを新規作成します。
今回はスプレッドシートを使って情報のインプットやアウトプットはない為、スクリプトエディタのみを立ち上げて作成します。
GoogleDriveで『新規』を押すと、以下表示がされるので、『その他』 > 『Google Apps Script』を選択して立ち上げます。

3.GASコード
2つのファイルを作成します。
1つ目は入力するフォームを生成する.htmlファイル。
2つ目は入力フォームから受け取ったデータを処理する.gsファイル。
それぞれのファイルを作成していきます。
.htmlファイル
スクリプトエディタの画面に表示されている『ファイル』をクリックすると、『新規作成』 > 『HTMLファイル』をクリックしてファイルを作成します。

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

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

.htmlコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!-- bootstrapを使う --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> <!DOCTYPE html> <html lang="ja"> <head> <base target="_top"> </head> <body> <div class="container"> <h1 class="display-4">ビジボットURL作成画面</h1> <!-- formはgetメソッド --> <form method="get" action="https://script.google.com/macros/s/***************************************/exec"> <!-- ラジオボタンフィールド --> <div class="radio-inline"> <label><input type="radio" name="radio" id="radio1" value="line" checked="checked">LINE</label> <label><input type="radio" name="radio" id="radio2" value="facebook">Facebook</label> <label><input type="radio" name="radio" id="radio3" value="instagram">Instagram</label> <label><input type="radio" name="radio" id="radio3" value="twitter">Twitter</label> <label><input type="radio" name="radio" id="radio3" value="google">Google</label> </div> <!-- URLを入力するフィールド --> <div class="form-group"> <input type="text" name="url" size="100" value="" placeholder="セットしたいURLを入れてください"> <input class="btn-dark" type="submit" value="生成"> </div> <div class="output_area"> <div class="form-group"><input type="text" size="100" name="source" value="<?=url?>" placeholder="指定したパラメータURLが生成されます"></div> </div> </form> </div> </body> </html>h |
上記、Bootstrapも入れてデザイン部分もカスタマイズしたりとHTMLで出来る事は基本できます。また、自分でCSSを書く事も出来るので本格的なページを作成する事も可能です。
ただし、ヘッダーには以下表示が必ずついてます。

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

クリックすると、情報を指定するフォームが表示されるので以下のように指定します。
次のユーザーとしてアプリケーションを実行:
『ウェブアプリケーションにアクセスしているユーザー』
アプリケーションにアクセスできるユーザー:
『全員』
最後に『導入』をクリックすればOKです。

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

.gsコード
var html = HtmlService.createTemplateFromFile(‘index’);
は、HTMLのindex.htmlのファイル名を指定します。
var url = e.parameter.url;
var params = e.parameter.radio;
は、コメントに書いてある通りindex.htmlファイルのname=”~~”の部分に該当します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
//method=getで送信されたら実行する function doGet(e){ //indexファイルのオブジェクト var html = HtmlService.createTemplateFromFile('index'); Logger.log(e); //getで送信された値を指定して取得する(index.htmlファイルのname="url"部分) var url = e.parameter.url; //getで送信された値を指定して取得する(index.htmlファイルのname="radio"部分) var params = e.parameter.radio; //paramsで取得した値でurlにreturnさせるurlの値を指定する if(params === 'line'){ var url = url + '?utm_source=line'; }else if(params === 'facebook'){ var url = url + '?utm_source=facebook'; }else if(params === 'twitter'){ var url = url + '?utm_source=twitter'; }else if(params === 'instagram'){ var url = url + '?utm_source=instagram'; }else if(params === 'google'){ var url = url + '?utm_source=google'; }else{ var url = ''; } //index.htmlにurlを返す html.url = url; return html.evaluate(); } |
1 |
[19-04-17 03:09:05:450 JST] {parameter={url=https://bzbot.work, radio=line}, contextPath=, contentLength=-1, queryString=radio=line&url=https%3A%2F%2Fbzbot.work, parameters={url=[https://bzbot.work], radio=[line]}} |
最後は処理した情報を再度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が出来る領域が広がっていけそうですね。
最後までありがとうございました!