SlideShare ist ein Scribd-Unternehmen logo
1 von 85
Downloaden Sie, um offline zu lesen
加賀さんと僕
艦これウィジェットの新機能とか
@otiai10
はじめに
Thanks to
and
井口裕香
目次
- 機能増えたので紹介
- デイリー任務進捗管理
- 簡易疲労度メーター
- 開発建造報告Twitter連携

- 実装の紹介
- UX考
- まとめ
もうこれ第三弾なのでひとまず終わりにしますね (☝◞‸◟)☝
機能増えたので紹介
の前に
艦これのツールの中には
高機能なものが
たくさんありますが、
艦これウィジェットの特徴は
1. 推奨環境Chromeそのものである
2. 運営サーバにAPIリクエストを送らない
この2点だけです。
機能重視の方は他のツールの
使用をおすすめします。
機能増えたので紹介
機能増えたので紹介
0. 大きさ変えれる別窓表示
1. 遠征入渠建造完了自動通知
2. スクショ
3. デイリー任務進捗管理
4. 簡易疲労度メーター
5. 開発・建造報告Twitter連携
機能増えたので紹介
0. 大きさ変えれる別窓表示
1. 遠征入渠建造完了自動通知
2. スクショ
3. デイリー任務進捗管理←new
4. 簡易疲労度メーター←new
5. 開発・建造報告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_ship
https://twitter.com/search?q=%
23kancolle_item
UX考
そんなこんなで...
「何を」「どう見せるか」も大事だけど
「どんな体験をしたいか」を考えると
仕様が明確になって実装が楽になったり、
新しい価値の発見・提供につながったり
するのだなぁみつをというのを
身を以て体験したのでありました
まとめ
まとめ
● - 新しい機能増えたけどAPIは断じ
て叩いてないです
● - Chrome拡張の性質上いろいろ
工夫しました
● - UX考えて実装に落とし込むのた
のしい
● ✌('ω'✌ )三✌('ω')✌三( ✌'ω')✌
まとめ

ではなく

● - 新しい機能増えたけどAPIは断じ
て叩いてないです
● - Chrome拡張の性質上いろいろ
工夫しました
● - UX考えて実装に落とし込むのた
のしい
● ✌('ω'✌ )三✌('ω')✌三( ✌'ω')✌
だいじなまとめ
「艦これ」たのしいので
長くつづいてほしいと
ユーザとして切実に
思います
したがって、運営さんからの
要請があれば、もちろん開発
・提供は止めますのでご了承
ください
長くつづいてほしいと
ユーザとして
切実に思います
最近は
佐倉綾音すげーな
と思います
あと洲崎綾
Thanks to
井口裕香
and
You all, 提督!

Weitere ähnliche Inhalte

Was ist angesagt?

剣と魔法のログレス(PC版)の自慢と課題
剣と魔法のログレス(PC版)の自慢と課題剣と魔法のログレス(PC版)の自慢と課題
剣と魔法のログレス(PC版)の自慢と課題AimingStudy
 
Al mininum 47redmine-2nd
Al mininum 47redmine-2ndAl mininum 47redmine-2nd
Al mininum 47redmine-2ndmikoto20000
 
GruntでJavaScript 前作業の自動化!
GruntでJavaScript 前作業の自動化!GruntでJavaScript 前作業の自動化!
GruntでJavaScript 前作業の自動化!leverages_event
 
Iemoto hatamotoハンズオン
Iemoto hatamotoハンズオンIemoto hatamotoハンズオン
Iemoto hatamotoハンズオン西村 州平
 
うわ…私のEmacs力、低すぎ...?
うわ…私のEmacs力、低すぎ...?うわ…私のEmacs力、低すぎ...?
うわ…私のEmacs力、低すぎ...?Masahiro Sano
 
ゲームサーバ開発現場の考え方
ゲームサーバ開発現場の考え方ゲームサーバ開発現場の考え方
ゲームサーバ開発現場の考え方Daisaku Mochizuki
 
SurfaceTextureとシェーダを使って遊んでみる
SurfaceTextureとシェーダを使って遊んでみるSurfaceTextureとシェーダを使って遊んでみる
SurfaceTextureとシェーダを使って遊んでみるTatsuya Matsumoto
 
PhotonCloudで一ヶ月ゲーム作った話
PhotonCloudで一ヶ月ゲーム作った話PhotonCloudで一ヶ月ゲーム作った話
PhotonCloudで一ヶ月ゲーム作った話Hiroto Imoto
 
一人でもはじめるGitでバージョン管理
一人でもはじめるGitでバージョン管理一人でもはじめるGitでバージョン管理
一人でもはじめるGitでバージョン管理Takafumi Yoshida
 
Flash Playerの作り方
Flash Playerの作り方Flash Playerの作り方
Flash Playerの作り方Yu Kobayashi
 
【サポーターズCoLab勉強会】「美少女になりたい…」お手軽VTuber入門ハンズオン
【サポーターズCoLab勉強会】「美少女になりたい…」お手軽VTuber入門ハンズオン【サポーターズCoLab勉強会】「美少女になりたい…」お手軽VTuber入門ハンズオン
【サポーターズCoLab勉強会】「美少女になりたい…」お手軽VTuber入門ハンズオンKohki Nakaji
 
Node.jsで対戦ゲーム作ったよ
Node.jsで対戦ゲーム作ったよNode.jsで対戦ゲーム作ったよ
Node.jsで対戦ゲーム作ったよYuusuke Takeuchi
 
Html5の通信対戦ゲームをテスト駆動開発で作ってみた
Html5の通信対戦ゲームをテスト駆動開発で作ってみたHtml5の通信対戦ゲームをテスト駆動開発で作ってみた
Html5の通信対戦ゲームをテスト駆動開発で作ってみたYuusuke Takeuchi
 
第8回 福岡西区勉強会
第8回 福岡西区勉強会第8回 福岡西区勉強会
第8回 福岡西区勉強会Shinya Kinoshita
 
WordCamp Kansai 2014 セキュリティ&バックアップ
WordCamp Kansai 2014 セキュリティ&バックアップWordCamp Kansai 2014 セキュリティ&バックアップ
WordCamp Kansai 2014 セキュリティ&バックアップTomoyuki Sugita
 

Was ist angesagt? (20)

What webpage calls.
What webpage calls.What webpage calls.
What webpage calls.
 
剣と魔法のログレス(PC版)の自慢と課題
剣と魔法のログレス(PC版)の自慢と課題剣と魔法のログレス(PC版)の自慢と課題
剣と魔法のログレス(PC版)の自慢と課題
 
Al mininum 47redmine-2nd
Al mininum 47redmine-2ndAl mininum 47redmine-2nd
Al mininum 47redmine-2nd
 
Android gameprogramming
Android gameprogrammingAndroid gameprogramming
Android gameprogramming
 
anyframeを使おう
anyframeを使おうanyframeを使おう
anyframeを使おう
 
GruntでJavaScript 前作業の自動化!
GruntでJavaScript 前作業の自動化!GruntでJavaScript 前作業の自動化!
GruntでJavaScript 前作業の自動化!
 
Iemoto hatamotoハンズオン
Iemoto hatamotoハンズオンIemoto hatamotoハンズオン
Iemoto hatamotoハンズオン
 
うわ…私のEmacs力、低すぎ...?
うわ…私のEmacs力、低すぎ...?うわ…私のEmacs力、低すぎ...?
うわ…私のEmacs力、低すぎ...?
 
ゲームサーバ開発現場の考え方
ゲームサーバ開発現場の考え方ゲームサーバ開発現場の考え方
ゲームサーバ開発現場の考え方
 
SurfaceTextureとシェーダを使って遊んでみる
SurfaceTextureとシェーダを使って遊んでみるSurfaceTextureとシェーダを使って遊んでみる
SurfaceTextureとシェーダを使って遊んでみる
 
PhotonCloudで一ヶ月ゲーム作った話
PhotonCloudで一ヶ月ゲーム作った話PhotonCloudで一ヶ月ゲーム作った話
PhotonCloudで一ヶ月ゲーム作った話
 
一人でもはじめるGitでバージョン管理
一人でもはじめるGitでバージョン管理一人でもはじめるGitでバージョン管理
一人でもはじめるGitでバージョン管理
 
Flash Playerの作り方
Flash Playerの作り方Flash Playerの作り方
Flash Playerの作り方
 
JS/Canvas Tutorial3
JS/Canvas Tutorial3JS/Canvas Tutorial3
JS/Canvas Tutorial3
 
em-dosbox
em-dosboxem-dosbox
em-dosbox
 
【サポーターズCoLab勉強会】「美少女になりたい…」お手軽VTuber入門ハンズオン
【サポーターズCoLab勉強会】「美少女になりたい…」お手軽VTuber入門ハンズオン【サポーターズCoLab勉強会】「美少女になりたい…」お手軽VTuber入門ハンズオン
【サポーターズCoLab勉強会】「美少女になりたい…」お手軽VTuber入門ハンズオン
 
Node.jsで対戦ゲーム作ったよ
Node.jsで対戦ゲーム作ったよNode.jsで対戦ゲーム作ったよ
Node.jsで対戦ゲーム作ったよ
 
Html5の通信対戦ゲームをテスト駆動開発で作ってみた
Html5の通信対戦ゲームをテスト駆動開発で作ってみたHtml5の通信対戦ゲームをテスト駆動開発で作ってみた
Html5の通信対戦ゲームをテスト駆動開発で作ってみた
 
第8回 福岡西区勉強会
第8回 福岡西区勉強会第8回 福岡西区勉強会
第8回 福岡西区勉強会
 
WordCamp Kansai 2014 セキュリティ&バックアップ
WordCamp Kansai 2014 セキュリティ&バックアップWordCamp Kansai 2014 セキュリティ&バックアップ
WordCamp Kansai 2014 セキュリティ&バックアップ
 

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

【CEDEC2018】一歩先のUnityでのパフォーマンス/メモリ計測、デバッグ術
【CEDEC2018】一歩先のUnityでのパフォーマンス/メモリ計測、デバッグ術【CEDEC2018】一歩先のUnityでのパフォーマンス/メモリ計測、デバッグ術
【CEDEC2018】一歩先のUnityでのパフォーマンス/メモリ計測、デバッグ術Unity Technologies Japan K.K.
 
Enterprise Redmine
Enterprise RedmineEnterprise Redmine
Enterprise RedmineDai FUJIHARA
 
X dev 20121106
X dev 20121106X dev 20121106
X dev 20121106Ken Azuma
 
OpManager導入事例 日テレITプロデュース様
OpManager導入事例 日テレITプロデュース様OpManager導入事例 日テレITプロデュース様
OpManager導入事例 日テレITプロデュース様ManageEngine, Zoho Corporation
 
Ec cube user group tokyo mtg 2.13に向けて
Ec cube user group tokyo mtg 2.13に向けてEc cube user group tokyo mtg 2.13に向けて
Ec cube user group tokyo mtg 2.13に向けてAyumu Kawaguchi
 
その素敵なUI基盤を目指して・・・
その素敵なUI基盤を目指して・・・その素敵なUI基盤を目指して・・・
その素敵なUI基盤を目指して・・・KLab Inc. / Tech
 
AppPot製品概要
AppPot製品概要AppPot製品概要
AppPot製品概要Ryohei Sogo
 
Efsta cod2012 master_for_slideshare
Efsta cod2012 master_for_slideshareEfsta cod2012 master_for_slideshare
Efsta cod2012 master_for_slideshareTakahito Sugishita
 
Metroアプリケーションのwin8/wp7の効率的ソース運用を考える
Metroアプリケーションのwin8/wp7の効率的ソース運用を考えるMetroアプリケーションのwin8/wp7の効率的ソース運用を考える
Metroアプリケーションのwin8/wp7の効率的ソース運用を考えるTakahito Sugishita
 
製造業のプロジェクトマネジメント -ライン増設編-
製造業のプロジェクトマネジメント -ライン増設編-製造業のプロジェクトマネジメント -ライン増設編-
製造業のプロジェクトマネジメント -ライン増設編-K K
 
【eVar7】UX4KPI_web担当者forum_part1.2
【eVar7】UX4KPI_web担当者forum_part1.2【eVar7】UX4KPI_web担当者forum_part1.2
【eVar7】UX4KPI_web担当者forum_part1.2Shinichiro Oho
 
【Pamphlet】「一括請求Assist」のご案内
【Pamphlet】「一括請求Assist」のご案内【Pamphlet】「一括請求Assist」のご案内
【Pamphlet】「一括請求Assist」のご案内ikkatuseikyuuassist
 
「一括請求Assist」のパンフレット
「一括請求Assist」のパンフレット「一括請求Assist」のパンフレット
「一括請求Assist」のパンフレットikkatuseikyuuassist
 
Css nite(2010.09.23)
Css nite(2010.09.23)Css nite(2010.09.23)
Css nite(2010.09.23)Yoshiki Ushida
 
Reactにflowtypeを組み合わせることで、我々は何を楽にできたか
Reactにflowtypeを組み合わせることで、我々は何を楽にできたかReactにflowtypeを組み合わせることで、我々は何を楽にできたか
Reactにflowtypeを組み合わせることで、我々は何を楽にできたかLINE Corporation
 
2014-01-28 Operation in the future
2014-01-28 Operation in the future2014-01-28 Operation in the future
2014-01-28 Operation in the futureOperation Lab, LLC.
 
ネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConViewネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConViewRakuten Group, Inc.
 
続・AppSheetを使い倒してみた ~ App Makerで開発したアプリをAppSheetに移行する
続・AppSheetを使い倒してみた ~ App Makerで開発したアプリをAppSheetに移行する続・AppSheetを使い倒してみた ~ App Makerで開発したアプリをAppSheetに移行する
続・AppSheetを使い倒してみた ~ App Makerで開発したアプリをAppSheetに移行するYukio Okajima
 

Ähnlich wie 加賀さんと僕 〜艦これウィジェットの新機能とか〜 (20)

【CEDEC2018】一歩先のUnityでのパフォーマンス/メモリ計測、デバッグ術
【CEDEC2018】一歩先のUnityでのパフォーマンス/メモリ計測、デバッグ術【CEDEC2018】一歩先のUnityでのパフォーマンス/メモリ計測、デバッグ術
【CEDEC2018】一歩先のUnityでのパフォーマンス/メモリ計測、デバッグ術
 
Enterprise Redmine
Enterprise RedmineEnterprise Redmine
Enterprise Redmine
 
X dev 20121106
X dev 20121106X dev 20121106
X dev 20121106
 
OpManager導入事例 日テレITプロデュース様
OpManager導入事例 日テレITプロデュース様OpManager導入事例 日テレITプロデュース様
OpManager導入事例 日テレITプロデュース様
 
Ec cube user group tokyo mtg 2.13に向けて
Ec cube user group tokyo mtg 2.13に向けてEc cube user group tokyo mtg 2.13に向けて
Ec cube user group tokyo mtg 2.13に向けて
 
Redmine Applied for Large Scale
Redmine Applied  for Large ScaleRedmine Applied  for Large Scale
Redmine Applied for Large Scale
 
その素敵なUI基盤を目指して・・・
その素敵なUI基盤を目指して・・・その素敵なUI基盤を目指して・・・
その素敵なUI基盤を目指して・・・
 
AppPot製品概要
AppPot製品概要AppPot製品概要
AppPot製品概要
 
Efsta cod2012 master_for_slideshare
Efsta cod2012 master_for_slideshareEfsta cod2012 master_for_slideshare
Efsta cod2012 master_for_slideshare
 
Metroアプリケーションのwin8/wp7の効率的ソース運用を考える
Metroアプリケーションのwin8/wp7の効率的ソース運用を考えるMetroアプリケーションのwin8/wp7の効率的ソース運用を考える
Metroアプリケーションのwin8/wp7の効率的ソース運用を考える
 
製造業のプロジェクトマネジメント -ライン増設編-
製造業のプロジェクトマネジメント -ライン増設編-製造業のプロジェクトマネジメント -ライン増設編-
製造業のプロジェクトマネジメント -ライン増設編-
 
【eVar7】UX4KPI_web担当者forum_part1.2
【eVar7】UX4KPI_web担当者forum_part1.2【eVar7】UX4KPI_web担当者forum_part1.2
【eVar7】UX4KPI_web担当者forum_part1.2
 
【Pamphlet】「一括請求Assist」のご案内
【Pamphlet】「一括請求Assist」のご案内【Pamphlet】「一括請求Assist」のご案内
【Pamphlet】「一括請求Assist」のご案内
 
「一括請求Assist」のパンフレット
「一括請求Assist」のパンフレット「一括請求Assist」のパンフレット
「一括請求Assist」のパンフレット
 
Css nite(2010.09.23)
Css nite(2010.09.23)Css nite(2010.09.23)
Css nite(2010.09.23)
 
Reactにflowtypeを組み合わせることで、我々は何を楽にできたか
Reactにflowtypeを組み合わせることで、我々は何を楽にできたかReactにflowtypeを組み合わせることで、我々は何を楽にできたか
Reactにflowtypeを組み合わせることで、我々は何を楽にできたか
 
2014-01-28 Operation in the future
2014-01-28 Operation in the future2014-01-28 Operation in the future
2014-01-28 Operation in the future
 
Stac2014 石川
Stac2014 石川Stac2014 石川
Stac2014 石川
 
ネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConViewネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConView
 
続・AppSheetを使い倒してみた ~ App Makerで開発したアプリをAppSheetに移行する
続・AppSheetを使い倒してみた ~ App Makerで開発したアプリをAppSheetに移行する続・AppSheetを使い倒してみた ~ App Makerで開発したアプリをAppSheetに移行する
続・AppSheetを使い倒してみた ~ App Makerで開発したアプリをAppSheetに移行する
 

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