Google Apps Scriptでは、ウェブアプリケーションを作れるわけなのですが、基本的には1ファイル1ページオンリーで、画面遷移というものが出来ません。スプレッドシート上で表示するダイアログなどでは、いくつものHTMLダイアログを表示は出来ますが、お互いは独立したページなので干渉が出来ません。その為、ウェブアプリケーションとして出力した場合には、出来ることとしたら、DIVの書換えで対処するしかありません。

しかし、その場合、1つのHTMLファイルが非常に冗長になり、長いコードを1ファイルに書かなければいけないデメリットが生じます。そこで今回の策は、複数のHTMLファイルをプロジェクト内に用意して、メインとなるHTMLより、コールバックでデータを呼び寄せて、それをdocument.getElementById().innerHTMLで、まるごと書き換えるという手法です。これならば、1つ1つのファイルは独立してるので、メンテナンスしやすく、擬似的に画面遷移が実現できます。

使用するメソッド・クラス、準備するもの

ソースコード

HTML Serviceを使った画面の入れ替え

createTemplateFromFileを使った事例。予め、起動時に2つのHTMLをGAS側から呼び出して於いて、アクションがあったら、innerHTMLで書き換えて遷移を実現します。getContentでHTML自体を取得させています。

今回はONE PAGE LOVEというサイトのテンプレートを二枚それぞれtest.htmlとtaro.htmlに入れてみました。CSSも呼び出してcreateTemplateFromFileでレンダリングさせています。

GAS側コード

  • kinokoでまず本体を呼び出します。
  • testman, testman2はそれぞれ、kinokoで呼び出したtest.html内から呼び出される関数です。
  • 差し替えるHTMLをここで中身を受け取って返しています。それぞれは、別のHTMLファイルです(本体はpage.html、呼び出す側がtest.htmltaro.htmlそれぞれ用意しておく)。

HTML側コード(page.html)

doGetのパラメータで切り替え

こちらは起動時にGETにてパラメータを受け取り、そのパラメータによって画面を切り替える手法です。こちらの手法の場合、画面遷移だけでなく、Google Sitesにガジェットで貼り付ける時に、1つのプロジェクトで複数のガジェットを実現可能になる利点もあります。この仕組自体はGoogle Apps ScriptでGET・POSTにて一度紹介しています。

GAS側コード

  • ウェブアプリケーションとして公開をしてテストをが可能です。
  • 公開URLにsection=testsection=taroと繋げることで、それぞれ違うページをロードしてくれます。これを画面遷移の遷移先として利用するわけです。
  • 変数などを渡したい場合には、スクリプトプロパティなどを利用して渡すと良いでしょう。

jQuery Mobileでのページ内遷移

今回トリッキーな方法、しかしモバイルの世界では割とポピュラーな手法として、ライブラリを使ったページ内遷移で擬似的に画面遷移を実現してみました。複数のHTMLを用意せず、1枚のHTML内でセクションを用意し、それらをライブラリの力で画面遷移用に切り分けて表示する仕組みです。

GAS側コード

HTML側コード(transition.html)

  • sectionにIDを振り、jQuery Mobileの力で、2枚のページを実現しています。
  • ページ間はそれぞれのIDつまりアンカーの指定で移動します。
  • もちろん、hrefに別のHTMLやURLを指定すれば、移動することは可能です。

ポイント

  • createTemplateFromFileの場合にはスクリプトレットが使用できますが、createOutputFromFileの場合には使用することができません。
  • 呼び出す時に今回はTemplateFromFileなので、evaluateしてます。結果はJSONで受け渡しをしてますが、OutputFromFileの場合には、JSON関係なく、直接returnすれば表示できると思います。
  • HtmlService.SandboxMode.IFRAMEならば様々なライブラリが利用できます。そうでない場合にはjQueryなどの限定された機能だけしかライブラリは使用できないことを念頭に於いて呼び出しましょう。
  • CSSやJavaScriptもHTMLファイルとして分離してスクリプトレットなどで直接位置を指定して呼び出せます。
  • いずれの場合でも、.getContent()メソッドで中身を表示するのではなく、変数に取得しています。それをreturnで返して、page.htmlに反映しています。
  • 今回は、test.htmlもtaro.htmlも少ない内容なので、直接書き換えるのと見た目は変わりませんが、本格的なウェブアプリケーションを作るときには効果を発揮します。2ペインや3ペインのUIで作ると良いと思います。
  • この他にFramework7というGUIフレームワークを使ったインライン画面遷移を使うテクニックもあります。

関連リンク

共有してみる: