14
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

VueのイベントハンドラとGAS関数のスプレッドシートデータ連携方法(その1)

Last updated at Posted at 2018-08-22

こちらの記事は
GASとVueでサーバレス社内チーム向け工数管理

の詳細記事その②です。

##スプレッドシートにデータを用意する
社内チームの要望で「クライアント」「プロジェクト」「案件」という3つのシートが連携できるようにシートを分けて項目を入力したスプレッドシートを作成しました。
今回は仮で家族からの料理リクエストとして

クライアント→家族
プロジェクト→料理名
案件→料理方法(種類)

としてみました。

クライアント→家族
スクリーンショット 2018-08-08 16.01.56.png

プロジェクト→料理名
スクリーンショット 2018-08-08 16.02.02.png

案件→料理方法(種類)
スクリーンショット 2018-08-08 16.07.03.png

全て親→子→孫

という感じで紐づいて入力しています。
ここら辺のスプレッドシート関数は下記が参考になりました。

Googleスプレッドシートで他のセルの内容に応じてプルダウンリストの内容を変更する

##Vueを使えるように準備
index.htmlにCDNでVueを読み込みます。
スクリーンショット 2018-08-08 12.26.29.png

js.htmlにVueを使う記述を書きます。
スクリーンショット 2018-08-08 12.26.35.png

テスト環境で以下の様になっていればひとまずOK。
スクリーンショット 2018-08-08 13.18.25.png

##GASを使ってスプレッドシートの内容をVueのDataで扱う
ユーザーの動作想定は

  1. 「クライアント」のシートを初期で読み込んで配列にしてVueのDataに入れます。
  2. 「クライアント」の内容を選んだタイミングでそのクライアント名を関数に渡して、「プロジェクト」のシートA列に該当するクライアントがあればそのB列から横の値を配列で返す。
  3. 「プロジェクト」の内容を選んだタイミングで2.同様に案件の横の値を配列で返す。

という形で案件まで選んでもらって工数(時間)を入力してもらう。

という動作を想定しています。

スプレッドシート関数に関しては、色々と情報が転がってますので、そちらをご覧ください。

まず、.gsファイルに記述した関数をVueで動かすには、下記を参考にさせてもらいました。

GAS+Vue.jsでサーバレスなWebアプリ

ほぼ上記ページにある方法でGASファイルからVueのmethodに記述を入れて動かす関数までは出来ます。

// クライアント一覧を取得
function getSheetDataCliant(){
  var spreadSheetID = "スプレッドシートID";
  var sheetName = "クライアント";
  var res = SpreadsheetApp.openById(spreadSheetID).getSheetByName(sheetName).getDataRange().getValues();
  res = Array.prototype.concat.apply([], res);
  return res;
}

上記関数をGASに記述します。

google.script.run
 .withSuccessHandler(this.initData)
 .withFailureHandler(function(arg){
  console.log(arg)
  alert("データの取得に失敗しました。");
}).getSheetDataCliant();

上記GASを呼び出すスクリプトをVueのcreatedプロパティに記述します。

<select value="" id="cliant01">
 <option v-for="row in cliantArray">{{ row }}</option>
</select>

上記タグをindex.htmlに記述します。
全体像は以下です。

CODE.gs
スクリーンショット 2018-08-20 13.06.23.png
index.html
スクリーンショット 2018-08-20 13.04.23.png
js.html
スクリーンショット 2018-08-20 13.04.29.png
結果
スクリーンショット 2018-08-20 13.03.01.png

こんな感じで表示されればひとまずOKです。

続いてプルダウンの選ばれた内容から、動的に紐づいたプルダウンの中身の切り替えの実装を行います。

続きはこちらです。

14
18
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?