2017/11/16開催 BMXUG つきじ 勉強会 #2 講演資料

1. Slack Appsでやれる事を確認した。
年内日本語化されるんで、急ぎで!
BMXUG つきじ 勉強会 #2
2017年11月16日 日本情報通信株式会社
小川 泰幸
IBM Cloudを使って

2. 自己紹介
• 出身県
• 長野県川中島町 合戦で有名？
• 好きなモノ
• 酒 仕事後の1杯のために生きてます
• 猫 現在2匹のにゃんこと暮らしてます
• 担当仕事
• 弊社Watsonチームに所属。Watson系案件の提案、技術支援、開発＊
• 開発者として
• Java屋 Java歴22年(1995年～) Applet, Servlet,…, SpringBoot
WAS V2時代からWebアプリを作ってます
• 最近Java案件に関われず、NodeJS, Python を書くことが増えてます
• プログラマーの立場向上に何かしら絡んでいきたいです！

3. 最近作ったモノ
観光案内アプリ
(5月)
ロケーションベース型ARアプリ
(9月)
画像認識型ARアプリ
(8月)
やっぱりJavaをやりたい → イベントやコンテストでAndroid開発を意欲的に！
地点情報からレコメンド
カメラ認識からのオブジェクト描画
以後のセッションでデモ紹介します！

4. なぜSlack、本日の勉強は…
年内日本語化され、国内Slackユーザーが増えて、お客さまの案
件でSlackをいろいろ使いそう → そろそろ本気で取り組もう。
【私的背景】
昨年Slack RTM(Real Time Messaging)のBot開発で挫折 ><
↓
Slack開発初心者として、Slack Appsで出来ることを学ぼう！
【本日の勉強は…】
Slack開発初心者
何か自分でも作れそうだな～と思うきっかけに。
Slack開発達人
退屈しのぎで、間違い探しや矛盾等を探して下さい。

5. これを学びます
教科書をご覧下さい
https://api.slack.com/tutorials

6. Create a Slack App
まずSlack人形本体(App)を作ります
対象Slackチームを指定します
ここからスタートです
名前を設定します

7. Incoming Webhooks
Slack人形に喋り方を教えます
チャンネル #デモアプリ へ発言する設定
あとはWebhook URLにJSONを投げるだけ！
{ “text”: “こんにちは！” }

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

9. Slash Commands (2)
Command: /から始まるコマンドを定義
Request URL:
コマンド実行されたら呼出されるコールバックURL
Slack人形に埋め込む命令を定義します
IBM CloudのNode-REDで作ればとっても簡単♪

10. デモ1
• Curlコマンドから喋らせてみよう
• スラッシュコマンドから喋らせてみよう

11. Interactive Components (1)
Slack人形に定型質問の方法を教えます
・Button ボタンで答えてもらう
・Menu メニューで答えてもらう
・Dialog 画面で答えてもらう
メニュー項目を動的に返す場合に設定するコールバックURL
Button, Menuが押されたら呼出されるコールバックURL

12. 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"
}
]
}]
}

13. 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を作成します。

14. 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 です

15. デモ2
• 入力部品から質問させて、答えを取得してみよう
• ボタン
• メニュー(リスト)
• ダイアログ
• ボタンから
• リストから
• スラッシュコマンドから

16. Bot User Slack人形に名前を与える
“Botさん”をチャンネルに招待で
きるようになります

17. Event Subscriptions
“Botさん”に聞き耳の立て方を教えます
どんなことに聞き耳を立てるか設定する
何かをヒアリングしたら呼出されるコールバックURL

18. デモ3
• 聞き耳を立ててみよう
• チャンネル内のさまざまなイベントをウォッチしよう

19. デモアプリ
• 誰もが作りそうなゆるいアプリを作りました。
「チーム勤怠管理」
・毎日8:00, 17:00に勤怠投入メッセージを@channel
・メンバーは出退社時刻を投入し、実績を参照できる
・チャンネルが煩雑にならないようなUI/UX(を検討)
• システム構成( Slack + IBM Cloud ) IBM Cloud
R/W
R Replication
REST
REST
REST/other
Node-RED
Cloudant
NoSQL DB
DB2
Warehouse
on Cloud
Slack
Team/Channel
Slack API

20. まとめ
• Slack開発初心者向けに、Slack Appで比較的簡単に出来
そうなことを駆け足でピックアップいたしました。
• IBM Cloudのサービスを組み合わせれば、それなりに役
立つチーム向け独自Slackアプリが短時間で作れそうです。