Slackinを使ってSlackのオンライン人数をウェブページ上に表示する

Published at 2015.04.21

Slackinというアプリケーションを使用すると、Slackの任意のチームのオンライン人数の表示や招待ページへの誘導をすることが可能になります。今回はHerokuを併用してSlackinを利用してみます。

前提

Slackに登録している（当たり前ですね）
Herokuに登録している

1. Slackinのページにアクセス

SlackinのGithub上のページにDeploy to herokuのボタンがあるのでそれをクリック。Herokuに移動し、アプリケーションをデプロイする画面に移動します。

2. Heroku上でSlackinの設定をする

App Nameはアプリケーション名です。特に設定しなくても問題はありません。 Regionは好みの方を。私はUnited Statesにしました。 Config VariablesのSLACK_SUBDOMAINはチーム名を入力します。 SLACK_API_TOKENはSlack Web API | SlackのAuthenticationセクションあたりにTokenが記述されていますので、これをコピー&ペースト。 SLACK_CHANNELについては、招待ページを表示した時に、どのチャンネルに招待するかを設定できます。空白にすると全てのチャンネルに招待することが可能です。設定後, Deploy for Freeボタンを押すとDeployが始まります。デプロイし終わったらViewボタンを押してみましょう。App Nameを割り当てていなかった場合URLは自動で割り振られます。

3. ウェブページに表示してみる

URLは先程の通り http://アプリケーション名.herokuapp.com/ になります。トップページは招待ページになります。ここからメールアドレスを入力して招待リクエストを送ることが可能なようです。/slackin.js にはバッジを表示するためのコードがあります。これをscript要素で以下のように読み込むと、バッジを表示することが可能です。

<script
  src="http://アプリケーション名.herokuapp.com/slackin.js"
  async
  defer
></script>

Slackのボタンとともに3/31と書かれた吹き出しが表示されている

こちらのバッジはリアルタイムにオンライン人数を表示してくれます。 /badge.svg はリアルタイム表示してくれませんが、svgボタンなので拡大縮小が可能です。

<a href="http://アプリケーション名.herokuapp.com/"
  ><img
    src="http://アプリケーション名.herokuapp.com/badge.svg"
    alt=""
    width="87"
    height="20"
/></a>

Slackという文字の隣に3/31とオンライン人数が表示されている

これを使えばよりSlackへの招待を円滑に行うことができるかもしれませんね。