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
500
失敗しない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
22
15k
実践ジオフェンス 効率的に開発するために
navitimejapan
PRO
3
420
安全で使いやすいCarPlayアプリの 魅せ方:HIGと実例から学ぶ
navitimejapan
PRO
1
160
見えないユーザの声はログに埋もれている! ~ログから具体的なユーザの体験を数値化した事例紹介~
navitimejapan
PRO
6
2.5k
ユーザーのためなら 『デザイン』 以外にも手を伸ばせる
navitimejapan
PRO
2
1.3k
フツーのIT女子が、 Engineering Managerになるまで
navitimejapan
PRO
3
260
不確実性に打ち勝つOKR戦略/How to manage uncertainty with OKR strategy
navitimejapan
PRO
4
3.3k
アジャイルを小さいままで 組織に広める 二周目 / Agile Transformation in NAVITIME JAPAN iteration 2
navitimejapan
PRO
4
1.3k
変更障害率0%よりも「継続的な学習と実験」を価値とする 〜障害を「起こってはならないもの」としていた組織がDirtの実施に至るまで〜 / DevOps Transformation in NAVITIME JAPAN
navitimejapan
PRO
7
5.3k
Other Decks in Technology
See All in Technology
開発スピードは上がっている…品質はどうする? スピードと品質を両立させるためのプロダクト開発の進め方とは #DevSumi #DevSumiB / Agile And Quality
nihonbuson
1
1.3k
Classmethod AI Talks(CATs) #15 司会進行スライド(2025.02.06) / classmethod-ai-talks-aka-cats_moderator-slides_vol15_2025-02-06
shinyaa31
0
170
Datadog APM におけるトレース収集の流れ及び Retention Filters のはなし / datadog-apm-trace-retention-filters
k6s4i53rx
0
320
サーバーレスアーキテクチャと生成AIの融合 / Serverless Meets Generative AI
_kensh
12
3k
データ基盤の成長を加速させる:アイスタイルにおける挑戦と教訓
tsuda7
3
650
滅・サービスクラス🔥 / Destruction Service Class
sinsoku
6
1.5k
Culture Deck
optfit
0
330
Fintech SREの挑戦 PCI DSS対応をスマートにこなすインフラ戦略/Fintech SRE’s Challenge: Smart Infrastructure Strategies for PCI DSS Compliance
maaaato
0
450
CZII - CryoET Object Identification 参加振り返り・解法共有
tattaka
0
240
『AWS Distinguished Engineerに学ぶ リトライの技術』 #ARC403/Marc Brooker on Try again: The tools and techniques behind resilient systems
quiver
0
130
7日間でハッキングをはじめる本をはじめてみませんか?_ITエンジニア本大賞2025
nomizone
2
1.4k
インフラをつくるとはどういうことなのか、 あるいはPlatform Engineeringについて
nwiizo
5
2.1k
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
98
5.3k
A better future with KSS
kneath
238
17k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Agile that works and the tools we love
rasmusluckow
328
21k
Raft: Consensus for Rubyists
vanstee
137
6.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Automating Front-end Workflow
addyosmani
1367
200k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Building Applications with DynamoDB
mza
93
6.2k
Done Done
chrislema
182
16k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
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