---
title: 第二世代MDD(萌え駆動開発)によるプログラミングWin32
tags:  #crystaldiskmark #crystaldiskinfo #個人開発 #mdd #萌え駆動開発  
author: [hiyohiyo](https://convert.docswell.com/user/hiyohiyo)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/GE55Q2YGE4.jpg?width=480
description: MDD(萌え駆動開発)の魅力と第二世代MDDを実践するためのノウハウを紹介します。  MVP Community Camp 2014 北海道会場&amp;CLR/H 89 回 ～Community Camp デイ！～ における発表資料です。
published: November 14, 22
canonical: https://convert.docswell.com/s/hiyohiyo/53X1EZ-2022-11-14-221356
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/GE55Q2YGE4.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/972NP4GDJR.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/DJYP5MVMJM.jpg)

自己紹介
[3]


# Page. 4

![Page Image](https://bcdn.docswell.com/page/V7N5NWM3E8.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/YJ9YRXNP73.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/GJ86W2KXED.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/LJL9N2ZN7R.jpg)

CrystalCPUID
CPU情報ツール
[7]


# Page. 8

![Page Image](https://bcdn.docswell.com/page/47MZX8VQJW.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/P7R6N52KE9.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/PJXMNKD5EX.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/3JKGN5XR7D.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/LE3NVK5GE5.jpg)

萌え駆動開発
[12]


# Page. 13

![Page Image](https://bcdn.docswell.com/page/8EDW83DN7G.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/V7P984XNJ8.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/2JVMNXLYJQ.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/5EGGKVXWEL.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/4JQXN68QEP.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/K746G42YE1.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/LJ1VD4MNEG.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/GJWLYXDME2.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/4EZMX6GMJ3.jpg)

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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/Y76N42Y57V.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/G755Q2GG74.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/9J2NP4YDER.jpg)

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


# Page. 25

![Page Image](https://bcdn.docswell.com/page/DEYP5MGMEM.jpg)

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


# Page. 26

![Page Image](https://bcdn.docswell.com/page/VJN5NWG378.jpg)

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


# Page. 27

![Page Image](https://bcdn.docswell.com/page/YE9YRXWPJ3.jpg)

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


# Page. 28

![Page Image](https://bcdn.docswell.com/page/GE86W2NX7D.jpg)

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


# Page. 29

![Page Image](https://bcdn.docswell.com/page/LEL9N2PNJR.jpg)

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


# Page. 30

![Page Image](https://bcdn.docswell.com/page/4JMZX84QEW.jpg)

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


# Page. 31

![Page Image](https://bcdn.docswell.com/page/PJR6N5WK79.jpg)

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


# Page. 32

![Page Image](https://bcdn.docswell.com/page/PEXMNKP57X.jpg)

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


# Page. 33

![Page Image](https://bcdn.docswell.com/page/3EKGN5DRJD.jpg)

CrystalDiskInfo 5 Shizuku Edition
[33]


# Page. 34

![Page Image](https://bcdn.docswell.com/page/L73NVKRG75.jpg)

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


# Page. 35

![Page Image](https://bcdn.docswell.com/page/87DW83YNJG.jpg)

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


# Page. 36

![Page Image](https://bcdn.docswell.com/page/VJP9846NE8.jpg)

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


# Page. 37

![Page Image](https://bcdn.docswell.com/page/2EVMNX3YEQ.jpg)

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


# Page. 38

![Page Image](https://bcdn.docswell.com/page/57GGKV3W7L.jpg)

萌える実践例
[38]


# Page. 39

![Page Image](https://bcdn.docswell.com/page/4EQXN65Q7P.jpg)

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


# Page. 40

![Page Image](https://bcdn.docswell.com/page/KJ46G49Y71.jpg)

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


# Page. 41

![Page Image](https://bcdn.docswell.com/page/LE1VD4KN7G.jpg)

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


# Page. 42

![Page Image](https://bcdn.docswell.com/page/GEWLYXPM72.jpg)

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


# Page. 43

![Page Image](https://bcdn.docswell.com/page/47ZMX6KME3.jpg)

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


# Page. 44

![Page Image](https://bcdn.docswell.com/page/YJ6N42Q5JV.jpg)

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


# Page. 45

![Page Image](https://bcdn.docswell.com/page/GJ55Q2RGJ4.jpg)

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


# Page. 46

![Page Image](https://bcdn.docswell.com/page/LE3NVKPPE5.jpg)

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


# Page. 47

![Page Image](https://bcdn.docswell.com/page/8EDW83L37G.jpg)

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


# Page. 48

![Page Image](https://bcdn.docswell.com/page/V7P9842PJ8.jpg)

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


# Page. 49

![Page Image](https://bcdn.docswell.com/page/2JVMNXDVJQ.jpg)

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


# Page. 50

![Page Image](https://bcdn.docswell.com/page/5EGGKVY1EL.jpg)

萌えるWin32
[50]


# Page. 51

![Page Image](https://bcdn.docswell.com/page/4JQXN6MNEP.jpg)

Win32 について
[51]


# Page. 52

![Page Image](https://bcdn.docswell.com/page/K746G4V3E1.jpg)

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


# Page. 53

![Page Image](https://bcdn.docswell.com/page/LJ1VD43ZEG.jpg)

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


# Page. 54

![Page Image](https://bcdn.docswell.com/page/GJWLYXP6E2.jpg)

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


# Page. 55

![Page Image](https://bcdn.docswell.com/page/4EZMX6KRJ3.jpg)

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


# Page. 56

![Page Image](https://bcdn.docswell.com/page/Y76N42Q17V.jpg)

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


# Page. 57

![Page Image](https://bcdn.docswell.com/page/G755Q2RL74.jpg)

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


# Page. 58

![Page Image](https://bcdn.docswell.com/page/9J2NP4D3ER.jpg)

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


# Page. 59

![Page Image](https://bcdn.docswell.com/page/DEYP5M28EM.jpg)

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


# Page. 60

![Page Image](https://bcdn.docswell.com/page/VJN5NW8978.jpg)

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


# Page. 61

![Page Image](https://bcdn.docswell.com/page/YE9YRXK3J3.jpg)

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


# Page. 62

![Page Image](https://bcdn.docswell.com/page/GE86W2RL7D.jpg)

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


# Page. 63

![Page Image](https://bcdn.docswell.com/page/LEL9N2KQJR.jpg)

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


# Page. 64

![Page Image](https://bcdn.docswell.com/page/4JMZX88KEW.jpg)

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


# Page. 65

![Page Image](https://bcdn.docswell.com/page/PJR6N55679.jpg)

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


# Page. 66

![Page Image](https://bcdn.docswell.com/page/PEXMNKKD7X.jpg)

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


# Page. 67

![Page Image](https://bcdn.docswell.com/page/3EKGN55DJD.jpg)

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


# Page. 68

![Page Image](https://bcdn.docswell.com/page/L73NVKKP75.jpg)

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


# Page. 69

![Page Image](https://bcdn.docswell.com/page/87DW8333JG.jpg)

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


# Page. 70

![Page Image](https://bcdn.docswell.com/page/VJP9844PE8.jpg)

まとめ
[70]


# Page. 71

![Page Image](https://bcdn.docswell.com/page/2EVMNXXVEQ.jpg)

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


# Page. 72

![Page Image](https://bcdn.docswell.com/page/57GGKVV17L.jpg)

Q&amp;A
[72]


# Page. 73

![Page Image](https://bcdn.docswell.com/page/4EQXN66N7P.jpg)

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


# Page. 74

![Page Image](https://bcdn.docswell.com/page/KJ46G44371.jpg)

ポスター
[74]


# Page. 75

![Page Image](https://bcdn.docswell.com/page/LE1VD44Z7G.jpg)

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


# Page. 76

![Page Image](https://bcdn.docswell.com/page/GEWLYXX672.jpg)

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


# Page. 77

![Page Image](https://bcdn.docswell.com/page/47ZMX66RE3.jpg)

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


# Page. 78

![Page Image](https://bcdn.docswell.com/page/YJ6N4221JV.jpg)

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


# Page. 79

![Page Image](https://bcdn.docswell.com/page/GJ55Q22LJ4.jpg)

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


# Page. 80

![Page Image](https://bcdn.docswell.com/page/9E2NP4437R.jpg)

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


# Page. 81

![Page Image](https://bcdn.docswell.com/page/D7YP5MM87M.jpg)

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


