提督業は忙しい！ 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 • このゲームの特徴

No content

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

No content

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

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！ タブで各画面を切り替え… 艦娘の装備アイコン表示… スクリーンショット撮影… 艦これデータ！ ネットワークキャプチャ… 艦娘一覧の更新イベント… 遠征完了したらイベント… event View / ViewModel Model Server Internet Explorer Client (Flash Player) FiddlerCore call

Design KanColleViewer.exe KanColleWrapper.dll Server Master Homeport Ships ShipTypes SlotItems Admiral Ships SlotItems Internet Explorer Client (Flash Player) FiddlerCore 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":"¥u62 10¥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,55 4,364,1490,1269]},{"api_member_id":363789,"ap i_id":2,"api_name":"¥u7b2c¥u4e00¥u6c34¥u96f7¥ u6226¥u968a","api_name_id":"111744015","api_m ission":[1,9,1382989946530,0],"api_flagship": "0","api_ship":[13,20,12,387,54,43]},{"api_me mber_id":363789,"api_id":3,"api_name":"¥u7b2c ¥u4e8c¥u6c34¥u96f7¥u6226¥u968a","api_name_id" :"111744021","api_mission":[1,13,138298996424 6,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¥u 90e8¥u968a","api_name_id":"111323146","api_mi ssion":[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":"¥u62 10¥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,55 4,364,1490,1269]},{"api_member_id":363789,"ap i_id":2,"api_name":"¥u7b2c¥u4e00¥u6c34¥u96f7¥ u6226¥u968a","api_name_id":"111744015","api_m ission":[1,9,1382989946530,0],"api_flagship": "0","api_ship":[13,20,12,387,54,43]},{"api_me mber_id":363789,"api_id":3,"api_name":"¥u7b2c ¥u4e8c¥u6c34¥u96f7¥u6226¥u968a","api_name_id" :"111744021","api_mission":[1,13,138298996424 6,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¥u 90e8¥u968a","api_name_id":"111323146","api_mi ssion":[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(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; } // 完成する艦娘の ID public 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 で描けばよい。 アイコン見れば だいたいわかる

No content

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 • 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 の対応が面倒…) • 流行に乗るとつよい (つよい) • 提督業も忙しい！ ので、快適なプレイ環境で艦娘を可愛がりましょう！ 生々しい感想