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

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

• http://crystalmark.info/

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

自己紹介 [3]

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

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

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

CrystalCPUID CPU情報ツール [7]

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

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

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

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

萌え駆動開発 [12]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CrystalDiskInfo 5 Shizuku Edition [33]

大きな反響がありました 出典：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]

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

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

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

萌える実践例 [38]

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

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

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

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

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

• http://aoikagami.wordpress.com/

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

• http://水晶雫.com/

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

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

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

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

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

萌えるWin32 [50]

Win32 について [51]

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

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

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

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

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

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

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

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

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

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

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]

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

固定ピクセルレイアウト & 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]

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

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

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]

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

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

まとめ [70]

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

Q&A [72]

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

ポスター [74]

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

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

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

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

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

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

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