Post on 05-Jul-2015
description
提督業は忙しい！Internal of KanColleViewer
2014/01/18 Room metro Tokyo #3
Manato KAMEYA (@Grabacr07)
Subject
• 提督業も忙しい！ という「艦これ」ツールを開発した
http://grabacr.net/kancolleviewer
• 公開から 3 日で 10,000 downloads という反響
• せっかくなので、中身のお話を
− どうしてこのツールを作ったか？
− どういう設計になってるのか？
− 内部と UI の開発のための Tips… などを共有できれば幸いです
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/
− めとべや東京勉強会スタッフ なんかずっと目が死んでる
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
Motivation of development
• 適切な兵站管理をしたい！ (攻略のために)
• プレイ中の脳内
「物資の配給、整備、兵員の展開や衛生、施設の構築や維持などが含まれる」by Wikipedia
艦娘かわいい！！！
兵站管理
計画 情報整理 時間管理
Motivation of development
• 適切な兵站管理をしたい！ (攻略のために)
• プレイ中の脳内
「物資の配給、整備、兵員の展開や衛生、施設の構築や維持などが含まれる」by Wikipedia
艦娘かわいい！！！
兵站管理
計画 情報整理 時間管理
資源 -> 戦力への変換いかにして効率上げるか
(ここを楽しんでる)
ここを何とか楽にしたい…
Motivation of development
Motivation of development
• UI デザインが割とアレ
− 必要な情報にアクセスしにくい
▫ バケツの残数見られない
▫ 所属艦娘が一覧できない
▫ etc…
− 画面遷移が重たい
▫ 母港 (ホーム画面) に戻る度に
すべての艦娘データを DL …
Motivation of development
Motivation of development
• 提督業には時間がかかる
− (上記はかなり極端な例としても) 社畜にはつらい拘束時間
− 他作業と並行できるプレイスタイルが求められる
「マップ攻略時に戦艦・正規空母を運用しない」縛りプレイのＫ氏、11 月イベントの E4 について
「65 時間かけたけどクリアできませんでした！」
Development course
• 適切な兵站管理のために
− 効率的な "ながらプレイ" を実現したい
− 公開されている範囲でゲーム内のリソースを可視化・時間管理・通知
• 守らなければならないこと
− マクロ・チート・サーバーに負荷をかける行為
▫ リクエスト送信
▫ 通信内容の改変
暗号化されていない通信内容を含む
厳禁艦これ開発/運営チームに
ご迷惑をかけないのが大前提
楽をするための努力を惜しまないのがデベロッパーですよね！
Development course
• ちなみに開発環境& プレイ環境
作業領域が広いのでゲーム本体と情報をまとめないと迷子に
縦長のウィンドウにして画面の端に置いておきたい
遠征とか入渠とか終わったら画面と音で通知がほしい…
KanColleViewer
• Windows Desktop app
− .NET Framework 4.5
− Visual C# + WPF
• 艦これプレイングツール
− 内臓ブラウザー
Internet Explorer Shell
− ネットワークキャプチャ
FiddlerCore
基本設計 / 艦これの通信内容を見るためには
Design
Design
かっこいい UI！
タブで各画面を切り替え…
艦娘の装備アイコン表示…
スクリーンショット撮影…
艦これデータ！
ネットワークキャプチャ…
艦娘一覧の更新イベント…
遠征完了したらイベント…
Design
かっこいい UI！
タブで各画面を切り替え…
艦娘の装備アイコン表示…
スクリーンショット撮影…
艦これデータ！
ネットワークキャプチャ…
艦娘一覧の更新イベント…
遠征完了したらイベント…
call
event
XAML が関係する部分 XAML が関係しない部分
View / ViewModel Model
Design
かっこいい UI！
タブで各画面を切り替え…
艦娘の装備アイコン表示…
スクリーンショット撮影…
艦これデータ！
ネットワークキャプチャ…
艦娘一覧の更新イベント…
遠征完了したらイベント…
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#
• 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#
• JSON 対応クラス生成
− 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 対応クラス生成
− Visual Studio 2013 で自動生成しよう
編集 > 形式を選択して貼り付け > JSON をクラスとして貼り付ける
• あとは煮るなり焼くなり
− DataContractJsonSerializer
− Json.NET
− DynamicJson
めっちゃ楽。こっちにしときゃよかった？―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――var result = JsonConvert.DeserializeObject<svdata>(json);
Grabacr07.KanColleWrapper¥Modes¥Raw¥*
JSON -> C#
• JSON 対応クラス生成
− Visual Studio 2013 で自動生成しよう
編集 > 形式を選択して貼り付け > JSON をクラスとして貼り付ける
• あとは煮るなり焼くなり
− DataContractJsonSerializer
− 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),
};
Grabacr07.KanColleWrapper¥Modes¥Raw¥*
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 like window
• Visual Studio 2012/2013 の濃色テーマ のようなもの
KanColleViewer では
コントロールの外観を
すべて自作
ItemsControl
TabControl
Grabacr07.KanColleViewer¥Themes¥Mukyutter.Dark.xaml
Button, CheckBox, ScrollBar, …アプリ内で使用するすべてのコントロールの外観を Style で定義
Visual Studio like window
Style & Templates
• コントロールのスタイルとテンプレート (MSDN)
http://msdn.microsoft.com/ja-jp/library/aa970773(v=vs.110).aspx
− 標準コントロールの
テンプレート実装例集
▫ 各コントロールの構成要素の学習
▫ XAML 力の向上 (私はこれで鍛えた)
− サンプルアプリも
▫ 残念ながらダサい今風ではない
▫ あくまで学習用ということで
Style & Templates
• Visual Studio でも
− 標準コントロールの XAML ソースを吐ける
書式 > テンプレートの編集 > コピーの編集
Modern Desktop apps
• 既成のテーマによるモダンなデスクトップ アプリの実装車輪の再発明を避けたい or 手間をかけたくないのなら
− Elysium
▫ http://elysium.codeplex.com/
▫ 以前から Zune を意識してた感じ？
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 _
Equipment Icons
• 装備を一目で確認したい
− ダメコン搭載忘れ防止
− 彩雲搭載忘れ防止 など
Path で描けばよい。
アイコン見ればだいたいわかる
Equipment Icons
• 装備を一目で確認したい
− ダメコン搭載忘れ防止
− 彩雲搭載忘れ防止 など
− 全部 Blend for Visual Studio で Path 描いた
− Path の描き方の詳細は私のブログ記事にて
「XAML でクラウディアさんを描いてみました」http://grabacr.net/archives/795 _
アイコン見ればだいたいわかる
Grabacr07.KanColleViewer¥Themes¥Generic.xaml
Application Icon
• 作って頂きました
@Nrtwd さん、ありがとうございます！
Application Icon
• デザイナーさんから頂いた素材をどう活用するか？素材: Adobe Illustrator (.ai) ファイル
Application Icon
• デザイナーさんから頂いた素材をどう活用するか？素材: Adobe Illustrator (.ai) ファイル
Blend for Visual Studio
ファイル > インポート >
Adobe Illustrator ファイルのインポート
Application Icon
• デザイナーさんから頂いた素材をどう活用するか？素材: Adobe Illustrator (.ai) ファイル
Blend for Visual Studio
Illustrator ファイル保存時に
☑ PDF 互換ファイルを作成 の設定が必要
ファイル > インポート >
Adobe Illustrator ファイルのインポート
ベクターデータ (Canvas + Path) としてインポート可能！
Application Icon
• デザイナーさんから頂いた素材をどう活用するか？素材: Adobe Illustrator (.ai) ファイル
Blend for Visual Studio
ファイル > インポート >
Adobe Illustrator ファイルのインポート
ベクターデータ (Canvas + Path) としてインポート可能！
いろんな場所・サイズで活用できる
素材の味を活かそう！
提督業も忙しい！ので、快適なプレイ環境を。
Conclusion
Feedback
− 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 の対応が面倒…)
• 流行に乗るとつよい (つよい)
• 提督業も忙しい！ ので、快適なプレイ環境で艦娘を可愛がりましょう！
生々しい感想