MDD(萌え駆動開発)の魅力と第二世代MDDを実践するためのノウハウを紹介します。 MVP Community Camp 2014 北海道会場&CLR/H 89 回 ～Community Camp デイ！～ における発表資料です。

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

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

3. [3]
自己紹介

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

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

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

7. [7]
CrystalCPUID
CPU情報ツール

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

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

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

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

12. [12]
萌え駆動開発

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

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

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

16. [16]
萌えです!!
ズバリ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

33. [33]
CrystalDiskInfo 5 Shizuku Edition

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

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

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

38. [38]
萌える実践例

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

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

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

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

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

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

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

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

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

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

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

50. [50]
萌えるWin32

51. [51]
Win32 について

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

70. [70]
まとめ

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

72. [72]
Q&A

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

74. [74]
ポスター

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

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

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

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

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

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

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