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