Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

73,059 views

Published on

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

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

Published in: Technology
  • Be the first to comment

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

  1. 1. [1] hiyohiyo Twitter: @openlibsys http://crystalmark.info/ CLR/H 第89回勉強会 ~Community Camp デイ!~
  2. 2. [2] 本日のお品書き 自己紹介 萌え駆動開発 萌える実践例 萌えるWin32 まとめ Q&A
  3. 3. [3] 自己紹介
  4. 4. [4] 自己紹介 名前:hiyohiyo/ひよひよ 年齢:35歳 家族:妻, 愛娘, 愛息子 趣味:フリーソフト開発 (約16年) 住所:北海道札幌市 □代表作: CrystalDiskInfo, CrystalDiskMark 他(通称 Crystal シリーズ) パソコンがもっと好きになるフリーソフトを一貫して開発しています Microsoft MVP for Visual C++ Jan 2014 – Dec 2014
  5. 5. [5] Crystal Dew World 公式応援キャラクター 水晶雫
  6. 6. [6] CrystalMark 2004 ランキング対応ベンチマーク
  7. 7. [7] CrystalCPUID CPU情報ツール
  8. 8. [8] CrystalDiskMark 3 Shizuku Edition 新世代ディスクベンチマーク ベンチマーク結果なんておまけですwww
  9. 9. [9] CrystalDiskInfo 6 Shizuku Edition HDDやSSDの健康状態を音声で教えてくれる!! 新世代ディスク情報ツール
  10. 10. [10] 本題の前に・・・ CLR/H代表ナオキ氏 @openlibsys ひよひよさんー3月22日CLR/Hで セッション登壇とかして頂けませんかー? もちろん良いですよ。 では、萌える Win32 プログラミングネタで!! MVP for Visual C++ になったことだし、 Server Core で動くアプリ開発ネタかなぁ。 いや、いつも通り萌えとくかw
  11. 11. [11] Microsoft 公式イベントだったorz
  12. 12. [12] 萌え駆動開発
  13. 13. [13] はじめに ソフトウェア開発手法 • テスト駆動開発 • チケット駆動開発 • モデル駆動開発 • ビヘイビア駆動開発 • 〆切駆動開発 など
  14. 14. [14] お悩みではありませんか?  やる気が出ない  楽しく開発したい  励ましてもらいたい  早く人間になりたい 既存ソフトウェア開発手法 には何かが足りない!!
  15. 15. [15] 萌え 根性 何が足りないのでしょうか?
  16. 16. [16] 萌えです!! ズバリ
  17. 17. [17] 萌え駆動開発 (MDD:Moe Driven Development) ■定義 萌える想いをコードに変換 するソフトウェア開発手法 ■解説 古くからヲタクを中心に実践されてきた 伝統的な開発手法です。変数名がアレ。 コメントがアレ。コードネームがアレ。 開発環境がアレ。など
  18. 18. [18] 圧倒的な開発エネルギー!! E=Moe 2 ※E は開発エネルギー なんて美しい数式なんだ!! アインシュタインも真っ青!?
  19. 19. [19] 技術力は関係 ありません!!
  20. 20. [20] 萌え駆動開発 第二世代
  21. 21. [21] 第二世代萌え駆動開発 ■定義 人智を超越した萌える想いを オリジナルキャラクターへと 昇華させて(*´Д`) ■解説 ソフトウェアへの統合やグッズ制作 などを通して真実の萌えを極めます 第二世代ならでは
  22. 22. [22] 圧倒的じゃないか、第二世代は E=Moe 3 ※E は開発エネルギー
  23. 23. [23] 萌える想いが 全てです!!
  24. 24. [24] でも、何から始め たら良いのかな? 私の体験談を紹介 させていただきます
  25. 25. [25] オープンソースカンファレンス 2011 北海道 (2011/6/11)
  26. 26. [26] ①メール設定 ②メール通知をチェック メール通知機能を猛アピール
  27. 27. [27] 懇親会にて 橘べるちぇ氏 メール通知なんてレガシー技術!! 時代は音声通知ですよ・・・そうだ!! 声優さんに喋ってもらいましょう!! そっ、それはいいですねぇ(棒) 軽く流しておくか
  28. 28. [28] ボイスが 届いた イラストが 届いた 数週間後・・・何が起きたでしょうか?
  29. 29. [29] 本当に送られてきたよwww 橘べるちぇ氏 声優さんに喋ってもらったから 次のバージョンでこれを使ってください。 あっ、ありがとうございます・・・ ネタじゃないw どうなってるんだ!?
  30. 30. [30] 人間とは欲深い生き物・・・ 桐野霞先生に伝手があるので頼んでみます!! せっかくなのでイラストも欲しいです!! ※どこまでも他力本願www キャラクター 展開したいなぁ 橘べるちぇ氏
  31. 31. [31] かっ、かわえぇえぇぇぇえぇぇぇえぇ 桐野霞先生ってどんなイラストを描く方かなぁ? Bing で 検索 してみよう!! ©kirino kasumu http://kirino.moo.jp/
  32. 32. [32] オープンソースカンファレンス 2012 北海道 (2012/6/16)
  33. 33. [33] CrystalDiskInfo 5 Shizuku Edition
  34. 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. [35] 水晶雫プロデュースで一番意識したこと もの凄く良いものにすること  ちょっと良い程度では寧ろマイナス • 皆が萌えたいわけではない • そもそも萌えようがない  世界展開を見据える • 和服美少女+黒髪+清楚 • 17歳 (X18ダメ絶対!!) • ボイスの国際化は未定orz
  36. 36. [36] うっ、う~ん 特殊過ぎて参考 にならないかも?
  37. 37. [37] 1. 本体 2. イラスト 3. ボイス  クリエイターマッチングサイト活用 • プロ・アマ問わず多数のイラスト レーターさん、声優さんが登録 • この人にお願いしたい!! と強く思う方にお願いする ⇒ 多分これが一番大切!! 【想像】第二世代萌え駆動開発の始め方
  38. 38. [38] 萌える実践例
  39. 39. [39] 私と萌え駆動開発 アレなコードネーム アレな開発環境 アレな部屋
  40. 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. [41] 第二世代は 圧倒的ですね!!
  42. 42. [42] あれ? Ver.5 以降は私だけ で良いのでは? 第一世代と第二世代は共存可能です。 断じて浮気ではありません!! ちなみに・・・ 二次元と三次元も両立可能です!!
  43. 43. [43] アレな開発環境 > Visual Studio に壁紙 Visual Studio痛IDE拡張1.5 © 踊れないダメ人間 さん http://aoikagami.wordpress.com/ スライドショー にも対応!!
  44. 44. [44] アレな開発環境 > デスクトップ用壁紙 超高解像度(8K/7680x4320)壁紙 http://水晶雫.com/
  45. 45. [45] アレな部屋 コミケ83記念漢の萌えるデスクトップ
  46. 46. [46] 【参考】プロ生ちゃん とても美味でした!!
  47. 47. [47] 【参考】クラウディアさん セクシー過ぎます!! あまりにセクシー過ぎて Microsoft ロゴを つけられなかったとかなんとか・・・ ※裏面にはロゴあり
  48. 48. [48] あまりに厳しい現実・・・ 某知人 ~結婚直前~ 彼のお兄さん ちょっとヲタクっぽいんだよねぇ。 部屋にポスターとかフィギュアとか・・・ あっ、ひよひよさんはパソコン系だから大丈夫だよね? そうですね。 アキバではパソコンショップに行くことが多いです。 大丈夫ってなんだよ!! ダメダメだよorz
  49. 49. [49] 家族の理解!! 何より大切なのは・・・ 理解ある嫁を貰った私は勝ち組ですw
  50. 50. [50] 萌えるWin32
  51. 51. [51] Win32 について
  52. 52. [52] Win32 最大の魅力 Win32/DirectX 9.0c 萌えるげーむ その他
  53. 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. [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. [55] Server Core だと!! 某海外ユーザー やぁ。ひよひよ。 CrystalDiskInfo 5 Shizuku Edition が Server Core で動かないんだ!! どうにかできないかい? OK! 考えてみるよ。 Server Core だと!!
  56. 56. [56] Server Core とは? Windows Server 2008/2012 をサーバーとして動作させるために 必要な最小限の機能のみをインストールするオプションです。 GUI 機能は大きく制限されており、IE や WinForms/WPF は使えません。
  57. 57. [57] Server Core では IE が使えない!? でも、どうしたら??
  58. 58. [58] GDI で 書き直す スルー 一体どうしたらよいのでしょうか?
  59. 59. [59] 一人でも多くの人に Shizuku Edition を!! GDI で書き直す!! (キリッ GDI で新規とか 罰ゲームかよorz 第二世代萌え駆動開発の神髄!!
  60. 60. [60] デスクトップアプリ C++/Win32 MFC C#/VB.NET .NET Framework HTML (CSS+JS) GDI/GDI+ WinForms WPF ネイティブ マネージド CrystalDiskInfo 6 Server Core でも動作する 漢のプラットフォーム
  61. 61. [61] GDI ベースで普通に作ると・・・ これでは萌えられません!!
  62. 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. [63] GDI/GDI+ で UI 構築 Q: 画面がチラつくことがあるんですが… A: ダブルバッファリングしたら? Q: ボタンに透過 PNG 画像を使いたいのですが… A: オーナードローしたら? Q: HiDPI に対応したいのですが… A: コントロールを拡大縮小したら? Q: すっ、少しぐらいは良いところあるんですよね? A: 互換性? あんまりないんじゃない? 嫌な予感しかしない…
  64. 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. [65] HiDPI 対応 100% 200% 300% 拡大率ごとに画像を用意してい るので、拡大してもクッキリ!! 配布サイズはちょっと大きいですけど…
  66. 66. [66] 透過 PNG 対応ボタン CButtonCx* クラス (オーナードローによる透過 PNG 表示に対応) 1. ボタンの背景をバックバッファに描画 2. 背景と透過 PNG 画像をアルファブレンド (自前) 3. GDI もしくは GDI+ で文字列描画 (DirectWrite への対応は検討中) 4. 表示 (ダブルバッファ対応) *ソフト屋 巣さん http://softyasu.net/ の CAlphaButton を参考にさせていただきました。 今どきのライブラリなら全部 やってくれるんですけどね…
  67. 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. [68] Per-Monitor DPI (Win8.1 以降) 96 dpi (100%) 192 dpi (200%)  DPI境界を跨ぐたびに適切な拡大率に調整 ※詳細は Per-Monitor DPI で検索!!  タイトルバーとメニューバーのサイズは共通 ⇒ 大きすぎる/小さすぎるという問題が発生 ⇒ 自前で描画するしかない?? (未対応)
  69. 69. [69] めでたく Server Core でも動作!!
  70. 70. [70] まとめ
  71. 71. [71] まとめ 萌え駆動開発 楽しいですよ!! 第二世代萌え駆動開発の魅力が 少しでも伝われば幸いです。
  72. 72. [72] Q&A
  73. 73. [73] 質問1: 制作したグッズは? 回答1: ポスター ポストカード 卓上カレンダー かるた など 今後も色々制作予定です Q&A
  74. 74. [74] ポスター
  75. 75. [75] 2012年9月: iPh○ne 5/5s ケース iPh○ne 5/5s 専用ケース
  76. 76. [76] コミケ83: インフラエンジニアかるた サーバ擬人化ユーザ会 さんとコラボで 『かるた』と『読み札CD』を制作
  77. 77. [77] 2013年2月: かるたポスター オリオスペックさん ←ツクモさん パソコンショップ アークさん→ 出典: http://akiba-pc.watch.impress.co.jp/docs/wakiba/find/20130108_581014.html
  78. 78. [78] 2013年2月: バレンタインチョコ企画 オリオスペックさんとバレンタインコラボ ~店頭デモの様子~ 出典: http://ascii.jp/elem/000/000/762/762701/
  79. 79. [79] 2013年10月: 卓上カレンダー ポスター他 出典: http://zigsow.jp/?m=zigsow&a=page_fh_own_item_detail&own_item_id=252541 オープンソースカンファレンス 2013 Tokyo/Fall にて無償頒布
  80. 80. [80] 質問2: グッズの制作費用は? 回答2: ※紙質・部数に依存 ポスター: 数千円~ ポストカード: 数千円~ 卓上カレンダー: 数千円~ 意外と手軽に制作可能です!! Q&A
  81. 81. [81] ご清聴ありがとうございました

×