GAS&Vue.jsでスプレッドシートのデータを使ってWebページを作成する方法


sheets

photo credit: Una_Clara Whites done via photopin (license)

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

GASとVue.jsを使ってWebアプリケーションを作る方法をお伝えしています。

前回の記事はコチラ。

GASのWebアプリでクライアント側JavaScriptからサーバー側の関数を呼び出す方法
GASとVue.jsでWebアプリを作る方法をお伝えしています。今回は、google.script.runオブジェクトを使用しつつ、GASのWebアプリでクライアント側JavaScriptからサーバー側の関数を呼び出す方法です。

クライアント側JavaScriptからサーバー側GASの関数を呼び出すgoogle.script.runオブジェクトについてお伝えしました。

今回は、これを発展させてGAS&Vue.jsでスプレッドシートのデータを使ってWebページを生成する方法をお伝えします。

では、行ってみましょう!

これまでのおさらい

まず、前々回のおさらいです。

以下のようなWebページを作る方法をお伝えしました。

Vue.jsのv-forディレクティブを使ってGASのWebページにリンク付きリストを表示

プロジェクトの各コードについて紹介します。

まず、URLのリクエストを受け付けるdoGet関数を含むmain.gs。これがいわゆるサーバー側のGASです。

HTMLにバインドするデータをVue.jsのインスタンスに設定するjs.htmlはコチラ、つまりクライアント側のJavaScriptですね。

そして、そのバインドしたデータをHTMLとして参照・表示するのがコチラのindex.htmlです。

index.htmlはまだいいとしても、js.htmlのdataオプションの記述が面倒ですよね。

ここをスプレッドシートから取得したいというのが、しばらくの目標になります。

データソースとして使用するスプレッドシート

そして、スプレッドシートのデータを以下のように用意しておきます。

Vueのdataオプションにセットするスプレッドシートのデータ

A列に記事タイトル、B列にリンクURLですね。

Vueのdataオプションのデータをスプレッドシートから取得する

[前回]の記事でお伝えしたのは、以下のgoogle.script.runオブジェクトと、withSuccessHandlerメソッドによる命令です。

google.script.run.withSuccessHandler(コールバック関数).関数(引数1, 引数2,…)

一番最後に指定している「関数(引数1, 引数2,…)」はサーバー側のgsファイルに記述されているものです。

この関数を呼び出して、正常に実行された場合に、その戻り値を渡しつつクライアント側に記述している「コールバック関数」を呼び出すことができます。

スプレッドシートのデータを取得してリターンをする関数

まず、main.gsにスプレッドシートのデータを二次元配列で取得してリターンをする関数getSpreadsheetValuesを追加します。

サーバー側関数からデータを受け取ってdataオプションにセット

クライアント側JavaScriptでは、そのサーバー側の関数getSpreadsheetValuesを呼び出し、リターンをされたデータを受け取り、Vueインスタンスのdataオプションにセットします。

コードはコチラです。

3行目がgoogle.script.runオブジェクトとwithSuccessHandlerメソッド。サーバー側関数getSpreadsheetValuesを呼び出し、成功したらその戻り値を渡して、関数initializeVueを呼び出します。

関数initializeVue内の6行目で、valuesに対してshiftメソッドを使っているのは、二次元配列の最初の要素(見出し行のデータが格納されている)を削除するためのものです。

それを13行目で、dataオプションのlistsプロパティにセットします。

dataオプションに設定した二次元配列をHTMLに展開する

そして、index.htmlはコチラです。

今回でいうと、12行目が全てですね。

v-forディレクティブでlistsプロパティの要素分を繰り返してli要素を描画しています。

listsプロパティの要素は二次元配列になりますので、その要素listは一次元配列です。

そして、そのインデックスと内容の関係でいうと

  • 0: 記事タイトル
  • 1: リンクURL

ですから、それぞれのインデックスの要素をMustache構文を使ってaタグ内のテキストとして、またv-bindディレクティブを使ってhref属性としてセットします。

Webページの表示結果

以上のコードでWebページを表示してみると…

スプレッドシートのデータをもとにして作成したGASとVue.jsによるWebページ

このように、スプレッドシートのデータをもとにWebページを生成することができました。

まとめ

以上、GAS&Vue.jsでスプレッドシートのデータを使ってWebページを生成する方法をお伝えしました。

これで、index.htmlはもちろん、js.htmlのほうもだいぶスッキリさせることができました。Webページに表示させるデータの更新もとっても楽ちんです。

あと、tocTitleとかtocDescriptionもスプレッドシートに渡しちゃいたいですよね…ぜひ、トライしてみてください。

さて、次回以降、入力フォームを作り込んでみたいと思います。

どうぞお楽しみに!

連載目次:GASユーザーのためのVue.js&Webアプリ作成入門

Google Apps ScriptではHTML・CSSを使ってWebページを作成し公開することができます。このシリーズでは、その続きとしてはじめてクライアント側JavaScriptを動かすところからスタートし、人気急上昇中のフレームワークVue.jsを使ってWebアプリケーションを作成する方法をお伝えしていきます。
  1. GASのWebアプリケーションでクライアント側JavaScriptを使うための基礎知識
  2. GASでクライアントJavaScriptを使用する超簡単なプログラム
  3. GASとJavaScriptフレームワークVue.jsを使ってWebアプリを作成するための最初の一歩
  4. GASにVue.jsを導入する方法とその動作確認、そしてVue.jsの超基本を解説
  5. 【GAS&Vue.js】v-bindディレクティブを使って属性のデータバインディングをしてみよう
  6. GASとVue.jsによるWebアプリでv-forディレクティブを使って繰り返し要素を描画する方法
  7. GASのWebアプリでクライアント側JavaScriptからサーバー側の関数を呼び出す方法
  8. GAS&Vue.jsでスプレッドシートのデータを使ってWebページを作成する方法

  投稿者プロフィール

タカハシノリアキ株式会社プランノーツ 代表取締役
株式会社プランノーツ代表、コミュニティ「ノンプロ研」主宰。1976年こどもの日生まれ。東京板橋区在住。「ITで日本の『働く』の価値を上げる!」をテーマに、VBA&GASの開発、講師、執筆などをしております。→詳しいプロフィールはコチラ
★ご依頼・ご相談はお気軽にどうぞ!→お問い合わせはコチラ
★フォロー頂ければ嬉しいです。

コメント