Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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アプリを作り始める際、同僚に共有する際によく閲覧しています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした