Google Apps Scriptで簡単にWebアプリケーションを公開する方法｜NEWS

2018.12.19
技術ブログ

Google Apps Scriptで簡単にWebアプリケーションを公開する方法

※本記事は、INDETAIL Advent Calendar 2018の一環として投稿しています。

コーヒーとWEB DEVELOPMENT

こんにちはtoshiです。
突然ですが皆さんはGoogle Apps Script(以下、GAS)を利用していますでしょうか。
つい最近GASで簡単にWebアプリケーションを公開できることを知ったので
今回は、その手順について書いてみたい思います。

Webアプリケーションの公開手順

スクリプトファイルを作成

スクリプトファイルを作成するには、googleドライブの「新規」→「その他」→「Google Apps Script」を選択します。

初めにGASで以下のようなdoGetメソッドを作成します。
doGetメソッドはGetリクエストを受け取った際に最初に呼び出される関数になります。
そのため、doGetメソッド内でWebアプリケーションを作成するための機能を提供するHTMLServiceオブジェクトを使用することでWebアプリケーションを作成することができます。

function doGet() {
  // 表示したいHTMLのファイル名を指定(拡張子は不要)
  return HtmlService.createTemplateFromFile("index").evaluate();
}

function doGet() {

// 表示したいHTMLのファイル名を指定(拡張子は不要)

return HtmlService.createTemplateFromFile("index").evaluate();

}

HTMLファイルを作成

次に表示するHTMLファイルを作成します。
基本的にGASでWebアプリケーションを作成する場合は、ブラウザに表示されるHTMLファイルと裏で処理を行うGASのスクリプトファイルがセットになるかと思います。
HTMLファイルを作成するにはメニューの「ファイル」→「新規作成」→「HTMLファイル」を選択します。
今回はスクリプトファイルの「createTemplateFromFile("index")」でindex.htmlをテンプレートとして指定しているので、index.htmlという名前でHTMLファイルを作成します。

以下のようなHTMLファイルが作成されるので、bodyタグ内にHello Worldと入れてみます。

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

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

作成したWebアプリケーションの公開

先ほど作成したdoGetメソッドを記載したスクリプトファイルとindex.htmlがあれば最低限Webアプリケーションとして公開できるようになるので一度公開してみます。
Webアプリケーションとして公開するには、メニューの「公開」→「ウェブアプリケーションとして導入…」を選びます。

以下のようなモーダルが表示されます。今回は試しに公開するだけなので、デフォルトの設定のまま自分用として公開します。

公開が完了すると以下のようにURLが表示されるので接続してみましょう。
※URLの共通部分以外は隠しています。

以下のように無事表示されていることを確認できました！
インフラの知識がなくとも簡単に公開できるのはありがたいです。

簡単なWebアプリケーションを作ってみる

Hello Worldと表示するだけでは少し物足りないので、スプレッドシートのデータを入出力する簡単なアプリケーションを作ってみたいと思います。

スプレッドシートの作成

スプレッドシートとGASを連携するにはあらかじめシートを作成する必要があるので、初めにシートを作成します。
その際にシートのURLにあるIDが必要となるので控えておきます。

スプレッドシート
https://docs.google.com/spreadsheets/d/[スプレッドシートのID]/edit

今回は以下のようなシートを作成しました。

GASのスクリプトを修正

次にGASのスクリプトを修正します。
今回は以下の３つの関数を追加しています。

シート名からシートオブジェクトを取得するgetSheetメソッド

HTMLのフォームからPostリクエストを受け取り、シートにデータを挿入するdoPostメソッド

シート名からシートに入力されている全データを取得するgetDataメソッド

function doGet() {
  // 表示したいHTMLのファイル名を指定(拡張子は記載しない)
  return HtmlService.createTemplateFromFile("index").evaluate();
}

function doPost(e) {
  
  // シートを取得
  var sheet = getSheet('シート名');
  
  // シートの最終行を取得
  var lastRow = sheet.getLastRow();
  
  // 最終行にデータ挿入
  // 「e.parameter.フォーム名」 でフォームから送信されたパラメータを受け取ることができます
  sheet.appendRow([lastRow, e.parameter.value, new Date(), e.parameter.name]);
  
  // スプレッドシートのデータ挿入後、元の画面に戻す
  return HtmlService.createTemplateFromFile("index").evaluate();
}

function getSheet(name){
  
  // SSIDからスプレッドシートの取得
  var ssId = 'スプレッドシートのIDを入れる';
  var ss = SpreadsheetApp.openById(ssId);

  // 指定されたシート名からシートを取得して返却
  var sheet = ss.getSheetByName(name);
  return sheet;
}

function getData() {
  
  // 指定したシートからデータを取得
  var values = getSheet('シート名').getDataRange().getValues();

  return values;
}

function doGet() {

// 表示したいHTMLのファイル名を指定(拡張子は記載しない)

return HtmlService.createTemplateFromFile("index").evaluate();

}

function doPost(e) {

// シートを取得

var sheet = getSheet('シート名');

// シートの最終行を取得

var lastRow = sheet.getLastRow();

// 最終行にデータ挿入

// 「e.parameter.フォーム名」でフォームから送信されたパラメータを受け取ることができます

sheet.appendRow([lastRow, e.parameter.value, new Date(), e.parameter.name]);

// スプレッドシートのデータ挿入後、元の画面に戻す

return HtmlService.createTemplateFromFile("index").evaluate();

}

function getSheet(name){

// SSIDからスプレッドシートの取得

var ssId = 'スプレッドシートのIDを入れる';

var ss = SpreadsheetApp.openById(ssId);

// 指定されたシート名からシートを取得して返却

var sheet = ss.getSheetByName(name);

return sheet;

}

function getData() {

// 指定したシートからデータを取得

var values = getSheet('シート名').getDataRange().getValues();

return values;

}

HTMLファイルを修正

次にHTMLファイルを修正します。
HTMLファイルには、データ送信用のフォームとスプレッドシートのデータを表示するテーブルを追加します。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      table{
        border: solid 1px #000000;
        border-collapse: collapse;
      }
      th {border: solid 1px #000000}
      td {border: solid 1px #000000}
    </style>
  </head>
  <body>
    <h2>Hello World</h2>
    <form method="post" action="公開時のアプリケーションのURLを入れる">
    
      <label>name：<input type="text" name="name"></label>
    
    
      <label>value：<input type="text" name="value"></label>
    
    
      <input type="submit" value="送信する">
    
  </form>
  <table>
      <?
        // スプレッドシートからデータを取得
        var data = getData();
        
        // テーブルの見出し作成
        output.append('<tr>');
        output.append('<th>' + data[0][0] + '</th>');
        output.append('<th>' + data[0][1] + '</th>');
        output.append('<th>' + data[0][2] + '</th>');
        output.append('<th>' + data[0][3] + '</th>');
        output.append('</tr>');
        
        // テーブルを作成
        for(var i=1;i<data.length;i++){
          output.append('<tr>');
          output.append('<td>' + data[i][0] + '</td>');
          output.append('<td>' + data[i][1] + '</td>');
          output.append('<td>' + data[i][2] + '</td>');
          output.append('<td>' + data[i][3] + '</td>');
          output.append('</tr>');
        }
      ?>
   </table>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

table{

border: solid 1px #000000;

border-collapse: collapse;

}

th {border: solid 1px #000000}

td {border: solid 1px #000000}

</style>

</head>

<body>

<h2>Hello World</h2>

<label>value：<input type="text" name="value"></label>

</form>

<table>

// スプレッドシートからデータを取得

var data = getData();

// テーブルの見出し作成

output.append('<tr>');

output.append('<th>' + data[0][0] + '</th>');

output.append('<th>' + data[0][1] + '</th>');

output.append('<th>' + data[0][2] + '</th>');

output.append('<th>' + data[0][3] + '</th>');

output.append('</tr>');

// テーブルを作成

for(var i=1;i<data.length;i++){

output.append('<tr>');

output.append('<td>' + data[i][0] + '</td>');

output.append('<td>' + data[i][1] + '</td>');

output.append('<td>' + data[i][2] + '</td>');

output.append('<td>' + data[i][3] + '</td>');

output.append('</tr>');

}

</table>

</body>

</html>

修正したアプリケーションを公開

コードができたので再度公開してみます。
2回目以降の公開はプロジェクトバージョンが選択することができるようになっています。
今回はバージョン2として作成したいので、「新規作成」を選択して公開します。
(ここで過去のバージョンを指定すると過去のバージョンに戻すことができます。)

作成したアプリケーションを確認

修正したアプリケーションの公開が完了したので確認してみます。
アプリケーションを表示するとフォームが追加されているので入力して送信してみます。

追加されたフォームに入力した結果が以下になります。
無事スプレッドシートの編集ができました!

まとめ

いかがでしたでしょうか。
今回はスプレッドシートのデータを入出力するのみでしたが、スプレッドシートをデータベースの代わりとしてアプリケーションの作成など色々できるかと思います。
Googleのアカウントとちょっとしたプログラミングの知識があれば誰でも作成できるかと思うので、是非試していただければと思います。
※アプリケーションからGoogleサービスを操作できる都合上、各Googleサービスへの不正アクセスの原因となる可能性があるので、公開時にはアクセスユーザーの設定とURLの取り扱いにご注意ください。

NEWS