加賀さんと僕 〜艦これウィジェットの新機能とか〜

186,373 views

Published on

以前のやつ
【紹介編】 http://www.slideshare.net/otiai10/ss-26631311
【実装編】 http://www.slideshare.net/otiai10/ss-26908975

もう第3弾になっちゃったのでひとまずこれでおしまいにします。ご清聴ありがとうございました。機能要望などは引き続き受け付けております!

0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
186,373
On SlideShare
0
From Embeds
0
Number of Embeds
164,340
Actions
Shares
0
Downloads
7
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

加賀さんと僕 〜艦これウィジェットの新機能とか〜

  1. 1. 加賀さんと僕 艦これウィジェットの新機能とか @otiai10
  2. 2. はじめに
  3. 3. Thanks to
  4. 4. and
  5. 5. 井口裕香
  6. 6. 目次 - 機能増えたので紹介 - デイリー任務進捗管理 - 簡易疲労度メーター - 開発建造報告Twitter連携 - 実装の紹介 - UX考 - まとめ もうこれ第三弾なのでひとまず終わりにしますね (☝◞‸◟)☝
  7. 7. 機能増えたので紹介
  8. 8. の前に
  9. 9. 艦これのツールの中には 高機能なものが たくさんありますが、
  10. 10. 艦これウィジェットの特徴は 1. 推奨環境Chromeそのものである 2. 運営サーバにAPIリクエストを送らない この2点だけです。 機能重視の方は他のツールの 使用をおすすめします。
  11. 11. 機能増えたので紹介
  12. 12. 機能増えたので紹介 0. 大きさ変えれる別窓表示 1. 遠征入渠建造完了自動通知 2. スクショ 3. デイリー任務進捗管理 4. 簡易疲労度メーター 5. 開発・建造報告Twitter連携
  13. 13. 機能増えたので紹介 0. 大きさ変えれる別窓表示 1. 遠征入渠建造完了自動通知 2. スクショ 3. デイリー任務進捗管理←new 4. 簡易疲労度メーター←new 5. 開発・建造報告Twitter連携←new
  14. 14. デイリー任務進捗管理(自動更新進捗表)
  15. 15. デイリー任務進捗管理(着手忘れ防止アラート)
  16. 16. 簡易疲労度メーター(疑似疲労度表示)
  17. 17. 簡易疲労度メーター(疲労回復通知)
  18. 18. 開発・建造報告Twitter連携 他にも、 → みんな大好き那珂チャンのレシピ
  19. 19. ※ これらは全て 設定でオフにできます ※ 全ての機能は「実装方針」 に基づいて設計されています - 加賀さんと僕(実装編) ※ 前からあった機能については - 加賀さんと僕(紹介編)
  20. 20. 艦これウィジェットの実装
  21. 21. 艦これウィジェットの実装
  22. 22. 艦これウィジェットの実装 前述の通り艦これウィジェットは 以下の実装方針に基づいています
  23. 23. 艦これウィジェットの実装 前述の通り艦これウィジェットは 以下の実装方針に基づいています - 艦これ本家サーバに一切の負荷を 増やさないこと
  24. 24. 艦これウィジェットの実装 前述の通り艦これウィジェットは 以下の実装方針に基づいています - 艦これ本家サーバに一切の負荷を 増やさないこと - 艦これゲーム内でのユーザ体験を 改変しないこと
  25. 25. 艦これウィジェットの実装 また、サービスのデザイン方針は 以下のように考えています
  26. 26. 艦これウィジェットの実装 また、サービスのデザイン方針は 以下のように考えています - ゲーム内アクティビティを自動化する のではなく、ゲーム外アクティビティが 効率化し艦これと艦これを取り巻く環 境が充実するツール
  27. 27. 艦これウィジェットの実装 そんなこんなで 艦これウィジェットは、 色んな技術的な諦め制約がありまし た
  28. 28. 艦これウィジェットの実装 技術的な制約 - ネイティブ専ブラではないためネット ワークの中身を完全に読むことはしな かった
  29. 29. 艦これウィジェットの実装 技術的な制約 - ChromeでもDevTool出せば読め るけど、ユーザビリティの視点から望 ましくないと判断した
  30. 30. 艦これウィジェットの実装 技術的な制約 - APIを叩かず、なおかつ通信の詳細 が分からないため、 「状態」を取得することができなかった
  31. 31. 艦これウィジェットの実装 結論としては - 「状態」が分からない → トランザクションの連続的な検知に よって、ローカルに擬似的な「状態」を 構築する
  32. 32. 艦これウィジェットの実装 結論としては - 「状態」が分からない → トランザクションの連続的な検知に よって、ローカルに擬似的な「状態」を 構築する (そのため、複数PCでまたいでプレーすると艦これウィジェット が持ってる状態は不整合になります。そこに対してはちゃんと随 意修正のUI用意してます)
  33. 33. 艦これウィジェットの実装 物理的な設計(だいぶ省略) src/js ├── main.js // バックグラウンドで動くmain ├── definitions // クラスの定義 │ ├── Dispatcher.js // リクエストの検知とルーティングをする │ ├── actions // ルーティングされた後の処理の定義 │ └── models // 対応するlocalStorageなどにメソッドを生やすモデル └── pages └── view // 設定画面などで使うViewクラス
  34. 34. 艦これウィジェットの実装 物理的な設計(だいぶ省略) src/js ├── main.js // バックグラウンドで動くmain ├── definitions // クラスの定義 │ ├── Dispatcher.js // リクエストの検知とルーティングをする │ ├── actions // ルーティングされた後の処理の定義 │ └── models // 対応するlocalStorageなどにメソッドを生やすモデル └── pages └── view // 設定画面などで使うViewクラス 74ファイル?(;^ω^) リファクタで増加中 ...
  35. 35. 艦これウィジェットの実装 物理的な設計(だいぶ省略) src/js ├── main.js // バックグラウンドで動くmain ├── definitions // クラスの定義 │ ├── Dispatcher.js // リクエストの検知とルーティングをする │ ├── actions // ルーティングされた後の処理の定義 │ └── models // 対応するlocalStorageなどにメソッドを生やすモデル └── pages └── view // 設定画面などで使うViewクラス @see https://github.com/otiai10/kanColleWidget
  36. 36. UX考
  37. 37. UX考
  38. 38. UX考 UXとは 「UI」とはユーザとコミュニケーションを取るアプ リケーションの表面(Interface)であり「どう見え るか」に近い。それに対して「UX」とはコミュニ ケーションのあり方や結果がユーザに与える体 験(experience)そのものであり「どう感じるか」 「ユーザにとってどう“良い”か」に近い。
  39. 39. UX考 今回の追加機能 - デイリー任務管理 - 疲労度メーター - Twitter連携 それぞれについてUXの考える余地が ありました
  40. 40. UX考 例1)デイリー任務管理?
  41. 41. UX考 例1)デイリー任務管理? 「任務の状況が見えるようにしてほしい」という 声がありました
  42. 42. UX考 例1)デイリー任務管理? それって本当に 「状況が見たい」のか?
  43. 43. UX考 例1)デイリー任務管理? それって本当に 「状況が見たい」のか?
  44. 44. UX考 例1)デイリー任務管理? それって本当に 「状況が見たい」のか? => 「着手忘れしたくない」が正しい
  45. 45. UX考 例1)デイリー任務管理? それって本当に 「状況が見たい」のか? => 「着手忘れしたくない」が正しい => 欲しかったのは一覧表より「アラート」
  46. 46. UX考 例2)疲労度メーター?
  47. 47. UX考 例2)疲労度メーター? 「艦娘疲労度も見えるようにしてほしい」 という声も多数頂きました
  48. 48. UX考 例2)疲労度メーター? 艦娘の状態(装備とかも含めて)は 取得しようが無い
  49. 49. UX考 例2)疲労度メーター? 艦娘の状態(装備とかも含めて)は 取得しようが無い ぶっちゃけ実装しんどい...
  50. 50. UX考 例2)疲労度メーター? 「ぶっちゃけしんどいッス」 と回答したところ...
  51. 51. UX考 例2)疲労度メーター? 「ぶっちゃけしんどいッス」 と回答したところ...
  52. 52. UX考 例2)疲労度メーター? いや、キッチンタイマーだったら ご用意できます!!
  53. 53. UX考 例2)疲労度メーター? 欲しかったのは 「疲労度の可視化」ではなく 「疲労度の回復タイミングを知ること」
  54. 54. UX考 例2)疲労度メーター? 欲しかったのは 「疲労度の回復タイミングを知ること」 しかもユーザヒアリングの結果、 「キッチンタイマー」程度のこと!
  55. 55. UX考 例3)Twitter連携 そもそも、 「レシピを探す」のが大変だった
  56. 56. UX考 例3)Twitter連携 そもそも、 「統計的に正しいレシピ」 を探すのが大変
  57. 57. UX考 例3)Twitter連携 「統計的に正しい」ことを捨てれば、 探すのも「大変」ではなくなるのでは?
  58. 58. UX考 例3)Twitter連携 => 「統計的に正しくない」けど、 「探すのが楽しい」レシピ探し
  59. 59. UX考 例3)Twitter連携 最近改二来ましたね
  60. 60. UX考 例3)Twitter連携 ああ、あの耳障りな
  61. 61. UX考 例3)Twitter連携 ですよね、分かります
  62. 62. UX考 例3)Twitter連携 それはできません(´;ω;`)
  63. 63. UX考 例3)Twitter連携 思わずリツイートしました
  64. 64. UX考 例3)Twitter連携 察し(´;ω;`)
  65. 65. UX考 例3)Twitter連携 こちらで見れます https://twitter.com/search?q=% 23kancolle_ship https://twitter.com/search?q=% 23kancolle_item
  66. 66. UX考 そんなこんなで... 「何を」「どう見せるか」も大事だけど 「どんな体験をしたいか」を考えると 仕様が明確になって実装が楽になったり、 新しい価値の発見・提供につながったり するのだなぁみつをというのを 身を以て体験したのでありました
  67. 67. まとめ
  68. 68. まとめ ● - 新しい機能増えたけどAPIは断じ て叩いてないです ● - Chrome拡張の性質上いろいろ 工夫しました ● - UX考えて実装に落とし込むのた のしい ● ✌('ω'✌ )三✌('ω')✌三( ✌'ω')✌
  69. 69. まとめ ではなく ● - 新しい機能増えたけどAPIは断じ て叩いてないです ● - Chrome拡張の性質上いろいろ 工夫しました ● - UX考えて実装に落とし込むのた のしい ● ✌('ω'✌ )三✌('ω')✌三( ✌'ω')✌
  70. 70. だいじなまとめ
  71. 71. 「艦これ」たのしいので 長くつづいてほしいと ユーザとして切実に 思います
  72. 72. したがって、運営さんからの 要請があれば、もちろん開発 ・提供は止めますのでご了承 ください
  73. 73. 長くつづいてほしいと ユーザとして 切実に思います
  74. 74. 最近は 佐倉綾音すげーな と思います
  75. 75. あと洲崎綾
  76. 76. Thanks to
  77. 77. 井口裕香
  78. 78. and
  79. 79. You all, 提督!

×