「やだー！！！！！！」だけじゃわからないので、今のきもち押してみて！！

## あなたの気持ちがわからない…
こんにちは、3歳息子の育児に奮闘中のワーママです。
イヤイヤ期を経て、自我が強く強く育まれている息子。
たくさんおしゃべりするようになりましたが、まだまだ自分の気持ちは説明できず 
**「やだーーーーーー！！！しないーーーーーー！！！」**　
が多く、お出掛け先だと対応に手を焼いてしまいます…😭

すこーしだけ息子の気をそらしつつ、今どんな気持ちになっているのか、それがなんでなのかお話しできるきっかけを作れないかな…？
と「きみのきもち」LINE Botを作ってみました。
(着想はとある絵本からいただきました！)

<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="ja" dir="ltr">息子の「やだーーー！！！！」<br>気持ちを掘り下げてお話しできるきっかけにならないかな～？と作ってみた。<br>「ガストンのきぶんをととのえるえほん」をヒントに…！<br>ちょこっとだけ息子の気を逸らせたので、成功…かな？<a href="https://twitter.com/hashtag/%E3%81%93%E3%81%9D%E3%81%B7%E3%82%8D?src=hash&amp;ref_src=twsrc%5Etfw">#こそぷろ</a> <a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://t.co/wtetHb9Ruv">pic.twitter.com/wtetHb9Ruv</a></p>&mdash; 紺 (@navy_blue919) <a href="https://twitter.com/navy_blue919/status/1735308893847425390?ref_src=twsrc%5Etfw">December 14, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 今の気持ちを教えて？LINE Bot「きみのきもち」
### 使用ツール
- LINE Deveropers
- リッチメニューエディタ
- Make(旧integromat)
- Googleスプレッドシート

### リッチメニューの設定
10個の領域を設定していきます。
<img width="60%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3459210/ad9b1db1-972a-6f29-55a1-2d8a02bcf41a.png">

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3459210/a8a66036-4da9-1777-7c40-656ab7f239ec.png)


全アクション「メッセージ」で下記のように登録しました。
① おはなし聞いてくれる？
② ⸜(＊ˊᗜˋ＊)⸝ﾜｰｲ
③ (＊•ᴗ•＊)
④ (´・ω・｀)
⑤ (×_×;)
⑥ (っω<。)
⑦ ๐·°(৹˃ᗝ˂৹)°·๐
⑧ ((o(｡>皿<｡)o))
⑨ (`‐ω‐´)
⑩ ⁽⁽(੭ꐦ •̀Д•́ )੭*⁾⁾

リッチメニューの設定は以上です！
(並んでるとちょっと和む…笑)
API呼び出ししておしまい！

詳しい手順は[こちら](https://qiita.com/okinakamasayoshi/items/c342506bc216417fd30f)の記事で↓↓↓

https://qiita.com/okinakamasayoshi/items/c342506bc216417fd30f
### LINE Botの仕組みづくり
リッチメニューで送られるメッセージと連動する仕組みをノーコードツールのMakeを使って作ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3459210/43133aa0-9946-2c92-6f04-e7353b6e2fa9.png)
2つのルートに分岐させます。
#### お顔ボタン押したときのルート
「今の気持ちはどれ？」と聞いてお顔ボタンを押してもらうとランダムに画像が返ってくるように設定します。
<img width="90%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3459210/bb7e65d3-9b7e-127f-5fd8-6fde67d1cbdb.png">
リッチメニューの②～⑩に登録した顔文字に使用されている最初の記号をフィルターに設定します。

以降のモジュールの詳細設定は[こちら](https://qiita.com/navy-blue919/items/8280a7f6d4df9419787e)の記事をご覧ください！

https://qiita.com/navy-blue919/items/8280a7f6d4df9419787e

#### Googleドライブの画像をLINEで表示できるようにする方法
お顔ボタンを押すと画像がランダムで返ってくるようにGoogleスプレッドシートには、リッチメニュー②～⑩の顔文字とそれに対応するように画像のURLを入力しておきます。
<img width="80%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3459210/6a6389c0-e63b-b1bf-e7ed-289f76fb2025.png
">

ファイルの共有設定を、リンクを知っている全員が閲覧できるように変更します。
<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3459210/5732b82d-c94c-49dc-ce99-8413cfdcf514.png">

そして **リンクのURL！**
ここがめちゃくちゃポイントです。
Googleドライブに保存した画像のURLをそのまま載っけてもLINE上には表示されないのです…。

<details><summary>なんでそのままじゃダメなの…？</summary>

LINEモジュール内の設定でメッセージタイプとして「Image」を選択するのですが、送られるURLは画像形式にしてくださいと注意書きがあります。
<img width="80%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3459210/0a0d8fb4-98ea-bb02-ae79-297af20b5083.png">
Googleドライブに保存してある画像のURLは
**https\://drive.google.com/file/d/{固別のID}/view?usp=drive_link**
という形になっているので画像ファイルだと認識されず表示されない…、というカラクリのようです。
</details>

:::note warn
**URLの加工方法**

Googleドライブに保存してある画像のURLは
**https\://drive.google.com/file/d/{固別のID}/view?usp=drive_link**
という形になっています。これを…
**https\://drive.google.com/uc?id={個別のID}&{拡張子}**
に加工してあげると表示されるようになります！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3459210/cb01fd81-d1aa-0e95-a543-7ee5268510f5.png)
:::

詳しくは下記サイトをご参照ください！

https://auto-worker.com/blog/?p=879

真夜中に困っていた私にこれを教えてくれた恩人さま…ありがとうございます😭

#### ユニコーンちゃん押したときのルート
ユニコーンちゃんを押すとChatGPTがめっちゃ寄り添ってお話しを聞いてくれるモードになります。

フィルター設定はお顔ルート以外全てに反応するように`Dose not start with`にして顔文字の頭文字の記号を登録しています。

<img width="90%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3459210/12f51bef-0d7b-7f27-7318-0b692d70fbe5.png">


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3459210/f5a0edf5-ea9c-139b-1fdf-ee8b49626841.png)
各モジュールの詳細設定は下記記事を参考に作成しました！

https://qiita.com/okinakamasayoshi/items/07a6b2c41fb6d50dbd5e

:::note info
ChatGPTのプロンプト

あなたは、パパママから絶大な支持を得ている共感が得意な
プロのスーパー保育士です。
チャットボットのように振る舞ってください。

私の発言に対して、1回に1つずつ返答します。
説明文は書かないでください。
一度に複数の会話を書かないでください。
あなたの一人称は「ぼく」です。

私は保育園に通う年齢の子供です。
私が自分の感情について話しかけてきますので、応答してください。
私は、自分の感情の処理方法について未熟でどのように振る舞うべきかわかっていません。
私の感情や今の状態に共感してください。
怒りや悲しみを抱いている場合には、どのようにすることで気持ちを落ち着けることができるか、子供にもわかりやすい易しい言葉で教えてあげてください。
あなたは「私の味方」の役割に徹し、常に私の目線に沿って語ります。

会話は落ち着いた優しい口調で、全てひらがなで記してください。
私の会話文の長さの3倍の長さの文字数以下で、話すものとします。
:::

プロンプトは[promptia](https://prompt.quel.jp/prompt.php?pid=10127)さんからお借りして作成しました！
ChatGPてぃ先生を目指してプロンプトをアレンジさせていただきました^^

### 息子の反応
出先で大きい声を出して欲しくないな…というときに、スマホを差し出し「今どんな気持ちなのかお顔押してみて？」というと、キョトンとして怒っているボタンを押してくれました。
**連打で。**
画像が出てきても無反応。
感情をお天気になぞらえて気持ちを落ち着けるように話をしようと思っていたのですが、**ボタンを押すことで無心になっているようでした…笑**
まぁ、気を逸らせた…と言うことで、成功…かな(笑)

### 本当はこういうことができれば良かったかな…？
怒っている、泣いている時の顔って息子は自分ではあまり見たことがないはず…？
**ランダムに返ってくる画像は、息子自身の怒っている・泣いている・笑っている姿でも良い**かもしれないな～と思いました。
その方が、ボタン連打じゃなく画像が出るの待ってくれるかな…笑

息子に好きなように触らせてあげたいけど、**ツールの無料枠がすぐやられそうです(笑)**
それを気にせず連打して楽しい何かも開発してあげたいです！笑

ここまでお付き合いいただきありがとうございます^^