Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
失敗しない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の使いどころ~
Nächste SlideShare
Wird geladen in …5
×

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

576 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

失敗しない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

×