こんにちは！
だよ。
お盆休みになったので、いっぱい実装できるよーー。
楽しみだね。
###前回までの振り返り
【問合せBotを作成するまでの道】
1.BOTにDMを送ったら、チャットルームへの転送がされる。 →完了
2.チャットルーム内でのユーザーごとのthread名を保持し、同じユーザーからのDMは同じスレッドに書き込まれる。
3.スレッドにから書き込みをしたら、対象のユーザーにDMが送られる。
4.（余力があれば）よくある質問集みたいな一覧を作ってBotが自動返答してくれる。
内容的には３まで終わったんだけど、ここまできて思った。
この形で連絡くるの、ダサくない？
ということで、今回はCard形式のメッセージを作って、上等なおしゃべりができるBotにするよ。
###Card形式について学ぼう
今まで、MessageはText型という、本当に文章がそのまま送られる形だったよ。
Card形式では、画像を埋め込んだり、メッセージ内にButtonを入れることで、指定のURLに飛ばしたり、とよりリッチなMessageを送ることができるよ。
実際使いながら、できることを確認していこう。
公式: Card Formatting Messagesのサンプルページ
[公式: 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>わかってくれたならいいんだ！"
}
}
]
}
]
}
};
ちょっとメッセージがおしゃれになったね。
できること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
}
}
}
}
}
}
]
}
]
}
};
カード部分をクリックした時と、「質問内容をみる」をクリックしたときで、リンク先が異なるよ。
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
}
}
}
}
]
}
]
}
};
このイラストをクリックすると、指定した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"
}
}
}
}
]
}
]
}
]
}
};
こんな感じで３種類のボタンをつけることができたよ。
用途に合わせてデザインを変えることができて良い感じだね。
今日はここまで！Card形式を使うことで、Messageのデザインやできることがぐっと増えるね。
##参考にさせてもらったもの
GoogleChatAPI