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

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

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

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

『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だと以下のような感じになります。
(※ここではセキュリティとかは一切考慮してません。あしからず)

$json_string = file_get_contents('php://input');
$json_obj = json_decode($json_string,true);

$messageId = $json_obj["item"]["message"]["id"];
$message = str_replace("/th ","",$json_obj["item"]["message"]["message"]);
$author = $json_obj["item"]["message"]["from"]["name"];
$posted = $json_obj["item"]["message"]["date"];

$messageArray = explode(' ', $message);
if(preg_match("/^[a-zA-Z0-9¥-]+$/",$messageArray[0])) {
    $messageId = $messageArray[0];
    $message = htmlentities($messageArray[1]);
}

//保存形式
$thread = $author.":".$message."\\n";

file_put_contents("./thread/files/".$messageId,$thread,FILE_APPEND);

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

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

{
  "message": "a",
  "message_format": "html",
  "card": {
    "style": "application",
    "url": "https://サーバ側URL?mid=",
    "format": "medium",
    "id": "",
    "title": "",
    "description": {
      "format": "html",
      "value": "\n"
    },
    "icon": {
      "url": "http://bit.ly/1S9Z5dF"
    },
    "attributes": [
      {
        "label": "返信コマンド",
        "value": {
          "label": "/th -"
        }
      },
      {
        "label": "-",
        "value": {
          "label": "-"
        }
      }
    ],
    "activity": {
      "html": " の新しいメッセージ"
    }
  }
}

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

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

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

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

/th 36782734-2392593474-214378454 返信メッセージ

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

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

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

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

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

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

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

まとめ

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

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

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

ではまた。

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。

あなたにおすすめ

  • AI化される職業 先日、運転免許の更新手続きのため、神田の運転免許センターに行ってきました。 5年(もしくは3年)ごとにやってくるこの更新手続きですが、まさに判で押したような作業で改めてビックリ。 日々淡々と、日々粛々とこなす …
  • CTO、会社やめるってよ 最近の流行をリサーチするのに、大学生になったばかりの娘から情報収集するようになった、子だくさんCTOの下駄(弓削田)です。 マーケティング用語として一般的になった、いわゆる「F1層」世代の女子高生から20代前半の女 …
  • 新人マネージャの苦悩と努力とその結果 一言に『マネジメント』とは言っても、色々な種類や手法がありますよね? それこそ一般的なマネジメント論は書籍やWebサイト上にいくらでも転がっています。 しかし、マネジメント経験が浅いと、どうしても情報過多で頭でっか …
  • 仕事はスポーツだ 私はスポーツ観戦が好きです。 野球やサッカーといった国内メジャースポーツはもちろんのこと、ラグビー、アメフト、テニス、バスケ、モータースポーツ、サイクルレース、ウインタースポーツなどなど、とりあえずスポーツと認知され …