テクノロジー

Google Apps ScriptでWebアプリケーションを作成する方法

始めに

記事の概要

Google Apps Script(以下、GAS)を使用したWebアプリケーションの作成方法について紹介します。ここで定義するWebアプリケーションとは、ブラウザから参照し利用できるWebアプリケーションのことです。本記事にて紹介するのは下記2点となります。

  1. GASをWebアプリケーションとして使用できるようにする方法
  2. 画面描画を動的に行なう方法

できるようになること

本記事ではGASを使用して簡単なWebアプリケーションを作成する方法について理解できることを目的としています。ソースコードを適宜記載しているので実際に動かして動きを確認しながら理解を深める想定となっております。

対象

本記事は下記のような方を対象としています。

  • これからGASを使おうと思っている方
  • GASを使ってどのようにWebアプリケーションを作ったらよいか分からない方
  • GASを使った際の画面描画方法について分からない方

GASでwebアプリケーションを作成する

前提知識など

本記事では下記を理解ないし準備してあることを前提として話を進めていきます。

  • HTML・JavaScriptを使用して何かしら簡単な画面を作ることができるレベルの知識を有していること
  • Googleのアカウントを持っていること

Webアプリケーション作成手順

  • 1.GASプロジェクトを作成する
    • Google Drive上で右クリック -> その他 -> アプリを追加でGoogle Apps Scriptを追加
    • Google Drive上で右クリック -> その他 -> Google Apps Scriptでプロジェクトを作成
  • 2.デフォルトでコード.gsが作成されているのでそこに下記コードを記述し保存
    • 保存時にプロジェクト名を決めるようダイアログが出るので適当な名前で保存

  • 3.上部メニューバーよりファイル -> 新規作成 -> HTMLファイルとし、ファイルを作成ダイアログにて「index」と入力しOKをクリック
  • 4.作成されたindex.htmlに下記コードを記述

  • 5.上部メニューバーより公開 -> ウェブアプリケーションとして導入…をクリックし、表示されたダイアログにて「導入」をクリック
  • 6.現在のウェブアプリケーションのURLをコピーしブラウザのURLバーに貼り付けてEnter、もしくは「最新のコード」部リンクをクリック
  • 7.「hello world」とブラウザに表示されれば成功

GASで動的なWebページを作成する

1. 概要

GASで動的なWebページを作成する方法は2つあります。

  • Scriptletを使用する
  • クライアントサイドでJavaScriptを動かし画面を描画する

本稿では両方の解説を行ないます。

2. Scriptletを使用する

ScriptletはHTMLテキスト内にプログラムを記述するための記法です。
「GASでWebアプリケーションを作成する」内で使用した下記コードではすでにScriptletを使用しています。

上記の<? ~~~ ?>ないし<?= ~~~ ?>がScriptletとなります。
Scriptletで記述されたテキストはHtmlTemplate.evaluate();メソッドで評価され、HtmlTemplateオブジェクトはHtmlService.createTemplateFromFile({fileName})でインスタンス化できます。つまりHtmlService.createTemplateFromFile({fileName}).evaluate();のようにすることでScriptletを評価したHTMLテキストを取得することができます。

Scriptletは下記の3種類存在します。

  • 1.<? ~~~ ?>
  • 2.<?= ~~~ ?>
  • 3.<?!= ~~~ ?>

1つずつサンプルコードを交えながら説明を行ないます。

2.1. <? ~~~ ?>

~~~の部分にJavaScriptを記述することで、記述したJavaScriptを実行できる記法になります。例えば

  • スクリプトファイルに記述した関数を呼びだす
  • HtmlTemplateオブジェクトに設定したプロパティを呼び出す
  • if文やfor文を記述する

といった使い方ができます。
下記にサンプルコードを掲載してます。エラーにはなりませんが、コードを実行するだけなのでブラウザの画面には何も出力されません。2.2.や2.3.で紹介する記法と合わせて使用することで効力を発揮します。

サンプルコード

2.2. <?= ~~~ ?>

~~~の部分にJavaScriptを記述することで、記述したJavaScriptから得られた結果を画面に出力することができます。例えば

  • スクリプトファイルに記述した関数の処理結果を表示する
  • 変数に格納されている値を表示する

といった使い方ができます。こちらは特殊文字のエスケープを行ないますので、HTMLタグを変数に含んでいる場合はHTMLタグが文字列としてそのまま出力されます。2.3.で紹介する記述を使用するとHTMLタグを含む文字列もエスケープされず出力されるので、HTMLタグの装飾を使用したい場合は2.3.で紹介する記法を使用します。

下記にブラウザ表示結果とサンプルコードを掲載しています。

ブラウザ表示結果

サンプルコード

2.3. <?!= ~~~ ?>

~~~の部分にJavaScriptを記述することで、記述したJavaScriptから得られた結果を画面に出力することができます。
2.2.で紹介した<?= ~~~ ?>と違い、文字列のエスケープ処理を行ないません。HTMLの文字列を含んでいる場合、エスケープをしないのでHTMLタグとして装飾した結果をブラウザに表示することができます。

下記にブラウザ表示結果とサンプルコードを掲載しています。

ブラウザ表示結果

サンプルコード

3. クライアントサイドでJavaScriptを動かし画面を描画する

Scriptletを使用せず、index.htmlにJavaScriptを記述することでも画面描画は可能です。非同期的に画面描画を行ないたい場合はこちらの方法が向いています。
紹介する方法は下記の2つとなります。

  • パターン1. 非同期でデータを取得し描画
  • パターン2. データを事前に埋め込んで描画

3.1. パターン1. 非同期でデータを取得し描画

変更が頻繁にかかるデータを参照する場合向いている方法です。非同期で取得したデータをHTMLに加工して画面に表示しています。

3.2. パターン2. データを事前に埋め込んで描画

値を画面側で使いまわしたいときに向いている方法です。パターン1とは違い頻繁に更新のかかるデータには使用できませんが、一度画面描画を行なってしまえば以降リクエストが発生しなくなるのでGoogle Drive上のテキストファイルをプリロードしておく場合などに重宝します。

4. リクエストパラメータを処理する

リクエストパラメータを処理することもできます。下記に示すサンプルコードの通り引数を追加します。これはdoGet関数・doPost関数共に共通です。
詳細は下記の公式ドキュメントを参照してください。
Web Apps  |  Apps Script  |  Google Developers

まとめ

以上の手順でGASを使用してプロジェクトを作成し、画面表示を行なうことができました。また画面描画を動的に行なう方法についても複数紹介させていただきました。

今回紹介したものはGASプロジェクトの作成方法・GASを使用した際の画面描画手法のみですが、GASには便利な組み込みライブラリが多数存在しています。画面描画方法に加えGASの組み込みライブラリを使用することで簡単で本格的なWebアプリケーションの開発も可能です。またGoogleのサービスですのでGoogle Drive・Spreadsheet・Gmailと組み合わせることもできます。これらのサービスの連携をとても簡単に行なえるのがGASの強みです。まずはその入門として本記事を参考に簡単なWebアプリケーションを作ってみてはいかがでしょうか。


関連タグ