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

1.1K Views

November 14, 22

スライド概要

MDD(萌え駆動開発)の魅力と第二世代MDDを実践するためのノウハウを紹介します。

MVP Community Camp 2014 北海道会場&CLR/H 89 回 ~Community Camp デイ!~ における発表資料です。

profile-image

CrystalDiskInfo(ストレージ情報、5,000+万DL)とCrystalDiskMark(ストレージベンチマーク、2,500+万DL)を開発しています。Microsoft MVP(2014/1~)

シェア

埋め込む »CMSなどでJSが使えない場合

各ページのテキスト
1.

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

2.

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

3.

自己紹介 [3]

4.

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

5.

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

6.

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

7.

CrystalCPUID CPU情報ツール [7]

8.

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

9.

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

10.

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

11.

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

12.

萌え駆動開発 [12]

13.

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

14.

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

15.

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

16.

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

17.

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

18.

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

19.

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

20.

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

21.

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

22.

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

23.

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

24.

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

25.

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

26.

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

27.

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

28.

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

29.

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

30.

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

31.

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

32.

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

33.

CrystalDiskInfo 5 Shizuku Edition [33]

34.

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

35.

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

36.

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

37.

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

38.

萌える実践例 [38]

39.

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

40.

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

41.

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

42.

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

43.

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

44.

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

45.

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

46.

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

47.

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

48.

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

49.

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

50.

萌えるWin32 [50]

51.

Win32 について [51]

52.

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

53.

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

54.

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

55.

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

56.

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

57.

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

58.

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

59.

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

60.

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

61.

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

62.

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]

63.

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

64.

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

65.

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

66.

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

67.

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]

68.

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

69.

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

70.

まとめ [70]

71.

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

72.

Q&A [72]

73.

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

74.

ポスター [74]

75.

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

76.

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

77.

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

78.

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

79.

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

80.

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

81.

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