【GAS】初心者必見 LINEBot×IFTTT×スプシで『家計簿システム』作った話

## 子どもが寝てから・・・は絶対無理

　絶賛1歳&6歳子育て中。

　**今日撮った写真の整理**　**LINEアルバムへの投稿**　保育園の生活ノートの記入
　散らかしまくったおもちゃの整理整頓　アイロンがけ　年賀状作成・・・

　子供を寝かせてからやろう　と思いつつ　夜はヘトヘト気づけば寝落ち、朝🌞

　朝から「はぁ。。。」は嫌ですが　気合では解決しないので　
　<font color="Red">**今回は寝る前の『家計簿のルーティン』を自動化してみることにしました**</font>

　![やりたいこと.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/8877d0c0-b184-d63c-126a-09abb3ec97bd.png)

　A型なので、毎日スマホで家計簿をつけています。

　<font color="Red">**毎日寝る前の「7ステップ」を　自動化によって『3ステップに縮めてみる』にトライします!**</font>


## IFTTT×スプシ×GASで「自動家計簿」

　できたものはこちら　眠る前　たった3ステップ!　すぐ　おやすみなさい　できます
　その日使った金額を合計し、予算から引いた額を、LINEで返信という仕組みです。
　
　![do.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/2fc051f8-b76a-a5a2-11ca-c03c836c48bf.gif)

　GASは使ったことがありませんでした。
　が、今回の実装のために、泣く泣く勉強しました。
　2日間初心者ながら必死にやったので、その過程を記しておきます。

## IFTTT部分

　IFTTT部分はスマホアプリで作成

https://ifttt.com/

:::note warn
 　①Any new note　(IFTTTアプリ経由で開くメモ帳のようなもの)
 　②Add row to spreadsheet　(スプレッドシートに書き込む)
:::

　を図のように接続　

　Formatted row には「III Note Text」 
　<font color="Red">**「1行目は空白　2行目はNoteText」という意味(理由は後)**</font>
　
![アプレット.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/0035b69f-3e03-e76a-acf2-1dace005a0cf.png)

　設定後　アプリ内の
　
　アカウント名→Widget→noteアイコン→クリック→

　と進み、任意のテキストを打ち込めば、指定したスプレッドシートに自動転記されます。
　
　一度数値を打ち込めば、その後アプリを開いた段階ですぐ数値入力できます。

## スプシ部分

https://docs.google.com/spreadsheets/u/0/

　ここから作成

　スプシに名前をつけたらURLの〇〇〇をコピーしておいてください　あとで使います

　https ://docs.google.com/spreadsheets/d/〇〇〇〇〇〇〇〇〇〇〇/edit#gid=0

　シート内のセルは下記の通り設定

　![すぷし.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/8de44af0-09d2-89e6-1e7f-6f5f84049c81.png)

　😢細かい苦労話😢　とりあえず実装したい方は読み飛ばしてください

　**①セルC1・・・＝SUM(B3:B100)**
　**②セルB2・・・＝B1-C1**
　**③セルB1・・・＝1日の予算をあらかじめ入力**
　**④セルB3・・・0を入力しておく**
　
　IFTTTから打ち込まれ数値を合計し、B1の予算との差額がB2に算出されるようにしたい。
　**なら　B2　のセルに ＝B1-SUM(B3:B100) と打ち込めばいいと思うじゃないですか。**
　私もそうしてました。

　ところがです。IFTTTから数値が送られてくると
　B2　のセルの ＝B1-SUM(B<font color="Red">**3**</font>:B<font color="Red">**100**</font>)　が　＝B1-SUM(B<font color="Red">**4**</font>:B<font color="Red">**101**</font>)
　さらにもう1行送られると　＝B1-SUM(B<font color="Red">**5**</font>:B<font color="Red">**102**</font>)
　と<font color="Red">**SUMの数式も1行ずつ下に自動でずらしてくれます　そこ自動化いらん**</font>
　ちなみに「$」なども試してみましたがダメでした　そこで・・・

　<font color="Red">**B3に「0」を入れ、SUM(B3:B100)と「0のB3セル」も含んだ計算式設定しておく**</font>ことで
　**IFTTTから数値が来ても数式がずれない**！！編み出すのに90min。諦めなかった💪

　さらにLINEからの操作で、B4から下の打ち込んだ数値は毎日クリアされるようにしたので、
　SUMの数式はBではなくCの行に設定しておきました。完璧。

　IFTTTで「1行目空白　2行目NoteText」と設定していたのは、B行から入力させる為です。
　A行に入ると計算できないので、A行は空白・B行に数値を入力　と設定しています。

## LINE部分

　この通りにやればだれでも簡単です!

https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d

　 **2. Node.jsでBot開発** より下は今回は不要ですが
　 **Channel Secretとアクセストークンの確認**の箇所を確認してください

　その後　LINE Developersの画面で

:::note warn
　アクセストークンをコピー　あとで使います
:::

## GAS部分
 <details><summary>GASコードはこちら　<font color="Red">**(クリックで表示)**</font></summary><div><br><br>

```js

//★★LINE Messaging APIのチャネルアクセストークン★★
var LINE_ACCESS_TOKEN = "①LINE Messaging APIのチャネルのアクセストークン記載　わからない人は前の項みて";

//★★スプレッドシートID★★
var ss = SpreadsheetApp.openById("②先ほど取得したスプシのURL内の〇〇〇〇の部分を転記する");

//★★シート名★★
var sh = ss.getSheetByName("③スプシのシート名を転記　シート名ですよ　左下のタブの名前です　スプシ名じゃない");


//LINE Messaging APIからPOST送信を受けたときに起動する
// e はJSON文字列
function doPost(e){
  if (typeof e === "undefined"){
    //動作を終了する
    return;
  } else {
    //JSON文字列をパース(解析)し、変数jsonに格納する
    var json = JSON.parse(e.postData.getDataAsString());

    //変数jsonを関数replyFromSheetに渡し、replyFromSheetを実行する
    replyFromSheet(json)
  }
}
 
//返信用の関数replyFromSheet
// data には変数jsonが代入される
function replyFromSheet(data) {
  //返信先URL
  var replyUrl = "https://api.line.me/v2/bot/message/reply";

  //シートの最終行を取得する
  var lastRow = sh.getLastRow();

  //シートの全受信語句と返信語句を二次元配列で取得する
  var wordList = sh.getRange(1,1,lastRow,2).getValues();

  //受信したメッセージ情報を変数に格納する
  var reply_token　= data.events[0].replyToken; //reply token
  var text = data.events[0].message.text; //ユーザーが送信した語句
 
  //返信語句を格納するための空配列を宣言する
  var replyTextList = [];

  //LINEで受信した語句がシートの受信語句と同じ場合、返信語句をreplyTextにpushする
  for(var i = 1; i < wordList.length; i++) {
    if(wordList[i][0] == text) {
    　replyTextList.push(wordList[i][1]);
    }
  }
//LINEで受信した語句がシートの受信語句と一致しない場合、関数を終了する
  if(replyTextList.length < 1) {
    return;

  //replyTextListのLengthが5より大きい場合、messageLengthを5にする
  //※※一度に最大5つの吹き出ししか返信できないためです※※
  } else if(replyTextList.length > 5) {
    var messageLength = 5;
  } else {
    var messageLength = replyTextList.length;
  }

  //"messages"に渡す配列を格納するための空配列を宣言する
  //[{"type": "text", "text": "返信語句その1"},{"type": "text", "text": "返信語句その2"}....]
  var messageArray = [];

  //replyTextListに格納されている返信語句を最大5つ、messageArrayにpushする
  for(var j = 0; j < messageLength; j++) {
    messageArray.push({"type": "text", "text": replyTextList[j]});
  }

  var headers = {
    "Content-Type": "application/json; charset=UTF-8",
    "Authorization": "Bearer " + LINE_ACCESS_TOKEN,
  };

  var postData = {
    "replyToken": reply_token,
    "messages": messageArray
  };

  var options = {
    "method" : "post",
    "headers" : headers,
    "payload" : JSON.stringify(postData)
  };

  //LINE Messaging APIにデータを送信する
  UrlFetchApp.fetch(replyUrl, options);

  sh.getRange(4,2,30,2).clear();
   //実行されるたびに指定された範囲のセルをクリアする
}

```
</div></details>

　そもそものGASの作り方が分からない方はこちらから

https://tonari-it.com/gas-script-editor/

　コードエリアに上記のGASコードを打ち込んだら

:::note warn
　①LINE Messaging APIのチャネルアクセストークン(わからない方は次の項目)
　②先ほど取得したスプシのURL内の〇〇〇〇の部分を転記
　③スプシのシート名を転記　シート名ですよ　左下のタブの名前です　≠スプシ名
:::
　をコード内に追記。その後

:::note warn
　デプロイ→新しいデプロイ→⚙歯車→ウェブアプリ→メアド・全員・デプロイボタン
　ウェブアプリURLをコピーします→あとで使います
::::

　<font color="Red">**途中認証エラーが出たみなさま　ご安心ください　解決サイト　こちらです**</font>

https://www.kagua.biz/tool/jisaku/gas-authentication-not-pass.html

　実行されるたびに、指定されたシートの値をクリアする。
　この部分、作成に特に苦労しました。。。

```js
  sh.getRange(4,2,30,2).clear();
   //実行されるたびに指定された範囲のセルをクリアする
```

## もう一回LINE部分
　LINE Developersの画面で

:::note warn
　Webhook URLの部分に先ほどコピーしたウェブアプリURLを入力・認証・成功!!
::::

　<font color="Red">**これでLINE上で「精算」と入力するとB2の数値が返ってくるはずです!!**</font>
　その後スプシの指定部分はクリアされていると思います。

　**ちなみにこのこのコードはA行から指定の語句を検索し、B行の値を値を返す
　というものなので、A行も色々変えて遊んでみてね!!**

![do.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/37c9d7fc-55fb-8eb1-eb23-f96dbd99ad83.gif)


　特に参考にしたサイト(感謝)

https://zenn.dev/okinaka/scraps/af5c6e58491f88

## 職場の女性パートさんに使ってもらった

 旦那に使わせたい・・・家族共有のクレジットカードで清算しているので
 **旦那がその日、いくら使ったのか**カードの明細が来るまでわからない。
 **金額だけでも、毎日把握できるとすごく助かる。**
 渡しているお小遣いとは別にカード使われると、家計全体の支出が
 把握できなくて困ってるんです!!。。。(旦那さんごめん)

 他の方からも
 むかし**「LINE家計簿」を使っていて便利だったがサービスが終了**してしまった。
 こんな風に**普段使っているツールで簡単に、収支計算ができると助かる!!**

 と概ね好評!!　累計の収支も自動で出ればいいな～というネクストトライももらいました💪

https://image.itmedia.co.jp/l/im/nl/articles/2109/24/l_kutsu_210924line02.jpg#utm_source=yahoo_v3&utm_medium=feed&utm_campaign=20210924-073&utm_term=it_nlab-sci&utm_content=img


## 実は家族のフォトアルバムを自動化したい

　私のようにバタバタで、毎日寝落ち必至のパパママでも、
　<font color="Red">**簡単に家族の日常をアルバム化できればなぁ・・・と考えており、
　来年頭にはクラウドファンディングにも挑戦しようと思っています。**</font>

　この8月までプログラミングの「プ」の字も知らない人間でしたが、
　夢の実現のため、これからも色々な自動化ツールを勉強していこうと思ってます。
　学びはTwitterでも配信するので、フォローしてくれたとても嬉しいです!!

　<font color="Red">**記事の内容で伝わりにくいところあったらコメント下さい**</font>
　<font color="Red">**わからないなりに回答します。超初心者さんの味方です。**</font>

　長文読んでいただき、本当にありがとうございました(*^^)v

https://twitter.com/okinakamasayos1/status/1458731770883371008