失敗しないSlackアプリの作り方～高UX実現のためのBlock kitの使いどころ～

2019/07/25に開催された「Slack Dev Meetup Tokyo #1 〜App ディレクトリにアプリを公開しよう〜」にて発表した資料です。

1. 失敗しないSlackアプリの作り方 ～高UX実現のためのBlock kitの使いどころ～ 2019/7/25 株式会社ナビタイムジャパン 田辺 晋一
3. Why? NAVITIME ＋ Slack
4. なぜSlackアプリを作ったのか？ • ビジネスパーソンの移動を簡略化 • ビジネスコミュニケーションコストを削減 • 全世界での移動をサポート
5. でも、Slackアプリを作るのは初めて
6. 開発で直面した課題
7. 乗換案内アプリに求められるもの（要件） • 少ないステップ数による目的実現 • 検索条件や設定をストレスなく変更可能 • 視認性の良い経路案内の提示
8. Slackで実現可能なのだろうか？
9. 乗換案内アプリに求められるもの（要件） • 少ないステップ数による目的実現 • 検索条件や設定をストレスなく変更可能 • 視認性の良い経路案内の提示
10. 少ないステップ数による目的実現 スラッシュコマンド(/)、メンション(@)を トリガーにして経路案内をワンステップで表示 ユーザーの入力文章に対して AIを使った自然言語解析
11. 乗換案内アプリに求められるもの（要件） • 少ないステップ数による目的実現 • 検索条件や設定をストレスなく変更可能 • 視認性の良い経路案内の提示
12. 検索条件や設定をストレスなく変更可能 ユーザーが使い慣れたUIを Slackで実現する必要がある iOS乗換NAVITIMEの検索UI • 検索ボックス • Date picker • ボタン • グルーピング ：
13. 視認性の良い経路案内の表示 ユーザーが見慣れたUIを Slackで実現する必要がある iOS乗換NAVITIMEの経路案内UI • 複雑なテーブル構造 • サムネイルアイコン • 乗換回数に依存する可変リスト ：
14. Slack Block Kitを使うことで解決！
15. Block Kitで使い慣れたUIをSlack上で実現 iOS乗換NAVITIMEの検索UI NAVITIME for Slack ≒
16. Block Kitで見慣れたUIをSlack上で実現 iOS乗換NAVITIMEの経路案内UI NAVITIME for Slack ≒
17. What is Slack Block Kit?
18. Block Kitの構成要素 • Layout blocks • Block elements Layout blocks Block elements
19. Block Kitの構成要素 • Layout blocks • Block elements Layout blocks Block elements
20. Layout blocks 各Block elementの レイアウトを定義するもの Layout blocks Block elements
21. Layout blocks Block Block Block ： １つのメッセージに 50個まで積み重ねる ことができる。 (2019.07.25時点)
22. Layout blocks Jsonの “type”フィー ルドに種別を指定。 typeごとに利用可能な Block elementsは異な るので注意が必要。 { “type” : “section”, ： /* Block elementsの指定 */ ： }
23. Layout blocks
24. Layout blocks section block actions block divider block
25. Layout blocks
26. Layout blocks section block context block divider block
27. Layout blocks { “type” : “section”, “text” : {}, “accessory” : { /* Block element */ } } テキスト付きのUI部品を表現す ることができる。同じ内容のUI 部品だが、用途が異なる場合な どに使用する。 (例. 出発地、目的地）
28. Layout blocks { “type” : “section”, “text” : {}, “accessory” : { /* Block element */ } } テキスト付きのUI部品を表現す ることができる。同じ内容のUI 部品だが、用途が異なる場合な どに使用する。 (例. 出発地、目的地）
29. Layout blocks { “type” : “section”, “text” : {}, “accessory” : { /* Block element */ } } テキスト付きのUI部品を表現す ることができる。同じ内容のUI 部品だが、用途が異なる場合な どに使用する。 (例. 出発地、目的地）
30. Layout blocks { “type” : “actions”, “elements” : [ ] } 最大５個 (2019.07.25時点) のBlock elementsを含めることが可能。 ただし、テキストやイメージ が使えないので説明がなくて も直感的に理解できるUI部分 に使う。
31. Layout blocks { “type” : “actions”, “elements” : [ { /* Block element1 */ }, { /* Block element2 */ }, { /* Block element3 */ } ] } 最大５個(2019.07.25時点) のBlock elementsを含めることが可能。 ただし、テキストやイメージ が使えないので説明がなくて も直感的に理解できるUI部分 に使う。
32. Layout blocks { “type” : “context”, “elements” : [ ] } 最大10個(2019.07.25時点) のテキスト または、イメージのBlock elementsを含めることが可能。 経路結果など、静的な結果表 示部分で利用。
33. Layout blocks { “type” : “context”, “elements” : [ { /* Block element1 */ }, { /* Block element2 */ } ] } 最大10個のテキストまたは、 イメージのBlock elementsを含 めることが可能。経路結果な ど、静的な結果表示部分で利 用。
34. Layout blocks { “type” : “context”, “elements” : [ { /* Block element1 */ }, { /* Block element2 */ } ] } 最大10個のテキストまたは、 イメージのBlock elementsを含 めることが可能。経路結果な ど、静的な結果表示部分で利 用。
35. Layout blocks { “type” : “divider”, } <hr>のように水平方向の罫線 を引くだけのためのBlock。 Layout Blockグループの区切り に利用することができる。
36. Layout blocks • Block elementsのレイアウトはtypeで決まる • typeごと表現可能なBlock elementsが異なる • Block elementsとの組み合わせの自由度が高い • 表示Block数の制限がAttachmentsより多い
37. Block Kitの構成要素 • Layout blocks • Block elements Layout blocks Block elements
38. Select menu with external data source 独自のデータソースからの 検索結果のリスト表示と 選択が可能 全文検索 エンジン
39. Select menu with external data source • 2～3個程度の少量リスト数ならボタンで代用 • 3秒以内にレスポンスを返す必要がある • リクエスト数が心配ならmin_query_lenで調整
40. Select menu with external data source • グルーピングはoption_groupsを使う
41. Date picker
42. Select menu with static options 時刻など、固定アイテムの リスト表示と選択が可能
43. Buttons ダイアログをモーダルで 表示することも可能
44. Block elements • Block elementsは各種UIコンポーネントのこと • チェックボックスやラジオボタンは無い • 無いものはButtonsやSelect menuで代用
45. Block Kitの利用メリット • UIコンポーネントが充実している • パズル感覚で複雑なUI表現も可能 • １つのメッセージでUIが完結する • JsonをAPIにPOSTするだけのシンプルなI/F
46. 実装する前にすること
47. Block Kit Builderでデザイン設計
48. Block Kit Builder
49. Block Kit Builder - プレビューペイン
50. Block Kit Builder - ペイロード(JSON)ペイン
51. Block Kit Builder - テスト表示用ボタン
52. Block Kit Builder - Desktop(PC)
53. Block Kit Builder - Mobile
54. Block Kitで高UXアプリを作りましょう！
55. ご清聴ありがとうございました
56. Appendix • NAVITIME for Slack • Block KitでリッチなSlackアプリを作る -乗換経 路案内での実例- • Introducing Block Kit