Download to read offline
![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"
}
]
}]
}](https://image.slidesharecdn.com/bmxug2fix-171117064432/85/Slack-Apps-12-320.jpg)
![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を作成します。](https://image.slidesharecdn.com/bmxug2fix-171117064432/85/Slack-Apps-13-320.jpg)
![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 です](https://image.slidesharecdn.com/bmxug2fix-171117064432/85/Slack-Apps-14-320.jpg)
Slack Appsでやれる事を確認した。年内日本語化されるんで、急ぎで!
- 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.
- 4. なぜSlack、本日の勉強は… 年内日本語化され、国内Slackユーザーが増えて、お客さまの案 件でSlackをいろいろ使いそう → そろそろ本気で取り組もう。 【私的背景】 昨年SlackRTM(Real Time Messaging)のBot開発で挫折 >< ↓ Slack開発初心者として、Slack Appsで出来ることを学ぼう！ 【本日の勉強は…】 Slack開発初心者 何か自分でも作れそうだな～と思うきっかけに。 Slack開発達人 退屈しのぎで、間違い探しや矛盾等を探して下さい。
- 5.
- 6. Create a SlackApp まずSlack人形本体(App)を作ります 対象Slackチームを指定します ここからスタートです 名前を設定します
- 7. Incoming Webhooks Slack人形に喋り方を教えます チャンネル #デモアプリへ発言する設定 あとはWebhook URLにJSONを投げるだけ！ { “text”: “こんにちは！” }
- 8.
- 9. Slash Commands (2) Command:/から始まるコマンドを定義 Request URL: コマンド実行されたら呼出されるコールバックURL Slack人形に埋め込む命令を定義します IBM CloudのNode-REDで作ればとっても簡単♪
- 10.
- 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はSlashCommand, 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.
- 17.
- 18.
- 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アプリが短時間で作れそうです。