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
620
失敗しない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
710
安全で使いやすいCarPlayアプリの 魅せ方:HIGと実例から学ぶ
navitimejapan
PRO
1
240
見えないユーザの声はログに埋もれている! ~ログから具体的なユーザの体験を数値化した事例紹介~
navitimejapan
PRO
6
3k
ユーザーのためなら 『デザイン』 以外にも手を伸ばせる
navitimejapan
PRO
2
1.6k
フツーのIT女子が、 Engineering Managerになるまで
navitimejapan
PRO
3
360
不確実性に打ち勝つOKR戦略/How to manage uncertainty with OKR strategy
navitimejapan
PRO
4
3.6k
アジャイルを小さいままで 組織に広める 二周目 / 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
生成AIでセキュリティ運用を効率化する話
sakaitakeshi
0
360
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.1k
DDD集約とサービスコンテキスト境界との関係性
pandayumi
2
270
AWS環境のリソース調査を Claude Code で効率化 / aws investigate with cc devio2025
masahirokawahara
2
1.4k
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
miichan
2
170
エラーとアクセシビリティ
schktjm
0
1.1k
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
360
【初心者向け】ローカルLLMの色々な動かし方まとめ
aratako
7
3.3k
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
570
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
1
220
【Grafana Meetup Japan #6】Grafanaをリバプロ配下で動かすときにやること ~ Grafana Liveってなんだ ~
yoshitake945
0
390
おやつは300円まで!の最適化を模索してみた
techtekt
PRO
0
290
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
330
21k
Typedesign – Prime Four
hannesfritz
42
2.8k
Gamification - CAS2011
davidbonilla
81
5.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Facilitating Awesome Meetings
lara
55
6.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Into the Great Unknown - MozCon
thekraken
40
2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
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