提督業は忙しい！ ～ Internal of KanColleViewer

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

「提督業も忙しい！」という艦これツールを開発したので、その開発動機や中身のお話になります。艦これ未プレイの方にはわからないネタ等入ってしまっておりますが、ご容赦ください。

Transcript

1. 提督業は忙しい！ Internal of KanColleViewer 2014/01/18 Room metro Tokyo #3 Manato KAMEYA (@Grabacr07)
2. Subject • 提督業も忙しい！ という「艦これ」ツールを開発した http://grabacr.net/kancolleviewer • 公開から 3 日で 10,000 downloads という反響 • せっかくなので、中身のお話を − どうしてこのツールを作ったか？ − どういう設計になってるのか？ − 内部と UI の開発のための Tips … などを共有できれば幸いです
3. Agenda デスクトップ アプリがこの先 生きのこるには Road to KanColleViewer UI & WPF Themes Design Conclusion 提督業は忙しい！ Internal of KanColleViewer
4. • 内容は個人に帰属します 所属する組織を代表するものではありません • 艦これ成分強めです 未プレイの方はごめんなさい
5. Introduction
6. Self Introduction 亀谷 学人 (かめやまなと) • Work − 拝承業者？ (メーカー系 SIer 所属エンジニア) − C# + WPF (Windows Client Application 開発) • Private activity − Twitter: @Grabacr07 (ぐらばく) − http://grabacr.net/ − めとべや東京勉強会 スタッフ なんかずっと目が死んでる
7. 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) 資源やばい ケッコン準備できました
8. 「提督業も忙しい！」ができるまで Road to KanColleViewer
9. Feature of KanColle • このゲームの特徴
11. 羅針盤は 回すものではない !
13. 駆逐艦じゃなくて 戦艦を狙ってくれ！ ビッグセブンの力とは何だったのか…
14. Feature of KanColle • このゲームの特徴 行先がランダムで決まる (祈って) 戦闘中は眺めてるだけ プレイヤーは戦術レベルで戦闘に (ほぼ) 介入できない
15. Feature of KanColle • プレイヤーって何してるの？ − 艦隊の編成 − 資源を消費して新しい艦を建造 無茶な大型艦建造… ダメ、ゼッタイ。 − 資源を消費して新しい装備を開発 − 資源を消費して出撃 − 資源を得るために遠征 etc…
16. Feature of KanColle • プレイヤーって何してるの？ − 艦隊の編成 − 資源を消費して新しい艦を建造 無茶な大型艦建造… ダメ、ゼッタイ。 − 資源を消費して新しい装備を開発 − 資源を消費して出撃 − 資源を得るために遠征 etc… • 燃料 • 鋼材 • 弾薬 • ボーキサイト 資源がすべて！ 艦これの本質は「兵站 (Military Logistics)」にある と思います
17. Motivation of development • 適切な兵站管理をしたい！ (攻略のために) 「物資の配給、整備、兵員の展開や衛生、施設の構築や維持などが含まれる」 by Wikipedia
18. Motivation of development • 適切な兵站管理をしたい！ (攻略のために) • プレイ中の脳内 「物資の配給、整備、兵員の展開や衛生、施設の構築や維持などが含まれる」 by Wikipedia 艦娘かわいい！！！ 兵站管理 計画 情報整理 時間管理
19. Motivation of development • 適切な兵站管理をしたい！ (攻略のために) • プレイ中の脳内 「物資の配給、整備、兵員の展開や衛生、施設の構築や維持などが含まれる」 by Wikipedia 艦娘かわいい！！！ 兵站管理 計画 情報整理 時間管理 資源 -> 戦力への変換 いかにして効率上げるか (ここを楽しんでる) ここを何とか 楽にしたい…
20. Motivation of development
21. Motivation of development • UI デザインが割とアレ − 必要な情報にアクセスしにくい ▫ バケツの残数見られない ▫ 所属艦娘が一覧できない ▫ etc… − 画面遷移が重たい ▫ 母港 (ホーム画面) に戻る度に すべての艦娘データを DL …
22. Motivation of development
23. Motivation of development • 提督業には時間がかかる − (上記はかなり極端な例としても) 社畜にはつらい拘束時間 − 他作業と並行できるプレイスタイルが求められる 「マップ攻略時に戦艦・正規空母を運用しない」 縛りプレイのＫ氏、11 月イベントの E4 について 「65 時間かけたけど クリアできませんでした！」
24. Development course • 適切な兵站管理のために − 効率的な "ながらプレイ" を実現したい − 公開されている範囲でゲーム内のリソースを可視化・時間管理・通知 • 守らなければならないこと − マクロ・チート・サーバーに負荷をかける行為 ▫ リクエスト送信 ▫ 通信内容の改変 暗号化されていない通信内容を含む 厳禁 艦これ開発/運営チームに ご迷惑をかけないのが大前提 楽をするための努力を惜しまないのが デベロッパーですよね！
25. Development course • ちなみに開発環境 & プレイ環境 作業領域が広いので ゲーム本体と情報を まとめないと迷子に 縦長のウィンドウにして 画面の端に置いておきたい 遠征とか入渠とか終わったら 画面と音で通知がほしい…
26. KanColleViewer • Windows Desktop app − .NET Framework 4.5 − Visual C# + WPF • 艦これ プレイングツール − 内臓ブラウザー Internet Explorer Shell − ネットワークキャプチャ FiddlerCore
27. 基本設計 / 艦これの通信内容を見るためには Design
28. Design かっこいい UI！ タブで各画面を切り替え… 艦娘の装備アイコン表示… スクリーンショット撮影… 艦これデータ！ ネットワークキャプチャ… 艦娘一覧の更新イベント… 遠征完了したらイベント…
29. Design かっこいい UI！ タブで各画面を切り替え… 艦娘の装備アイコン表示… スクリーンショット撮影… 艦これデータ！ ネットワークキャプチャ… 艦娘一覧の更新イベント… 遠征完了したらイベント… call event XAML が関係する部分 XAML が関係しない部分 View / ViewModel Model
30. Design かっこいい UI！ タブで各画面を切り替え… 艦娘の装備アイコン表示… スクリーンショット撮影… 艦これデータ！ ネットワークキャプチャ… 艦娘一覧の更新イベント… 遠征完了したらイベント… event View / ViewModel Model Server Internet Explorer Client (Flash Player) FiddlerCore call
31. Design KanColleViewer.exe KanColleWrapper.dll Server Master Homeport Ships ShipTypes SlotItems Admiral Ships SlotItems Internet Explorer Client (Flash Player) FiddlerCore event
32. 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 対応とかに応用してください
33. 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=“ を除いた部分) を クリップボードにコピーして…
34. 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=“ を除いた部分) を クリップボードにコピーして… 自動生成！
35. 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¥*
36. JSON -> C# • JSON 対応クラス生成 − Visual Studio 2013 で自動生成しよう 編集 > 形式を選択して貼り付け > JSON をクラスとして貼り付ける • あとは煮るなり焼くなり − DataContractJsonSerializer − Json.NET − DynamicJson めっちゃ楽。こっちにしときゃよかった？ ――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――― var result = JsonConvert.DeserializeObject<svdata>(json); Grabacr07.KanColleWrapper¥Modes¥Raw¥*
37. 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¥*
38. 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; } // 投入した開発資材 } 投入資源と完成する艦が 同時に把握できるので、 人力でない正確なデータの 収集などに向いてるかも
39. どうせならカッコイイ UI を作ろう UI & WPF Themes
40. Visual Studio like window • Visual Studio 2012/2013 の濃色テーマ のようなもの
41. Visual Studio like window • Visual Studio 2012/2013 の濃色テーマ のようなもの KanColleViewer では コントロールの外観を すべて自作 ItemsControl TabControl Grabacr07.KanColleViewer¥Themes¥Mukyutter.Dark.xaml Button, CheckBox, ScrollBar, … アプリ内で使用するすべてのコントロールの外観を Style で定義
42. Visual Studio like window
43. Style & Templates • コントロールのスタイルとテンプレート (MSDN) http://msdn.microsoft.com/ja-jp/library/aa970773(v=vs.110).aspx − 標準コントロールの テンプレート実装例集 ▫ 各コントロールの構成要素の学習 ▫ XAML 力の向上 (私はこれで鍛えた) − サンプル アプリも ▫ 残念ながらダサい 今風ではない ▫ あくまで学習用ということで
44. Style & Templates • Visual Studio でも − 標準コントロールの XAML ソースを吐ける 書式 > テンプレートの編集 > コピーの編集
45. Modern Desktop apps • 既成のテーマによるモダンなデスクトップ アプリの実装 車輪の再発明を避けたい or 手間をかけたくないのなら − Elysium ▫ http://elysium.codeplex.com/ ▫ 以前から Zune を意識してた感じ？
46. 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 _
47. Equipment Icons • 装備を一目で確認したい − ダメコン搭載忘れ防止 − 彩雲搭載忘れ防止 など Path で描けばよい。 アイコン見れば だいたいわかる
49. Equipment Icons • 装備を一目で確認したい − ダメコン搭載忘れ防止 − 彩雲搭載忘れ防止 など − 全部 Blend for Visual Studio で Path 描いた − Path の描き方の詳細は私のブログ記事にて 「XAML でクラウディアさんを描いてみました」 http://grabacr.net/archives/795 _ アイコン見れば だいたいわかる Grabacr07.KanColleViewer¥Themes¥Generic.xaml
50. Application Icon • 作って頂きました @Nrtwd さん、ありがとうございます！
51. Application Icon • デザイナーさんから頂いた素材をどう活用するか？ 素材: Adobe Illustrator (.ai) ファイル
52. Application Icon • デザイナーさんから頂いた素材をどう活用するか？ 素材: Adobe Illustrator (.ai) ファイル Blend for Visual Studio ファイル > インポート > Adobe Illustrator ファイルのインポート
53. Application Icon • デザイナーさんから頂いた素材をどう活用するか？ 素材: Adobe Illustrator (.ai) ファイル Blend for Visual Studio Illustrator ファイル保存時に ☑ PDF 互換ファイルを作成 の設定が必要 ファイル > インポート > Adobe Illustrator ファイルのインポート ベクター データ (Canvas + Path) として インポート可能！
54. Application Icon • デザイナーさんから頂いた素材をどう活用するか？ 素材: Adobe Illustrator (.ai) ファイル Blend for Visual Studio ファイル > インポート > Adobe Illustrator ファイルのインポート ベクター データ (Canvas + Path) として インポート可能！ いろんな場所・サイズで活用できる 素材の味を活かそう！
55. 提督業も忙しい！ ので、快適なプレイ環境を。 Conclusion
56. Feedback • Twitter − 3 ヶ月でツイート数が 12000 増えた Follower が 1000 人増えた (こわい) 10 月末 ソースコード公開直前 1/18 現在 バイナリ公開から 3 週間
57. Feedback • ダウンロード数 − 公開 ～ 3 日間: 10,000 downloads − 1/18 現在: 38,484 downloads • grabacr.net 閲覧数 − 公開 ～ 5 日間: 40,000 PV ちょいちょいサーバー落ちてた… 大変申し訳なく − 以降: 2,000 PV/day
58. Conclusion • 常にエゴサーチしてます − ユーザーの生の声 − 要望多し ▫ Windows 7 対応 (トースト通知の代替手段) -> 完了！ (時期リリースで搭載) ▫ 低解像度 / 高解像度対応… High DPI / Per-Monitor DPI 対応が急務 (Interne Explorer の対応が面倒…) • 流行に乗るとつよい (つよい) • 提督業も忙しい！ ので、快適なプレイ環境で艦娘を可愛がりましょう！ 生々しい感想