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