この章ではチャットにデータを送ってみましょう。
猫画像 API の仕組みでAPIとやり取りができるようになったので、 Discord というチャットツールで特定のチャンネルにメッセージを送るAPIがあるので使ってみます。
Discord（ディスコード）は、Windows・macOS・Linux・Android・iOS・Webブラウザで動作する、ビデオ通話・音声通話・VoIPフリーソフトウェアである。アメリカ合衆国で開発されており、2019年5月時点でユーザー数が2億5000万人に達している。
とのことで、当初はゲーム実況やゲーム時のコミュニケーションに使われていますが、当初よりボットやメッセージといった仕組みがプログラムからも作りやすく、最近では、開発に使う方がいたりと、なかなか扱いやすいチャットツールです。
チャットツールというと、LINE ・ Slack ・ Microsoft Teams ・ チャットワークといったツールもありますね。自由にメッセージが送れると、いろいろなことができます。
たとえば、
- 自分用のチャットルームで必要なニュースやSNSでの情報を集めて把握しやすくする。
- 仕事用のチャットルームで、今日1日の自分業務を朝にリマインドしていいスタートを切る。
といったことができます。
DiscordのWebhookドキュメント の Webhook 実行については、このように書かれています。
読み解くと、
POST /webhooks/{webhook.id}/{webhook.token}- POST メソッドでリクエストしてほしい
/webhooks/{webhook.id}/{webhook.token}各チャンネルで特有のURLがある（後述）
- 送るデータはJSONで content というオブジェクトの中に文字を入れればメッセージとして送れる
- 例えば、こんな感じ。
{"content":"やっほー！"}
- 例えば、こんな感じ。
といった API のルールが書かれています。
私が持っている Discord サーバーの一つにチャンネルを一つ作りました。
あらかじめ、API の送り先を発行してあります。各ワークショップで振り分けていますので、いま入っているワークショップの方を使いましょう。
田中ワークショップルームの人
＜当日だけ開かれたDiscordのURLを記述していました＞
横井ワークショップルームの人
＜当日だけ開かれたDiscordのURLを記述していました＞
こちらです↑
今回はこちらのURLに、POSTリクエストで送るデータはJSONで content というオブジェクトの中に文字を入れてメッセージを送ります。
一旦、Katacodaをリロードして再起動しましょう。
https://www.katacoda.com/kazuhitoyokoi/scenarios/node-red
もしも閉じてしまった方はこちらから。再度、起動しましょう。
このように教材がはじまるので START SENARIO をクリックします。
起動して、しばらく待ちます。
おおよそ、40 秒 ～ 1 分待っていると起動するのでお待ちください。
このように inject ノードで、メッセージの中身のデータを作って、http request ノードで前述した Discord の API URL に送るように設定して、debug ノードで送られた結果を受信する仕組みです。
それでははじめましょう！
はじめに、パレットから inject ノードをワークスペースにドラッグアンドドロップしましょう。
次に、パレットから http request ノードをワークスペースにドラッグアンドドロップしましょう。
最後に、パレットから debug ノードをワークスペースにドラッグアンドドロップしましょう。
各ノードを inject ノード → http request ノード → debug ノード の順につなぎます。これで、フローは完成です。
inject ノードをダブルクリックして詳細を設定します。
デフォルトでは msg.payload が日時（タイムスタンプ）になっています。
送るデータのタイプを、今回の送るデータタイプ JSON と合わせて JSON に設定しましょう。
このように送るデータを {"content":"やっほー！～～～だよ！"} というJSONデータで設定します。～～～だよ！ の ～～～ の部分には、皆さんのお名前に書き換えてみてください。
設定出来たら、完了ボタンをクリックして設定を完了します。
送るデータは実際にはこのようなイメージです。
JSON データは msg の中の payload の中にある content というオブジェクトの中に、今回送りたい文字を入れています。
http request ノードをダブルクリックして詳細を設定します。
詳細設定はこのようになっています。
メソッドの項目を POST に変更して、今回の Discord API の仕様に合わせます。
URL の項目に今回のチャンネルへメッセージが送れる API URL の
＜当日だけ開かれたDiscordのURLを記述していました＞
を設定します。
設定出来たら、完了ボタンをクリックして設定を完了します。
デプロイをクリックして Node-RED に設定を反映させます。
inject ノードのボタンをクリックして、データを送ってみましょう！
こちらの Discord チャンネルに、このようにデータが送られるはずです！
debug ノードは、データがちゃんと送られるときは "" という空文字がもどってきます。
うまくデータが送られず debug ノードに上記のようにデータがきた場合は、APIのURLがコピーペーストがうまくいかず欠けてしまったときに、起きやすいエラーです。
こちらは送る JSON データがうまく設定できてないときにエラーがおきます。例えば {"content":"やっほー！～～～だよ！} のデータは だよ！ のあとのダブルクォーテーションがなくなっていることで、送るメッセージ部分が文字列にならずエラーが起きています。
このあたりは、JSON データの書き方を読んでみると理解が深まります。
- 参考文献
inject ノードで送る JSON データを変更してみましょう。
{"content":"画像を送るよ! https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Vombatus_ursinus_-Maria_Island_National_Park.jpg/1280px-Vombatus_ursinus_-Maria_Island_National_Park.jpg"}こちらのデータを送ってみると、
このように、画像URLがあっていれば Discord で画像を見ることができます。今回の画像は、ウォンバット - Wikipedia から引用。
好きな画像を送ってみましょう！
inject ノードで送る JSON データを変更してみましょう。
{"content":"ホッとするー！！！！:relaxed::relaxed::relaxed::relaxed::relaxed:"}こちらのデータを送ってみると、
このように :relaxed: という部分が絵文字となって投稿できます。
Qiita/Github/Slack/Discord 絵文字一覧 - Qiita
こちらを参考に絵文字でメッセージを装飾してみましょう～。
Discordの今回設定した API URL にデータを送ってメッセージをチャンネルに表示することができました。