GoogleChatでBotからCard形式のメッセージを送ってみるよ

こんにちは！:relaxed:だよ。
お盆休みになったので、いっぱい実装できるよーー。
楽しみだね。


###前回までの振り返り

【問合せBotを作成するまでの道】
1.BOTにDMを送ったら、チャットルームへの転送がされる。　*→完了*
2.チャットルーム内でのユーザーごとのthread名を保持し、同じユーザーからのDMは同じスレッドに書き込まれる。 
3.スレッドに:relaxed:から書き込みをしたら、対象のユーザーにDMが送られる。
4.（余力があれば）よくある質問集みたいな一覧を作ってBotが自動返答してくれる。



内容的には３まで終わったんだけど、ここまできて思った。

この形で連絡くるの、ダサくない？
![chat.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482103/5494e2ec-7139-6854-5191-0828b2625dda.png)


ということで、今回はCard形式のメッセージを作って、上等なおしゃべりができるBotにするよ。



###Card形式について学ぼう
今まで、MessageはText型という、本当に文章がそのまま送られる形だったよ。
Card形式では、画像を埋め込んだり、メッセージ内にButtonを入れることで、指定のURLに飛ばしたり、とよりリッチなMessageを送ることができるよ。
実際使いながら、できることを確認していこう。

>[公式: Card Formatting Messagesのサンプルページ](https://developers.google.com/hangouts/chat/reference/message-formats/cards#card_formatting)
>[公式: Cardの項目について]
(https://developers.google.com/hangouts/chat/reference/rest/v1/cards)


---
**できること1.HeaderとSectionに区切ったメッセージを送る**

Card1つに対し、1つのHeaderをつけられるよ。また必ずSectionを含む必要があるよ。

サンプルだよ。

```
  var message = {
    "cards": {
      "header" : {
        "title"   : "systemBotだよ",
        "subtitle": "相談・質問に答えるよ",
        "imageUrl": "https://~XXXXX",//アイコン画像のURL
        "imageStyle": "IMAGE" // IMAGEだと正方形、AVATERだと丸型でアイコンが表示されるらしい。こいつは丸顔で背景も白だからわからないという・・
      
      }, 
     "sections": [
        {
          "widgets": [
            {
              "textParagraph": {
                "text": "<b>注意</b><br>僕にはできることとできないことがあるよ。<br><font color=\"#ff0000\">いいかい、できないこともあるんだよ。</font><br>わかってくれたならいいんだ！"
              }
            }
          ]
        }
      ]
    }
  };
```



<img width="1026" alt="スクリーンショット 2020-08-09 13.59.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482103/2bbef914-fcb0-0605-5dd4-169da6420b52.png">

ちょっとメッセージがおしゃれになったね。

---
**できること2.テキストの他に、ちょっと複雑なコンテンツをメッセージにつけて送る**

できること１の例では、TextParagraphというテキスト表示だったけれど、
KeyValuesを使うともっと複雑にリンクを入れたり、コンテンツの段組をしたりすることができるよ。

```
  var message = {
    "cards": {
      "header" : {
        "title"   : "systemBotだよ",
        "subtitle": "相談・質問に答えるよ",
        "imageUrl": "https://~XXXXX", // アイコン画像のURL
        "imageStyle": "IMAGE"
      
      }, 
     "sections": [
        {
          "widgets": [
            {
              "keyValue": {
                "topLabel": "お問合せNo",
                "content": "000001",
                "contentMultiline": "false",
                "bottomLabel": "ステータス: 受付",
                "onClick": {
                  "openLink": {
                    "url": "https://~XXXXX"//カード自体をクリックした時に飛ぶURL
                  }
                },
                "icon": "BOOKMARK",
                "button": {
                  "textButton": {
                    "text": "質問内容を見る",
                    "onClick": {
                      "openLink": {
                        "url": "https://~XXXXX" //ボタンをクリックした時に飛ぶURL
                      }
                    }
                  }
                }
              }
            }
          ]
        }
      ]
    }
  };
  
```
<img width="1049" alt="スクリーンショット 2020-08-09 14.36.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482103/25d93e72-c2a5-2dd2-1f0f-e811fb40738f.png">


カード部分をクリックした時と、「質問内容をみる」をクリックしたときで、リンク先が異なるよ。
Iconはすでに用意されているものを使ったよ、カスタムもできるみたい。

---
**できること3.画像をメッセージにつけて送る**
テキスト以外にも画像をつけてメッセージを送れるよ。また、その画像をクリックした時に、
決めたURLに飛ばすこともできるよ。


```
  var message = {
    "cards": {
      "header" : {
        "title"   : "systemBotだよ",
        "subtitle": "相談・質問に答えるよ",
        "imageUrl": "https://~XXXXX" ,//アイコン画像のURL
        "imageStyle": "IMAGE"
      
      }, 
     "sections": [
        {
          "widgets": [
            {
              "image": {
                "imageUrl": "https://~XXXXX",//表示したい画像のURL
                "onClick": {
         　       "openLink": {
                    "url": "https://qiita.com/akky-tys"　// クリックしたときに飛ぶURL
                  }
                }
              }
            }
          ]
        }
      ]
    }
  };
  
```

<img width="1049" alt="スクリーンショット 2020-08-09 14.13.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482103/9bc9496a-dece-e01d-cbeb-98c65d8d7adb.png">


このイラストをクリックすると、指定したURL、今回は私のQiitaのページに飛ぶよ。

---
**できること4　いろんなボタンをつけてメッセージを送る**


```
  var message = {
    "cards": {
      "header" : {
        "title"   : "systemBotだよ",
        "subtitle": "相談・質問に答えるよ",
        "imageUrl": "https://~XXXXX" ,//アイコン画像のURL 
        "imageStyle": "IMAGE"
      
      }, 
     "sections": [
        {
          "widgets": [
             {
              "buttons": [
                {
                  "imageButton": {
                    "iconUrl": "https://~XXXXX" ,//アイコン画像のURL
                    "onClick": {
                      "openLink": {
                        "url": "https://www.google.com/search?hl=ja&source=hp&ei=8YQvX9L-CdT6-QbUqYrIBw&q=relaxed%E3%81%A8%E3%81%AF&oq=relaxed%E3%81%A8%E3%81%AF&gs_lcp=CgZwc3ktYWIQAzIFCAAQzQIyBQgAEM0COgQIABAEOgoIABCxAxCDARAEOgcIABCxAxAEOgYIABAEEAM6BQgAELEDOgoIABCxAxBGEP8BOgQIABAKOgIIADoGCAAQBBAKOggIABCxAxCDAToHCAAQRhD_AVCIwpkBWOLkmQFg7eaZAWgFcAB4AIABtwGIAbQKkgEDOS40mAEAoAEBqgEHZ3dzLXdperABAA&sclient=psy-ab&ved=0ahUKEwiSu6OyrY3rAhVUfd4KHdSUAnkQ4dUDCAk&uact=5"
                      }
                    }
                  }
                },
                {
                  "imageButton": {
                    "icon": "EMAIL",
                    "onClick": {
                      "openLink": {
                        "url": "mailto:me@example.com"
                      }
                    }
                  }
                },
                {
                  "textButton": {
                    "text": "Qiitaのページを見る",
                    "onClick": {
                      "openLink": {
                        "url": "https://qiita.com/akky-tys"
                      }
                    }
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  };
```


<img width="1049" alt="スクリーンショット 2020-08-09 14.58.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482103/d183e8f4-a136-3370-8323-7b4370f6ac32.png">


こんな感じで３種類のボタンをつけることができたよ。
用途に合わせてデザインを変えることができて良い感じだね。




今日はここまで！Card形式を使うことで、Messageのデザインやできることがぐっと増えるね。



##参考にさせてもらったもの
[GoogleChatAPI](https://developers.google.com/hangouts/chat)