内線電話用の番号検索|Slack APPで作ってみた

  • 2017年8月17日
  • by 
内線電話用の番号検索|Slack APPで作ってみた

ショーケース・ティービーではメール誤送信防止という観点から、社内連絡ではチャットツールを使用しています。

現在使用しているツールは「HipChat」。
<bitWave関連記事『情報漏えいしないための決定打!”Hip Chat”』>

ただし、「HipChat」の導入はここ最近の話で、それまでは「Slack」を利用していました。
<bitWave関連記事『コミュニケーションはSlackで!』>

「Slack」から「HipChat」への移行というのは機能的な問題ではなく、利用アカウント数増大に伴うコスト見直し。。。
機能的には「Slack」も十分に満足できるものであり、様々なカスタマイズができることが魅力的でした。
<bitWave関連記事『hubotと戯れてみる #1/#2/#3/#4/#5/#6/#7』>

今回、Slack APIを用いてSlack APPを作成してみました。
その共有を兼ねて、bitWaveでご案内したいと思います。
ちなみにプログラミング自体は「Slash Commands」を使っていますので、そのお手軽さもご理解いただければ。

スラッシュコマンドとは、メッセージボックスに直接コマンドを入力することで機能を実行させる、ショートカット機能です。
Slack では様々なスラッシュコマンドを使うことができます。
<参照:Slackヘルプセンター『スラッシュコマンド』>

Slack APPを作成するに至った経緯

社内には前記のメール誤送信の他、大小様々な課題があります。

私が個人的に不便に感じていたのは、内線電話用の番号の分かりづらさ。
10人を切るような職場であれば、各々が覚えておけばいいだけかもしれませんが、人数が増えてくると割り振られた番号の法則性も破綻をきたし、次第に覚えていられなくなります。

電話を取ってお客様を待たせている間に、内線電話番号表を都度探す……。
これは面倒ですし、何よりも待たせているお客様にも申し訳ないですよね。
そこで、カンタンに内線番号を教えてくれるBotを作れないものかと考えたのがキッカケです。

幸い、ショーケース・ティービーではSlackを使用していた土壌があったので、実際に導入することも容易です。
また、SlackはBotやAPPなどが作成できることも一つのウリでしたので、業務改善を目指して開発着手するに至りました。
なお、「Slash Commands」を使用したのは、わざわざ各チャンネルに招待せずとも使えるであろうという理由です。

Slack APPの開発手順

開発着手までのフローは以下のような感じです。

  • 手順1:Slack APIにAPPを登録する
  • 手順2:APP登録のために必要な「リクエストURL」と「リダイレクトURL」を用意する
  •   →今回は「Heroku(プラットフォームのサービス)」でNode.jsを使用しています

  • 手順3:Slack APIに「リクエストURL」と「リダイレクトURL」を登録
  • 手順4:Slack APPの作成開始!

それではここからは上記手順を一つ一つ解説していきます。

手順1:Slack APIにAPPを登録する

まずは「Slack API」にアクセスしましょう。
「1.create new app」をクリックし、「APP Name」と「Slack Team」を選択します。
下の画像をご参照ください。

なお、下の画面にある「App Credentials」は、後ほど使用することになります。

ちなみに「App Credentials」のDisplay informationでは、アイコン設定や簡単な説明書きなどの記載ができます。

現段階ではこれ以上の登録ができなくなると思いますので、一旦保留。
続いて、「手順2」を進めましょう。

手順2:APP登録のために必要な「リクエストURL」と「リダイレクトURL」を用意する

前記のフローにも記載のとおり、今回は「Heroku」でNode.jsを使用しています。
「Heroku」のセットアップ方法については、以下サイトが参考になりますので、その手順通りに進めていきましょう。
<参照:Heroku Dev Center『Getting Started on Heroku with Node.js』(英語サイト)>
(※注:「Heroku」アカウントがない場合は、事前登録する必要があります)

「Heroku」を開くとブラウザがたち上がります。
「connect get」になるのですが、パラメータの後ろに「/login」を追加して再度読み込みをしましょう。

すると、自分のSlack Teamとの連携に関する承認確認画面が表示されます。

ここで「Authorize」を選択しましょう。
Successと表示されたら、無事「Heroku」の設定が終わりになります。

手順3:Slack APIに「リクエストURL」と「リダイレクトURL」を登録

まずはSlack APIの「Interactive Message」に、リクエストURLを登録しましょう。

つなみにURLの書き方は、「Heroku」を開いた際にブラウザで表示されたパラメータをコピーし、最後「/slack/receive」と追記して保存すればオッケーです。

今度は「OAuth & Permissions」にリダイレクトURLを登録します。
これも上記のリクエストURLの登録と同様、パラメータの最後に「/oauth」を追記して登録します。

これで、登録が完了です。
もう一度、ターミナルから「Heroku」を開いてみれば、Slack Appにある「Phone_Extension」というシグナルが緑になっていることで、無事完了していることが確認できます。

手順4:Slack APPの作成開始!

ようやくAPPの作成開始ですね。

Slash内のどこでも使えるようにしたいので「Slash Commands」を使います。
そのため、予めAPPの「Slash Commands」を登録します。
「Create New Command」で登録をすることになるので、以下のような感じになりますね。

なお「Heroku」をGit Cloneした際にindex.jsファイルが入っています。
ここからはそのIndex.jsにコードを追加していくことになります。

まずScopesにcommandsを登録し、jsonデータを準備しておきます。
なお、「Slash Commands」だけでなく、botにも使えます。

ちなみに、私の場合は下記のように作成しました。

「Slash commands」で指示が飛んできた際、先ほど作成したjsonデータから探しだすことになるため、予め共通関数を作っておきましょう。
まずはテストケースを作成してみます。

このテストケースを一度「heroku」サーバにアップし、実際に動きを見てみましょう。
ちなみに「Heroku」サーバへのアップ方法は以下のようなフローになります。

  • 1.git add index.js
  • 2.git commit -mm ‘first test’
  • 3.git push heroku master

この手順でアップできたかと思います。

確認のため、「Heroku」を開いてみましょう。
コマンドは「/naisen」で登録していたので、呼び出す時には[/naisen]で呼び出すことになります。

「/naisen start」と書くことで、switch文の「case ‘start’」に入って、「FindingNaisen」関数が動きます。
これにより、jsonに登録していた「index -> Start」のテキストが結果として帰ってくるのです。

それでは実際に内線番号を登録していってみましょう。

初めにjsonから……

続いて、Switch文には……

なお、「Slash Commands」はテキストだけでなく、ボタンやセレクトボックスも作成することができます。

試しにボタンを作成した場合……

続いてセレクトボックスを作成した場合……

といった感じです。

そして、ボタンやセレクトボックスをクリックした場合の挙動に関しては、「interactive_message_callback」で行いました。

それでは改めてこれらデータを「Heroku」サーバにアップして、どのような結果が得られるか試してみましょう。
アクセスしてみるとこのような結果が出ました!

成功ですね!!

初めてのSlack APPを開発してみて

社内の各内線番号を一通り登録し、実施に使ってみたところ、これがなかなかのスグレモノ。
馴染みのあるSlackのインターフェイスそのままなので、当然ながら使いやすい印象を受けました。
やはり、実際に “困っていること” を解決したプログラムは、絶対に役立つ完成品になりますし、何よりも自分で作れたという点で愛着も湧きますw

キッカケとなるものがあれば、いくらでも技術の力で解決できるというのを実証できたことが、今回の最大の成果なのかもしれませんね。

今回は初めての開発ということもあり、Slack APIの使い方や「Slash Commands」の書き方なども調査しながらの作成となったため、プログラミングに8時間、内線データ登録に4時間も要してしまいました。
そのかわり、新たな知識をたくさん得ることができたので、無駄ではなかったです。

プログラミングの入門用にもSlack APPは最適な教材だと思いますので、関心のある方はぜひ作ってみてください。
その際は “自分の身のまわりにある困ったことを解決してくれるAPP” を作成することをオススメいたします。

コメント