使ってみよう、WebMatrix3

4,084 views

Published on

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

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,084
On SlideShare
0
From Embeds
0
Number of Embeds
87
Actions
Shares
0
Downloads
30
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

使ってみよう、WebMatrix3

  1. 1. 使ってみよう、WebMatrix3きよくら ならみ
  2. 2. • ハンドル:「きよくら ならみ」– @kiyokura• 岡山生まれ岡山育ちのプログラマー– 現在は県内の某製造業で社内SE• NET系の開発やWebアプリ開発– Microsoft MVP for ASP.NET/IIS自己紹介
  3. 3. • Okayama IT Engineers Community– 通称OITECの運営スタッフ– 主にMS系のテクノロジを扱う勉強会などを、岡山で開催しています– site: oitec.vbstation.net• オープンラボ岡山– 今年から主宰を引き継ぎました– 岡山でノンジャンルの技術系勉強会を開催– site: olojp.netコミュニティ
  4. 4. • WebMatrixとは?• デモ• 様々な機能• クライアント・サイド開発の機能• まとめアジェンダ
  5. 5. WebMatrixとは?
  6. 6. • Web開発環境ツール– 無償– カジュアル– “様々な”テクノロジーに対応WebMatrixとは
  7. 7. • like a “XAMPP”• インストールは簡単– Web PIで一発インストール!• Web Matrix / MySQL / IIS Express/ PHP ...• マウスクリックだけで全てOK!• www.microsoft.com/japan/web/webmatrix/簡単なセットアップですべてそろう
  8. 8. • WebMatrix– 2011/01/11• WebMatrix 2– 2012/09/07• WebMatrix 3– 2013/05/02History of WebMatrix
  9. 9. • HTML– HTML5対応• JavaScript– CoffeeScript– TypeScript• CSS– LESS/SASS/SCSS対応テクノロジー:クライアント側の例
  10. 10. • ASP.NET– Web Pages– Web Forms• PHP• Node.js• Classic ASP対応テクノロジー:サーバ側の例
  11. 11. • OSSのアプリケーションを簡単に展開– WordPress/EC Cube等々• ソースコントロールへの対応– Git/TFS• DB編集の簡易GUIツール• リモート対応• 拡張可能– 各種エクステンション / NuGetその他の特徴
  12. 12. • 直接は関係ありません注意:昔あった『ASP.NET Web Matrix』とは全く違う
  13. 13. デモ
  14. 14. • ギャラリーからWordPressを選択・展開• カスタマイズデモ:WordPressをギャラリーから展開してセットアップ
  15. 15. 展開
  16. 16. カスタマイズアプリケーション(フレームワーク)が変更を推奨していないファイルは、アイコンが鍵付きでグレーアウトされる
  17. 17. • アプリケーション(フレームワーク)独自の関数もコード補完可能カスタマイズ
  18. 18. • 各種テンプレートを展開– ASP.NET Web Pages– PHP– node.js– HTMLデモ:サイトテンプレートからの展開
  19. 19. • MySQLにDBを作成• 簡易GUI– テーブルの作成– データの修正デモ:MySQLのDB作成と管理
  20. 20. 様々な機能
  21. 21. • NuGetによるライブラリ管理に対応– .NET開発向けのライブラリパッケージマネージャ• WebMatrix向けのNuGetパッケージ作成– メタ情報のtagsにaspnetwebpagesを設定NuGetに対応
  22. 22. • 拡張機能を追加インストール可能• 色々な機能がある– iOSシミュレータ / 各種追加のコンパイラ拡張の対応
  23. 23. • GitとTFSに対応• 拡張機能で、GithubやCodePlexにも対応Git対応 /TFS対応
  24. 24. • Azure Web Sitesと直接連携– 編集結果をデプロイ– 直接テンプレートを展開– Web Sites上のプロジェクトを直接開くWindows AzureWeb Sites対応
  25. 25. • ワンアクションでVisual Studioと連携– 『ガッツリC#・VB.NETでコードを書くときだけ、一時的にVSを利用する』などが可能Visual Studioとの連携
  26. 26. • 任意のブラウザでサイトを実行可能– サーバはIIS Expressを使用任意のブラウザで実行可能
  27. 27. • DB作成機能– MySQL / SQL Server / SQL Server CE• 既存DBへの接続– MySQL / SQL Server• DBのオブジェクトの作成・編集• テーブルデータの閲覧・編集DB関連機能
  28. 28. • リクエストの簡易解析が可能リクエストのトレース
  29. 29. • サイトを分析し問題点や改善点を指摘サイトレポート機能
  30. 30. クライアント・サイド開発の機能
  31. 31. • クライアント・サイド開発の機能も充実– サーバサイドのテクノロジを問わず利用可能クライアント・サイド開発
  32. 32. • 補完機能– HTML5対応HTML
  33. 33. • 高度なコード補完機能– 内容を解析して候補を表示JavaScript
  34. 34. • 補完機能– CSS3対応– ベンダープレフィックスに対応– カラーパレットによる色選択CSS
  35. 35. • CofeeScriptファイルに対応– エディタの色分けのみ• コード補完機能はない– コンパイルはアドオンを使う• OrangeBit Compiler– 保存のタイミングで自動でコンパイルCoffeeScript対応
  36. 36. • 既定でTypeScriptファイルに対応– エディタの色分けのみ• コード補完機能はない– コンパイルはアドオンを利用• TypeScript ToolsTypeScript対応
  37. 37. • 既定でLESSファイルに対応– 色分け/コード補完に対応– コンパイルはアドオンを使用• OrangeBit CompilerLESS
  38. 38. • 既定でSassファイルに対応– エディタの色分けのみ– コンパイルはアドオンを使用• OrangeBit CompilerSASS
  39. 39. • 既定でScssファイルに対応– エディタの色分けのみ– コンパイルはアドオンを使用• OrangeBit CompilerSCSS
  40. 40. まとめ
  41. 41. • カジュアルなWeb開発環境– 無料– 軽量– シンプル• 強力なWeb開発環境– 実は多機能– トレンドを取り入れた機能の充実– 拡張機能による機能拡充WebMatrixは…
  42. 42. • PHPやNodejsの開発環境として• Azure Web Siteのフロントエンドとして• ASP.NETを始めてみようかな、という方– 特にPHP経験者の方にASP.NET Web Pages• WebのClient Side開発のエディタとしてこんな人にもお勧め
  43. 43. まずは一度、触ってみてください!
  44. 44. リソース
  45. 45. • http://www.microsoft.com/japan/web/webmatrix• もしくは、Web Platform Installerで、『WebMatrix』を検索・インストールダウンロードサイト
  46. 46. • http://www.microsoft.com/japan/web/webmatrix/Learn/– 概要解説PDF– 初心者向けWeb開発手引書– ASP.NET Web Pages(Razor)解説書– オープンソースプロダクトのインストール手引き– などなど学習リソース
  47. 47. • エバンジェリスト・武田氏のblog– [MEMO] XAMPP for Windows インストール済みの環境に WebMatrix を共存させる時の注意事項– http://blogs.msdn.com/b/web_/archive/2011/07/27/10190225.aspxXAMPPと同居する際の注意点
  48. 48. ご清聴ありがとうございました

×