SlideShare ist ein Scribd-Unternehmen logo
1 von 58
Downloaden Sie, um offline zu lesen
提督業は忙しい!
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

提督業は忙しい!
デスクトップ アプリがこの先
生きのこるには
Internal of KanColleViewer

Design

UI &
WPF Themes

Conclusion
• 内容は個人に帰属します
所属する組織を代表するものではありません

• 艦これ成分強めです
未プレイの方はごめんなさい
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
• このゲームの特徴
Room metro Tokyo #3 発表資料です。
羅針盤は
回すものではない !
Room metro Tokyo #3 発表資料です。
駆逐艦じゃなくて
戦艦を狙ってくれ!
ビッグセブンの力とは何だったのか…
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
• 提督業には時間がかかる
「マップ攻略時に戦艦・正規空母を運用しない」
縛りプレイのK氏、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
XAML が関係しない部分

XAML が関係する部分

かっこいい UI!

call

タブで各画面を切り替え…
艦娘の装備アイコン表示…
スクリーンショット撮影…

View / ViewModel

艦これデータ!
ネットワークキャプチャ…
艦娘一覧の更新イベント…
遠征完了したらイベント…

event

Model
Design
Client

(Flash Player)

Server

Internet Explorer

call

タブで各画面を切り替え…
艦娘の装備アイコン表示…
スクリーンショット撮影…

View / ViewModel

艦これデータ!
ネットワークキャプチャ…
艦娘一覧の更新イベント…
遠征完了したらイベント…

event

Model

FiddlerCore

かっこいい UI!
Design
Client

(Flash Player)

Server

Internet Explorer

Ships
ShipTypes

Master

SlotItems

KanColleViewer.exe

Admiral

event

Ships
SlotItems

Homeport

FiddlerCore

KanColleWrapper.dll
FiddlerCore
• ネットワークキャプチャ
− AfterSessionComplete イベントを Rx で
− Path によってパース処理を振り分け

LINQ ですから!
.Where(predicate) で振り分け
Rx の得意技

▫ /kcsapi/api_get_member/deck

… 艦隊編成情報

▫ /kcsapi/api_get_member/ship

… 所属するすべての艦娘の情報

▫ /kcsapi/api_get_member/slotitem … 保有するすべての装備の情報
▫ /kcsapi/api_get_master/ship

… すべての艦娘の定義情報

Twitter クライアントの UserStreams 対応とかに応用してください
JSON -> C#
• JSON 対応クラス生成
JSON text (“svdata=“ を除いた部分) を

クリップボードにコピーして…

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 -> C#
• JSON 対応クラス生成
JSON text (“svdata=“ を除いた部分) を

クリップボードにコピーして…

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 -> C#
• JSON 対応クラス生成
− Visual Studio 2013 で自動生成しよう
編集 > 形式を選択して貼り付け > JSON をクラスとして貼り付ける
Grabacr07.KanColleWrapper¥Modes¥Raw¥*

• あとは煮るなり焼くなり
− 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;
}
JSON -> C#
• JSON 対応クラス生成
− Visual Studio 2013 で自動生成しよう
編集 > 形式を選択して貼り付け > JSON をクラスとして貼り付ける
Grabacr07.KanColleWrapper¥Modes¥Raw¥*

• あとは煮るなり焼くなり
− DataContractJsonSerializer
− Json.NET
− DynamicJson

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

• あとは煮るなり焼くなり
− 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),
};
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 & WPF Themes
どうせならカッコイイ UI を作ろう
Visual Studio like window
• Visual Studio 2012/2013 の濃色テーマ のようなもの
Visual Studio like window
• Visual Studio 2012/2013 の濃色テーマ のようなもの
ItemsControl
KanColleViewer では
コントロールの外観を
すべて自作

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

アイコン見れば
だいたいわかる

で描けばよい。
Room metro Tokyo #3 発表資料です。
Equipment Icons
• 装備を一目で確認したい
− ダメコン搭載忘れ防止
− 彩雲搭載忘れ防止

など

アイコン見れば
だいたいわかる

Grabacr07.KanColleViewer¥Themes¥Generic.xaml

− 全部 Blend for Visual Studio で Path 描いた
− Path の描き方の詳細は私のブログ記事にて
「XAML でクラウディアさんを描いてみました」
http://grabacr.net/archives/795 _
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
ファイル > インポート >
Adobe Illustrator ファイルのインポート
ベクター データ (Canvas + Path) として
インポート可能!
Illustrator ファイル保存時に

☑ PDF 互換ファイルを作成 の設定が必要
Application Icon
• デザイナーさんから頂いた素材をどう活用するか?
素材: Adobe Illustrator (.ai) ファイル

Blend for Visual Studio
ファイル > インポート >
Adobe Illustrator ファイルのインポート
ベクター データ (Canvas + Path) として
インポート可能!
いろんな場所・サイズで活用できる

素材の味を活かそう!
Conclusion
提督業も忙しい! ので、快適なプレイ環境を。
Feedback
• Twitter

10 月末

ソースコード公開直前

1/18 現在

バイナリ公開から 3 週間

− 3 ヶ月でツイート数が 12000 増えた Follower が 1000 人増えた (こわい)
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 の対応が面倒…)

• 流行に乗るとつよい (つよい)
• 提督業も忙しい! ので、快適なプレイ環境で艦娘を可愛がりましょう!

Weitere ähnliche Inhalte

Was ist angesagt?

インターネット生放送を支える技術としくみ2015年版
インターネット生放送を支える技術としくみ2015年版インターネット生放送を支える技術としくみ2015年版
インターネット生放送を支える技術としくみ2015年版Yusei Yamanaka
 
テクてく Lotus 技術者夜会 03/16 Lotus Notes/Domino Upgrade Pack とは
テクてく Lotus 技術者夜会 03/16 Lotus Notes/Domino Upgrade Pack とはテクてく Lotus 技術者夜会 03/16 Lotus Notes/Domino Upgrade Pack とは
テクてく Lotus 技術者夜会 03/16 Lotus Notes/Domino Upgrade Pack とはHiroaki Komine
 
FINAL FANTASY XVにおけるPhoton利用事例 - Photon運営事務局 GTMF 2018 OSAKA / TOKYO
FINAL FANTASY XVにおけるPhoton利用事例 - Photon運営事務局 GTMF 2018 OSAKA / TOKYOFINAL FANTASY XVにおけるPhoton利用事例 - Photon運営事務局 GTMF 2018 OSAKA / TOKYO
FINAL FANTASY XVにおけるPhoton利用事例 - Photon運営事務局 GTMF 2018 OSAKA / TOKYOGame Tools & Middleware Forum
 
CrystalFantasiaを支えきった技術と技術だけではどうにもならなかった話
CrystalFantasiaを支えきった技術と技術だけではどうにもならなかった話CrystalFantasiaを支えきった技術と技術だけではどうにもならなかった話
CrystalFantasiaを支えきった技術と技術だけではどうにもならなかった話Keisuke Utsumi
 
IBM Notes/Domino 9.0.1 アプリケーション開発新機能
IBM Notes/Domino 9.0.1 アプリケーション開発新機能IBM Notes/Domino 9.0.1 アプリケーション開発新機能
IBM Notes/Domino 9.0.1 アプリケーション開発新機能Mitsuru Katoh
 
Xbox LIVEインディーズゲーム「ピアレビュー攻略」のためのXNAにおける開発のコツと特有の課題
Xbox LIVEインディーズゲーム「ピアレビュー攻略」のためのXNAにおける開発のコツと特有の課題Xbox LIVEインディーズゲーム「ピアレビュー攻略」のためのXNAにおける開発のコツと特有の課題
Xbox LIVEインディーズゲーム「ピアレビュー攻略」のためのXNAにおける開発のコツと特有の課題IGDA Japan
 
こんなに違う!Unityアプリケーション講座
こんなに違う!Unityアプリケーション講座こんなに違う!Unityアプリケーション講座
こんなに違う!Unityアプリケーション講座Unity Technologies Japan K.K.
 
Unityのasset bundle運用実例@lordofknights
Unityのasset bundle運用実例@lordofknightsUnityのasset bundle運用実例@lordofknights
Unityのasset bundle運用実例@lordofknightsKouji Hosoda
 
Unityでデスクトップマスコットを作ろう
Unityでデスクトップマスコットを作ろうUnityでデスクトップマスコットを作ろう
Unityでデスクトップマスコットを作ろうyodaka16
 
開発費0円でニコニコ生放送を作ってみた
開発費0円でニコニコ生放送を作ってみた開発費0円でニコニコ生放送を作ってみた
開発費0円でニコニコ生放送を作ってみたYusei Yamanaka
 
剣と魔法のログレス(PC版)の自慢と課題
剣と魔法のログレス(PC版)の自慢と課題剣と魔法のログレス(PC版)の自慢と課題
剣と魔法のログレス(PC版)の自慢と課題AimingStudy
 
開発環境構築からはじめるPython VisualStudio Codeとpipenvで始めるpython
開発環境構築からはじめるPython VisualStudio Codeとpipenvで始めるpython開発環境構築からはじめるPython VisualStudio Codeとpipenvで始めるpython
開発環境構築からはじめるPython VisualStudio Codeとpipenvで始めるpythontomitomi3 tomitomi3
 
Firefox OS 2012 年まとめ
Firefox OS 2012 年まとめFirefox OS 2012 年まとめ
Firefox OS 2012 年まとめHonma Masashi
 
デザイナー目線で Firefox OS を変えよう
デザイナー目線で Firefox OS を変えようデザイナー目線で Firefox OS を変えよう
デザイナー目線で Firefox OS を変えようHonma Masashi
 

Was ist angesagt? (20)

インターネット生放送を支える技術としくみ2015年版
インターネット生放送を支える技術としくみ2015年版インターネット生放送を支える技術としくみ2015年版
インターネット生放送を支える技術としくみ2015年版
 
テクてく Lotus 技術者夜会 03/16 Lotus Notes/Domino Upgrade Pack とは
テクてく Lotus 技術者夜会 03/16 Lotus Notes/Domino Upgrade Pack とはテクてく Lotus 技術者夜会 03/16 Lotus Notes/Domino Upgrade Pack とは
テクてく Lotus 技術者夜会 03/16 Lotus Notes/Domino Upgrade Pack とは
 
FINAL FANTASY XVにおけるPhoton利用事例 - Photon運営事務局 GTMF 2018 OSAKA / TOKYO
FINAL FANTASY XVにおけるPhoton利用事例 - Photon運営事務局 GTMF 2018 OSAKA / TOKYOFINAL FANTASY XVにおけるPhoton利用事例 - Photon運営事務局 GTMF 2018 OSAKA / TOKYO
FINAL FANTASY XVにおけるPhoton利用事例 - Photon運営事務局 GTMF 2018 OSAKA / TOKYO
 
CrystalFantasiaを支えきった技術と技術だけではどうにもならなかった話
CrystalFantasiaを支えきった技術と技術だけではどうにもならなかった話CrystalFantasiaを支えきった技術と技術だけではどうにもならなかった話
CrystalFantasiaを支えきった技術と技術だけではどうにもならなかった話
 
IBM Notes/Domino 9.0.1 アプリケーション開発新機能
IBM Notes/Domino 9.0.1 アプリケーション開発新機能IBM Notes/Domino 9.0.1 アプリケーション開発新機能
IBM Notes/Domino 9.0.1 アプリケーション開発新機能
 
Xbox LIVEインディーズゲーム「ピアレビュー攻略」のためのXNAにおける開発のコツと特有の課題
Xbox LIVEインディーズゲーム「ピアレビュー攻略」のためのXNAにおける開発のコツと特有の課題Xbox LIVEインディーズゲーム「ピアレビュー攻略」のためのXNAにおける開発のコツと特有の課題
Xbox LIVEインディーズゲーム「ピアレビュー攻略」のためのXNAにおける開発のコツと特有の課題
 
こんなに違う!Unityアプリケーション講座
こんなに違う!Unityアプリケーション講座こんなに違う!Unityアプリケーション講座
こんなに違う!Unityアプリケーション講座
 
[CEDEC2017] UE4プロファイリングツール総おさらい(グラフィクス編)
[CEDEC2017] UE4プロファイリングツール総おさらい(グラフィクス編)[CEDEC2017] UE4プロファイリングツール総おさらい(グラフィクス編)
[CEDEC2017] UE4プロファイリングツール総おさらい(グラフィクス編)
 
猫でも分かるUE4.22から入ったSubsystem
猫でも分かるUE4.22から入ったSubsystem 猫でも分かるUE4.22から入ったSubsystem
猫でも分かるUE4.22から入ったSubsystem
 
Unityのasset bundle運用実例@lordofknights
Unityのasset bundle運用実例@lordofknightsUnityのasset bundle運用実例@lordofknights
Unityのasset bundle運用実例@lordofknights
 
Unityでデスクトップマスコットを作ろう
Unityでデスクトップマスコットを作ろうUnityでデスクトップマスコットを作ろう
Unityでデスクトップマスコットを作ろう
 
React Video Player
React Video PlayerReact Video Player
React Video Player
 
UE4 Performance and Profiling | Unreal Dev Day Montreal 2017 (日本語訳)
UE4 Performance and Profiling | Unreal Dev Day Montreal 2017 (日本語訳)UE4 Performance and Profiling | Unreal Dev Day Montreal 2017 (日本語訳)
UE4 Performance and Profiling | Unreal Dev Day Montreal 2017 (日本語訳)
 
開発費0円でニコニコ生放送を作ってみた
開発費0円でニコニコ生放送を作ってみた開発費0円でニコニコ生放送を作ってみた
開発費0円でニコニコ生放送を作ってみた
 
60fpsアクションを実現する秘訣を伝授 解析編
60fpsアクションを実現する秘訣を伝授 解析編60fpsアクションを実現する秘訣を伝授 解析編
60fpsアクションを実現する秘訣を伝授 解析編
 
剣と魔法のログレス(PC版)の自慢と課題
剣と魔法のログレス(PC版)の自慢と課題剣と魔法のログレス(PC版)の自慢と課題
剣と魔法のログレス(PC版)の自慢と課題
 
CEDEC2016: Unreal Engine 4 のレンダリングフロー総おさらい
CEDEC2016: Unreal Engine 4 のレンダリングフロー総おさらいCEDEC2016: Unreal Engine 4 のレンダリングフロー総おさらい
CEDEC2016: Unreal Engine 4 のレンダリングフロー総おさらい
 
開発環境構築からはじめるPython VisualStudio Codeとpipenvで始めるpython
開発環境構築からはじめるPython VisualStudio Codeとpipenvで始めるpython開発環境構築からはじめるPython VisualStudio Codeとpipenvで始めるpython
開発環境構築からはじめるPython VisualStudio Codeとpipenvで始めるpython
 
Firefox OS 2012 年まとめ
Firefox OS 2012 年まとめFirefox OS 2012 年まとめ
Firefox OS 2012 年まとめ
 
デザイナー目線で Firefox OS を変えよう
デザイナー目線で Firefox OS を変えようデザイナー目線で Firefox OS を変えよう
デザイナー目線で Firefox OS を変えよう
 

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

Visual Studioで始めるTypeScript開発入門
Visual Studioで始めるTypeScript開発入門Visual Studioで始めるTypeScript開発入門
Visual Studioで始めるTypeScript開発入門Narami Kiyokura
 
APIドキュメントの話 #sphinxjp
APIドキュメントの話 #sphinxjpAPIドキュメントの話 #sphinxjp
APIドキュメントの話 #sphinxjpTakeshi Komiya
 
少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -
少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -
少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -historia_Inc
 
EC-CUBEユーザカンファレンス2016
EC-CUBEユーザカンファレンス2016EC-CUBEユーザカンファレンス2016
EC-CUBEユーザカンファレンス2016Chihiro Adachi
 
Kinect Camp with TMCN / Kinect入門ハンズオン 2015.06.06
Kinect Camp with TMCN/ Kinect入門ハンズオン 2015.06.06Kinect Camp with TMCN/ Kinect入門ハンズオン 2015.06.06
Kinect Camp with TMCN / Kinect入門ハンズオン 2015.06.06Akira Hatsune
 
Silverlight+COMにチャレンジ
Silverlight+COMにチャレンジSilverlight+COMにチャレンジ
Silverlight+COMにチャレンジYou&I
 
.NET Coreとツール類の今
.NET Coreとツール類の今.NET Coreとツール類の今
.NET Coreとツール類の今Yuki Igarashi
 
福井スマートフォンハッカソン Titanium Mobileの紹介
福井スマートフォンハッカソン Titanium Mobileの紹介福井スマートフォンハッカソン Titanium Mobileの紹介
福井スマートフォンハッカソン Titanium Mobileの紹介Mori Shingo
 
iPhoneアプリ開発の歩き方〜Swift編〜
iPhoneアプリ開発の歩き方〜Swift編〜iPhoneアプリ開発の歩き方〜Swift編〜
iPhoneアプリ開発の歩き方〜Swift編〜Yusuke SAITO
 
Osc2008tokyo秋 なでしこ勉強会
Osc2008tokyo秋 なでしこ勉強会Osc2008tokyo秋 なでしこ勉強会
Osc2008tokyo秋 なでしこ勉強会kujirahand kujira
 
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料OCHI Shuji
 
Infrastructure as code ~ ツールスタック / ヌーラボの事例 ~
Infrastructure as code ~ ツールスタック / ヌーラボの事例 ~Infrastructure as code ~ ツールスタック / ヌーラボの事例 ~
Infrastructure as code ~ ツールスタック / ヌーラボの事例 ~ikikko
 
C#でiPhoneアプリ開発 with MonoTouch
C#でiPhoneアプリ開発 with MonoTouchC#でiPhoneアプリ開発 with MonoTouch
C#でiPhoneアプリ開発 with MonoTouchShin Ise
 
Unityの夕べ in Fukuoka
Unityの夕べ in FukuokaUnityの夕べ in Fukuoka
Unityの夕べ in FukuokaShinobu Izumi
 
SDカードで無線Lチカ? FlashAirは超ミニマイコン!★Arduino用シールド(基板)配布中
SDカードで無線Lチカ?FlashAirは超ミニマイコン!★Arduino用シールド(基板)配布中SDカードで無線Lチカ?FlashAirは超ミニマイコン!★Arduino用シールド(基板)配布中
SDカードで無線Lチカ? FlashAirは超ミニマイコン!★Arduino用シールド(基板)配布中FlashAirデベロッパーズ
 
Css nite(2010.09.23)
Css nite(2010.09.23)Css nite(2010.09.23)
Css nite(2010.09.23)Yoshiki Ushida
 
ドキュメンテーションを加速するストレスフリーの作図ツール『blockdiag』 jus2011年6月勉強会
ドキュメンテーションを加速するストレスフリーの作図ツール『blockdiag』 jus2011年6月勉強会ドキュメンテーションを加速するストレスフリーの作図ツール『blockdiag』 jus2011年6月勉強会
ドキュメンテーションを加速するストレスフリーの作図ツール『blockdiag』 jus2011年6月勉強会Takayuki Shimizukawa
 
Microsoft Team Foundation Service 入門
Microsoft Team Foundation Service 入門Microsoft Team Foundation Service 入門
Microsoft Team Foundation Service 入門You&I
 

Ähnlich wie Room metro Tokyo #3 発表資料です。 (20)

Visual Studioで始めるTypeScript開発入門
Visual Studioで始めるTypeScript開発入門Visual Studioで始めるTypeScript開発入門
Visual Studioで始めるTypeScript開発入門
 
APIドキュメントの話 #sphinxjp
APIドキュメントの話 #sphinxjpAPIドキュメントの話 #sphinxjp
APIドキュメントの話 #sphinxjp
 
少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -
少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -
少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -
 
EC-CUBEユーザカンファレンス2016
EC-CUBEユーザカンファレンス2016EC-CUBEユーザカンファレンス2016
EC-CUBEユーザカンファレンス2016
 
Kinect Camp with TMCN / Kinect入門ハンズオン 2015.06.06
Kinect Camp with TMCN/ Kinect入門ハンズオン 2015.06.06Kinect Camp with TMCN/ Kinect入門ハンズオン 2015.06.06
Kinect Camp with TMCN / Kinect入門ハンズオン 2015.06.06
 
Silverlight+COMにチャレンジ
Silverlight+COMにチャレンジSilverlight+COMにチャレンジ
Silverlight+COMにチャレンジ
 
.NET Coreとツール類の今
.NET Coreとツール類の今.NET Coreとツール類の今
.NET Coreとツール類の今
 
福井スマートフォンハッカソン Titanium Mobileの紹介
福井スマートフォンハッカソン Titanium Mobileの紹介福井スマートフォンハッカソン Titanium Mobileの紹介
福井スマートフォンハッカソン Titanium Mobileの紹介
 
iPhoneアプリ開発の歩き方〜Swift編〜
iPhoneアプリ開発の歩き方〜Swift編〜iPhoneアプリ開発の歩き方〜Swift編〜
iPhoneアプリ開発の歩き方〜Swift編〜
 
Osc2008tokyo秋 なでしこ勉強会
Osc2008tokyo秋 なでしこ勉強会Osc2008tokyo秋 なでしこ勉強会
Osc2008tokyo秋 なでしこ勉強会
 
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
 
Infrastructure as code ~ ツールスタック / ヌーラボの事例 ~
Infrastructure as code ~ ツールスタック / ヌーラボの事例 ~Infrastructure as code ~ ツールスタック / ヌーラボの事例 ~
Infrastructure as code ~ ツールスタック / ヌーラボの事例 ~
 
C#でiPhoneアプリ開発 with MonoTouch
C#でiPhoneアプリ開発 with MonoTouchC#でiPhoneアプリ開発 with MonoTouch
C#でiPhoneアプリ開発 with MonoTouch
 
Unityの夕べ in Fukuoka
Unityの夕べ in FukuokaUnityの夕べ in Fukuoka
Unityの夕べ in Fukuoka
 
SDカードで無線Lチカ? FlashAirは超ミニマイコン!★Arduino用シールド(基板)配布中
SDカードで無線Lチカ?FlashAirは超ミニマイコン!★Arduino用シールド(基板)配布中SDカードで無線Lチカ?FlashAirは超ミニマイコン!★Arduino用シールド(基板)配布中
SDカードで無線Lチカ? FlashAirは超ミニマイコン!★Arduino用シールド(基板)配布中
 
Wankuma0402
Wankuma0402Wankuma0402
Wankuma0402
 
Css nite(2010.09.23)
Css nite(2010.09.23)Css nite(2010.09.23)
Css nite(2010.09.23)
 
ドキュメンテーションを加速するストレスフリーの作図ツール『blockdiag』 jus2011年6月勉強会
ドキュメンテーションを加速するストレスフリーの作図ツール『blockdiag』 jus2011年6月勉強会ドキュメンテーションを加速するストレスフリーの作図ツール『blockdiag』 jus2011年6月勉強会
ドキュメンテーションを加速するストレスフリーの作図ツール『blockdiag』 jus2011年6月勉強会
 
Microsoft Team Foundation Service 入門
Microsoft Team Foundation Service 入門Microsoft Team Foundation Service 入門
Microsoft Team Foundation Service 入門
 
UE4のモバイル開発におけるコンテンツアップデートの話 - Chunk IDとの激闘編 -
UE4のモバイル開発におけるコンテンツアップデートの話 - Chunk IDとの激闘編 -UE4のモバイル開発におけるコンテンツアップデートの話 - Chunk IDとの激闘編 -
UE4のモバイル開発におけるコンテンツアップデートの話 - Chunk IDとの激闘編 -
 

Kürzlich hochgeladen

情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法ssuser370dd7
 
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)ssuser539845
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor arts yokohama
 
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見Shumpei Kishi
 
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdfAyachika Kitazaki
 
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-LoopへTetsuya Nihonmatsu
 
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦Sadao Tokuyama
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfMatsushita Laboratory
 
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~arts yokohama
 

Kürzlich hochgeladen (12)

情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
 
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
 
2024 04 minnanoito
2024 04 minnanoito2024 04 minnanoito
2024 04 minnanoito
 
2024 03 CTEA
2024 03 CTEA2024 03 CTEA
2024 03 CTEA
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
 
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
 
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
 
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
 
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
 
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
 
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
 

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

  • 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 … などを共有できれば幸いです
  • 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) 資源やばい ケッコン準備できました
  • 9. Feature of KanColle • このゲームの特徴
  • 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 資源 -> 戦力への変換 いかにして効率上げるか (ここを楽しんでる) • プレイ中の脳内 ここを何とか 楽にしたい… 兵站管理 艦娘かわいい!!! 計画 情報整理 時間管理
  • 21. Motivation of development • UI デザインが割とアレ − 必要な情報にアクセスしにくい ▫ バケツの残数見られない ▫ 所属艦娘が一覧できない ▫ etc… − 画面遷移が重たい ▫ 母港 (ホーム画面) に戻る度に すべての艦娘データを DL …
  • 23. Motivation of development • 提督業には時間がかかる 「マップ攻略時に戦艦・正規空母を運用しない」 縛りプレイのK氏、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
  • 29. Design XAML が関係しない部分 XAML が関係する部分 かっこいい UI! call タブで各画面を切り替え… 艦娘の装備アイコン表示… スクリーンショット撮影… View / ViewModel 艦これデータ! ネットワークキャプチャ… 艦娘一覧の更新イベント… 遠征完了したらイベント… event Model
  • 30. Design Client (Flash Player) Server Internet Explorer call タブで各画面を切り替え… 艦娘の装備アイコン表示… スクリーンショット撮影… View / ViewModel 艦これデータ! ネットワークキャプチャ… 艦娘一覧の更新イベント… 遠征完了したらイベント… event Model FiddlerCore かっこいい UI!
  • 32. FiddlerCore • ネットワークキャプチャ − AfterSessionComplete イベントを Rx で − Path によってパース処理を振り分け LINQ ですから! .Where(predicate) で振り分け Rx の得意技 ▫ /kcsapi/api_get_member/deck … 艦隊編成情報 ▫ /kcsapi/api_get_member/ship … 所属するすべての艦娘の情報 ▫ /kcsapi/api_get_member/slotitem … 保有するすべての装備の情報 ▫ /kcsapi/api_get_master/ship … すべての艦娘の定義情報 Twitter クライアントの UserStreams 対応とかに応用してください
  • 33. JSON -> C# • JSON 対応クラス生成 JSON text (“svdata=“ を除いた部分) を クリップボードにコピーして… 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]}]}
  • 34. JSON -> C# • JSON 対応クラス生成 JSON text (“svdata=“ を除いた部分) を クリップボードにコピーして… 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]}]} 自動生成!
  • 35. JSON -> C# • JSON 対応クラス生成 − Visual Studio 2013 で自動生成しよう 編集 > 形式を選択して貼り付け > JSON をクラスとして貼り付ける Grabacr07.KanColleWrapper¥Modes¥Raw¥* • あとは煮るなり焼くなり − 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; }
  • 36. JSON -> C# • JSON 対応クラス生成 − Visual Studio 2013 で自動生成しよう 編集 > 形式を選択して貼り付け > JSON をクラスとして貼り付ける Grabacr07.KanColleWrapper¥Modes¥Raw¥* • あとは煮るなり焼くなり − DataContractJsonSerializer − Json.NET − DynamicJson めっちゃ楽。こっちにしときゃよかった? ――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――― var result = JsonConvert.DeserializeObject<svdata>(json);
  • 37. JSON -> C# • JSON 対応クラス生成 − Visual Studio 2013 で自動生成しよう 編集 > 形式を選択して貼り付け > JSON をクラスとして貼り付ける Grabacr07.KanColleWrapper¥Modes¥Raw¥* • あとは煮るなり焼くなり − 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), };
  • 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 & WPF Themes どうせならカッコイイ UI を作ろう
  • 40. Visual Studio like window • Visual Studio 2012/2013 の濃色テーマ のようなもの
  • 41. Visual Studio like window • Visual Studio 2012/2013 の濃色テーマ のようなもの ItemsControl KanColleViewer では コントロールの外観を すべて自作 TabControl Grabacr07.KanColleViewer¥Themes¥Mukyutter.Dark.xaml Button, CheckBox, ScrollBar, … アプリ内で使用するすべてのコントロールの外観を Style で定義
  • 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 • 装備を一目で確認したい − ダメコン搭載忘れ防止 − 彩雲搭載忘れ防止 など アイコン見れば だいたいわかる Grabacr07.KanColleViewer¥Themes¥Generic.xaml − 全部 Blend for Visual Studio で Path 描いた − Path の描き方の詳細は私のブログ記事にて 「XAML でクラウディアさんを描いてみました」 http://grabacr.net/archives/795 _
  • 50. Application Icon • 作って頂きました @Nrtwd さん、ありがとうございます!
  • 52. Application Icon • デザイナーさんから頂いた素材をどう活用するか? 素材: Adobe Illustrator (.ai) ファイル Blend for Visual Studio ファイル > インポート > Adobe Illustrator ファイルのインポート
  • 53. Application Icon • デザイナーさんから頂いた素材をどう活用するか? 素材: Adobe Illustrator (.ai) ファイル Blend for Visual Studio ファイル > インポート > Adobe Illustrator ファイルのインポート ベクター データ (Canvas + Path) として インポート可能! Illustrator ファイル保存時に ☑ PDF 互換ファイルを作成 の設定が必要
  • 54. Application Icon • デザイナーさんから頂いた素材をどう活用するか? 素材: Adobe Illustrator (.ai) ファイル Blend for Visual Studio ファイル > インポート > Adobe Illustrator ファイルのインポート ベクター データ (Canvas + Path) として インポート可能! いろんな場所・サイズで活用できる 素材の味を活かそう!
  • 56. Feedback • Twitter 10 月末 ソースコード公開直前 1/18 現在 バイナリ公開から 3 週間 − 3 ヶ月でツイート数が 12000 増えた Follower が 1000 人増えた (こわい)
  • 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 の対応が面倒…) • 流行に乗るとつよい (つよい) • 提督業も忙しい! ので、快適なプレイ環境で艦娘を可愛がりましょう!