Community Open Day 2013 広島会場の同名のセッション資料

1. 使ってみよう、WebMatrix3
きよくら ならみ

2. • ハンドル：「きよくら ならみ」
– @kiyokura
• 岡山生まれ岡山育ちのプログラマー
– 現在は県内の某製造業で社内SE
• NET系の開発やWebアプリ開発
– Microsoft MVP for ASP.NET/IIS
自己紹介

3. • Okayama IT Engineers Community
– 通称OITECの運営スタッフ
– 主にMS系のテクノロジを扱う勉強会などを、
岡山で開催しています
– site: oitec.vbstation.net
• オープンラボ岡山
– 今年から主宰を引き継ぎました
– 岡山でノンジャンルの技術系勉強会を開催
– site: olojp.net
コミュニティ

4. • WebMatrixとは？
• デモ
• 様々な機能
• クライアント・サイド開発の機能
• まとめ
アジェンダ

5. WebMatrixとは？

6. • Web開発環境ツール
– 無償
– カジュアル
– “様々な”テクノロジーに対応
WebMatrixとは

7. • like a “XAMPP”
• インストールは簡単
– Web PIで一発インストール！
• Web Matrix / MySQL / IIS Express/ PHP ...
• マウスクリックだけで全てOK！
• www.microsoft.com/japan/web/webmatrix/
簡単なセットアップですべてそろう

8. • WebMatrix
– 2011/01/11
• WebMatrix 2
– 2012/09/07
• WebMatrix 3
– 2013/05/02
History of WebMatrix

9. • HTML
– HTML5対応
• JavaScript
– CoffeeScript
– TypeScript
• CSS
– LESS/SASS/SCSS
対応テクノロジー：クライアント側の例

10. • ASP.NET
– Web Pages
– Web Forms
• PHP
• Node.js
• Classic ASP
対応テクノロジー：サーバ側の例

11. • OSSのアプリケーションを簡単に展開
– WordPress/EC Cube等々
• ソースコントロールへの対応
– Git/TFS
• DB編集の簡易GUIツール
• リモート対応
• 拡張可能
– 各種エクステンション / NuGet
その他の特徴

12. • 直接は関係ありません
注意：昔あった『ASP.NET Web Matrix』とは全く違う

13. デモ

14. • ギャラリーからWordPressを選択・展開
• カスタマイズ
デモ：WordPressをギャラリーから展開してセットアップ

15. 展開

16. カスタマイズ
アプリケーション（フレームワーク）が
変更を推奨していないファイルは、アイ
コンが鍵付きでグレーアウトされる

17. • アプリケーション（フレームワーク）独
自の関数もコード補完可能
カスタマイズ

18. • 各種テンプレートを展開
– ASP.NET Web Pages
– PHP
– node.js
– HTML
デモ：サイトテンプレートからの展開

19. • MySQLにDBを作成
• 簡易GUI
– テーブルの作成
– データの修正
デモ：MySQLのDB作成と管理

20. 様々な機能

21. • NuGetによるライブラリ管理に対応
– .NET開発向けのライブラリパッケージマネージャ
• WebMatrix向けのNuGetパッケージ作成
– メタ情報のtagsにaspnetwebpagesを設定
NuGetに対応

22. • 拡張機能を追加インストール可能
• 色々な機能がある
– iOSシミュレータ / 各種追加のコンパイラ
拡張の対応

23. • GitとTFSに対応
• 拡張機能で、GithubやCodePlexにも対応
Git対応 /TFS対応

24. • Azure Web Sitesと直接連携
– 編集結果をデプロイ
– 直接テンプレートを展開
– Web Sites上のプロジェクトを直接開く
Windows AzureWeb Sites対応

25. • ワンアクションでVisual Studioと連携
– 『ガッツリC#・VB.NETでコードを書くとき
だけ、一時的にVSを利用する』などが可能
Visual Studioとの連携

26. • 任意のブラウザでサイトを実行可能
– サーバはIIS Expressを使用
任意のブラウザで実行可能

27. • DB作成機能
– MySQL / SQL Server / SQL Server CE
• 既存DBへの接続
– MySQL / SQL Server
• DBのオブジェクトの作成・編集
• テーブルデータの閲覧・編集
DB関連機能

28. • リクエストの簡易解析が可能
リクエストのトレース

29. • サイトを分析し問題点や改善点を指摘
サイトレポート機能

30. クライアント・サイド開発の機能

31. • クライアント・サイド開発の機能も充実
– サーバサイドのテクノロジを問わず利用可能
クライアント・サイド開発

32. • 補完機能
– HTML5対応
HTML

33. • 高度なコード補完機能
– 内容を解析して候補を表示
JavaScript

34. • 補完機能
– CSS3対応
– ベンダープレフィックスに対応
– カラーパレットによる色選択
CSS

35. • CofeeScriptファイルに対応
– エディタの色分けのみ
• コード補完機能はない
– コンパイルはアドオンを使う
• OrangeBit Compiler
– 保存のタイミングで自動でコンパイル
CoffeeScript対応

36. • 既定でTypeScriptファイルに対応
– エディタの色分けのみ
• コード補完機能はない
– コンパイルはアドオンを利用
• TypeScript Tools
TypeScript対応

37. • 既定でLESSファイルに対応
– 色分け/コード補完に対応
– コンパイルはアドオンを使用
• OrangeBit Compiler
LESS

38. • 既定でSassファイルに対応
– エディタの色分けのみ
– コンパイルはアドオンを使用
• OrangeBit Compiler
SASS

39. • 既定でScssファイルに対応
– エディタの色分けのみ
– コンパイルはアドオンを使用
• OrangeBit Compiler
SCSS

40. まとめ

41. • カジュアルなWeb開発環境
– 無料
– 軽量
– シンプル
• 強力なWeb開発環境
– 実は多機能
– トレンドを取り入れた機能の充実
– 拡張機能による機能拡充
WebMatrixは…

42. • PHPやNodejsの開発環境として
• Azure Web Siteのフロントエンドとして
• ASP.NETを始めてみようかな、という方
– 特にPHP経験者の方にASP.NET Web Pages
• WebのClient Side開発のエディタとして
こんな人にもお勧め

43. まずは一度、触ってみてください！

44. リソース

45. • http://www.microsoft.com/japan/
web/webmatrix
• もしくは、Web Platform Installerで、
『WebMatrix』を検索・インストール
ダウンロードサイト

46. • http://www.microsoft.com/japan/
web/webmatrix/Learn/
– 概要解説PDF
– 初心者向けWeb開発手引書
– ASP.NET Web Pages（Razor）解説書
– オープンソースプロダクトのインストール手
引き
– などなど
学習リソース

47. • エバンジェリスト・武田氏のblog
– [MEMO] XAMPP for Windows インストール
済みの環境に WebMatrix を共存させる時の
注意事項
– http://blogs.msdn.com/b/web_/archive/
2011/07/27/10190225.aspx
XAMPPと同居する際の注意点

48. ご清聴ありがとうございました