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

はじめに

Thanks to

and

井口裕香

目次

- 機能増えたので紹介 - デイリー任務進捗管理

- 簡易疲労度メーター

- 開発建造報告Twitter連携

- 実装の紹介

- UX考- まとめもうこれ第三弾なのでひとまず終わりにしますね (☝◞‸◟)☝

機能増えたので紹介

の前に

艦これのツールの中には

高機能なものが

たくさんありますが、

艦これウィジェットの特徴は

1. 推奨環境Chromeそのものである2. 運営サーバにAPIリクエストを送らない

この2点だけです。

機能重視の方は他のツールの

使用をおすすめします。

機能増えたので紹介

機能増えたので紹介

0. 大きさ変えれる別窓表示

1. 遠征入渠建造完了自動通知

2. スクショ

3. デイリー任務進捗管理

4. 簡易疲労度メーター

5. 開発・建造報告Twitter連携

機能増えたので紹介

0. 大きさ変えれる別窓表示

1. 遠征入渠建造完了自動通知

2. スクショ

3. デイリー任務進捗管理←new4. 簡易疲労度メーター←new5. 開発・建造報告Twitter連携←new

デイリー任務進捗管理（自動更新進捗表）

デイリー任務進捗管理（着手忘れ防止アラート）

簡易疲労度メーター（疑似疲労度表示）

簡易疲労度メーター（疲労回復通知）

他にも、→ みんな大好き那珂ﾁｬﾝのレシピ

開発・建造報告Twitter連携

※ これらは全て

設定でオフにできます

※ 全ての機能は「実装方針」

に基づいて設計されています - 加賀さんと僕（実装編）

※ 前からあった機能については - 加賀さんと僕（紹介編）

艦これウィジェットの実装

艦これウィジェットの実装

艦これウィジェットの実装

前述の通り艦これウィジェットは

以下の実装方針に基づいています

艦これウィジェットの実装

前述の通り艦これウィジェットは

以下の実装方針に基づいています

- 艦これ本家サーバに一切の負荷を増やさないこと

艦これウィジェットの実装

前述の通り艦これウィジェットは

以下の実装方針に基づいています

- 艦これ本家サーバに一切の負荷を増やさないこと

- 艦これゲーム内でのユーザ体験を改変しないこと

艦これウィジェットの実装

また、サービスのデザイン方針は

以下のように考えています

艦これウィジェットの実装

また、サービスのデザイン方針は

以下のように考えています

- ゲーム内アクティビティを自動化するのではなく、ゲーム外アクティビティが効率化し艦これと艦これを取り巻く環境が充実するツール

艦これウィジェットの実装

そんなこんなで

艦これウィジェットは、

色んな技術的な諦め制約がありました

艦これウィジェットの実装

技術的な制約

- ネイティブ専ブラではないためネットワークの中身を完全に読むことはしなかった

艦これウィジェットの実装

技術的な制約

- ChromeでもDevTool出せば読めるけど、ユーザビリティの視点から望ましくないと判断した

艦これウィジェットの実装

技術的な制約

- APIを叩かず、なおかつ通信の詳細が分からないため、

「状態」を取得することができなかった

艦これウィジェットの実装

結論としては

- 「状態」が分からない

→ トランザクションの連続的な検知によって、ローカルに擬似的な「状態」を構築する

艦これウィジェットの実装

結論としては

- 「状態」が分からない

→ トランザクションの連続的な検知によって、ローカルに擬似的な「状態」を構築する（そのため、複数PCでまたいでプレーすると艦これウィジェットが持ってる状態は不整合になります。そこに対してはちゃんと随意修正のUI用意してます）

艦これウィジェットの実装

物理的な設計（だいぶ省略）src/js├── main.js // バックグラウンドで動くmain├── definitions // クラスの定義

│ ├── Dispatcher.js // リクエストの検知とルーティングをする

│ ├── actions // ルーティングされた後の処理の定義

│ └── models // 対応するlocalStorageなどにメソッドを生やすモデル

└── pages └── view // 設定画面などで使うViewクラス

艦これウィジェットの実装

物理的な設計（だいぶ省略）src/js├── main.js // バックグラウンドで動くmain├── definitions // クラスの定義

│ ├── Dispatcher.js // リクエストの検知とルーティングをする

│ ├── actions // ルーティングされた後の処理の定義

│ └── models // 対応するlocalStorageなどにメソッドを生やすモデル

└── pages └── view // 設定画面などで使うViewクラス

74ファイル？（；^ω^）リファクタで増加中 ...

艦これウィジェットの実装

物理的な設計（だいぶ省略）src/js├── main.js // バックグラウンドで動くmain├── definitions // クラスの定義

│ ├── Dispatcher.js // リクエストの検知とルーティングをする

│ ├── actions // ルーティングされた後の処理の定義

│ └── models // 対応するlocalStorageなどにメソッドを生やすモデル

└── pages └── view // 設定画面などで使うViewクラス

@see https://github.com/otiai10/kanColleWidget

UX考

UX考

UX考

UXとは「UI」とはユーザとコミュニケーションを取るアプリケーションの表面(Interface)であり「どう見えるか」に近い。それに対して「UX」とはコミュニケーションのあり方や結果がユーザに与える体験(experience)そのものであり「どう感じるか」「ユーザにとってどう“良い”か」に近い。

UX考

今回の追加機能

- デイリー任務管理

- 疲労度メーター

- Twitter連携

それぞれについてUXの考える余地がありました

UX考

例1)デイリー任務管理？

UX考

例1)デイリー任務管理？「任務の状況が見えるようにしてほしい」という声がありました

UX考

例1)デイリー任務管理？それって本当に

「状況が見たい」のか？

UX考

例1)デイリー任務管理？それって本当に

「状況が見たい」のか？

UX考

例1)デイリー任務管理？それって本当に

「状況が見たい」のか？

=> 「着手忘れしたくない」が正しい

UX考

例1)デイリー任務管理？それって本当に

「状況が見たい」のか？

=> 「着手忘れしたくない」が正しい

=> 欲しかったのは一覧表より「アラート」

UX考

例2)疲労度メーター？

UX考

例2)疲労度メーター？「艦娘疲労度も見えるようにしてほしい」

という声も多数頂きました

UX考

例2)疲労度メーター？艦娘の状態（装備とかも含めて）は

取得しようが無い

UX考

例2)疲労度メーター？艦娘の状態（装備とかも含めて）は

取得しようが無い

ぶっちゃけ実装しんどい...

UX考

例2)疲労度メーター？「ぶっちゃけしんどいｯｽ」

と回答したところ...

UX考

例2)疲労度メーター？「ぶっちゃけしんどいｯｽ」

と回答したところ...

UX考

例2)疲労度メーター？

いや、キッチンタイマーだったら

ご用意できます！！

UX考

例2)疲労度メーター？

欲しかったのは

「疲労度の可視化」ではなく

「疲労度の回復タイミングを知ること」

UX考

例2)疲労度メーター？

欲しかったのは

「疲労度の回復タイミングを知ること」

しかもユーザヒアリングの結果、

「キッチンタイマー」程度のこと！

UX考

例3)Twitter連携そもそも、

「レシピを探す」のが大変だった

UX考

例3)Twitter連携そもそも、

「統計的に正しいレシピ」

を探すのが大変

UX考

例3)Twitter連携「統計的に正しい」ことを捨てれば、

探すのも「大変」ではなくなるのでは？

UX考

例3)Twitter連携

=>「統計的に正しくない」けど、

「探すのが楽しい」レシピ探し

UX考

例3)Twitter連携

最近改二来ましたね

UX考

例3)Twitter連携

ああ、あの耳障りな

UX考

例3)Twitter連携

ですよね、分かります

UX考

例3)Twitter連携

それはできません(´；ω；｀)

UX考

例3)Twitter連携

思わずリツイートしました

UX考

例3)Twitter連携

察し(´；ω；｀)

UX考

例3)Twitter連携

こちらで見れます

https://twitter.com/search?q=%23kancolle_shiphttps://twitter.com/search?q=%23kancolle_item

UX考

そんなこんなで...「何を」「どう見せるか」も大事だけど

「どんな体験をしたいか」を考えると

仕様が明確になって実装が楽になったり、

新しい価値の発見・提供につながったり

するのだなぁみつをというのを

身を以て体験したのでありました

まとめ

まとめ

● - 新しい機能増えたけどAPIは断じて叩いてないです

● - Chrome拡張の性質上いろいろ工夫しました

● - UX考えて実装に落とし込むのたのしい

● ✌('ω'✌ )三✌('ω')✌三( ✌'ω')✌

まとめ

● - 新しい機能増えたけどAPIは断じて叩いてないです

● - Chrome拡張の性質上いろいろ工夫しました

● - UX考えて実装に落とし込むのたのしい

● ✌('ω'✌ )三✌('ω')✌三( ✌'ω')✌

ではなく

だいじなまとめ

「艦これ」たのしいので長くつづいてほしいとユーザとして切実に思います

したがって、運営さんからの要請があれば、もちろん開発・提供は止めますのでご了承ください

長くつづいてほしいとユーザとして切実に思います

最近は佐倉綾音すげーなと思います

あと洲崎綾

Thanks to

井口裕香

and

You all, 提督！