HTML
JavaScript
GoogleAppsScript
gas
gasja

GASによるWebAppについて"もっと"入門向けに書いてみる

Google Apps Script (以下GAS) はスプレッドシートの値を読み書きしたり、Gmailやカレンダーと連携したツールを実現することが出来ますが、ブラウザでURLを入力してHTMLを表示するWebアプリケーションを作ることも出来ます。

どんな人に読んでほしいか

  • GASを書いたことがある
  • HTML, JavaScript を書いたことがある
  • 自由なHTMLを書こうとしたが、Googleサイトでは挫折した
  • 無料のインフラで手軽にWebアプリを作りたい
  • すぐに忘れる (著者)

この記事のゴール

  • 純粋なHTMLのHelloWorld を作る

今後のゴール

今後の記事で下記についてもテクニックを紹介します。

  • HTML, JavaScript, CSS を活用したページを作る
  • 外部ライブラリ jQuery, Bootstrap を使う
  • ページ遷移やスプレッドシートと連携する
  • ToDoアプリを作る

純粋なHTMLのHelloWorld を作る

それでは本章に入ります。
ここでは最低限の構成でWebアプリ(Webページ)を表示することを実現します。
まずは、GoogleDriveから スプレッドシート もしくは GoogleAppsScript を作成します。
スクリーンショット 2017-12-18 2.14.28.png

スプレッドシートの方は、 ツール > スクリプトエディタ と進みましょう。 なお、私は事前にファイル名を変更する習慣をつけています。
スクリーンショット 2017-12-18 2.20.04.png

スクリプトエディタが立ち上がりました。こちらも最初に名前をつけておきます。
スクリーンショット 2017-12-18 2.23.16.png

続いて、 ファイル > 新規作成 > HTML ファイル を選択しましょう。ファイル名は hello.html とします。
スクリーンショット 2017-12-18 2.26.29.png
スクリーンショット 2017-12-18 2.29.19.png

HTMLファイルが作成されました。GASの中での複数ファイル切り替えは、画面左側で行います。
スクリーンショット 2017-12-18 2.30.12.png

ではHTMLファイルを編集しましょう。 無心にコピペできるように今回はHTML全文を記載します。

hello.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>HelloWorld</h1>
  </body>
</html>

続いて、 コード.gs を編集します。 こちらも下記コードをコピペしましょう。その際、 最初からある myFunction は使わないので削除しておきます。

コード.gs
function doGet() {
  var template = HtmlService.createTemplateFromFile('hello.html');
  return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

下図のようになっていると思います。
スクリーンショット 2017-12-18 2.42.43.png

ソースコードの編集は以上です。 次にWebアプリとして表示するための準備を進めます。
公開 > ウェブアプリケーションとして導入... を選択します。
スクリーンショット 2017-12-18 2.47.04.png

そのまま 導入 ボタンを押します。
スクリーンショット 2017-12-18 2.48.40.png

下図のようになります。 入力ボックスに表示されているURLをコピーしましょう。
スクリーンショット 2017-12-18 2.49.39.png

コピーしたURLを新規タブに貼り付けます。
スクリーンショット 2017-12-18 2.50.51.png

おや… 現在、ファイルを開くことが出来ません とエラーが発生しました。これは想定外です。 現時点でのGoogleのバグでしょう。よくあることです。
スクリーンショット 2017-12-18 2.55.36.png

表示されているURLに不具合があるようです。G Suite環境下だけかもしれません。URLを少し加工します。

編集前
https://script.google.com/macros/u/0/s/AKfycbzTpXISHiP94a4mAPYBUbMIwqLyI-W-BXB7Xb0zFA-O1H99TrE/exec
編集後(u/0/を削除)
https://script.google.com/macros/s/AKfycbzTpXISHiP94a4mAPYBUbMIwqLyI-W-BXB7Xb0zFA-O1H99TrE/exec

無事表示できました。
スクリーンショット 2017-12-18 3.03.01.png

これで純粋なHTMLを表示することが出来ました。

次の話に進む前に、少し表示する文字を変更してみましょう。
HTMLの HelloWorld の文字を HelloGASWorld に変更してみましょう。変更したら忘れずに上書き保存です。
貼り付けた画像_2017_12_18_3_07.png

もう一度先程のURLを開いて更新します。
どうでしょう? HelloGASWorld と表示されていますか? 変更が反映されず HelloWorld と表示されていると思います。
Webアプリで変更を反映させるためには プロジェクトバージョン を更新する必要があります。
公開 > ウェブアプリケーションとして導入... へ進み、プロジェクトバージョンを 新規作成 にします。
_GAS__HelloWorld_WebApp.png

続いて 更新 ボタンを押します。 この際、前回と同じURLが再度表示されます。
先ほど開いていたページを改めて更新してみましょう。今度は変更が反映されていると思います。
スクリーンショット 2017-12-18 3.16.49.png

開発中の確認作業を短縮するテクニック

ここで開発中の確認作業を短縮するテクニックを紹介します。開発中に自身が確認する場合はプロジェクトバージョンの更新の手間を省くことが出来ます。

公開 > ウェブアプリケーションとして導入... へ進み、 最新のコードをテストします を開きます。
ここで先ほどと同様の 現在、ファイルを開くことが出来ません エラーが出てしまいました。 u/0/ を削除して再挑戦します。
いかがでしょう、 HelloGASWorld が表示されたでしょうか。

試しにHTMLを編集してみましょう。 HelloGASWorldYahooGASWorld に変更してみます。上書き保存を忘れずに。

今回は、ウェブアプリケーションとして導入 には進まず、 最新のコード で開いたタブをページ更新しましょう。 更新が反映されていました。
スクリーンショット 2017-12-18 3.30.12.png

以下は私個人がよくやる作業なのですが、開発中テスト用のURLと展開用のURL(ウェブアプリケーションとして導入のURL) をソースコード冒頭にコメントとしてメモしています。
スクリーンショット 2017-12-18 3.38.52.png

それぞれURLの末尾を見ると区別がつきます。

  • /exec
    • 展開用URL
    • ウェブアプリケーションとして導入した際に設定した閲覧範囲がこのURLで表示できます。
  • /dev
    • 開発中テストURL
    • 原則、開発者しか表示できません。他者はこのURLを開くと スプレッドシート or GoogleAppsScriptの権限リクエストする画面が表示されます。

まとめ

この記事ではGASでのWebアプリの "もっと"入門として、純粋なHTMLを表示することを紹介しました。
少しの開発中の作業効率化についても紹介しました。

著者も記述中に想定しないエラーもありました。悲しくもGASでは あるある だと思っています。とても難しいですが工夫を利かせて乗り切っていきましょう。

参考文献

  1. Google Apps ScriptでWebアプリケーションを作る最初の一歩 - いつも隣にITのお仕事
    • GASでのWebアプリを作り始める際、同僚に共有する際によく閲覧しています。