この記事は株式会社富士通システムズウェブテクノロジーが企画するいのべこ夏休みアドベントカレンダー 2020の8月31日目の記事です。本記事の掲載内容は私自身の見解であり、所属する組織を代表するものではありません。

はじめに

本記事では、Node-REDを使って簡単なMattermostのスラッシュコマンドを作成する方法を紹介したいと思います。
スラッシュコマンドを作るのは初心者ですので、初歩的な部分のみですが、少しでも参考になればと思います。

何を作るか

今回は入力したコメントをアスキーアートにして応答するスラッシュコマンドを作成したいと思います。
アスキーアートはコマンドを入力する度にランダムで変わるようにします。
また、コメントが入力されなかった場合は、吹き出しのないアスキーアートを出力します。

コマンド
/aa-comment [コメント]
想定
me ：/aa-comment お疲れ様でした！
bot：
　|￣￣￣￣￣￣￣￣￣￣
　| 　お疲れ様でした！
　|＿＿＿＿＿＿＿＿＿＿
　　　 ∧ ∧ ||
　　　 ( ﾟдﾟ)||
　　　 /　づΦ

事前準備

下記はすでに実施済みの前提で記載します。

サーバーの構築
Node-REDのインストール
Mattermostのインストール

作成する前にNode-REDを知る

Node-REDは、ブラウザから作成することができ、カプセル化された様々な機能(ノード)を繋ぐことで、ウェブサイトやサーバーベースアプリ等を簡単に実現できるツール。

基本的な使い方は下記サイトにお世話になりました。

Node-RED入門

Node-RED側を作成

構成

各ノードの説明

No.	ノード名	使用ノード	設定値	機能説明
①	Mattermostからの入力を受け取る	http in	メソッド：POST URL：/api/v1/aa_comment	HTTPエンドポイント
②	msgデバッグ	debug	対象：msgオブジェクト全体出力先：デバッグウィンドウ	デバッグウィンドウにmsgオブジェクトの中身を全て表示する
③	投稿を表示	change	値の代入：msg.payload.response_type 対象の値：in_channel	コマンドからの応答をチャンネルに表示させる
④	msg.payload.textデバッグ	debug	対象：msg.payload.text 出力先：デバッグウィンドウ	デバッグウィンドウにmsgオブジェクトの中身を全て表示する
⑤	成功	http response	状態コード：200	レスポンスを送り返す

❶アイコン設定
応答時のBotのアイコン画像を設定する。
コマンドを入力したユーザのアイコンになる。
※チャット内で画像を添付し、そのURLを設定することで固定画像にすることも可能。
- ノード：function

msg.payload.icon_url = `https://[サーバー固有]/api/v4/users/${msg.payload.user_id}/image`;

return msg;

❷コメント有無判定
msg.payload.textにコマンド以降の引数(コメント)が代入されるため、文字数で条件分岐する。
- ノード：switch
❸❹コメント有／無
❷の条件分岐でmsg.payload.text(コメント)の文字数が1以上だった場合と0だった場合の処理。
配列に複数のアスキーアートを記述しておき、その中からランダムでアスキーアートを選択する。文字数1以上の場合、吹き出しに埋め込むようにコメントと連結し、msg.payload.textに代入する。文字数0の場合は選択したアスキーアートをそのままmsg.payload.textに代入する。
- ノード：function

コメント有

var comment;
var aa_box;
var rand_num;

comment = msg.payload.text

aa_box = [
    ["　|￣￣￣￣￣￣￣￣￣￣\n　| 　","\n　|＿＿＿＿＿＿＿＿＿＿\n　　　  ∧ ∧   ||\n　　　 ( ﾟдﾟ)||\n　　　 /　づΦ"],
    ["　　　ﾋﾞｼｯ!!\n　 ∧__∧ 　　 ／￣￣￣￣￣￣￣￣￣￣\n　(  ﾟДﾟ)　＜　","\n　( ⊃   ＼⊃    ＼＿＿＿＿＿＿＿＿＿＿\n　　＼　 )ρ\n　　 く く"]
    ];

rand_num = Math.floor( Math.random () * aa_box.length)
msg.payload.text = aa_box[rand_num][0];
msg.payload.text += comment;
msg.payload.text += aa_box[rand_num][1];

return msg;

コメント無

var aa_box;

aa_box = [
    "　 ∧＿∧\n　(・∀・)  ／＼   < よっ！日本一！\n　ノ つ つ    ●  )\n⊂、　ノ　＼／\n　 し′",
    "　　　　　　　 　ﾍ　へ　　　　\n　　　　　　　　;| / ／　　　　\n　　　　　 　　 .;: \":;.　　　　\n　　∧,∧,..,.... ,,､., : 、\n　;' ﾟД ﾟ、､:、.:.: : ;:' 　\n　'､;: ...: ,:. :.:.､.: '　　 えび天\n　　｀\"∪ ∪''''ﾞ"
    ];

msg.payload.text = aa_box[Math.floor( Math.random () * aa_box.length)];

return msg;

Mattermost側を作成

メインメニューから「統合機能」を選択
「スラッシュコマンド」を選択
「スラッシュコマンドを追加する」を押下
設定値を入力する
- リクエストURL：http://[サーバー固有]/api/v1/aa_comment ※http inノードで設定したもの
- 自動補完：チェック ※未チェックだと候補に表示されない

動作確認

/aa_commendを入力すると候補に表示される

/aa_comment お疲れ様でした！を入力

別のパターン

/aa_commentを入力

上手くいってないところ・やりたいこと

下記項目は時間があるときに改善・改良していこうと思います。

上手くいってないところ
- アスキーアートをブラウザからコピペすると表示がずれる
- 特殊文字のエスケープが上手くいかない
- ブラウザ版とアプリ版で見え方が違う
やりたいこと
- コメントの位置と吹き出しの大きさを揃えたい
- アスキーアートを簡単に登録できるようにしたい

おわりに

今回は、Node-REDを使ってアスキーアートを出力するMattermostのスラッシュコマンドを作成しました。
完成後すぐに多くの方に使ってもらえたので嬉しかったです。
また面白いスラッシュコマンド案ができたら作りたいと思います。
最後まで読んでいただきありがとうございました。