Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
失敗しないSlackアプリの作り方~高UX実現のためのBlock kitの使いどころ~
Search
NAVITIME JAPAN
PRO
July 25, 2019
Technology
0
590
失敗しないSlackアプリの作り方~高UX実現のためのBlock kitの使いどころ~
2019/07/25に開催された「Slack Dev Meetup Tokyo #1 〜App ディレクトリにアプリを公開しよう〜」にて発表した資料です。
NAVITIME JAPAN
PRO
July 25, 2019
Tweet
Share
More Decks by NAVITIME JAPAN
See All by NAVITIME JAPAN
つよつよリーダーが 抜けたらどうする? 〜ナビタイムのAgile⽀援組織の変遷〜
navitimejapan
PRO
23
15k
実践ジオフェンス 効率的に開発するために
navitimejapan
PRO
3
670
安全で使いやすいCarPlayアプリの 魅せ方:HIGと実例から学ぶ
navitimejapan
PRO
1
220
見えないユーザの声はログに埋もれている! ~ログから具体的なユーザの体験を数値化した事例紹介~
navitimejapan
PRO
6
2.8k
ユーザーのためなら 『デザイン』 以外にも手を伸ばせる
navitimejapan
PRO
2
1.5k
フツーのIT女子が、 Engineering Managerになるまで
navitimejapan
PRO
3
340
不確実性に打ち勝つOKR戦略/How to manage uncertainty with OKR strategy
navitimejapan
PRO
4
3.5k
アジャイルを小さいままで 組織に広める 二周目 / Agile Transformation in NAVITIME JAPAN iteration 2
navitimejapan
PRO
4
1.3k
変更障害率0%よりも「継続的な学習と実験」を価値とする 〜障害を「起こってはならないもの」としていた組織がDirtの実施に至るまで〜 / DevOps Transformation in NAVITIME JAPAN
navitimejapan
PRO
7
5.6k
Other Decks in Technology
See All in Technology
ロールが細分化された組織でSREは何をするか?
tgidgd
1
420
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
3
1.1k
データ駆動経営の道しるべ:プロダクト開発指標の戦略的活用法
ham0215
1
100
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
1
320
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
13k
AIでテストプロセス自動化に挑戦する
sakatakazunori
1
530
QuickSight SPICE の効果的な運用戦略~S3 + Athena 構成での実践ノウハウ~/quicksight-spice-s3-athena-best-practices
emiki
0
290
[SRE NEXT 2025] すみずみまで暖かく照らすあなたの太陽でありたい
carnappopper
2
470
How Do I Contact Jetblue Airlines® Reservation Number: Fast Support Guide
thejetblueairhelpsupport
0
150
助けて! XからWaylandに移行しないと新しいGNOMEが使えなくなっちゃう 2025-07-12
nobutomurata
2
200
SRE with AI:実践から学ぶ、運用課題解決と未来への展望
yoshiiryo1
0
330
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.7k
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Documentation Writing (for coders)
carmenintech
72
4.9k
Site-Speed That Sticks
csswizardry
10
700
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
520
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
RailsConf 2023
tenderlove
30
1.1k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Balancing Empowerment & Direction
lara
1
460
Transcript
失敗しないSlackアプリの作り方 ~高UX実現のためのBlock kitの使いどころ~ 2019/7/25 株式会社ナビタイムジャパン 田辺 晋一
None
Why? NAVITIME + Slack
なぜSlackアプリを作ったのか? • ビジネスパーソンの移動を簡略化 • ビジネスコミュニケーションコストを削減 • 全世界での移動をサポート
でも、Slackアプリを作るのは初めて
開発で直面した課題
乗換案内アプリに求められるもの(要件) • 少ないステップ数による目的実現 • 検索条件や設定をストレスなく変更可能 • 視認性の良い経路案内の提示
Slackで実現可能なのだろうか?
乗換案内アプリに求められるもの(要件) • 少ないステップ数による目的実現 • 検索条件や設定をストレスなく変更可能 • 視認性の良い経路案内の提示
少ないステップ数による目的実現 スラッシュコマンド(/)、メンション(@)を トリガーにして経路案内をワンステップで表示 ユーザーの入力文章に対して AIを使った自然言語解析
乗換案内アプリに求められるもの(要件) • 少ないステップ数による目的実現 • 検索条件や設定をストレスなく変更可能 • 視認性の良い経路案内の提示
検索条件や設定をストレスなく変更可能 ユーザーが使い慣れたUIを Slackで実現する必要がある iOS乗換NAVITIMEの検索UI • 検索ボックス • Date picker •
ボタン • グルーピング :
視認性の良い経路案内の表示 ユーザーが見慣れたUIを Slackで実現する必要がある iOS乗換NAVITIMEの経路案内UI • 複雑なテーブル構造 • サムネイルアイコン • 乗換回数に依存する可変リスト
:
Slack Block Kitを使うことで解決!
Block Kitで使い慣れたUIをSlack上で実現 iOS乗換NAVITIMEの検索UI NAVITIME for Slack ≒
Block Kitで見慣れたUIをSlack上で実現 iOS乗換NAVITIMEの経路案内UI NAVITIME for Slack ≒
What is Slack Block Kit?
Block Kitの構成要素 • Layout blocks • Block elements Layout blocks
Block elements
Block Kitの構成要素 • Layout blocks • Block elements Layout blocks
Block elements
Layout blocks 各Block elementの レイアウトを定義するもの Layout blocks Block elements
Layout blocks Block Block Block : 1つのメッセージに 50個まで積み重ねる ことができる。 (2019.07.25時点)
Layout blocks Jsonの “type”フィー ルドに種別を指定。 typeごとに利用可能な Block elementsは異な るので注意が必要。 {
“type” : “section”, : /* Block elementsの指定 */ : }
Layout blocks
Layout blocks section block actions block divider block
Layout blocks
Layout blocks section block context block divider block
Layout blocks { “type” : “section”, “text” : {}, “accessory”
: { /* Block element */ } } テキスト付きのUI部品を表現す ることができる。同じ内容のUI 部品だが、用途が異なる場合な どに使用する。 (例. 出発地、目的地)
Layout blocks { “type” : “section”, “text” : {}, “accessory”
: { /* Block element */ } } テキスト付きのUI部品を表現す ることができる。同じ内容のUI 部品だが、用途が異なる場合な どに使用する。 (例. 出発地、目的地)
Layout blocks { “type” : “section”, “text” : {}, “accessory”
: { /* Block element */ } } テキスト付きのUI部品を表現す ることができる。同じ内容のUI 部品だが、用途が異なる場合な どに使用する。 (例. 出発地、目的地)
Layout blocks { “type” : “actions”, “elements” : [ ]
} 最大5個 (2019.07.25時点) のBlock elementsを含めることが可能。 ただし、テキストやイメージ が使えないので説明がなくて も直感的に理解できるUI部分 に使う。
Layout blocks { “type” : “actions”, “elements” : [ {
/* Block element1 */ }, { /* Block element2 */ }, { /* Block element3 */ } ] } 最大5個(2019.07.25時点) のBlock elementsを含めることが可能。 ただし、テキストやイメージ が使えないので説明がなくて も直感的に理解できるUI部分 に使う。
Layout blocks { “type” : “context”, “elements” : [ ]
} 最大10個(2019.07.25時点) のテキスト または、イメージのBlock elementsを含めることが可能。 経路結果など、静的な結果表 示部分で利用。
Layout blocks { “type” : “context”, “elements” : [ {
/* Block element1 */ }, { /* Block element2 */ } ] } 最大10個のテキストまたは、 イメージのBlock elementsを含 めることが可能。経路結果な ど、静的な結果表示部分で利 用。
Layout blocks { “type” : “context”, “elements” : [ {
/* Block element1 */ }, { /* Block element2 */ } ] } 最大10個のテキストまたは、 イメージのBlock elementsを含 めることが可能。経路結果な ど、静的な結果表示部分で利 用。
Layout blocks { “type” : “divider”, } <hr>のように水平方向の罫線 を引くだけのためのBlock。 Layout
Blockグループの区切り に利用することができる。
Layout blocks • Block elementsのレイアウトはtypeで決まる • typeごと表現可能なBlock elementsが異なる • Block
elementsとの組み合わせの自由度が高い • 表示Block数の制限がAttachmentsより多い
Block Kitの構成要素 • Layout blocks • Block elements Layout blocks
Block elements
Select menu with external data source 独自のデータソースからの 検索結果のリスト表示と 選択が可能 全文検索
エンジン
Select menu with external data source • 2~3個程度の少量リスト数ならボタンで代用 • 3秒以内にレスポンスを返す必要がある
• リクエスト数が心配ならmin_query_lenで調整
Select menu with external data source • グルーピングはoption_groupsを使う
Date picker
Select menu with static options 時刻など、固定アイテムの リスト表示と選択が可能
Buttons ダイアログをモーダルで 表示することも可能
Block elements • Block elementsは各種UIコンポーネントのこと • チェックボックスやラジオボタンは無い • 無いものはButtonsやSelect menuで代用
Block Kitの利用メリット • UIコンポーネントが充実している • パズル感覚で複雑なUI表現も可能 • 1つのメッセージでUIが完結する • JsonをAPIにPOSTするだけのシンプルなI/F
実装する前にすること
Block Kit Builderでデザイン設計
Block Kit Builder
Block Kit Builder - プレビューペイン
Block Kit Builder - ペイロード(JSON)ペイン
Block Kit Builder - テスト表示用ボタン
Block Kit Builder - Desktop(PC)
Block Kit Builder - Mobile
Block Kitで高UXアプリを作りましょう!
ご清聴ありがとうございました
Appendix • NAVITIME for Slack • Block KitでリッチなSlackアプリを作る -乗換経 路案内での実例-
• Introducing Block Kit