使ってみよう、WebMatrix3

きよくらならみ

• ハンドル：「きよくら ならみ」

– @kiyokura

• 岡山生まれ岡山育ちのプログラマー

–現在は県内の某製造業で社内SE

• NET系の開発やWebアプリ開発

– Microsoft MVP for ASP.NET/IIS

自己紹介

• Okayama IT Engineers Community–通称OITECの運営スタッフ

–主にMS系のテクノロジを扱う勉強会などを、岡山で開催しています

– site: oitec.vbstation.net

• オープンラボ岡山–今年から主宰を引き継ぎました

–岡山でノンジャンルの技術系勉強会を開催

– site: olojp.net

コミュニティ

• WebMatrixとは？

• デモ

• 様々な機能

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

• まとめ

アジェンダ

WebMatrixとは？

• Web開発環境ツール

–無償

–カジュアル

– “様々な”テクノロジーに対応

WebMatrixとは

• like a “XAMPP”

• インストールは簡単

– Web PIで一発インストール！

• Web Matrix / MySQL / IIS Express/ PHP ...

• マウスクリックだけで全てOK！

• www.microsoft.com/japan/web/webmatrix/

簡単なセットアップですべてそろう

• WebMatrix

– 2011/01/11

• WebMatrix 2

– 2012/09/07

• WebMatrix 3

– 2013/05/02

History of WebMatrix

• HTML– HTML5対応

• JavaScript– CoffeeScript

– TypeScript

• CSS– LESS/SASS/SCSS

対応テクノロジー：クライアント側の例

• ASP.NET– Web Pages

– Web Forms

• PHP

• Node.js

• Classic ASP

対応テクノロジー：サーバ側の例

• OSSのアプリケーションを簡単に展開

– WordPress/EC Cube等々

• ソースコントロールへの対応

– Git/TFS

• DB編集の簡易GUIツール

• リモート対応

• 拡張可能

–各種エクステンション / NuGet

その他の特徴

• 直接は関係ありません

注意：昔あった『ASP.NET Web Matrix』とは全く違う

デモ

• ギャラリーからWordPressを選択・展開

• カスタマイズ

デモ：WordPressをギャラリーから展開してセットアップ

展開

カスタマイズ

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

• アプリケーション（フレームワーク）独自の関数もコード補完可能

カスタマイズ

• 各種テンプレートを展開

– ASP.NET Web Pages

– PHP

– node.js

– HTML

デモ：サイトテンプレートからの展開

• MySQLにDBを作成

• 簡易GUI

–テーブルの作成

–データの修正

デモ：MySQLのDB作成と管理

様々な機能

• NuGetによるライブラリ管理に対応– .NET開発向けのライブラリパッケージマネージャ

• WebMatrix向けのNuGetパッケージ作成– メタ情報のtagsにaspnetwebpagesを設定

NuGetに対応

• 拡張機能を追加インストール可能

• 色々な機能がある

– iOSシミュレータ / 各種追加のコンパイラ

拡張の対応

• GitとTFSに対応

• 拡張機能で、GithubやCodePlexにも対応

Git対応 / TFS対応

• Azure Web Sitesと直接連携

–編集結果をデプロイ

–直接テンプレートを展開

– Web Sites上のプロジェクトを直接開く

Windows Azure Web Sites対応

• ワンアクションでVisual Studioと連携

–『ガッツリC#・VB.NETでコードを書くときだけ、一時的にVSを利用する』などが可能

Visual Studioとの連携

• 任意のブラウザでサイトを実行可能

–サーバはIIS Expressを使用

任意のブラウザで実行可能

• DB作成機能

– MySQL / SQL Server / SQL Server CE

• 既存DBへの接続

– MySQL / SQL Server

• DBのオブジェクトの作成・編集

• テーブルデータの閲覧・編集

DB関連機能

• リクエストの簡易解析が可能

リクエストのトレース

• サイトを分析し問題点や改善点を指摘

サイトレポート機能

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

• クライアント・サイド開発の機能も充実

–サーバサイドのテクノロジを問わず利用可能

クライアント・サイド開発

• 補完機能

– HTML5対応

HTML

• 高度なコード補完機能

–内容を解析して候補を表示

JavaScript

• 補完機能

– CSS3対応

–ベンダープレフィックスに対応

–カラーパレットによる色選択

CSS

• CofeeScriptファイルに対応

–エディタの色分けのみ

• コード補完機能はない

–コンパイルはアドオンを使う

• OrangeBit Compiler

– 保存のタイミングで自動でコンパイル

CoffeeScript対応

• 既定でTypeScriptファイルに対応

–エディタの色分けのみ

• コード補完機能はない

–コンパイルはアドオンを利用

• TypeScript Tools

TypeScript対応

• 既定でLESSファイルに対応

–色分け/コード補完に対応

–コンパイルはアドオンを使用

• OrangeBit Compiler

LESS

• 既定でSassファイルに対応

–エディタの色分けのみ

–コンパイルはアドオンを使用

• OrangeBit Compiler

SASS

• 既定でScssファイルに対応

–エディタの色分けのみ

–コンパイルはアドオンを使用

• OrangeBit Compiler

SCSS

まとめ

• カジュアルなWeb開発環境

–無料

–軽量

–シンプル

• 強力なWeb開発環境

–実は多機能

–トレンドを取り入れた機能の充実

–拡張機能による機能拡充

WebMatrixは…

• PHPやNodejsの開発環境として

• Azure Web Siteのフロントエンドとして

• ASP.NETを始めてみようかな、という方

–特にPHP経験者の方にASP.NET Web Pages

• WebのClient Side開発のエディタとして

こんな人にもお勧め

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

リソース

• http://www.microsoft.com/japan/web/webmatrix

• もしくは、Web Platform Installerで、『WebMatrix』を検索・インストール

ダウンロードサイト

• http://www.microsoft.com/japan/web/webmatrix/Learn/

–概要解説PDF

–初心者向けWeb開発手引書

– ASP.NET Web Pages（Razor）解説書

–オープンソースプロダクトのインストール手引き

–などなど

学習リソース

• エバンジェリスト・武田氏のblog

– [MEMO] XAMPP for Windows インストール済みの環境に WebMatrix を共存させる時の注意事項

– http://blogs.msdn.com/b/web_/archive/2011/07/27/10190225.aspx

XAMPPと同居する際の注意点

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