Google Apps ScriptでVue Routerを使ったページ遷移を実現【GAS】

Google Apps Scriptで作成するウェブアプリケーションはiframeで閉じられたSandbox内で動作する為、基本的には一般的なウェブサービスと違い、SPAな作り方で構築しなければなりません。以前も以下のエントリーのような擬似的なページ遷移を作りましたが、あまり使いやすいものとは言えません。

そこで使うのがVue.jsで利用するVue Router。今回はGoogle Apps Scriptならではの使い方で作ってみようと思います。

Google Apps ScriptのHTML Serviceで擬似的に画面遷移【GAS】

今回利用するファイルやライブラリ

Vue.jsも利用する必要がありますので、ライブラリのロードではVue.jsとVue Routerの2つのライブラリを読み込みます。3つのページの内容はGAS側で用意しておいた3つのHTMLをcreateTemplateFromFileにてロードして切り替えます。

ソースコード

GAS側コード

  • gethtmlpageは指定されたHTMLのデータを取得して返すだけの関数です。

HTML側コード

  • <nav>の中にルーティングするページの一覧へのリンクを構築します。最後に<router-view/>を追加することでappの中身はOK
  • CDNからVue.jsとvue-router.jsをロードするのはページの後半部分で行います。
  • GAS側に用意した呼び出すHTMLはgethtmlpage関数で呼び出して格納します。
  • new VueRouterでルーターを初期化し、各ページへのデータをここで格納しておきます。
  • Vue.jsの初期化は一番最後に行い、ここでrouter:routerとして追加をします。

呼び出すHTML

今回のvue-routerではvue.jsのdataの値を取得できるかどうか?といった基本的なポイントに基づいて、2つのHTMLと1つの直書きした値をrouteに追加しています。主に以下のような内容です。

それぞれを/start, /button, /cookのルートに対して呼び出すようにセットしています。

注意点とポイント

今回のVueRouteを作成するにあたっては、Google Apps Scriptで利用する上での特別な注意点があります。

  1. 通常は遷移先URLが変わるのですが、GASではウェブアプリはiframe内のサンドボックス内なので、ブラウザのURL自体は変わりません(iframe内のソースが変わる)
  2. 初期ページ(ルート)のpathを初期表示した場合には、vueのdataの内容がundefinedで取得出来ない。redirectを指定しても同様。
  3. GAS側のHTMLの取得やrouteへの追加、new VueRouterの初期化は順番に行うために、Promiseで順番に取得して実行させています。
  4. 最後にVue.jsの初期化のMountedにてルートパスが開かれた場合をreplaceで/startへ書き換えて表示させ、2.の問題を回避しています(同じテクを応用すればページの内容を別のHTMLを呼び出して表示といった事も可能)
  5. 直書きの場合はルートのページでなければ、普通にvue.jsのdataへアクセスが可能なので、普通に値が取得可能

また、通常GASのウェブアプリは、戻るボタンをクリックしてしまうとウェブアプリからその前に表示されていたページへ戻ってしまうのですが、Routerを使ってる場合は、その上で操作した履歴はきちんと残されているので、戻るボタンでVueRouteのHistoryで表示した内容に移動できる利点があります。

サンプル表示

関連リンク

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください