Upgrade to Pro — share decks privately, control downloads, hide ads and more …

提督業は忙しい! ~ 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. 提督業は忙しい!
    Internal of KanColleViewer
    2014/01/18 Room metro Tokyo #3
    Manato KAMEYA (@Grabacr07)

    View full-size slide

  2. Subject
    • 提督業も忙しい! という「艦これ」ツールを開発した
    http://grabacr.net/kancolleviewer
    • 公開から 3 日で 10,000 downloads という反響
    • せっかくなので、中身のお話を
    − どうしてこのツールを作ったか?
    − どういう設計になってるのか?
    − 内部と UI の開発のための Tips
    … などを共有できれば幸いです

    View full-size slide

  3. Agenda
    デスクトップ アプリがこの先
    生きのこるには
    Road to
    KanColleViewer
    UI &
    WPF Themes
    Design
    Conclusion
    提督業は忙しい!
    Internal of KanColleViewer

    View full-size slide

  4. • 内容は個人に帰属します
    所属する組織を代表するものではありません
    • 艦これ成分強めです
    未プレイの方はごめんなさい

    View full-size slide

  5. Introduction

    View full-size slide

  6. Self Introduction
    亀谷 学人 (かめやまなと)
    • Work
    − 拝承業者? (メーカー系 SIer 所属エンジニア)
    − C# + WPF (Windows Client Application 開発)
    • Private activity
    − Twitter: @Grabacr07 (ぐらばく)
    − http://grabacr.net/
    − めとべや東京勉強会 スタッフ
    なんかずっと目が死んでる

    View full-size slide

  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)
    資源やばい
    ケッコン準備できました

    View full-size slide

  8. 「提督業も忙しい!」ができるまで
    Road to KanColleViewer

    View full-size slide

  9. Feature of KanColle
    • このゲームの特徴

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. Feature of KanColle
    • このゲームの特徴
    行先がランダムで決まる
    (祈って)
    戦闘中は眺めてるだけ
    プレイヤーは戦術レベルで戦闘に (ほぼ) 介入できない

    View full-size slide

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

    View full-size slide

  14. Feature of KanColle
    • プレイヤーって何してるの?
    − 艦隊の編成
    − 資源を消費して新しい艦を建造
    無茶な大型艦建造… ダメ、ゼッタイ。
    − 資源を消費して新しい装備を開発
    − 資源を消費して出撃
    − 資源を得るために遠征 etc…
    • 燃料
    • 鋼材
    • 弾薬
    • ボーキサイト
    資源がすべて!
    艦これの本質は「兵站 (Military Logistics)」にある と思います

    View full-size slide

  15. Motivation of development
    • 適切な兵站管理をしたい! (攻略のために)
    「物資の配給、整備、兵員の展開や衛生、施設の構築や維持などが含まれる」
    by Wikipedia

    View full-size slide

  16. Motivation of development
    • 適切な兵站管理をしたい! (攻略のために)
    • プレイ中の脳内
    「物資の配給、整備、兵員の展開や衛生、施設の構築や維持などが含まれる」
    by Wikipedia
    艦娘かわいい!!!
    兵站管理
    計画 情報整理 時間管理

    View full-size slide

  17. Motivation of development
    • 適切な兵站管理をしたい! (攻略のために)
    • プレイ中の脳内
    「物資の配給、整備、兵員の展開や衛生、施設の構築や維持などが含まれる」
    by Wikipedia
    艦娘かわいい!!!
    兵站管理
    計画 情報整理 時間管理
    資源 -> 戦力への変換
    いかにして効率上げるか
    (ここを楽しんでる)
    ここを何とか
    楽にしたい…

    View full-size slide

  18. Motivation of development

    View full-size slide

  19. Motivation of development
    • UI デザインが割とアレ
    − 必要な情報にアクセスしにくい
    ▫ バケツの残数見られない
    ▫ 所属艦娘が一覧できない
    ▫ etc…
    − 画面遷移が重たい
    ▫ 母港 (ホーム画面) に戻る度に
    すべての艦娘データを DL …

    View full-size slide

  20. Motivation of development

    View full-size slide

  21. Motivation of development
    • 提督業には時間がかかる
    − (上記はかなり極端な例としても) 社畜にはつらい拘束時間
    − 他作業と並行できるプレイスタイルが求められる
    「マップ攻略時に戦艦・正規空母を運用しない」
    縛りプレイのK氏、11 月イベントの E4 について
    「65 時間かけたけど
    クリアできませんでした!」

    View full-size slide

  22. Development course
    • 適切な兵站管理のために
    − 効率的な "ながらプレイ" を実現したい
    − 公開されている範囲でゲーム内のリソースを可視化・時間管理・通知
    • 守らなければならないこと
    − マクロ・チート・サーバーに負荷をかける行為
    ▫ リクエスト送信
    ▫ 通信内容の改変
    暗号化されていない通信内容を含む
    厳禁 艦これ開発/運営チームに
    ご迷惑をかけないのが大前提
    楽をするための努力を惜しまないのが
    デベロッパーですよね!

    View full-size slide

  23. Development course
    • ちなみに開発環境
    & プレイ環境
    作業領域が広いので
    ゲーム本体と情報を
    まとめないと迷子に
    縦長のウィンドウにして
    画面の端に置いておきたい
    遠征とか入渠とか終わったら
    画面と音で通知がほしい…

    View full-size slide

  24. KanColleViewer
    • Windows Desktop app
    − .NET Framework 4.5
    − Visual C# + WPF
    • 艦これ プレイングツール
    − 内臓ブラウザー
    Internet Explorer Shell
    − ネットワークキャプチャ
    FiddlerCore

    View full-size slide

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

    View full-size slide

  26. Design
    かっこいい UI!
    タブで各画面を切り替え…
    艦娘の装備アイコン表示…
    スクリーンショット撮影…
    艦これデータ!
    ネットワークキャプチャ…
    艦娘一覧の更新イベント…
    遠征完了したらイベント…

    View full-size slide

  27. Design
    かっこいい UI!
    タブで各画面を切り替え…
    艦娘の装備アイコン表示…
    スクリーンショット撮影…
    艦これデータ!
    ネットワークキャプチャ…
    艦娘一覧の更新イベント…
    遠征完了したらイベント…
    call
    event
    XAML が関係する部分 XAML が関係しない部分
    View / ViewModel Model

    View full-size slide

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

    View full-size slide

  29. Design
    KanColleViewer.exe
    KanColleWrapper.dll
    Server
    Master
    Homeport
    Ships
    ShipTypes
    SlotItems
    Admiral
    Ships
    SlotItems
    Internet Explorer
    Client
    (Flash Player)
    FiddlerCore
    event

    View full-size slide

  30. 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 対応とかに応用してください

    View full-size slide

  31. 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=“ を除いた部分) を
    クリップボードにコピーして…

    View full-size slide

  32. 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=“ を除いた部分) を
    クリップボードにコピーして…
    自動生成!

    View full-size slide

  33. 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¥*

    View full-size slide

  34. JSON -> C#
    • JSON 対応クラス生成
    − Visual Studio 2013 で自動生成しよう
    編集 > 形式を選択して貼り付け > JSON をクラスとして貼り付ける
    • あとは煮るなり焼くなり
    − DataContractJsonSerializer
    − Json.NET
    − DynamicJson
    めっちゃ楽。こっちにしときゃよかった?
    ―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――
    var result = JsonConvert.DeserializeObject(json);
    Grabacr07.KanColleWrapper¥Modes¥Raw¥*

    View full-size slide

  35. 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¥*

    View full-size slide

  36. 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; } // 投入した開発資材
    }
    投入資源と完成する艦が
    同時に把握できるので、
    人力でない正確なデータの
    収集などに向いてるかも

    View full-size slide

  37. どうせならカッコイイ UI を作ろう
    UI & WPF Themes

    View full-size slide

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

    View full-size slide

  39. Visual Studio like window
    • Visual Studio 2012/2013 の濃色テーマ のようなもの
    KanColleViewer では
    コントロールの外観を
    すべて自作
    ItemsControl
    TabControl
    Grabacr07.KanColleViewer¥Themes¥Mukyutter.Dark.xaml
    Button, CheckBox, ScrollBar, …
    アプリ内で使用するすべてのコントロールの外観を Style で定義

    View full-size slide

  40. Visual Studio like window

    View full-size slide

  41. Style & Templates
    • コントロールのスタイルとテンプレート (MSDN)
    http://msdn.microsoft.com/ja-jp/library/aa970773(v=vs.110).aspx
    − 標準コントロールの
    テンプレート実装例集
    ▫ 各コントロールの構成要素の学習
    ▫ XAML 力の向上 (私はこれで鍛えた)
    − サンプル アプリも
    ▫ 残念ながらダサい 今風ではない
    ▫ あくまで学習用ということで

    View full-size slide

  42. Style & Templates
    • Visual Studio でも
    − 標準コントロールの XAML ソースを吐ける
    書式 > テンプレートの編集 > コピーの編集

    View full-size slide

  43. Modern Desktop apps
    • 既成のテーマによるモダンなデスクトップ アプリの実装
    車輪の再発明を避けたい or 手間をかけたくないのなら
    − Elysium
    ▫ http://elysium.codeplex.com/
    ▫ 以前から Zune を意識してた感じ?

    View full-size slide

  44. 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 _

    View full-size slide

  45. Equipment Icons
    • 装備を一目で確認したい
    − ダメコン搭載忘れ防止
    − 彩雲搭載忘れ防止 など
    Path で描けばよい。
    アイコン見れば
    だいたいわかる

    View full-size slide

  46. Equipment Icons
    • 装備を一目で確認したい
    − ダメコン搭載忘れ防止
    − 彩雲搭載忘れ防止 など
    − 全部 Blend for Visual Studio で Path 描いた
    − Path の描き方の詳細は私のブログ記事にて
    「XAML でクラウディアさんを描いてみました」
    http://grabacr.net/archives/795 _
    アイコン見れば
    だいたいわかる
    Grabacr07.KanColleViewer¥Themes¥Generic.xaml

    View full-size slide

  47. Application Icon
    • 作って頂きました
    @Nrtwd さん、ありがとうございます!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  51. Application Icon
    • デザイナーさんから頂いた素材をどう活用するか?
    素材: Adobe Illustrator (.ai) ファイル
    Blend for Visual Studio
    ファイル > インポート >
    Adobe Illustrator ファイルのインポート
    ベクター データ (Canvas + Path) として
    インポート可能!
    いろんな場所・サイズで活用できる
    素材の味を活かそう!

    View full-size slide

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

    View full-size slide

  53. Feedback
    • Twitter
    − 3 ヶ月でツイート数が 12000 増えた Follower が 1000 人増えた (こわい)
    10 月末
    ソースコード公開直前
    1/18 現在
    バイナリ公開から 3 週間

    View full-size slide

  54. Feedback
    • ダウンロード数
    − 公開 ~ 3 日間: 10,000 downloads
    − 1/18 現在: 38,484 downloads
    • grabacr.net 閲覧数
    − 公開 ~ 5 日間: 40,000 PV
    ちょいちょいサーバー落ちてた… 大変申し訳なく
    − 以降: 2,000 PV/day

    View full-size slide

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

    View full-size slide