Google Apps ScriptでWebアプリを作成する 【1】 Hello World!!ページを公開してみよう!!

Google Apps Scriptといえば、Google スプレッドシートやGmailといったGoogleサービスを自分仕様にカスタマイズすることができるプログラム言語として知られています…が、実はWebアプリケーションも作れてしまう超万能プログラム言語なんです!!

 

WebアプリのデザインはHTML・CSSで自由自在につくることができますし、Webアプリを公開しても追加コストはゼロ!!

もちろん、GASで提供しているスクリプトに加えて、外部のAPIやJavaScriptライブラリなどを活用してプログラミングすることができる点は変わりません。

作り込めば本格的なGAS製Webアプリケーションを毎日の生活や業務に導入することができます!

 

Google Apps ScriptはGoogle版Excel VBAのような見方をされることが多い(私だけ…?)ですが、WebアプリケーションをつくることもできちゃうGoogle Apps Script…万能すぎではありませんか!?

 

本記事では、まずWebアプリケーションを公開する方法の基本として、Hello World!!だけを書いた簡単なHTMLページを公開する方法をご紹介します。

 

HTMLファイルを作成する

まずはHello World!!のHTMLファイルを作成しましょう。

 

あれ!? Google Apps Scriptエディタ上のどこからHTMLファイルを触ることができるのでしょうか…?

 

…と思ったGAS初心者さん!!安心してください。GASエディタ左上の「ファイル」から簡単に作成できます。

「ファイル」→「新規作成」→「HTMLファイル」の順にクリックしてください。

 

ファイル名の入力を求められますのでお好みでファイル名を入力して「OK」をクリックしてください。ここではベターにindexで作成しました。

 

たったの2ステップでHTMLファイルを作成することができました。最低限必要なタグ等は既に書かれていますのですぐに書き始めることができます。

 

では、作成したHTMLファイルにHello Worldを表示させるコードを書き込みましょう!

 

今回はこの程度で大丈夫です。ここまで書けたらファイルを保存しておきましょう!

 

HTMLファイルを公開するスクリプトを記述する

さて、次はHTMLファイルを公開するためのスクリプトを書きます。

 

一般的にはWebサーバーにHTMLファイルをアップロードすることで外部にページを公開できます…が、GASの場合は下記のようなHTMLをブラウザに出力するためのコードを書きます。

 

このコードについて解説していきます。doGetはあとから解説します。

 

HtmlService.createTemplateFromFile()

HtmlServiceクラスはGoogle Apps ScriptでWebアプリケーションを公開するために必要なメソッド(=命令)を集めたものです。

今回はその中からcreateTemplateFromFIleメソッドを呼び出しています。

 

今回は

と書いています。

このコードで、先ほど作成したindex.htmlをHtmlTemplateオブジェクトというGoogle Apps ScriptでWebアプリケーションを公開するために必要な形式にします。

 

evaluate()

そして、HtmlTemplateオブジェクトを格納した変数templateに対して

evaluateメソッドを適用し、その値を返します。(returnさせる)

 

evaluateメソッドによって、先ほどのHtmlTemplateオブジェクトの中身…コードを評価し、実際にWebアプリケーションとして公開するためのhtmlOutputオブジェクトという形式に変換します。

returnでそのファイルをWebに返します。

 

doGet

さて、解説を後回しにしていた関数名のdoGetですが、これにもWebアプリケーションを公開するための重要な役割があります。

 

doGetという関数名にすることで、WebアプリケーションのURLにアクセスしたときに定義された関数の処理を作動させることができます。

今回であれば、WebアプリケーションのURLにアクセスしたときに、表示させたいindex.htmlのデータを変換、レンダリングしてくれます。

 

doGetのようにGASで決められたある特殊な関数名にすることでプログラムの起動タイミング…トリガーを設定することができるものをSimple Triggers(シンプルトリガー)と呼ばれています。

余談ですが、シンプルトリガーは他にもdoPostやonOpen、onEditなどといったものがあります。GASではよく使われる機能なので他のトリガーについて知っておくと良いでしょう。

 

Webアプリケーションを公開する

さて、Webアプリを公開するためのコードを書き終えたら、Webアプリ公開のための最後の処理を行います。

 

エディタのメニューにある「公開」→「ウェブアプリケーションとして導入」の順にクリックしていきます。

 

「ウェブアプリケーションとして導入」の画面が表示されました。

この画面ではWebアプリケーションのバージョンや公開範囲の設定などを行えます。

今回はそのまま「導入」をクリックします。

 

この表示が出たらWebアプリケーションの導入は成功です!

記載されているURLにアクセスすると今回作成したHTMLページにアクセスすることができます。さっそくアクセスしてみましょう!!

 

このように「Hello World!!」と表示されれば成功です!!もし、うまく表示されなかった場合はこれまでの手順をもう一度見直してみてくださいねー。

 

おわりに

Hello World!!と書かれた簡単なファイルではありましたがGASでのHTMLファイルの公開に成功しました!

この方法を使えばHello Worldに限らず、いろんなHTMLファイルをGASを使って公開することができます!!

 

さて、次回はGoogle Apps Script側の処理をWebアプリケーションに反映させる方法をご紹介します。

GASで処理する内容だったりGoogle スプレッドシートに記録されているデータなどをHTML上に出力できるようになります。ぜひごらんください〜

yoshi

JavaScript、Google Apps Scriptがメイン。Pythonもちょっとだけ。Google Apps Script開発、Pythonスクレイピングなどをする機会が多いです。ご依頼なども承っております。 記事内容についてのご意見・ご指摘などいただけますと幸いです。

シェアする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


コメントする