GoogleAppsScript(GAS)で簡単なWebアプリ開発をする

Webアプリケーションといえば、0から環境構築してプログラミングをして作らないといけない・・ハードル高い・・・って思いがちですよね。GoogleAppsScript(GAS)を使えば、自分で環境も作る必要もないしアプリケーションの公開も簡単にする事ができます。環境構築とデプロイをサクッとできてしまうのはかなり魅力的ですよね。

今回はGASでHello Worldを表示するアプリケーションを作って、公開するところまでやっていきたいと思います。

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

GoogleAppsScriptを開いたら「新しいプロジェクト」をクリックします。

 

コード.gsっていうファイルに何やらfunction myFunction()って書かれたものが最初から作られていますね。一旦こいつはシカトして新たにHTMLファイルを作ります。Webアプリケーションの見た目を作るファイルです。

今回はWebアプリケーションをGASでも作れるのかな?っていうのを試したいだけなので、簡単なファイルにしておきましょう。HTMLファイルは単純に「Hello World!」を表示するだけのものにする。<body>タグの中にHello Worldを入れておきます。

ファイル名はindexとしておきます。このファイルをそのままアプリケーションとして公開(公開方法は後に)すればHello World!が表示されるはずだけど、これをそのまま公開すると以下のように「doGet()がないよ?」と言われます。

GoogleAppsScriptでアプリケーションを作ると、doGet()かdoPost()っていう関数が必要になるんです。

Requirements for web apps

A script can be published as a web app if it meets these requirements:

WebApps

今回やりたいことはWebアプリケーションのページを表示させることです。Webアプリケーションのページにアクセスする際には通常GETというHTTPメソッドが使われるので、doGet()関数を使いましょう。

When a user visits an app or a program sends the app an HTTP GET request, Apps Script runs the function doGet(e). When a program sends the app an HTTP POST request, Apps Script runs doPost(e) instead. In both cases, the e argument represents an event parameter that can contain information about any request parameters. The structure of the event object is shown in the table below:

WebApps

コード.gsにdoGet()関数を書いてやります。

function doGet() {
  return HtmlService.createTemplateFromFile("index").evaluate();
}

何書いてんだよ?って感じだけど、これはindexファイルのhtmlを返すというような記述です。それぞれの関数がどんなことをするのかはドキュメントを熟読してみるといいです。

createTemplateFromFile(filename) HtmlTemplate Creates a new HtmlTemplate object from a file in the code editor.
evaluate() HtmlOutput Evaluates this template and returns an HtmlOutput object.

html-template

これでさっき名前をindexとして保存したHTMLファイルを表示する事ができるようになりました。後はこれらを公開するだけです。「公開」から「ウェブアプリケーションとして導入」をクリックして「Deploy」です。

他の人が公開したアプリケーションにアクセスしてみる事ができるようにすることもできるけど、今回はアクセスできるのは自分だけにしておきました。他の人にも見せたい場合にはWho has access to the appの選択を「全ユーザー」にしておくといいです。

「Deploy」をクリックしたら、URLが表示されるからそれにアクセスしてみましょう。すると、「Hello World!」が出てきます。

もしうまく表示できなかった場合は、書いたコードを見直してみるといいです。「公開」→「Webアプリケーションとして導入」から「latest code」をクリックして再度試してみましょう。

まとめ

Hello World!を表示する簡単なものだけど、GoogleAppsScriptを使ってWebアプリケーションを作って公開する事ができました。ただ文字列を表示させただけだから何もすることはできないけど、もっとプログラムを書けば動くものを作る事ができます。

スプレッドシートをデータベースにして使うこともできるから、そう考えると結構いろいろな事ができそうですよね。今度はちょっと動きのあるアプリケーションを作ってみたいところ。

Twitterでフォローしよう

おすすめの記事