『HipChat』のチャットをスレッド化するまで

『HipChat』のチャットをスレッド化するまで

どうも、さむらいです。
日本の夏、どこいった。

『HipChat』のチャットでスレッド(のような見た目にするアドオン)を作る

最近、社内のコミュニケーションツールが様々な理由から『HipChat』に移行されました。
<bitWave関連記事『情報漏えいしないための決定打!”HipChat”』>

しかし、これまで利用していた「Slack」ではやれていた “議題のスレッド化” ができず、話題がスパゲティ状態になってしまっていたのです。

 この課題は社内共通の課題!  

そこで何とか解消できないものかと思い、アドオンを作ってみることにしました。
まだ作り込みが甘い状態にはありますが、もう少し工夫すれば使いやすくなるところまでは到達しています。

ということで、日本語サイトでは『HipChat』のアドオン追加の解説が少なかったので、bitWaveにてご紹介いたします。

ステップ1「Roomを選ぶ」

まずはアドオンを追加するRoomを選びます。

最初はテストなので、適当なRoomを作ってみます。
(※あまりにも初歩の話なので、ここではRoomの作り方は掲載しません)

作ったRoomに入室し、右サイドバーにある「+Add Integrations」メニューをクリック。

ステップ2「アドオンを追加する」


インストール可能なアドオン一覧が表示されます。
しかし、今回は自分でアドオンを作ることになるので、上記画像の中の「Build your own integration」をクリックしましょう。


アドオン(以下、Integrationと呼びます)の名前を入力します。
ここでは “ThreadSlagger” とかにしておきます。

ステップ3「アドオンを実行するためのコマンドを追加する」


デフォルト状態では、画像下半分くらいにある「Add a command」にチェックが入っていません。
なので、これにチェックを付けます。

すると追加したいコマンド入力欄 “Enter your Slash command” と、コマンド入力時にどのURLにリクエストを送るのかを入力する欄 “We will POST to this URL” が表示されます。
ここではコマンドを「/th」、URLはサーバ側のプログラムの設置してあるURLを指定してあげましょう。

ステップ4「サーバプログラムを準備する」

『HipChat』のIntegrationは、コマンドが投入されたらその指示内容を指定URLに送信し、そのレスポンスを『HipChat』に返して処理を行う形式となります。
(※他クラウドツールも大抵同様の仕様でしょうが……)

なお、サーバプログラムは以下のようにしました。

  1. 受け取ったメッセージをそのメッセージIDファイルがあればそのファイルに格納する。
    もし、なければ作って格納する。
  2. 直近3件分のメッセージをHipChatに返す。

『HipChat』からメッセージを受け取るロジックは、PHPだと以下のような感じになります。
(※ここではセキュリティとかは一切考慮してません。あしからず)

ステップ5「HipChatにデータを返す」

今回はスレッド表示っぽくまとめるために、『HipChat』上ではカード形式レイアウトでスレッド表示するようにしてみます。
なお、返すJsonデータは以下のような感じです。

「description」のvalue値に、サーバから戻すメッセージ一覧を含めておけば、以下のようなカードが『HipChat』上にでき上がります。

ステップ6「メッセージに返信する」

『HipChat』では各メッセージ毎にランダムなIDが割り振られています。

このメッセージに対する返信という扱いにするには、上記画像下部にある「messageID:」から後ろのハイフンまでをコピーしてチャット欄に入力し、実際に返したい返信メッセージを入れればOKです。

すると、例でいうところの「Q-2371」というメッセージスレッドに対して返信が可能になります。
返信すると返信メッセージも含めた形で再度カードが作成されます。

ステップ7「過去のメッセージを全部見るには」

メッセージファイルはアドオン向けに作ったプログラムが設置されているサーバ上に保存してあります。
つまり、その中身を確認できるプログラム(今回の場合はPHP)を作ればよいだけです。

カードにそのURLをあらかじめセットしておけば、カードタイトルをクリックするだけでスレッドの全容を確認することができます。

なお、URLは以下のような感じになりますね。
https://サーバプログラムのURL/index.php?messageID=2462188432-3226371-2314

クエリにメッセージIDを渡しておけば、そのファイルを出力するプログラムを用意しておけばよいだけですね。

そして出力した結果は以下のような感じになります。
(※デザインセンスについては不問としてください。1件しかないので分かりづらいか……)

まとめ

作ってみればなんてことないカンタンなIntegrationでした。

ただし、マニュアルは英語版しか用意されていなかったので、理解するのに結構大変でした。
やはり英語の勉強は欠かせませんね!

時間があれば次はサイドバーにこのスレッドを表示して、もっとアクセスしやすくなるようにカスタマイズしていこうと思います。

ではまた。

コメント