Room metro Tokyo #3 発表資料です。

提督業は忙しい！Internal of KanColleViewer

2014/01/18 Room metro Tokyo #3

Manato KAMEYA (@Grabacr07)

Subject

• 提督業も忙しい！という「艦これ」ツールを開発した

http://grabacr.net/kancolleviewer

• 公開から 3 日で 10,000 downloads という反響

• せっかくなので、中身のお話を

− どうしてこのツールを作ったか？

− どういう設計になってるのか？

− 内部と UI の開発のための Tips… などを共有できれば幸いです

http://grabacr.net/kancolleviewer

Agenda

デスクトップアプリがこの先生きのこるには

Road to

KanColleViewer

UI &

WPF Themes

Design

Conclusion

提督業は忙しい！Internal of KanColleViewer

• 内容は個人に帰属します所属する組織を代表するものではありません

• 艦これ成分強めです未プレイの方はごめんなさい

Introduction

Self Introduction

亀谷学人 (かめやまなと)

• Work

− 拝承業者？ (メーカー系 SIer 所属エンジニア)

− C# + WPF (Windows Client Application 開発)

• Private activity

− Twitter: @Grabacr07 (ぐらばく)

− http://grabacr.net/

− めとべや東京勉強会スタッフなんかずっと目が死んでる

https://twitter.com/Grabacr07

http://grabacr.net/

http://metrostyledev.net/

Self Introduction

• 2013/07/27 着任、舞鶴鎮守府

• イベント 8 月: E2 で終了…

11 月: E5, E6, E7 踏破

• 近況艦隊司令部 Lv. 102

図鑑回収 153/155 (98 %)

残り: 大和改・Верный

• 大型艦建造大鳳: 7 回目で入手 (3500/3500/6000/6000/20)

大和: 19 回目で入手 (4000/5000/6000/2000/1)

資源やばい

ケッコン準備できました

「提督業も忙しい！」ができるまで

Road to KanColleViewer

Feature of KanColle

• このゲームの特徴

羅針盤は回すものではない !

駆逐艦じゃなくて戦艦を狙ってくれ！ビッグセブンの力とは何だったのか…

Feature of KanColle

• このゲームの特徴

行先がランダムで決まる(祈って)

戦闘中は眺めてるだけ

プレイヤーは戦術レベルで戦闘に (ほぼ) 介入できない

Feature of KanColle

• プレイヤーって何してるの？

− 艦隊の編成

− 資源を消費して新しい艦を建造無茶な大型艦建造… ダメ、ゼッタイ。

− 資源を消費して新しい装備を開発

− 資源を消費して出撃

− 資源を得るために遠征 etc…

Feature of KanColle

• プレイヤーって何してるの？

− 艦隊の編成

− 資源を消費して新しい艦を建造無茶な大型艦建造… ダメ、ゼッタイ。

− 資源を消費して新しい装備を開発

− 資源を消費して出撃

− 資源を得るために遠征 etc…

• 燃料• 鋼材• 弾薬• ボーキサイト

資源がすべて！

艦これの本質は「兵站 (Military Logistics)」にあると思います

Motivation of development

• 適切な兵站管理をしたい！ (攻略のために)

「物資の配給、整備、兵員の展開や衛生、施設の構築や維持などが含まれる」by Wikipedia



• プレイ中の脳内


艦娘かわいい！！！

兵站管理

計画情報整理時間管理



• プレイ中の脳内


艦娘かわいい！！！

兵站管理

計画情報整理時間管理

資源 -> 戦力への変換いかにして効率上げるか

(ここを楽しんでる)

ここを何とか楽にしたい…



• UI デザインが割とアレ

− 必要な情報にアクセスしにくい

▫ バケツの残数見られない

▫ 所属艦娘が一覧できない

▫ etc…

− 画面遷移が重たい

▫ 母港 (ホーム画面) に戻る度に

すべての艦娘データを DL …



• 提督業には時間がかかる

− (上記はかなり極端な例としても) 社畜にはつらい拘束時間

− 他作業と並行できるプレイスタイルが求められる

「マップ攻略時に戦艦・正規空母を運用しない」縛りプレイのＫ氏、11 月イベントの E4 について

「65 時間かけたけどクリアできませんでした！」

https://twitter.com/kurosawa0626

https://twitter.com/kurosawa0626

Development course

• 適切な兵站管理のために

− 効率的な "ながらプレイ" を実現したい

− 公開されている範囲でゲーム内のリソースを可視化・時間管理・通知

• 守らなければならないこと

− マクロ・チート・サーバーに負荷をかける行為

▫ リクエスト送信

▫ 通信内容の改変

暗号化されていない通信内容を含む

厳禁艦これ開発/運営チームに

ご迷惑をかけないのが大前提

楽をするための努力を惜しまないのがデベロッパーですよね！

Development course

• ちなみに開発環境& プレイ環境

作業領域が広いのでゲーム本体と情報をまとめないと迷子に

縦長のウィンドウにして画面の端に置いておきたい

遠征とか入渠とか終わったら画面と音で通知がほしい…

KanColleViewer

• Windows Desktop app

− .NET Framework 4.5

− Visual C# + WPF

• 艦これプレイングツール

− 内臓ブラウザー

Internet Explorer Shell

− ネットワークキャプチャ

FiddlerCore

基本設計 / 艦これの通信内容を見るためには

Design

Design

かっこいい UI！

タブで各画面を切り替え…

艦娘の装備アイコン表示…

スクリーンショット撮影…

艦これデータ！

ネットワークキャプチャ…

艦娘一覧の更新イベント…

遠征完了したらイベント…

Design









call

event

XAML が関係する部分 XAML が関係しない部分

View / ViewModel Model

Design









eventView / ViewModel Model

ServerInternet Explorer

Client(Flash Player)

Fid

dle

rCo

re

call

Design

KanColleViewer.exe

KanColleWrapper.dll

Server

Master

Homeport

Ships

ShipTypes

SlotItems

Admiral

Ships

SlotItems

Internet Explorer

Client(Flash Player)

Fid

dle

rCo

re

event

FiddlerCore

• ネットワークキャプチャ

− AfterSessionComplete イベントを Rx で

− Path によってパース処理を振り分け

▫ /kcsapi/api_get_member/deck … 艦隊編成情報

▫ /kcsapi/api_get_member/ship … 所属するすべての艦娘の情報

▫ /kcsapi/api_get_member/slotitem … 保有するすべての装備の情報

▫ /kcsapi/api_get_master/ship … すべての艦娘の定義情報

LINQ ですから！

.Where(predicate) で振り分けRx の得意技

Twitter クライアントの UserStreams 対応とかに応用してください

JSON -> C#

• JSON 対応クラス生成

svdata={"api_result":1,"api_result_msg":"¥u6210¥u529f","api_data":[{"api_member_id":363789,"api_id":1,"api_name":"¥u5f13¥u9053¥u90e8","api_name_id":"112759902","api_mission":[0,0,0,0],"api_flagship":"0","api_ship":[681,184,554,364,1490,1269]},{"api_member_id":363789,"api_id":2,"api_name":"¥u7b2c¥u4e00¥u6c34¥u96f7¥u6226¥u968a","api_name_id":"111744015","api_mission":[1,9,1382989946530,0],"api_flagship":"0","api_ship":[13,20,12,387,54,43]},{"api_member_id":363789,"api_id":3,"api_name":"¥u7b2c¥u4e8c¥u6c34¥u96f7¥u6226¥u968a","api_name_id":"111744021","api_mission":[1,13,1382989964246,0],"api_flagship":"0","api_ship":[26,18,403,530,1096,1704]},{"api_member_id":363789,"api_id":4,"api_name":"¥u7a7a¥u6bcd¥u6a5f¥u52d5¥u90e8¥u968a","api_name_id":"111323146","api_mission":[1,15,1383020303668,0],"api_flagship":"0","api_ship":[332,174,539,225,1705,1022]}]}

JSON text (“svdata=“ を除いた部分) をクリップボードにコピーして…

JSON -> C#


svdata={"api_result":1,"api_result_msg":"¥u6210¥u529f","api_data":[{"api_member_id":363789,"api_id":1,"api_name":"¥u5f13¥u9053¥u90e8","api_name_id":"112759902","api_mission":[0,0,0,0],"api_flagship":"0","api_ship":[681,184,554,364,1490,1269]},{"api_member_id":363789,"api_id":2,"api_name":"¥u7b2c¥u4e00¥u6c34¥u96f7¥u6226¥u968a","api_name_id":"111744015","api_mission":[1,9,1382989946530,0],"api_flagship":"0","api_ship":[13,20,12,387,54,43]},{"api_member_id":363789,"api_id":3,"api_name":"¥u7b2c¥u4e8c¥u6c34¥u96f7¥u6226¥u968a","api_name_id":"111744021","api_mission":[1,13,1382989964246,0],"api_flagship":"0","api_ship":[26,18,403,530,1096,1704]},{"api_member_id":363789,"api_id":4,"api_name":"¥u7a7a¥u6bcd¥u6a5f¥u52d5¥u90e8¥u968a","api_name_id":"111323146","api_mission":[1,15,1383020303668,0],"api_flagship":"0","api_ship":[332,174,539,225,1705,1022]}]}

JSON text (“svdata=“ を除いた部分) をクリップボードにコピーして…

自動生成！

JSON -> C#


− Visual Studio 2013 で自動生成しよう

編集 > 形式を選択して貼り付け > JSON をクラスとして貼り付ける

• あとは煮るなり焼くなり

− DataContractJsonSerializer

− Json.NET

− DynamicJson

Grabacr07.KanColleWrapper¥Models¥SvData.cs―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――var bytes = Encoding.UTF8.GetBytes(json);var serializer = new DataContractJsonSerializer(typeof(svdata));using (var stream = new MemoryStream(bytes)){

var result = serializer.ReadObject(stream) as svdata;}

Grabacr07.KanColleWrapper¥Modes¥Raw¥*

JSON -> C#






− Json.NET

− DynamicJson

めっちゃ楽。こっちにしときゃよかった？―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――var result = JsonConvert.DeserializeObject<svdata>(json);


JSON -> C#






− Json.NET

− DynamicJson

Grabacr07.KanColleWrapper¥Quests.cs(JSON 対応クラスでもどうにもならないケースがあった場合など)

―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――var djson = DynamicJson.Parse(json);var questlist = new kcsapi_questlist{

api_count = Convert.ToInt32(djson.api_data.api_count),api_disp_page = Convert.ToInt32(djson.api_data.api_disp_page),api_page_count = Convert.ToInt32(djson.api_data.api_page_count),api_exec_count = Convert.ToInt32(djson.api_data.api_exec_count),

};


Dockyard

• Q. なんで建造する艦のネタバレできるの？

A. サーバーから送られてきてる /kcsapi/api_get_member/kdock

public class kcsapi_kdock{

public int api_member_id { get; set; }public int api_id { get; set; }public int api_state { get; set; } // ドックの状態 (ロック、未使用、建造中、完成)

public int api_created_ship_id { get; set; } // 完成する艦娘の IDpublic long api_complete_time { get; set; } // 完成する時刻 (Unix 時間)

public string api_complete_time_str { get; set; }public int api_item1 { get; set; } // 投入した燃料public int api_item2 { get; set; } // 投入した弾薬public int api_item3 { get; set; } // 投入した鋼材public int api_item4 { get; set; } // 投入したボーキサイトpublic int api_item5 { get; set; } // 投入した開発資材

}

投入資源と完成する艦が同時に把握できるので、人力でない正確なデータの収集などに向いてるかも

どうせならカッコイイ UI を作ろう

UI & WPF Themes

Visual Studio like window

• Visual Studio 2012/2013 の濃色テーマのようなもの


• Visual Studio 2012/2013 の濃色テーマのようなもの

KanColleViewer では

コントロールの外観を

すべて自作

ItemsControl

TabControl

Grabacr07.KanColleViewer¥Themes¥Mukyutter.Dark.xaml

Button, CheckBox, ScrollBar, …アプリ内で使用するすべてのコントロールの外観を Style で定義


Style & Templates

• コントロールのスタイルとテンプレート (MSDN)

http://msdn.microsoft.com/ja-jp/library/aa970773(v=vs.110).aspx

− 標準コントロールの

テンプレート実装例集

▫ 各コントロールの構成要素の学習

▫ XAML 力の向上 (私はこれで鍛えた)

− サンプルアプリも

▫ 残念ながらダサい今風ではない

▫ あくまで学習用ということで

http://msdn.microsoft.com/ja-jp/library/aa970773(v=vs.110).aspx

Style & Templates

• Visual Studio でも

− 標準コントロールの XAML ソースを吐ける

書式 > テンプレートの編集 > コピーの編集

Modern Desktop apps

• 既成のテーマによるモダンなデスクトップアプリの実装車輪の再発明を避けたい or 手間をかけたくないのなら

− Elysium

▫ http://elysium.codeplex.com/

▫ 以前から Zune を意識してた感じ？

http://elysium.codeplex.com/

Modern Desktop apps

• 既成のテーマによるモダンなデスクトップアプリの実装車輪の再発明を避けたい or 手間をかけたくないのなら

− Elysium

▫ http://elysium.codeplex.com/

▫ 以前から Zune を意識してた感じ？

− MahApps.Metro

▫ http://mahapps.com/MahApps.Metro/

▫ アニメーション等の質は Elysium より良い

▫ ウィンドウの枠が光る効果は私のコードが使われてる

「WPF で Visual Studio 2012 のような光るウィンドウを作る」http://grabacr.net/archives/507 _

http://elysium.codeplex.com/

http://mahapps.com/MahApps.Metro/

http://grabacr.net/archives/507

Equipment Icons

• 装備を一目で確認したい

− ダメコン搭載忘れ防止

− 彩雲搭載忘れ防止など

Path で描けばよい。

アイコン見ればだいたいわかる

Equipment Icons

• 装備を一目で確認したい

− ダメコン搭載忘れ防止

− 彩雲搭載忘れ防止など

− 全部 Blend for Visual Studio で Path 描いた

− Path の描き方の詳細は私のブログ記事にて

「XAML でクラウディアさんを描いてみました」http://grabacr.net/archives/795 _

アイコン見ればだいたいわかる

Grabacr07.KanColleViewer¥Themes¥Generic.xaml

http://grabacr.net/archives/795

Application Icon

• 作って頂きました

@Nrtwd さん、ありがとうございます！

https://twitter.com/Nrtwd/status/416664912887156736

https://twitter.com/Nrtwd/status/416664912887156736

https://twitter.com/Nrtwd

Application Icon

• デザイナーさんから頂いた素材をどう活用するか？素材: Adobe Illustrator (.ai) ファイル

Application Icon


Blend for Visual Studio

ファイル > インポート >

Adobe Illustrator ファイルのインポート

Application Icon



Illustrator ファイル保存時に

☑ PDF 互換ファイルを作成の設定が必要



ベクターデータ (Canvas + Path) としてインポート可能！

Application Icon





ベクターデータ (Canvas + Path) としてインポート可能！

いろんな場所・サイズで活用できる

素材の味を活かそう！

提督業も忙しい！ので、快適なプレイ環境を。

Conclusion

Feedback

• Twitter

− 3 ヶ月でツイート数が 12000 増えた Follower が 1000 人増えた (こわい)

10 月末ソースコード公開直前

1/18 現在バイナリ公開から 3 週間

Feedback

• ダウンロード数

− 公開～ 3 日間: 10,000 downloads

− 1/18 現在: 38,484 downloads

• grabacr.net 閲覧数

− 公開～ 5 日間: 40,000 PVちょいちょいサーバー落ちてた… 大変申し訳なく

− 以降: 2,000 PV/day

Conclusion

• 常にエゴサーチしてます

− ユーザーの生の声

− 要望多し

▫ Windows 7 対応 (トースト通知の代替手段) -> 完了！ (時期リリースで搭載)

▫ 低解像度 / 高解像度対応…

High DPI / Per-Monitor DPI 対応が急務 (Interne Explorer の対応が面倒…)

• 流行に乗るとつよい (つよい)

• 提督業も忙しい！ので、快適なプレイ環境で艦娘を可愛がりましょう！

生々しい感想

Technology

Room metro Tokyo #3 発表資料です。