第二世代MDD(萌え駆動開発)によるプログラミングWin32 #CLRH89

[1]
hiyohiyo
Twitter: @openlibsys
http://crystalmark.info/
CLR/H 第89回勉強会
～Community Camp デイ！～

[2]
本日のお品書き
自己紹介
萌え駆動開発
萌える実践例
萌えるWin32
まとめ
Q&A

[4]
自己紹介
名前：hiyohiyo/ひよひよ
年齢：35歳
家族：妻, 愛娘, 愛息子
趣味：フリーソフト開発 (約16年)
住所：北海道札幌市
□代表作: CrystalDiskInfo, CrystalDiskMark 他（通称 Crystal シリーズ）
パソコンがもっと好きになるフリーソフトを一貫して開発しています
Microsoft MVP for Visual C++
Jan 2014 – Dec 2014

[5]
Crystal Dew World 公式応援キャラクター
水晶雫

[6]
CrystalMark 2004
ランキング対応ベンチマーク

[7]
CrystalCPUID
CPU情報ツール

[8]
CrystalDiskMark 3 Shizuku Edition
新世代ディスクベンチマーク
ベンチマーク結果なんておまけですwww

[9]
CrystalDiskInfo 6 Shizuku Edition
HDDやSSDの健康状態を音声で教えてくれる!!
新世代ディスク情報ツール

[10]
本題の前に・・・
CLR/H代表ナオキ氏
@openlibsys ひよひよさんー3月22日CLR/Hで
セッション登壇とかして頂けませんかー？
もちろん良いですよ。
では、萌える Win32 プログラミングネタで!!
MVP for Visual C++ になったことだし、
Server Core で動くアプリ開発ネタかなぁ。
いや、いつも通り萌えとくかw

[11]
Microsoft 公式イベントだったorz

[13]
はじめに
ソフトウェア開発手法
• テスト駆動開発
• チケット駆動開発
• モデル駆動開発
• ビヘイビア駆動開発
• 〆切駆動開発
など

[14]
お悩みではありませんか？
 やる気が出ない
 楽しく開発したい
 励ましてもらいたい
 早く人間になりたい
既存ソフトウェア開発手法
には何かが足りない!!

[15]
萌え
根性
何が足りないのでしょうか？

[17]
萌え駆動開発 (MDD:Moe Driven Development)
■定義
萌える想いをコードに変換
するソフトウェア開発手法
■解説
古くからヲタクを中心に実践されてきた
伝統的な開発手法です。変数名がアレ。
コメントがアレ。コードネームがアレ。
開発環境がアレ。など

[18]
圧倒的な開発エネルギー!!
E=Moe
2
※E は開発エネルギー
なんて美しい数式なんだ!!
アインシュタインも真っ青!?

[19]
技術力は関係
ありません!!

[20]
萌え駆動開発
第二世代

[21]
第二世代萌え駆動開発
■定義
人智を超越した萌える想いを
オリジナルキャラクターへと
昇華させて(*´Д｀)
■解説
ソフトウェアへの統合やグッズ制作
などを通して真実の萌えを極めます
第二世代ならでは

[22]
圧倒的じゃないか、第二世代は
E=Moe
3
※E は開発エネルギー

[23]
萌える想いが
全てです!!

[24]
でも、何から始め
たら良いのかな？
私の体験談を紹介
させていただきます

[25]
オープンソースカンファレンス
2011 北海道
(2011/6/11)

[26]
①メール設定
②メール通知をチェック
メール通知機能を猛アピール

[27]
懇親会にて
橘べるちぇ氏
メール通知なんてレガシー技術!!
時代は音声通知ですよ・・・そうだ!!
声優さんに喋ってもらいましょう!!
そっ、それはいいですねぇ（棒）
軽く流しておくか

[28]
ボイスが
届いた
イラストが
届いた
数週間後・・・何が起きたでしょうか？

[29]
本当に送られてきたよwww
橘べるちぇ氏
声優さんに喋ってもらったから
次のバージョンでこれを使ってください。
あっ、ありがとうございます・・・
ネタじゃないw
どうなってるんだ!?

[30]
人間とは欲深い生き物・・・
桐野霞先生に伝手があるので頼んでみます!!
せっかくなのでイラストも欲しいです!!
※どこまでも他力本願www
キャラクター
展開したいなぁ
橘べるちぇ氏

[31]
かっ、かわえぇえぇぇぇえぇぇぇえぇ
桐野霞先生ってどんなイラストを描く方かなぁ？
Bing で検索してみよう!!
©kirino kasumu http://kirino.moo.jp/

[32]
オープンソースカンファレンス
2012 北海道
(2012/6/16)

[33]
CrystalDiskInfo 5 Shizuku Edition

[34]
大きな反響がありました
ひよひよ氏どうした？
出典：http://gigazine.net/news/20120620-crystaldiskinfo-5-shizuku-edition/出典：http://www.forest.impress.co.jp/docs/news/20120618_541019.html
HDDが壊れて悲しい気持ちになってた
けどこれを導入したら今度はHDDの異
常が楽しみになってきててやばい
コレはよい和服美少女。
CrystalDiskInfo愛用してるけどこんな
路線になるとは思わなかったww
結構お固いソフトだと思って
ただけに意外。でもかわいい。
なにこれやたらかわいい
(:.;ﾟ;Д;ﾟ;.:)ﾊｧﾊｧ
可愛すぎて導入したい

[35]
水晶雫プロデュースで一番意識したこと
もの凄く良いものにすること
 ちょっと良い程度では寧ろマイナス
• 皆が萌えたいわけではない
• そもそも萌えようがない
 世界展開を見据える
• 和服美少女＋黒髪＋清楚
• 17歳 (X18ダメ絶対!!)
• ボイスの国際化は未定orz

[36]
うっ、う～ん
特殊過ぎて参考
にならないかも？

[37]
1. 本体 2. イラスト 3. ボイス
 クリエイターマッチングサイト活用
• プロ・アマ問わず多数のイラスト
レーターさん、声優さんが登録
• この人にお願いしたい!!
と強く思う方にお願いする
⇒ 多分これが一番大切!!
【想像】第二世代萌え駆動開発の始め方

[39]
私と萌え駆動開発
アレなコードネーム
アレな開発環境
アレな部屋

[40]
アレなコードネーム ~CrystalDiskInfo~
1.0: Feena
2.0: Earthlight
3.0: Moonlight
4.0: Licia
5.0: Cynthia
6.0: Freesia
7.0: ???
© August
第
一
世
代
第
二
世
代

[41]
第二世代は
圧倒的ですね!!

[42]
あれ？
Ver.5 以降は私だけ
で良いのでは？
第一世代と第二世代は共存可能です。
断じて浮気ではありません!!
ちなみに・・・
二次元と三次元も両立可能です!!

[43]
アレな開発環境 > Visual Studio に壁紙
Visual Studio痛IDE拡張1.5
© 踊れないダメ人間さん http://aoikagami.wordpress.com/
スライドショー
にも対応!!

[44]
アレな開発環境 > デスクトップ用壁紙
超高解像度(8K/7680x4320)壁紙
http://水晶雫.com/

[45]
アレな部屋
コミケ83記念漢の萌えるデスクトップ

[46]
【参考】プロ生ちゃん
とても美味でした!!

[47]
【参考】クラウディアさん
セクシー過ぎます!!
あまりにセクシー過ぎて Microsoft ロゴを
つけられなかったとかなんとか・・・
※裏面にはロゴあり

[48]
あまりに厳しい現実・・・
某知人～結婚直前～
彼のお兄さんちょっとヲタクっぽいんだよねぇ。
部屋にポスターとかフィギュアとか・・・
あっ、ひよひよさんはパソコン系だから大丈夫だよね？
そうですね。
アキバではパソコンショップに行くことが多いです。
大丈夫ってなんだよ!!
ダメダメだよorz

[49]
家族の理解!!
何より大切なのは・・・
理解ある嫁を貰った私は勝ち組ですw

[52]
Win32 最大の魅力
Win32/DirectX 9.0c
萌えるげーむ
その他

[53]
デスクトップアプリ
C++/Win32
MFC
(Microsoft Foundation Class) C#/VB.NET
.NET Framework
HTML
(CSS+JS)
GDI/GDI+ WinForms WPF
ネイティブマネージド
CrystalDiskInfo 1~5

[54]
HTML + CSS + JavaScript で UI 構築
 CSS によりデザインを容易に変更可能
 DirectWrite による美しいフォント (IE9以降)
 JavaScript ライブラリが利用可能
 IE の設定に影響を受ける
⇒ 画像表示設定など
 IE のバージョンにより挙動が異なる
⇒ IE6/7/8/9/10/11
⇒ Win7/8 で挙動が異なることもorz
 IE が存在しない環境では動作しない
⇒ Server Core など

[55]
Server Core だと!!
某海外ユーザー
やぁ。ひよひよ。
CrystalDiskInfo 5 Shizuku Edition が Server Core
で動かないんだ!! どうにかできないかい?
OK! 考えてみるよ。
Server Core だと!!

[56]
Server Core とは？
Windows Server 2008/2012 をサーバーとして動作させるために
必要な最小限の機能のみをインストールするオプションです。
GUI 機能は大きく制限されており、IE や WinForms/WPF は使えません。

[57]
Server Core では
IE が使えない!?
でも、どうしたら??

[58]
GDI で
書き直す
スルー
一体どうしたらよいのでしょうか？

[59]
一人でも多くの人に
Shizuku Edition を!!
GDI で書き直す!! (ｷﾘｯ
GDI で新規とか
罰ゲームかよorz
第二世代萌え駆動開発の神髄!!

[60]
デスクトップアプリ
C++/Win32
MFC
C#/VB.NET
.NET Framework
HTML
(CSS+JS)
GDI/GDI+ WinForms WPF
ネイティブマネージド
CrystalDiskInfo 6
Server Core でも動作する
漢のプラットフォーム

[61]
GDI ベースで普通に作ると・・・
これでは萌えられません!!

[62]
HTML ベースから GDI/GDI+ への回帰
CrystalDiskInfo 1~5 CrystalDiskInfo 6
開発環境 Visual C++/MFC Visual C++/MFC
ベースクラス CDHtmlDialog ベース独自拡張 CDialogEx ベース独自拡張
レイアウト HTML + CSS + JavaScript ピクセル固定
HiDPI 対応 OpticalZoom (IE8 以降) 自前拡大 (Per-Monitor DPI 対応)
文字列描画 DirectWrite (IE9 以降)
GDI/GDI+
(DirectWrite 対応検討中…)
画像描画 IEコンポーネント GDI+
ボタン
PNG画像
透過PNG対応 (IE7 以降)
CButton ベース独自拡張
(背景描画＋透過 PNG 対応)

[63]
GDI/GDI+ で UI 構築
Q: 画面がチラつくことがあるんですが…
A: ダブルバッファリングしたら？
Q: ボタンに透過 PNG 画像を使いたいのですが…
A: オーナードローしたら？
Q: HiDPI に対応したいのですが…
A: コントロールを拡大縮小したら？
Q: すっ、少しぐらいは良いところあるんですよね？
A: 互換性？あんまりないんじゃない？
嫌な予感しかしない…

[64]
固定ピクセルレイアウト & HiDPI 対応
m_CtrlFirmware.InitControl (256 + OFFSET_X, 88, 180, 20, m_ZoomRatio,
m_CtrlSerialNumber.InitControl(256 + OFFSET_X, 112, 180, 20, m_ZoomRatio,
m_CtrlInterface.InitControl (256 + OFFSET_X, 136, 180, 20, m_ZoomRatio,
m_CtrlTransferMode.InitControl(256 + OFFSET_X, 160, 180, 20, m_ZoomRatio,
m_CtrlDriveMap.InitControl (256 + OFFSET_X, 184, 180, 20, m_ZoomRatio,
m_CtrlAtaAtapi.InitControl (256 + OFFSET_X, 208, 408, 20, m_ZoomRatio,
m_CtrlFeature.InitControl (256 + OFFSET_X, 232, 408, 20, m_ZoomRatio,
x Y W H Zoom
Width=180*m_ZoomRatio
Height=20*m_ZoomRatio
X=(256+OFFSET_X)*m_ZoomRatio
Y=88*m_ZoomRatio
OFFSET_X

[65]
HiDPI 対応
100% 200% 300%
拡大率ごとに画像を用意してい
るので、拡大してもクッキリ!!
配布サイズはちょっと大きいですけど…

[66]
透過 PNG 対応ボタン
CButtonCx* クラス (オーナードローによる透過 PNG 表示に対応)
1. ボタンの背景をバックバッファに描画
2. 背景と透過 PNG 画像をアルファブレンド (自前)
3. GDI もしくは GDI+ で文字列描画 (DirectWrite への対応は検討中)
4. 表示 (ダブルバッファ対応)
*ソフト屋巣さん http://softyasu.net/ の CAlphaButton を参考にさせていただきました。
今どきのライブラリなら全部
やってくれるんですけどね…

[67]
Win32 標準コントロールの透過
Win7 以前 Win8 以降
if (m_IsHighContrast) // ハイコントラスト環境では透過機能を無効化
{
::SetLayeredWindowAttributes(m_List.m_hWnd, 0, 255, LWA_ALPHA);
}
else
{
::SetLayeredWindowAttributes(m_List.m_hWnd, 0, 192, LWA_ALPHA);
}
リストコントロールが透過
 Win8 からコントロールのレイヤードウィンドウに対応

[68]
Per-Monitor DPI (Win8.1 以降)
96 dpi (100%) 192 dpi (200%)
 DPI境界を跨ぐたびに適切な拡大率に調整
※詳細は Per-Monitor DPI で検索!!
 タイトルバーとメニューバーのサイズは共通
⇒ 大きすぎる/小さすぎるという問題が発生
⇒ 自前で描画するしかない?? (未対応)

[69]
めでたく Server Core でも動作!!

[71]
まとめ
萌え駆動開発
楽しいですよ!!
第二世代萌え駆動開発の魅力が
少しでも伝われば幸いです。

[73]
質問1: 制作したグッズは？
回答1:
ポスター
ポストカード
卓上カレンダー
かるた
など今後も色々制作予定です
Q&A

[75]
2012年9月: iPh○ne 5/5s ケース
iPh○ne 5/5s 専用ケース

[76]
コミケ83: インフラエンジニアかるた
サーバ擬人化ユーザ会さんとコラボで
『かるた』と『読み札CD』を制作

[77]
2013年2月: かるたポスター
オリオスペックさん
←ツクモさん
パソコンショップ
アークさん→
出典: http://akiba-pc.watch.impress.co.jp/docs/wakiba/find/20130108_581014.html

[78]
2013年2月: バレンタインチョコ企画
オリオスペックさんとバレンタインコラボ
～店頭デモの様子～
出典: http://ascii.jp/elem/000/000/762/762701/

[79]
2013年10月: 卓上カレンダーポスター他
出典: http://zigsow.jp/?m=zigsow&a=page_fh_own_item_detail&own_item_id=252541
オープンソースカンファレンス 2013 Tokyo/Fall にて無償頒布

[80]
質問2: グッズの制作費用は？
回答2: ※紙質・部数に依存
ポスター: 数千円～
ポストカード: 数千円～
卓上カレンダー: 数千円～
意外と手軽に制作可能です!!
Q&A

[81]
ご清聴ありがとうございました

第二世代MDD(萌え駆動開発)によるプログラミングWin32 #CLRH89

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to 第二世代MDD(萌え駆動開発)によるプログラミングWin32 #CLRH89 (20)

More from hiyohiyo (11)

第二世代MDD(萌え駆動開発)によるプログラミングWin32 #CLRH89