Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

420 views

Published on

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

Published in: Internet
  • Be the first to comment

  • Be the first to like this

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

×