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
290
失敗しない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
ユーザーのためなら 『デザイン』 以外にも手を伸ばせる
navitimejapan
PRO
2
700
フツーのIT女子が、 Engineering Managerになるまで
navitimejapan
PRO
3
76
不確実性に打ち勝つOKR戦略/How to manage uncertainty with OKR strategy
navitimejapan
PRO
4
2.8k
アジャイルを小さいままで 組織に広める 二周目 / Agile Transformation in NAVITIME JAPAN iteration 2
navitimejapan
PRO
4
1.1k
変更障害率0%よりも「継続的な学習と実験」を価値とする 〜障害を「起こってはならないもの」としていた組織がDirtの実施に至るまで〜 / DevOps Transformation in NAVITIME JAPAN
navitimejapan
PRO
6
4.6k
こうしてふりかえりは終わってしまった / A Demise of a retrospective
navitimejapan
PRO
42
26k
もーひとつの時間がない症候群 / Yet Another SOT Syndrome
navitimejapan
PRO
1
2k
シーズン2〜スクラムチームのバトンを渡す〜 / Season 2 -pass the button of a scrum team-
navitimejapan
PRO
2
2.8k
チームのパフォーマンスを引き出す、ワクワクするプロダクトゴール、OKR / Waku-waku Product Goal and OKR
navitimejapan
PRO
17
17k
Other Decks in Technology
See All in Technology
アプリがつくるNOT A HOTELブランド
hokuts
0
450
Tableau事例紹介 / Tableau Case Study of Eureka
kazuya_araki_tokyo
1
170
普段有償でサポート業務をしているCSAが技術知見を無料で公開する理由
07jp27
1
630
次世代Web認証「パスキー」 / mo-zatsudan-passkey
nkzn
22
13k
株式会社EventHub・エンジニア採用資料
eventhub
0
1.9k
Garoon 開発チーム / Garoon development team
cybozuinsideout
PRO
1
2.9k
コンパウンドスタートアップのためのスケーラブルでセキュアなInfrastructure as Codeパイプラインを考える / Scalable and Secure Infrastructure as Code Pipeline for a Compound Startup
yuyatakeyama
3
1.8k
WebアプリケーションにおけるPDOの使い方入門 / phpcon odawara 2024
meihei3
2
420
Oracle Exadata Database Service on Cloud@Customer (ExaDB-C@C) - UI スクリーン・キャプチャ集
oracle4engineer
PRO
1
1.1k
少数チームで挑む: SwiftUI, TCA, KMPを用いた 新規動画配信アプリ 「ABEMA Live」の開発について
tomu28
0
520
NLP2024 参加報告LT ~RAGの生成評価と懇親戦略~ / nlp2024_attendee_presentation_LT_masuda
taro_masuda
1
190
シン・Kafka / shin-kafka
oracle4engineer
PRO
6
2.7k
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
331
56k
Building a Modern Day E-commerce SEO Strategy
aleyda
16
6.3k
For a Future-Friendly Web
brad_frost
171
8.9k
Happy Clients
brianwarren
91
6.4k
A Philosophy of Restraint
colly
195
16k
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
How to name files
jennybc
64
92k
Bootstrapping a Software Product
garrettdimon
PRO
301
110k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
115
18k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
219
21k
[RailsConf 2023] Rails as a piece of cake
palkan
22
3.9k
Typedesign – Prime Four
hannesfritz
36
2k
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