HTML
GoogleAppsScript
gas

GoogleAppsScript(GAS)でページ遷移を擬似的に実装する方法

Qiitaでは初めて投稿させていただきます。マニュアルはよく読んだつもりですが、お作法など間違っておりましたらご指摘頂けますと幸いです。もちろん、内容そのものの誤りについても併せてお願いいたします。

本記事のサマリ

目指すところ

GASでページ遷移を擬似的に実装する方法を理解してもらうこと

想定読者

GASのなんたるかはある程度知っていて、GASを使ってWebアプリケーション開発ができるようになったたらいいな、なんて考えている方

環境について

GoogleAppsないしGoogleAppsScriptが使えればなんでもいいと思いますが、本記事ではブラウザはChrome、エディタはScriptEditorの想定で書いています

GASのHtmlServiceについて

HtmlServiceの概要について、本節と次の節で念のため簡単に説明します。ご存知の方は読み飛ばして頂いても大丈夫です。

HTMLの呼び出し方

GoogleAppsScriptのHtmlServiceを使うと、自前でサーバーを用意する必要なく簡単にWebアプリケーションの作成、公開ができてしまいます。

◯リファレンス
https://developers.google.com/apps-script/guides/html/

使い方としては、上記リファレンスの中にも記載の通り、

code.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

のようなコードでHTMLファイルを呼び出すことができます。
今回は'Index'という名前のHTMLが指定されていますので、例えば

Index.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello, World!
  </body>
</html>

というファイルを用意しておけば、Hello Worldできるわけです。

ScriptEditorでの実装例

実際に、上記の例の通り作りました。

◯エディタ
https://script.google.com/d/1U5Sl3KTaxLBn0wFSwDLQy9SQ69BriVVRq09rGozttszEXoC3IHWVv07E/edit?usp=drive_web&folder=0APCa8BjxdXUsUk9PVA&splash=yes

◯アプリケーション
https://script.google.com/macros/s/AKfycbzyf-ZWlqO8VKUsN6c7sb-NShNA3l0LMgOLg3wnLVfUQX7NCgk/exec

実際にご自身でも試されたい場合は、上記エディタのリンクから「ファイル」→「コピーの作成」でご自身のドライブにコピーし、「公開」→「Webアプリケーションとして導入」で出てくる設定画面において、

◯プロジェクトバージョン
1(初期値のまま)

◯次のユーザーとしてアプリケーションを実行
自分(初期値のまま。今回はプルダウンの選択肢どれを選んでも同じです)

◯アプリケーションにアクセスできるユーザー
自分しか見ないのであれば「自分だけ」
他人に見せる予定があれば「全員」もしくは「全員(匿名ユーザーを含む)」

※「匿名ユーザー」とは GoogleDriveにログインしていないユーザーのことです。つまり、「全員(匿名ユーザーを含む)」にすればそのアプリケーションのURLを知っている人全員がアクセスでき、「全員」にするとそのうちGoogleDriveにログインしている人だけがアクセスできます。

と設定し、「更新」をクリックして出てくるウィンドウの中の「現在のウェブアプリケーションのURL」をブラウザのアドレスバーに貼り付ければ、公開されたアプリケーションを確認することができます。今回の例では、ブラウザ上に'Hello, World!'と表示されれば成功です。

ScriptEditorで作成したWebアプリケーションへアクセスされると、まず初めに'doGet'という名前のスクリプトが実行されます。つまり、'doGet'の存在しないプロジェクトを公開しても、エラーが返ってくるだけです。

◯エラーのサンプル
https://script.google.com/macros/s/AKfycbzOn78QJNQMJLeJNJhcmPVHtuVQfJncTZHMCfZp-pYxpvz_DqWj/exec

HtmlServiceの強み・弱み

HtmlServiceの強み

強みとしては、何と言っても簡単にWebアプリケーションを公開できてしまうところにあります。しかも、自前でサーバーを用意したり、レンタルサーバーのサービスを利用する必要なく、多くの人が持っているであろうGoogleアカウントさえあれば基本無料で開発をすることができます。

また、Googleスプレッドシートなどとの連携が強力なGoogleAppsScript(GAS)を利用していることから、本来であればSQLやDBの環境や知識が必要なアプリケーションであっても、簡易的なものであればスプレッドシートを台帳として開発が可能です。

HtmlServiceの弱み

一方、弱みとして挙げられるのは、今回の記事の主題にもある通り、「1プロジェクト1ページ」である点です。このことにより、複数ページを用意してページ遷移が必要なアプリケーション開発をしようとすると、プロジェクトをその数だけ用意する必要があり、開発や管理の工数がかなり必要になってしまいます。

それでは、この弱みを克服し、本記事の主題である「GoogleAppsScript(GAS)でページ遷移を擬似的に実装する」ためにはどうしたら良いのかについて説明していきます。

解決策:URLにパラメーター(引数)を付与する

お悩みの解決策は、ずばり「URLにパラメーターを付与し、パラメーターによってifやswitchで分岐させる」ことになります。引数という呼び方もありますが、本記事ではパラメーターと呼ぶことにします。

URLのパラメーターとは

「そもそもURLとは・・・」などと書き始めると長くなりますし、そもそも私も完全に理解しているわけではないので他の記事に譲り、私からは簡単に説明させていただきます。

例として以下のURLをご覧ください。
https://script.google.com/macros/s/AKfycbyzeDcv8T7KZrG2gBqtS7985kVGtsx9-FM2Z-7P-TXDfO81Gh4/exec?p=index

URLの後ろに

?p=index

とあるのがお分かりいただけるかと思います。
これは、「このURLに"p"と言う名前のパラメーターを付与し、その値は"index"とする」と言う意味になります。

このように、URLの後ろに"?"を付けることにより、パラメーター名(引数名)とその値を追加することができるのです。したがって、URLにパラメーターを付与し、それをサーバーに受け取ってもらうことで、パラメーターに応じた動作をさせることができます。

HtmlServiceでの実装例

このようなURLの仕組みを利用して、HtmlServiceでもあたかも複数ページがあるように見せることができます。

先ほど例として紹介したこちらのWebアプリケーションは、実はURLのパラメーターに応じて表示内容が変わるように作られています。
https://script.google.com/macros/s/AKfycbyzeDcv8T7KZrG2gBqtS7985kVGtsx9-FM2Z-7P-TXDfO81Gh4/exec?p=index

こちらのURLをクリックすると、「ここはIndexです。」というページが表示されるはずです。また、"Menu1"と"Menu2"というリンクをクリックすることで、別のページに遷移したように見えます。ところが、"Menu1"と"Menu2"をクリックしたリンク先はそれぞれ、

◯Menu1
https://script.google.com/macros/s/AKfycbyzeDcv8T7KZrG2gBqtS7985kVGtsx9-FM2Z-7P-TXDfO81Gh4/exec?p=menu1

◯Menu2
https://script.google.com/macros/s/AKfycbyzeDcv8T7KZrG2gBqtS7985kVGtsx9-FM2Z-7P-TXDfO81Gh4/exec?p=menu2

となっていて、パラメーターが異なるだけで同じURLということがわかります。
すなわち、プロジェクトファイルは一つの同じものであるものの、ユーザーからはあたかも複数ページがあってページ遷移をしているように見せることができます。

実装例のコード

上記Webアプリケーションのプロジェクトファイルはこちらです。

https://script.google.com/macros/d/12xiFjArKSK88YN9hXIDR1BrB9Z2KXJLSkKTovyQHVDQ5oEm9-PzVFPqT/edit?usp=drive_web

構成としては、
doGetのためのgsファイル
indexページのためのhtmlファイル
menu1ページのためのhtmlファイル
menu2ページのためのhtmlファイル
エラーページのためのhtmlファイル
となっています。

Webアプリケーションにアクセスされると、まず初めにdoGetが実行されます。

code.gs
function doGet(e){
  var page=e.parameter["p"];

  if(page == "index" || page==null){

  return HtmlService.createHtmlOutputFromFile('Index');
}
  else if(page =="menu1"){
  return HtmlService.createHtmlOutputFromFile('Menu1');
  }
  else if(page =="menu2"){

    return HtmlService.createHtmlOutputFromFile('Menu2');
    }
  else{
    return HtmlService.createHtmlOutputFromFile('Error');

    }


  }

まず初めにURLのパラメーターを"page"という変数に格納しています。

code.gs
function doGet(e){
  var page=e.parameter["p"];

doGet(e)とすることでURLのパラメーターがe.parameterの中に配列で格納されますので、e.parameter["p"]とすればURLの"p"パラメーターの値を取り出すことができます。

その後、取得したパラメーターの値によって、if文により分岐をさせ、returnさせるHTMLファイルを分けることで、複数ページが存在するように見せているというわけです。もしもパラメーターが付与されない場合はnullが返ってきますので、その場合はindexページが表示されるようにしています。また、予測しないパラメーターが送られてきた場合に備えて、エラーページも用意しています。

ちなみに、HTMLファイルも念のため確認すると、

Index.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    ここはIndexです。<br><br>
    <a href="https://script.google.com/macros/s/AKfycbyzeDcv8T7KZrG2gBqtS7985kVGtsx9-FM2Z-7P-TXDfO81Gh4/exec?p=menu1">Menu1</a><br>
    <a href="https://script.google.com/macros/s/AKfycbyzeDcv8T7KZrG2gBqtS7985kVGtsx9-FM2Z-7P-TXDfO81Gh4/exec?p=menu2">Menu2</a><br> 
 </body>
</html>

となっていて、aタグでリンクする先のURLに付与するパラメーターを分けることで、それぞれ違うページが表示されるように見せています。

まとめ

以上が、GoogleAppsScript(GAS)でページ遷移を擬似的に実装する方法についての紹介になります。ここで紹介した方法を応用させることで、簡単なWebアプリケーションについては開発できてしまうことがお分かりいただけていれば幸いです。

これを利用すれば、社内のワークフロー的なアプリケーションだったり、データベース的なアプリケーションも開発でてしまいますので、ぜひ色々と試してみていただければと思います。

◯追記
本記事の実践編を書きました。実際に作ったアプリケーションを紹介しています。

GASでページ遷移ありWebアプリケーションの作成(ZaifAPI利用)
http://qiita.com/kakkiichan/items/6eeff6e67a86e9f81aaa

〇著者
株式会社メタレピュテーション
代表取締役 新垣

当社サイト「生産性総合研究所」において、GAS関連の記事を執筆中です!
http://productivityresearch.net/category/programing/googleappsscript/