Slackチームへのユーザー登録ページを高速作成

Slackチームへのユーザー登録ページを高速作成

無料のSlackとSlackinで、グループコミュニティを簡単に始めよう!

2017年6月27日

オープンソース製品のグループコミュニティの場としてSlackを応用するのがオススメだ。その際に手間となるのが、ユーザー登録ページの作成。これを高速かつ無料で行う方法を紹介する。

デジタルアドバンテージ 一色 政彦
  • このエントリーをはてなブックマークに追加

Slackコミュニティの概要

 何らかのプロダクト開発グループや社内チームなどで、Slackを活用している人は多いだろう。実際に、筆者が所属する会社では2014年7月から使用を開始してもう3年間も使い続けており、現在では社内における情報共有のメインツールとなっている。便利すぎて、チームでの仕事には欠かせない存在である。

そもそもSlackとは?

 読者の中には、「Slackを全く知らない」「使ったことがない」という人もいるかもしれない。念のため、ざっくりと紹介しておくと、その特徴として以下が挙げられる。

  • 特にエンジニア間で人気がある(もはや世界でデファクトスタンダードといっても過言ではない状況の)モダンなチーム・コラボレーション・ツール(「チャットツールの進化版」をイメージするとよい)
  • Twitterライクな操作感で情報をやりとりしたり、ファイルを簡単に共有したりできる
  • Web上のオンラインツールであり、スマホやWindows/Macデスクトップ向けにネイティブアプリも提供されている
  • 連携アプリが充実しており、目的に応じて柔軟にカスタマイズできる(Slack APIを用いて独自の開発も可能)
  • 二段階認証などのセキュリティ機能も完備している
  • 何より、フリー(無償)プランが用意されており、いくつかの制限はあるものの、フリープランでも十分に仕事で常用できる

 この他、日本語のヘルプコンテンツも充実しているので、「初めて知った」「これから使ってみたい」という人は、まずはSlackヘルプセンターを読むのが一番手っ取り早い。

 また、「取りあえず実際に触ってみたい」という人は、Build Insiderでも独自のSlackコミュニティ(厳密にはチームと、その中に複数のチャンネル)を作成してみたので、

からユーザー登録して触ってみてほしい。ちなみに、このSlackコミュニティのコンセプトは、「ニューラルネットワーク・AI開発者、データサイエンティストのための情報交換の場」としている。

Slackコミュニティの増加

 そんなSlackだが、ここ数年の傾向として、特にオープンソースで開発しているプロダクトのコミュニティ機能(以下、Slackコミュニティ)として活用されるケースが増えてきている。その基本的な活用方法とは、各オープンソース製品の(コアなファンを中心とした)ユーザーがSlackコミュニティに参加登録して、製品のアナウンス情報をいち早く受け取ったり、開発チームと気軽にやりとりしたりするというものである。開発チームはユーザーの声を効率的に集められるし、ユーザーは開発チームが近い存在となり、よりそのオープンソース製品が好きになる、という好循環が生まれやすいという利点がある。例えば筆者はUmbracoというオープンソース製品のコミュニティ(umbracians.slack.com)にユーザー登録しており、そこからも最新情報を収集している(図1)。

図1 Slackを利用したオープンソース製品のコミュニティの例

Slackinとは?

 しかしSlackコミュニティには、ユーザー視点で見ると弱点もある。具体的には、そもそもSlack自体があくまで「開発チーム内のコラボレーション」を前提にして作られたツールであり、「製品開発チームの外部にいるわれわれ一般ユーザーが、その製品チームが使っているSlackチームに気軽に登録・参加できるような機能は提供されていない」という点だ。この問題を低減するために活用されているのが、Slackinという「ユーザー登録をスムーズにするためのオープンソース製品」(Webアプリ)である。

 Slackinのデモを試してもらえば一目りょう然だが、図1に例を示しているように、登録したいメールアドレスやユーザーアカウント情報を入力して、あとはボタンをクリックしていくだけで、ユーザー登録が完了する。

メールアドレスを入力してボタンをクリック。指定したメールアドレス宛にメールが届くので、そのメール内の確認リンクをクリックする

メールアドレスを入力してボタンをクリック。指定したメールアドレス宛にメールが届くので、そのメール内の確認リンクをクリックする

チームに参加するための[Join Team]ボタンをクリック

チームに参加するための[Join Team]ボタンをクリック

ユーザーアカウント情報を入力してボタンをクリック

ユーザーアカウント情報を入力してボタンをクリック

パスワードを入力してボタンをクリック

パスワードを入力してボタンをクリック

以上で登録完了。[Explore Slack]ボタンをクリックして利用開始

以上で登録完了。[Explore Slack]ボタンをクリックして利用開始

左側からチャンネルを選択して、右側に流れるメッセージを閲覧したり書き込んだりする

左側からチャンネルを選択して、右側に流れるメッセージを閲覧したり書き込んだりする

図2 Slackコミュニティへのユーザー登録を簡便にするSlackinの利用例

 何らかのオープンソース製品を開発している人は、ぜひSlackコミュニティの作成を検討してみてほしい。以下、本稿では、Slackinを使って「Slackinコミュニティへのユーザー登録」を簡便化する手順を紹介する。

 なお当然ながら、事前にSlackでそのためのチームを作成しておく必要がある。これについては、本稿の主題から外れる内容なので説明を割愛する。「Slack公式ヘルプセンター: Slack のチームを作成する」を参考に作成してほしい。本稿では、図3に示すように「buildinsider」.slack.comというチームURLで作成した。

図3 本稿で作成したSlackチーム
図3 本稿で作成したSlackチーム

SlackinによるSlackコミュニティの作成

 Slackinは、下記のリンク先(GitHub上)で、オープンソースで公開されている。

 英語ではあるが、リンク先を読めば作成できる。基本的には上記のリンク先の説明を読んでほしいが、以下では現時点での手順を示す(今後、Slackinのバージョンアップにより差異が出てくる可能性もあるので、その点をあらかじめご了承いただきたい)。

利用するクラウドを決める

 SlackinはサーバーサイドのWebアプリなのでホストするクラウドプラットフォームが必要になる。選択肢は、以下の5つ。

 基本的にはNowを選択すればよい。Nowも無償で使用可能だ。本稿でもこれを使うことにする。

事前準備(1): Nowデスクトップ環境のダウンロードとログイン

 Nowを使うには、まずElectron製(つまりWindowsやmacOSなどクロスプラットフォーム対応)のデスクトップアプリとコマンドラインツール(nowコマンド)をダウンロード&インストールして、Nowにログインする必要がある。これには図4の手順を実行すればよい(本稿ではWindows環境を使うが、macOS環境でもNowの使い方は全く同じである)。

右上の[DOWNLOAD]リンクをクリック

右上の[DOWNLOAD]リンクをクリック

★

ページ中央下部の[DOWNLOAD NOW]ボタンをクリック

ダウンロードしたインストーラーを実行する

ダウンロードしたインストーラーを実行する

右の[>]ボタンをクリックしていく

右の[>]ボタンをクリックしていく

途中で「コマンドラインツールをインストールするか」を聞かれるので、[INSTALL NOW]ボタンをクリックしてインストールする

途中で「コマンドラインツールをインストールするか」を聞かれるので、[INSTALL NOW]ボタンをクリックしてインストールする

インストールが完了するとnowコマンドが使えるようになったことが表示される。右の[>]ボタンをクリックしていく

インストールが完了するとnowコマンドが使えるようになったことが表示される。右の[>]ボタンをクリックしていく

メールアドレスを入力して[Enter]キーを押す

メールアドレスを入力してEnterキーを押す

入力したメールアドレス宛にメールが送られるので、そのメール内にある確認リンクをクリック

入力したメールアドレス宛にメールが送られるので、そのメール内にある確認リンクをクリック

ログインが完了し画面が切り替わる。最後に[GET STARTED]ボタンをクリックすれば完了だ

ログインが完了し画面が切り替わる。最後に[GET STARTED]ボタンをクリックすれば完了だ

図4 Nowデスクトップアプリのダウンロードとログイン

 以上で、Nowデスクトップ環境の構築は完了だ。

 実際にnowコマンドが使えるか試してみよう。WindowsであればPowerShell(もしくはコマンドプロンプト)、macOSであればターミナルを起動してnow helpというコマンドを実行してみて、コマンドヘルプが正常に出力できるようであれば、nowコマンドは使える状態である。

事前準備(2): SlackのレガシーAPIトークンの取得

 nowコマンドを実行してSlackinの環境を構築する前に、SlackのレガシーAPIトークンを取得する必要がある。取得方法はSlackの公式ヘルプページ(日本語)を参考にしてほしい。

 執筆時点における具体的な手順は、

を開き、[Legacy token generator]の表を参照し、対象となるSlackチームの行の右端にある[Create Token]ボタンをクリックすれば、Token(レガシーAPIトークン)が得られる(ちなみに「レガシー」という名称のとおり、取得しているのは古い形式のトークンで、最新のSlack apps形式のトークンにはSlackin自体がまだ対応していないので、間違えないように注意してほしい)。

図5 SlackのレガシーAPIトークンの取得

[Create Token]ボタンをクリックし、生成されたキーを取得する

図5 SlackのレガシーAPIトークンの取得

事前準備(3): Google reCAPTCHAのSite keyとSecret keyの取得

 続いて、reCAPTCHAのSite keyとSecret keyを取得する。これには、

  1. reCAPTCHA: Easy on Humans, Hard on Bots」(英語)を開いて
  2. 任意の[Label](例:「BuildInsiderSlackin」)を入力し
  3. [Invisible reCAPTCHA](より高度なセキュリティにしたい場合は[reCAPTCHA V2])にチェックを入れて
  4. [Domains]欄にはSlackinによるユーザー登録ページのURLとする予定の「buildinsider.now.sh」(太字部分は任意の値)を入力して
  5. 英語で書かれたサービス利用規約が問題なければ[Accept the reCAPTCHA Terms of Service.]にチェックを入れて
  6. 最後に[Register]ボタンをクリック

する。これにより、図6に示すようなページが表示され、Site keyとSecret keyを取得できる。

[Invisible reCAPTCHA]にチェックを入れて[Register]ボタンをクリック

[Invisible reCAPTCHA]にチェックを入れて[Register]ボタンをクリック

[Site key]と[Secret key]が表示されるので取得する

[Site key]と[Secret key]が表示されるので取得する

図6 Google reCAPTCHAのSite keyとSecret keyの取得

nowコマンドによるSlackin環境のお手軽構築

 それでは、本題のSlackinサーバー環境を構築していこう。といっても、次のようにコマンドを1つ呼び出すだけである。

ターミナル
now -e SLACK_INTERVAL=15000 rauchg/slackin
リスト1 Slackinサーバー環境を構築するコマンド

 -eオプションは環境変数を指定するもので、リスト1ではSLACK_INTERVAL環境変数に15000ミリ秒を指定するという意味である(執筆時点のコードでは2倍されて30秒に1回の割合でSlack APIにアクセスすることになる。デフォルトは5000ミリ秒だが、執筆時点でこの値だと「HTTP 429: Too Many Requests」というエラーが発生したため変更した)。

 コマンド実行後の環境構築の途中で、上記の準備(2)(3)で取得した「SlackのレガシーAPIトークン(SLACK_API_TOKEN環境変数)」と「Google reCAPTCHAのSecret key(GOOGLE_CAPTCHA_SECRET環境変数)とSite key(GOOGLE_CAPTCHA_SITEKEY環境変数)」の入力が要求される(reCAPTCHAでの表示はSite key→Secret keyの順だったが、ここではSecret key→Site keyの順で間違えやすくなっているので注意すること)。またSLACK_SUBDOMAIN環境変数の値も要求されるが、これはSlackのURL名(本稿の例では「https://buildinsider.slack.com/」のbuildinsider)を指定する。図7は筆者が実際に試した結果だ。

図7 Slackin環境をお手軽に構築できるnowコマンドの実行例

 図7の赤枠で囲った部分が、作成されたWebアプリのURLである。

  • 本稿のURL例: https://slackin-xtrhgeimiv.now.sh/

 このURLにアクセスすることで、Slackコミュニティへの登録ページが表示される(図8)。

図8 Slackコミュニティへの登録ページの例
図8 Slackコミュニティへの登録ページの例

 しかし、自動生成された「https://slackin-xtrhgeimiv.now.sh」というURLのドメイン名は、nowコマンドでデプロイするたびに変わるし、覚えにくいし、と使い勝手が悪い。Nowではエイリアス機能を使ってドメイン名を固定的にできるので、本稿の例では「buildinsider.now.sh」というドメイン名(前述のGoogle reCAPTCHAに指定したものと同じ)になるようにエイリアスを設定しておこう。リスト2が、これを行うためのコマンドである。

ターミナル
now alias https://slackin-xtrhgeimiv.now.sh buildinsider
リスト2 エイリアスを設定するためのコマンド例

 このコマンドを実行すると、次のURLでSlackコミュニティへの登録ページが表示されるようになる。

 以上で本稿が目的としていた「Slackinコミュニティへのユーザー登録」のページ作成が完了した。

SlackinとNowの実践的活用方法

 SlackinとNowを実践で使ううえで知っておくと便利な機能があるので、最後にこれらを簡単に紹介しておきたい。

Nowのダッシュボード

 Slackコミュニティへのユーザー登録ページにアクセスしたり、ログを管理したりしたい場合は、

が便利だ。上記のリンク先を開くと図9のように表示され、緑枠で囲んだ部分をクリックすると、Slackコミュニティへのユーザー登録ページにアクセスできる。

図9 Nowのダッシュボード
図9 Nowのダッシュボード

 また、赤枠で囲んだ部分をクリックすると、実行ログをリアルタイムに参照できる。

Slackinのバッジ機能

 図10に示しているのがバッジBadges)である。下の「Realtimeバッジ 」の方はクリック可能で、クリックするとSlackコミュニティに参加するためのポップアップが表示される。

図10 Slackinのバッジ
図10 Slackinのバッジ

 図10のバッジを実現するコードは、リスト3のようになる。このように非常にシンプルに1タグで記述できる。

HTML
<html>
<head></head>
<body>

<hr>
<p>SVGバッジ:</p>
<img src="https://buildinsider.now.sh/badge.svg">

<hr>
<p>Realtimeバッジ:</p>
<script async defer src="https://buildinsider.now.sh/slackin.js"></script>

</body>
</html>
リスト3 バッジを表示するためのコード例

 なお太字部分は、各自で作成したWebアプリのURLに書き換える必要がある。

 以上、面倒なSlackコミュニティのユーザー登録ページの作成を、Slackinを使うことで簡略化する方法を紹介した。今回はNowを使ったが、Heroku/Azure/OpenShift/IBM Bluemixを使う場合も、上記の各リンクをクリックして、それにより表示されたページの入力ページを埋めて進めていくだけで簡単にユーザー登録ページが作成できる。ぜひ本稿の内容を応用して、目的に合った使い方をしていただけると筆者としてうれしい。

サイトからのお知らせ

Twitterでつぶやこう!