Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
失敗しないSlackアプリの作り方
~高UX実現のためのBlock kitの使いどころ~
2019/7/25
株式会社ナビタイムジャパン
田辺 晋一
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の検索UINAVITIME for Slack
≒
Block Kitで見慣れたUIをSlack上で実現
iOS乗換NAVITIMEの経路案内UINAVITIME 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を含めることが可能。
ただし、テキストやイメージ
が使えないので説...
Layout blocks
{
“type” : “actions”,
“elements” : [
{ /* Block element1 */ },
{ /* Block element2 */ },
{ /* Block element3...
Layout blocks
{
“type” : “context”,
“elements” : [
]
}
最大10個(2019.07.25時点)のテキスト
または、イメージのBlock
elementsを含めることが可能。
経路結果など、静...
Layout blocks
{
“type” : “context”,
“elements” : [
{ /* Block element1 */ },
{ /* Block element2 */ }
]
}
最大10個のテキストまたは、
イ...
Layout blocks
{
“type” : “context”,
“elements” : [
{ /* Block element1 */ },
{ /* Block element2 */ }
]
}
最大10個のテキストまたは、
イ...
Layout blocks
{
“type” : “divider”,
} <hr>のように水平方向の罫線
を引くだけのためのBlock。
Layout Blockグループの区切り
に利用することができる。
Layout blocks
● Block elementsのレイアウトはtypeで決まる
● typeごと表現可能なBlock elementsが異なる
● Block elementsとの組み合わせの自由度が高い
● 表示Block数の制限...
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
失敗しないSlackアプリの作り方~高UX実現のためのBlock kitの使いどころ~
Próxima SlideShare
Cargando en…5
×

失敗しないSlackアプリの作り方~高UX実現のためのBlock kitの使いどころ~

660 visualizaciones

Publicado el

2019/07/25に開催された「Slack Dev Meetup Tokyo #1 〜App ディレクトリにアプリを公開しよう〜」にて発表した資料です。

Publicado en: Internet
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

失敗しないSlackアプリの作り方~高UX実現のためのBlock kitの使いどころ~

  1. 1. 失敗しないSlackアプリの作り方 ~高UX実現のためのBlock kitの使いどころ~ 2019/7/25 株式会社ナビタイムジャパン 田辺 晋一
  2. 2. Why? NAVITIME + Slack
  3. 3. なぜSlackアプリを作ったのか? ● ビジネスパーソンの移動を簡略化 ● ビジネスコミュニケーションコストを削減 ● 全世界での移動をサポート
  4. 4. でも、Slackアプリを作るのは初めて
  5. 5. 開発で直面した課題
  6. 6. 乗換案内アプリに求められるもの(要件) ● 少ないステップ数による目的実現 ● 検索条件や設定をストレスなく変更可能 ● 視認性の良い経路案内の提示
  7. 7. Slackで実現可能なのだろうか?
  8. 8. 乗換案内アプリに求められるもの(要件) ● 少ないステップ数による目的実現 ● 検索条件や設定をストレスなく変更可能 ● 視認性の良い経路案内の提示
  9. 9. 少ないステップ数による目的実現 スラッシュコマンド(/)、メンション(@)を トリガーにして経路案内をワンステップで表示 ユーザーの入力文章に対して AIを使った自然言語解析
  10. 10. 乗換案内アプリに求められるもの(要件) ● 少ないステップ数による目的実現 ● 検索条件や設定をストレスなく変更可能 ● 視認性の良い経路案内の提示
  11. 11. 検索条件や設定をストレスなく変更可能 ユーザーが使い慣れたUIを Slackで実現する必要がある iOS乗換NAVITIMEの検索UI ● 検索ボックス ● Date picker ● ボタン ● グルーピング :
  12. 12. 視認性の良い経路案内の表示 ユーザーが見慣れたUIを Slackで実現する必要がある iOS乗換NAVITIMEの経路案内UI ● 複雑なテーブル構造 ● サムネイルアイコン ● 乗換回数に依存する可変リスト :
  13. 13. Slack Block Kitを使うことで解決!
  14. 14. Block Kitで使い慣れたUIをSlack上で実現 iOS乗換NAVITIMEの検索UINAVITIME for Slack ≒
  15. 15. Block Kitで見慣れたUIをSlack上で実現 iOS乗換NAVITIMEの経路案内UINAVITIME for Slack ≒
  16. 16. What is Slack Block Kit?
  17. 17. Block Kitの構成要素 ● Layout blocks ● Block elements Layout blocks Block elements
  18. 18. Block Kitの構成要素 ● Layout blocks ● Block elements Layout blocks Block elements
  19. 19. Layout blocks 各Block elementの レイアウトを定義するもの Layout blocks Block elements
  20. 20. Layout blocks Block Block Block : 1つのメッセージに 50個まで積み重ねる ことができる。 (2019.07.25時点)
  21. 21. Layout blocks Jsonの “type”フィー ルドに種別を指定。 typeごとに利用可能な Block elementsは異な るので注意が必要。 { “type” : “section”, : /* Block elementsの指定 */ : }
  22. 22. Layout blocks
  23. 23. Layout blocks section block actions block divider block
  24. 24. Layout blocks
  25. 25. Layout blocks section block context block divider block
  26. 26. Layout blocks { “type” : “section”, “text” : {}, “accessory” : { /* Block element */ } } テキスト付きのUI部品を表現す ることができる。同じ内容のUI 部品だが、用途が異なる場合な どに使用する。 (例. 出発地、目的地)
  27. 27. Layout blocks { “type” : “section”, “text” : {}, “accessory” : { /* Block element */ } } テキスト付きのUI部品を表現す ることができる。同じ内容のUI 部品だが、用途が異なる場合な どに使用する。 (例. 出発地、目的地)
  28. 28. Layout blocks { “type” : “section”, “text” : {}, “accessory” : { /* Block element */ } } テキスト付きのUI部品を表現す ることができる。同じ内容のUI 部品だが、用途が異なる場合な どに使用する。 (例. 出発地、目的地)
  29. 29. Layout blocks { “type” : “actions”, “elements” : [ ] } 最大5個 (2019.07.25時点)のBlock elementsを含めることが可能。 ただし、テキストやイメージ が使えないので説明がなくて も直感的に理解できるUI部分 に使う。
  30. 30. Layout blocks { “type” : “actions”, “elements” : [ { /* Block element1 */ }, { /* Block element2 */ }, { /* Block element3 */ } ] } 最大5個(2019.07.25時点)のBlock elementsを含めることが可能。 ただし、テキストやイメージ が使えないので説明がなくて も直感的に理解できるUI部分 に使う。
  31. 31. Layout blocks { “type” : “context”, “elements” : [ ] } 最大10個(2019.07.25時点)のテキスト または、イメージのBlock elementsを含めることが可能。 経路結果など、静的な結果表 示部分で利用。
  32. 32. Layout blocks { “type” : “context”, “elements” : [ { /* Block element1 */ }, { /* Block element2 */ } ] } 最大10個のテキストまたは、 イメージのBlock elementsを含 めることが可能。経路結果な ど、静的な結果表示部分で利 用。
  33. 33. Layout blocks { “type” : “context”, “elements” : [ { /* Block element1 */ }, { /* Block element2 */ } ] } 最大10個のテキストまたは、 イメージのBlock elementsを含 めることが可能。経路結果な ど、静的な結果表示部分で利 用。
  34. 34. Layout blocks { “type” : “divider”, } <hr>のように水平方向の罫線 を引くだけのためのBlock。 Layout Blockグループの区切り に利用することができる。
  35. 35. Layout blocks ● Block elementsのレイアウトはtypeで決まる ● typeごと表現可能なBlock elementsが異なる ● Block elementsとの組み合わせの自由度が高い ● 表示Block数の制限がAttachmentsより多い
  36. 36. Block Kitの構成要素 ● Layout blocks ● Block elements Layout blocks Block elements
  37. 37. Select menu with external data source 独自のデータソースからの 検索結果のリスト表示と 選択が可能 全文検索 エンジン
  38. 38. Select menu with external data source ● 2~3個程度の少量リスト数ならボタンで代用 ● 3秒以内にレスポンスを返す必要がある ● リクエスト数が心配ならmin_query_lenで調整
  39. 39. Select menu with external data source ● グルーピングはoption_groupsを使う
  40. 40. Date picker
  41. 41. Select menu with static options 時刻など、固定アイテムの リスト表示と選択が可能
  42. 42. Buttons ダイアログをモーダルで 表示することも可能
  43. 43. Block elements ● Block elementsは各種UIコンポーネントのこと ● チェックボックスやラジオボタンは無い ● 無いものはButtonsやSelect menuで代用
  44. 44. Block Kitの利用メリット ● UIコンポーネントが充実している ● パズル感覚で複雑なUI表現も可能 ● 1つのメッセージでUIが完結する ● JsonをAPIにPOSTするだけのシンプルなI/F
  45. 45. 実装する前にすること
  46. 46. Block Kit Builderでデザイン設計
  47. 47. Block Kit Builder
  48. 48. Block Kit Builder - プレビューペイン
  49. 49. Block Kit Builder - ペイロード(JSON)ペイン
  50. 50. Block Kit Builder - テスト表示用ボタン
  51. 51. Block Kit Builder - Desktop(PC)
  52. 52. Block Kit Builder - Mobile
  53. 53. Block Kitで高UXアプリを作りましょう!
  54. 54. ご清聴ありがとうございました
  55. 55. Appendix ● NAVITIME for Slack ● Block KitでリッチなSlackアプリを作る -乗換経 路案内での実例- ● Introducing Block Kit

×