$30 off During Our Annual Pro Sale. View Details »

提督業は忙しい! ~ Internal of KanColleViewer

Grabacr07
January 18, 2014

提督業は忙しい! ~ Internal of KanColleViewer

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

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

Grabacr07

January 18, 2014
Tweet

More Decks by Grabacr07

Other Decks in Technology

Transcript

  1. Subject • 提督業も忙しい! という「艦これ」ツールを開発した http://grabacr.net/kancolleviewer • 公開から 3 日で 10,000

    downloads という反響 • せっかくなので、中身のお話を − どうしてこのツールを作ったか? − どういう設計になってるのか? − 内部と UI の開発のための Tips … などを共有できれば幸いです
  2. Agenda デスクトップ アプリがこの先 生きのこるには Road to KanColleViewer UI & WPF

    Themes Design Conclusion 提督業は忙しい! Internal of KanColleViewer
  3. Self Introduction 亀谷 学人 (かめやまなと) • Work − 拝承業者? (メーカー系

    SIer 所属エンジニア) − C# + WPF (Windows Client Application 開発) • Private activity − Twitter: @Grabacr07 (ぐらばく) − http://grabacr.net/ − めとべや東京勉強会 スタッフ なんかずっと目が死んでる
  4. 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) 資源やばい ケッコン準備できました
  5. Feature of KanColle • プレイヤーって何してるの? − 艦隊の編成 − 資源を消費して新しい艦を建造 無茶な大型艦建造…

    ダメ、ゼッタイ。 − 資源を消費して新しい装備を開発 − 資源を消費して出撃 − 資源を得るために遠征 etc…
  6. Feature of KanColle • プレイヤーって何してるの? − 艦隊の編成 − 資源を消費して新しい艦を建造 無茶な大型艦建造…

    ダメ、ゼッタイ。 − 資源を消費して新しい装備を開発 − 資源を消費して出撃 − 資源を得るために遠征 etc… • 燃料 • 鋼材 • 弾薬 • ボーキサイト 資源がすべて! 艦これの本質は「兵站 (Military Logistics)」にある と思います
  7. Motivation of development • 適切な兵站管理をしたい! (攻略のために) • プレイ中の脳内 「物資の配給、整備、兵員の展開や衛生、施設の構築や維持などが含まれる」 by

    Wikipedia 艦娘かわいい!!! 兵站管理 計画 情報整理 時間管理 資源 -> 戦力への変換 いかにして効率上げるか (ここを楽しんでる) ここを何とか 楽にしたい…
  8. Motivation of development • UI デザインが割とアレ − 必要な情報にアクセスしにくい ▫ バケツの残数見られない

    ▫ 所属艦娘が一覧できない ▫ etc… − 画面遷移が重たい ▫ 母港 (ホーム画面) に戻る度に すべての艦娘データを DL …
  9. Motivation of development • 提督業には時間がかかる − (上記はかなり極端な例としても) 社畜にはつらい拘束時間 − 他作業と並行できるプレイスタイルが求められる

    「マップ攻略時に戦艦・正規空母を運用しない」 縛りプレイのK氏、11 月イベントの E4 について 「65 時間かけたけど クリアできませんでした!」
  10. Development course • 適切な兵站管理のために − 効率的な "ながらプレイ" を実現したい − 公開されている範囲でゲーム内のリソースを可視化・時間管理・通知

    • 守らなければならないこと − マクロ・チート・サーバーに負荷をかける行為 ▫ リクエスト送信 ▫ 通信内容の改変 暗号化されていない通信内容を含む 厳禁 艦これ開発/運営チームに ご迷惑をかけないのが大前提 楽をするための努力を惜しまないのが デベロッパーですよね!
  11. KanColleViewer • Windows Desktop app − .NET Framework 4.5 −

    Visual C# + WPF • 艦これ プレイングツール − 内臓ブラウザー Internet Explorer Shell − ネットワークキャプチャ FiddlerCore
  12. Design KanColleViewer.exe KanColleWrapper.dll Server Master Homeport Ships ShipTypes SlotItems Admiral

    Ships SlotItems Internet Explorer Client (Flash Player) FiddlerCore event
  13. 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 対応とかに応用してください
  14. 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=“ を除いた部分) を クリップボードにコピーして…
  15. 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=“ を除いた部分) を クリップボードにコピーして… 自動生成!
  16. 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¥*
  17. JSON -> C# • JSON 対応クラス生成 − Visual Studio 2013

    で自動生成しよう 編集 > 形式を選択して貼り付け > JSON をクラスとして貼り付ける • あとは煮るなり焼くなり − DataContractJsonSerializer − Json.NET − DynamicJson めっちゃ楽。こっちにしときゃよかった? ――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――― var result = JsonConvert.DeserializeObject<svdata>(json); Grabacr07.KanColleWrapper¥Modes¥Raw¥*
  18. 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¥*
  19. 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; } // 投入した開発資材 } 投入資源と完成する艦が 同時に把握できるので、 人力でない正確なデータの 収集などに向いてるかも
  20. Visual Studio like window • Visual Studio 2012/2013 の濃色テーマ のようなもの

    KanColleViewer では コントロールの外観を すべて自作 ItemsControl TabControl Grabacr07.KanColleViewer¥Themes¥Mukyutter.Dark.xaml Button, CheckBox, ScrollBar, … アプリ内で使用するすべてのコントロールの外観を Style で定義
  21. Style & Templates • コントロールのスタイルとテンプレート (MSDN) http://msdn.microsoft.com/ja-jp/library/aa970773(v=vs.110).aspx − 標準コントロールの テンプレート実装例集

    ▫ 各コントロールの構成要素の学習 ▫ XAML 力の向上 (私はこれで鍛えた) − サンプル アプリも ▫ 残念ながらダサい 今風ではない ▫ あくまで学習用ということで
  22. Style & Templates • Visual Studio でも − 標準コントロールの XAML

    ソースを吐ける 書式 > テンプレートの編集 > コピーの編集
  23. 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 _
  24. Equipment Icons • 装備を一目で確認したい − ダメコン搭載忘れ防止 − 彩雲搭載忘れ防止 など −

    全部 Blend for Visual Studio で Path 描いた − Path の描き方の詳細は私のブログ記事にて 「XAML でクラウディアさんを描いてみました」 http://grabacr.net/archives/795 _ アイコン見れば だいたいわかる Grabacr07.KanColleViewer¥Themes¥Generic.xaml
  25. Application Icon • デザイナーさんから頂いた素材をどう活用するか? 素材: Adobe Illustrator (.ai) ファイル Blend

    for Visual Studio ファイル > インポート > Adobe Illustrator ファイルのインポート
  26. Application Icon • デザイナーさんから頂いた素材をどう活用するか? 素材: Adobe Illustrator (.ai) ファイル Blend

    for Visual Studio Illustrator ファイル保存時に ☑ PDF 互換ファイルを作成 の設定が必要 ファイル > インポート > Adobe Illustrator ファイルのインポート ベクター データ (Canvas + Path) として インポート可能!
  27. Application Icon • デザイナーさんから頂いた素材をどう活用するか? 素材: Adobe Illustrator (.ai) ファイル Blend

    for Visual Studio ファイル > インポート > Adobe Illustrator ファイルのインポート ベクター データ (Canvas + Path) として インポート可能! いろんな場所・サイズで活用できる 素材の味を活かそう!
  28. Feedback • Twitter − 3 ヶ月でツイート数が 12000 増えた Follower が

    1000 人増えた (こわい) 10 月末 ソースコード公開直前 1/18 現在 バイナリ公開から 3 週間
  29. Feedback • ダウンロード数 − 公開 ~ 3 日間: 10,000 downloads

    − 1/18 現在: 38,484 downloads • grabacr.net 閲覧数 − 公開 ~ 5 日間: 40,000 PV ちょいちょいサーバー落ちてた… 大変申し訳なく − 以降: 2,000 PV/day
  30. Conclusion • 常にエゴサーチしてます − ユーザーの生の声 − 要望多し ▫ Windows 7

    対応 (トースト通知の代替手段) -> 完了! (時期リリースで搭載) ▫ 低解像度 / 高解像度対応… High DPI / Per-Monitor DPI 対応が急務 (Interne Explorer の対応が面倒…) • 流行に乗るとつよい (つよい) • 提督業も忙しい! ので、快適なプレイ環境で艦娘を可愛がりましょう! 生々しい感想