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

Contents

はじめに
1.作成するWebアプリケーション
2.Google Apps Scriptを作成
3.GASコード

はじめに

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

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

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

POINT

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

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

2.Google Apps Scriptを作成

POINT

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

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

3.GASコード

POINT

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

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

.htmlファイル

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

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

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

.htmlコード

HTMLコード

<!-- 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

<!DOCTYPE html>

<head>

</head>

<body>

<h1 class="display-4">ビジボットURL作成画面</h1>

<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>

</div>

<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=”~~”の部分に該当します。

GASコード

//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(); 
}

//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();

}

GASログ

[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]}}

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]}}