Your SlideShare is downloading. ×
加賀さんと僕 〜艦これウィジェットの新機能とか〜
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

129,197
views

Published on

以前のやつ …

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

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


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

No Downloads
Views
Total Views
129,197
On Slideshare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
5
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×