Slack Appsでやれる事を確認した。年内日本語化されるんで、急ぎで!

BMXUG つきじ 勉強会 #2

2017年11月16日 日本情報通信株式会社

小川 泰幸

IBM Cloudを使って

自己紹介

• 出身県• 長野県川中島町 合戦で有名？

• 好きなモノ• 酒 仕事後の1杯のために生きてます• 猫 現在2匹のにゃんこと暮らしてます

• 担当仕事• 弊社Watsonチームに所属。Watson系案件の提案、技術支援、開発＊

• 開発者として• Java屋 Java歴22年(1995年～) Applet, Servlet,…, SpringBoot

WAS V2時代からWebアプリを作ってます

• 最近Java案件に関われず、NodeJS, Python を書くことが増えてます• プログラマーの立場向上に何かしら絡んでいきたいです！

最近作ったモノ

観光案内アプリ(5月)

ロケーションベース型ARアプリ(9月)

画像認識型ARアプリ(8月)

やっぱりJavaをやりたい → イベントやコンテストでAndroid開発を意欲的に！

地点情報からレコメンド

カメラ認識からのオブジェクト描画

以後のセッションでデモ紹介します！

なぜSlack、本日の勉強は…

年内日本語化され、国内Slackユーザーが増えて、お客さまの案件でSlackをいろいろ使いそう → そろそろ本気で取り組もう。

【私的背景】昨年Slack RTM(Real Time Messaging)のBot開発で挫折 ><

↓Slack開発初心者として、Slack Appsで出来ることを学ぼう！

【本日の勉強は…】Slack開発初心者

何か自分でも作れそうだな～と思うきっかけに。

Slack開発達人退屈しのぎで、間違い探しや矛盾等を探して下さい。

これを学びます教科書をご覧下さい

https://api.slack.com/tutorials

Create a Slack App

まずSlack人形本体(App)を作ります

対象Slackチームを指定します

ここからスタートです

名前を設定します

Incoming WebhooksSlack人形に喋り方を教えます

チャンネル #デモアプリ へ発言する設定

あとはWebhook URLにJSONを投げるだけ！{ “text”: “こんにちは！” }

Slash Commands (1)Slack人形に独自命令を埋め込みます(進行上、先にこれを設定します)

Slack人形に仕込んだ独自命令一覧

Slash Commands (2)

Command: /から始まるコマンドを定義

Request URL: コマンド実行されたら呼出されるコールバックURL

Slack人形に埋め込む命令を定義します

IBM CloudのNode-REDで作ればとっても簡単♪

デモ1

• Curlコマンドから喋らせてみよう

• スラッシュコマンドから喋らせてみよう

Interactive Components (1)Slack人形に定型質問の方法を教えます

・Button ボタンで答えてもらう・Menu メニューで答えてもらう・Dialog 画面で答えてもらう

メニュー項目を動的に返す場合に設定するコールバックURL

Button, Menuが押されたら呼出されるコールバックURL

Interactive Components (2)Buttonを投げるためのJSON

＜ポイント>・コールバックURL設定が一つなので、”callback_id”で処理分岐が必要です。

・複数ボタンはnameで区別する

{"text": "ボタンのサンプルです。"

,"attachments": [{"text": "触ってみよう！",

"fallback": "Couldn't reply.","callback_id": “1000","color": "#3AA3E3","attachment_type": "default","actions": [{"name": “b1","value": "Primary","text": "Primary","type": "button","style": "primary"

}]

}]}

Interactive Components (3)

{"options": [

{"text": "08:30","value": "08:30"

},{

"text": "09:00","value": "09:00"

}]

}

{“text”: “リストのサンプルです。"

,"attachments": [{"text": "触ってみよう！",

"fallback": "Couldn't reply.","callback_id": “2000","color": "#3AA3E3","attachment_type": "default","actions": [{

"name": "from_list","text": "a か p を入力してね",

"type": "select","data_source": "external","min_query_length": 1,

}]

}]}

Menuを投げるためのJSON 動的Menu項目のJSON

Menuに{min_query_length}文字が入力されたら動的Menu項目のコールバック発火されます

コールバック側の実装で動的にJSONを作成します。

Interactive Components (4)Dialogを投げるためのJSON

＜ポイント>・DialogはSlash Command, Button, Menuのコールバックからのみ使用できます(いきなりDialogは投げられない)

・Dialog内で使える入力部品はText, TextArea, Menu があります。

{ "callback_id": “3000”,"title": "アンケート",

"submit_label": "Request","elements": [

{"type": "text","label": "何時に起きましたか？",

"name": "time"},{

"type": "select","name": "feel","label": "今の気分は？",

"options": [{

"label": "良い","value": "良い"

},{"label": "悪い","value": "悪い"

}]

}]

}

＜注意>DialogのMenu項目はtext でなく label です

デモ2

• 入力部品から質問させて、答えを取得してみよう

• ボタン

• メニュー(リスト)

• ダイアログ

• ボタンから

• リストから

• スラッシュコマンドから

Bot User Slack人形に名前を与える

“Botさん”をチャンネルに招待できるようになります

Event Subscriptions“Botさん”に聞き耳の立て方を教えます

どんなことに聞き耳を立てるか設定する

何かをヒアリングしたら呼出されるコールバックURL

デモ3

• 聞き耳を立ててみよう

• チャンネル内のさまざまなイベントをウォッチしよう

デモアプリ

• 誰もが作りそうなゆるいアプリを作りました。

「チーム勤怠管理」・毎日8:00, 17:00に勤怠投入メッセージを@channel

・メンバーは出退社時刻を投入し、実績を参照できる

・チャンネルが煩雑にならないようなUI/UX(を検討)

• システム構成( Slack + IBM Cloud )IBM Cloud

R/W

R Replication

REST

REST

REST/other

Node-RED

CloudantNoSQL DB

DB2 Warehouse on Cloud

Slack Team/Channel

Slack API

まとめ

• Slack開発初心者向けに、Slack Appで比較的簡単に出来そうなことを駆け足でピックアップいたしました。

• IBM Cloudのサービスを組み合わせれば、それなりに役立つチーム向け独自Slackアプリが短時間で作れそうです。