Help us understand the problem. What is going on with this article?

【Google Apps Script Webアプリ】Vue.jsを使って非同期にスプレッドシートを読み取りデータを更新する。

More than 1 year has passed since last update.

はじめに

某社でGASのWebアプリを用いて社内ツールを作っている現在大学3年生(就職活動中)
社内ツールは主にjQueryで実装してきたが、Vue.jsを使えばもっと楽に作れるのではないかと勉強を始めた。

スプレッドシートのデータをWebアプリケーションから非同期通信を使って表示する。
これを利用すればページ移管なしで、データを更新することができる。

今回はVue.jsを利用してWebアプリケーションを作成する。
jQueryで実装したのはこちら

デモ

4e4fbfd773d6de1f61ac9976ecb75762.gif

スプレッドシートにデータを書き込む

表示したいデータをシートに書き込む
1行目にはJSONで使うkeyを設定
2行目以降はvalueを設定

スクリーンショット 2019-03-06 午前1.27.04.png

ツール > スクリプトエディタ からスクリプトエディタを立ち上げる

コードを書く

コード.gsに以下を貼り付ける

コード.gs
function doGet(e) {  
  htmlOutput = HtmlService.createTemplateFromFile("index").evaluate();

  htmlOutput
  .setTitle('GASであそぼ')
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')

  return htmlOutput

}
//引数にシート名を指定
//スプレッドシートで取得した2次元配列をJSONに変換
//src https://qiita.com/takatama/items/7aa1097aac453fff1d53
function getData(sheetName) {
  var sheet = SpreadsheetApp.getActive().getSheetByName(sheetName);
  var rows = sheet.getDataRange().getValues();
  var keys = rows.splice(0, 1)[0];
  return rows.map(function(row) {
    var obj = {};
    row.map(function(item, index) {
      obj[String(keys[index])] = String(item);
    });
    return obj;
  });
}

続いてHTMLファイルを作成する

ファイル名を indexして[OK]
SS 2018-11-09 21.44.50.png

index.htmlに以下のコードを貼り付ける

index.html
<!DOCTYPE html>
<html>

<head>
</head>

<body>

<h2>【非同期通信】スプレッドシートのデータをWebアプリケーションで書き出す</h2>
<h3> ~GASでVue.jsを使う~</h3>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <button @click="get_sheet">データ更新</button>

  <ul>
    <li v-for="list in lists">
      <span>{{list.name}}</span>
      <span>{{list.area}}</span>
    </li>
  </ul>

</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      lists: null
    },
    methods: {
      get_sheet: function () {
        //GAS内のコード読み出し
        google.script.run
          .withSuccessHandler(function (data) {
            // GAS正常終了時の処理
            //★ここが一番時間がかかる★
            console.log('正常 取得したデータ: ' + JSON.stringify(data));

              // this.lists = data; この処理だとDOMが更新されない

            vm.lists = data;
          })
          .withFailureHandler(function (data) {
            // GASエラー時の処理
            console.log('エラー 取得したデータ: ' + JSON.stringify(data));
          })
          .getData('シート1');
      }

    }

  })
</script>
</body>

</html>

google.script.runを使ってコード.gsのコードを動かす(非同期処理)

ファイル構成は以下のようになっていればOK
スクリーンショット 2019-03-06 午前1.30.27.png

Webアプリケーションとして走らせる

完成したらコード.gsindex.htmlを保存する
続いてWebアプリケーションとして導入する

導入ボタンを押す

SS 2018-11-09 22.08.23.png
SS 2018-11-09 22.09.45.png

許可を押す
SS 2018-11-09 22.10.09.png

承諾を押す
SS 2018-11-09 22.09.55.png

無事に導入できたので[最新のコードでテスト]を押す
SS 2018-11-09 22.10.21.png

無事に以下のように表示されたら成功です!
4e4fbfd773d6de1f61ac9976ecb75762.gif

merarli
社会人1年目、バックオフィスエンジニアとして働いています。 某デジタルメディアで長期就業型インターンやってました。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした