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
Snowflakeの生成AI機能を活用したデータ分析アプリの作成 〜Cortex AnalystとCortex Searchの活用とStreamlitアプリでの利用〜
nayuts
1
470
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
210
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
1
230
【初心者向け】ローカルLLMの色々な動かし方まとめ
aratako
7
3.4k
Terraformで構築する セルフサービス型データプラットフォーム / terraform-self-service-data-platform
pei0804
1
170
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
430
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3k
ガチな登山用デバイスからこんにちは
halka
1
240
おやつは300円まで!の最適化を模索してみた
techtekt
PRO
0
300
今!ソフトウェアエンジニアがハードウェアに手を出すには
mackee
11
4.7k
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
200
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
230
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
36
6.9k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Navigating Team Friction
lara
189
15k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
RailsConf 2023
tenderlove
30
1.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
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