【GAS】せいさんくん

はんじゅく

何か作ったり直したりなんだりでうだうだしていたものが大体できました。
Vuetifyによって画面に統一感を持たせることができたような気がします。

精算品の登録

入力画面

「精算品を登録したい」を選択

日付の入力

いつの精算品なのか

イベント名の入力

何やったのか書かないとね

参加者を選ぶ

chipsの色がかえらない…

精算担当を選ぶ

誰がそのアイテムたちをもっているのか

ログ読み込み or 手入力

手入力の場合はこんな感じで
イグ実 24
VIT料理 5

読み込んだログ、手入力した内容を整理して一覧化

途中で改行されてしまったログもある程度は読み込める

例えば

魔女のスキルカ
ード 1 個獲得

アイテム名が途中で切れてしまったログとか

魔女のスキルカード 11
1 個獲得

長くなった結果、個数のところで切れてしまったログとか

当たり前だけど手で修正も

vuetify datatableのダイアログ編集を使用した編集
行追加はv-edit-dialogで

高額品やらが売れたら…

精算が済んでいないアイテムを一覧から探して
残り個数や売れた金額をダイアログ編集で入力

入力した売価は参加人数で割って渡さなきゃいけないリストに追加されます。

精算品ちゃんと渡したっけ？

「誰に」「何を」「どれだけ」

渡したらチェックつけてデータ更新

未精算のものって誰が何を何個持ってるの？

参加者とかいつの精算品とか関係なくリスト化

精算って見知ったグループで管理していると思うので、
「参加していないときの精算品だけど欲しい人がいました」
「じゃあその人に売って、Zenyは参加していた人に分配しましょう」
っていうのをやるために誰が何を持っているのか一覧にしたかった。

メンバー編集

有効化チェックを外すと一時的に参加者とかのリストから消す

どんな感じで作ったか

ファイル構成

スプレッドシート1ファイルのみにしました。
理由は下記

  • データはDBの方がずっと作りやすいけどDB管理が面倒だった

  • DB管理にした時、精算のグループとか考える必要があって嫌だった
    →グループごとでDB用意しろやってなっちゃうとツールとして配布できない（配布するかもわからんけど）

そんなわけで↓のような内容にしました。

Apps Scriptの中

処理構成

※まだきれいにできてないからマジックナンバーとか命名には目をつぶってほしい

jsからGASに欲しいデータを要求して

google.script.run
  .withSuccessHandler(setApply)
  .withFailureHandler(Failure)
  .getApply();


GASはスプレッドシートの内容等をJSONにして返却

return JSON.stringify(getJSON(sheet.getRange(1, 1, lastRow, lastCol - 1).getValues()));


jsで受け取ったJSONをvuetifyにくわせる

vuetifyApply = new Vue ({
  el: "#vuetifyApply",
  vuetify: new Vuetify(),
  data: () => ({
    headers: headers,
    items: array,
    selected: [],
    search: '',
    isVisible: false,
  }),

～以下略～


画面ができた

vuetifyはテーブル作成がとにかく楽だった


編集した内容をjsでJSONにしてGASになげる

// jsonを作成しGASを呼び出す
var json = JSON.stringify(tblMap);
console.log(json);
google.script.run
  .withSuccessHandler(reload("apply"))
  .withFailureHandler(Failure)
  .applyed(json);


受け取ったJSONをGASで処理してスプレッドシートを更新

function applyed(json) {
  var array = JSON.parse(json);
  Logger.log(array);

  var adjustSheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('【消込用】精算リスト');

  // 精算シートの最終行
  var asValues = adjustSheet.getRange('A:A').getValues();
  var asLastRow = asValues.filter(String).length;

  // 精算シートの情報取得
  var adjustSheetData = adjustSheet.getRange(2, 1, asLastRow - 1, 5);
  var value = adjustSheetData.getValues();
  var upRange = adjustSheet.getRange(2, 5, asLastRow - 1, 1);
  var upVal = upRange.getValues();
  // 全ての項目が一致する行にチェックを付ける
  for (var i = 0; i < array.length; i++) {
    var row = array[i];
    for (var ii = 0; ii < value.length; ii++) {
      if (row[0] == value[ii][0] &&
          row[1] == value[ii][1] &&
          row[2] == value[ii][2] &&
          Number(row[3]).toLocaleString() == Number(value[ii][3]).toLocaleString()) {
        upVal[ii][0] = 1;
      }
    }
  }
  upRange.setValues(upVal);
  reflectDist();
}

おわり


とてもたのしかったです

いいなと思ったら応援しよう！