特集

「Microsoft WebMatrix」でWebアプリの世界へ踏み出そう！ 第4回

自分だけのWebサイトを、簡単かつスピーディーに！　Webパーツで拡張もお手軽

（11/09/22）

「Microsoft WebMatrix」「Microsoft WebMatrix」

　マイクロソフトによるまったく新しい動的なWebアプリの開発環境「Microsoft WebMatrix」（以下、「WebMatrix」）の魅力を紹介する本特集。これまでは、既存のWebアプリをインストールして発行するまでを主に紹介してきた。「WebMatrix」で利用可能なWebアプリはどれも高機能で成熟されており、個人でも本格的なWebサイトを手軽に構築することができる。

　しかし、なかにはそこまで大げさなシステムは必要ないという人も多いのではないだろうか。また、隅々まで自分で把握できる規模の、手に馴染むWebサイトを自分で作りたいと思う人も少なくないだろう。「WebMatrix」は、そんな人たちにぴったりのWebサイト開発環境になっている。

　そこで、最終回となる今回は新規Webサイトの“開発”に焦点を当てて、「WebMatrix」の機能を紹介したい。

・自分の手でデータベースと連携した動的なWebサイトを作ってみたい人
・既存のWebサイトに動的な機能を追加したい人
・ASP.NETやデータベースの学習に挑戦したい人

　などのお役にたてば幸いだ。

MEMOあの緑色の全身タイツを着用した怪しいキャラは何？
Web アプリケーションを簡単編集できる無償ツール WebMatrix ダウンロードはこちら

　Twitterで「WebMatrix」についてツイートすると、緑色の全身タイツをまとった怪しいキャラクターに話しかけられることがある。

　彼の名前は“ウェブマトリクスマン”といい、「WebMatrix」を利用する上で困った事があると助けてくれる（こともある）心優しきヒーローだ。ただし、ただでさえ風体が怪しい上、日頃の言動に多少問題があるせいか、あくまでもマイクロソフトでは“未公認”キャラクターという扱いになっている。

　そんなウェブマトリクスマンを応援してくれる人や、「WebMatrix」を使った開発の息抜きに彼のツイートを読んでやろうと思う人は、試しにフォローしてみてもよいだろう。

「WebMatrix」によるWebサイトの開発

　では、さっそく「WebMatrix」で新しいWebサイトを作ってみよう。

テンプレートから新しいWebサイトを作成

今回はユーザー認証機能がついただけのシンプルなテンプレート“スターターページ”を利用今回はユーザー認証機能がついただけのシンプルなテンプレート“スターターページ”を利用今回はユーザー認証機能がついただけのシンプルなテンプレート“スターターページ”を利用

　「WebMatrix」では、何も記述されていない“空のサイト”のほか、“スターターページ”、“ベーカリー”、“カレンダー”、“フォトギャラリー”などのテンプレートがあらかじめ用意されている。

　“ベーカリー”“カレンダー”“フォトギャラリー”のテンプレートはサンプルとしての意味合いが大きいので、今回はユーザー認証機能がついただけのシンプルなテンプレート“スターターページ”を利用する。

テンプレート“スターターページ”の構造

“スターターページ”“スターターページ”

“スターターページ”の階層構造“スターターページ”の階層構造

　“スターターページ”の構造は以下のようになっている。

/Account　フォルダ
ユーザー認証を行うためのコードが収められたフォルダ。
/App_Data　フォルダ
データベースファイルなどWebサイトのデータが保存されるフォルダ。
/AppStart.cshtml （スタートアップページ）
Webサイトの起動時に実行される。Webサイトの初期化などに利用する。
/_SiteLayout.cshtml （レイアウトページ）
ヘッダー、フッター、サイドバーなどWebサイトに共通の部分を分離して記述できる。それぞれのWebページの内容は“@RenderBody()”と書かれた部分に出力される。
/Defeault.cshtml
“http://（ドメイン名）/”へアクセスすると開かれるトップページ。“Defeault.cshtml”という名前のWebページは、Webブラウザーでディレクトリへアクセスした場合の既定のWebページとなる。既定のWebページのファイル名は、Webサイトの設定画面で変更も可能だ。
/About.cshtml
開発中のWebサイトについての説明を記述するページ。URLでアクセスするには“http://（ドメイン名）/About”を指定する。拡張子は不要。同様にして“.cshtml”の拡張子のWebページを追加すれば、そのファイル名でアクセスできる。

　すべてのWebページに共通する部分をレイアウトページにまとめておけば、1つのファイルあたりのコードを削減できる上、Webサイト全体の見栄えを統一するのにも役立つ。どのページでも同じ位置にメニューがあれば、訪問者にとって使いやすいWebサイトになるはずだ。

すべてのWebページに共通する部分をレイアウトページにまとめておけるすべてのWebページに共通する部分をレイアウトページにまとめておける

ファイル名がアンダーバー（_）から始まるファイルは、Webブラウザーでアクセスしても表示されないファイル名がアンダーバー（_）から始まるファイルは、Webブラウザーでアクセスしても表示されない

　また、新しい部品ページを作成することもできる。たとえば、Webページのフッター部分を部品ページとして切り出したい場合は、“_Footer.cshtml”というファイルを作成して、レイアウトページ内のフッターを表示したい場所に“@RenderPage("_Footer.cshtml")”と記述すればよい。ファイル名がアンダーバー（_）から始まるファイルは、Webブラウザーでアクセスしても表示されない仕組みになっているので、部品ページを作成する場合は活用しよう。

“Razor”で動的なWebページを簡潔に記述

　それでは、“Defeault.cshtml”か“About.cshtml”を開いてみよう。すると、ファイルの先頭に以下のようなコードが記述されているのがわかるだろう。

@{        Layout = "~/_SiteLayout.cshtml";      Page.Title = "（適当な文字列）";  }

　これは“Razor”記法と呼ばれており、これを利用することで状況に応じて内容の変化する“動的な”Webページを記述することができる。

　Webサイトの開発において基本となるのは、HTMLを利用したWebページの記述だ。もちろん「WebMatrix」でもHTMLの記述はサポートされており、コード補完などの機能を利用してすらすらと記述できる。

　しかし、“静的な”コンテンツを記述するHTMLだけでは、柔軟性に欠ける。たとえば、Webサイトの管理者だけが閲覧できるコンテンツをWebページに追加する場合、それをHTMLだけで実現するのは難しいだろう。

　そのようなHTMLの欠点を補うのが、PHPやASP.NETといった“動的な”コンテンツを記述するためのフレームワークだ。これらのフレームワークを利用すれば、変数や関数、条件分岐などを埋め込んだ“ビュー”を記述し、必要になったときに適宜HTMLを生成してWebブラウザーで表示できるようになる。ASP.NETではビューを処理する部分を“ビューエンジン”と呼び、好みのものを利用できる仕組みになっている。ビューエンジンには標準となる“ASPX”のほか、“Spark”“NHaml（エナメル）”“Razor”などがある。

　「WebMatrix」で新規にWebサイトを開発する場合、基本的にASP.NETとRazorの組み合わせが採用されている。Razorは、PHPやASPXよりも記述が簡単で覚えやすいのが特長。たとえば、Webページのフッターに著作権情報を表示する場合を例に挙げよう。

  • 出力したいHTMLコード

    <p>&copy; 窓の杜 1996-2011</p>

  • PHP（*.php）

    <?php$name = "窓の杜";?><p>&copy;<?phpecho $name;?>1996-<?phpecho date("Y");?></p>

  • ASP.NET（*.aspx）

    <%@ Page Language="C#" %>    <script runat="server">string name = "窓の杜";</script><p>&copy;<%=name%>1996-<%=DateTime.Now.Year%></p>

  • ASP.NET＋Razor（*.cshtml）

    @{var name = "窓の杜";}<p>&copy;@name 1996-@DateTime.Now.Year</p>

　PHPやASPXのような専用のタグを入力する場合よりも、Razorはタイプ量が少なくて済むのがわかる。また、すっきりとしていてコードが見やすいのもうれしいところだ。

　また、Razorは“C#”や“Visual Basic”といった既存の言語で記述できるため（「WebMatrix」ではC#のみ）学習コストが低い。そのほか、スクリプトなどが混入した危険なテキストが自動でエスケープされて出力されるので、セキュリティ的にも好ましいといった点も利点と言えるだろう。

　Razorでは、“@”に続く変数やブロックが自動的にC#言語のコードとして認識される仕組みになっている。“if”や“foreach”などの制御文は以下のように記述する。

@*もしログインしているならば…（コメントの例。この部分は実行されない）*@@if(WebSecurity.IsAuthenticated){<p>ログインしています</p>}else{<p>ログインしていません</p>}

　制御文では、“{}”で囲まれた部分は、HTMLタグで囲まれていればHTMLとして出力され、囲まれていなければコードとして実行される仕組み。HTMLタグで囲まれていないテキストを出力したい場合は、“<text>”タグが利用できる。なお、“@”を出力したい場合は“@@”を記述する。

MEMO「WebMatrix」でPHPを利用して新規サイトを作成するには？

サイトにPHPファイルを追加できるサイトにPHPファイルを追加できる

　「WebMatrix」による新規Webサイトの開発は、基本的にASP.NETとRazorの組み合わせで行うが、代わりにPHPを利用することも可能だ。

　その場合は、“空のサイト”テンプレートを利用して、PHPファイルを追加していくことになる。PHPに慣れた人が利用する統合開発環境としても、「WebMatrix」はなかなか優秀なのではないだろうか。

PHPの開発環境としても十分の機能PHPの開発環境としても十分の機能PHPの開発環境としても十分の機能

データベースを利用してみよう

　「WebMatrix」では、データベースも比較的簡単に扱うことが可能で、Webサイトにも簡単に取り込める。ここでは、一行掲示板の機能をWebサイトに追加してみる。

　まず、［データ］画面を開こう。“スターターページ”テンプレートの場合、ユーザー認証のデータを保存するためのデータベースが標準で追加されているので、ここに投稿データを管理するテーブルを追加する。新たにデータ格納用のデータベースを作成してもよいだろう。

　テーブルを作成したら、次にその定義を作成する。今回は、以下のような定義を用意した。

  • PostID：投稿ID。データ型は数値を表す“int型”にしておく。また、“主キーかどうか”を“true”にしておく。
  • Body：本文を保存しておく。データ型はテキストを扱う“ntext”型を指定してみた。
  • CreatedAt：作成日時を保存。データ型は日付を扱う“datetime”型を指定する。
  • UserID：投稿を作成したユーザーのIDで、データ型は“int”型。今回は利用しないが、ユーザーデータを保存した“UserProfile”テーブルと結合して、誰によって投稿されたかを表示したい場合などに利用できる。

　最後に、ダミーデータをいくつか入力しておく。“テーブルビュー”を“データ”に切り替えれば、表計算ソフトのような操作でデータを入力することが可能。

テーブルの定義の作成テーブルの定義の作成

ダミーデータの挿入ダミーデータの挿入

　データの準備はこれで完了なので、次はこれを表示するコードを記述する。“Sample1.cshtml”を作成して以下のコードを記述しよう。

@{        Layout = "~/_SiteLayout.cshtml";      Page.Title = "データベースを利用するサンプル①";        var db = Database.Open("StarterSite");      var query = "SELECT * FROM Posts";      var posts = db.Query(query);  }    <h2>Posts<h2/>  <div>      <ul>@foreach(var post in posts)      {          <li>@post.CreatedAt<br/>@post.body<li/>      }                  <ul/>  </div>

　実行すると以下のような結果になる。新しい順に並び替えたり、最初の10件のみ表示したりといったカスタマイズも加えてみてほしい。

テーブル内のデータを列挙するサンプル（Sample1.cshtml）テーブル内のデータを列挙するサンプル（Sample1.cshtml）テーブル内のデータを列挙するサンプル（Sample1.cshtml）

　もちろん、入力用のフォームも簡単に作ることができる。“Sample2.cshtml”を作成して以下のコードを記述しよう。

@{      Layout = "~/_SiteLayout.cshtml";      Page.Title = "データベースを利用するサンプル②";            // もしPOSTデータが送られてきたら……      if(IsPost)      {          // フォームデータを取得して……          var body = Request["formBody"];                    // データベースに保存する          var db = Database.Open("StarterSite");          var query2 = "INSERT INTO Posts (Body, CreatedAt, UserID) "                      + "VALUES (@0, @1, @2)";          db.Execute(query2, body, DateTime.Now, WebSecurity.CurrentUserId);                                            // 最後に、Webページをリロード          Response.Redirect("/Sample2.cshtml");       }  }    <form action="" method="post">      <p><textarea name="formbody" style="width: 30em; height: 8em;"></textarea></p>      <p><input type="submit" /></p>   </form>

入力フォームのサンプル（Sample2.cshtml）入力フォームのサンプル（Sample2.cshtml）入力フォームのサンプル（Sample2.cshtml）

正常にデータが挿入されたことを［データベース］画面で確認しよう正常にデータが挿入されたことを［データベース］画面で確認しよう

　［データ］画面に戻って、テーブルのデータを確認し、新しいデータが追加されていることを確認しよう。これを拡張していけば、ゲストブックや掲示板、リンク集を管理するシステムなどを、比較的簡単に作成できるはずだ。

ウェブマトリクスマンが手取り足取り「WebMatrix」の使い方を教えてくれる電子書籍『Microsoft WebMatrixでWebアプリをはじめよう！』ウェブマトリクスマンが手取り足取り「WebMatrix」の使い方を教えてくれる電子書籍『Microsoft WebMatrixでWebアプリをはじめよう！』

　ここまで駆け足で「WebMatrix」を利用した新規Webサイトの開発をご紹介した。ちょっと難しいと感じたユーザーも多いかもしれないが、HTMLやSQLといった既存の技術が応用できるので、すでに習得している開発者はもちろん、新規に学習したいユーザーにとってもチャレンジして損はない。

　「WebMatrix」を利用した開発については、日本語での文献も充実している。それらも適宜参照しながら、学習を進めていってほしい。

MEMO「WebMatrix」（ASP.NET）のセキュリティ

ASP.NETのセキュリティ機能ASP.NETのセキュリティ機能

　Razorでは、標準で出力がエンコードされるため、危険なHTMLタグが混入するなどのセキュリティ上の問題が少ないことは前に述べた。それ以外にも、ASP.NETにはさまざまなセキュリティ機能が搭載されている。

　たとえば、先ほどの投稿フォームでHTMLタグを入力すると、それを検知してASP.NETがエラーを発生させる。このように、不用意にHTMLタグを受け付けないよう、少し安全寄りに設計されているというわけだ。

　しかし、HTMLタグの入力を許可したい場合もあるだろう。その場合は、開発者が明示的にHTMLを許可するコードを記述する必要がある。

// もしPOSTデータが送られてきたら……      if(IsPost){          // var body = Request["formBody"];          // 検証なしでフォームデータを受け取る          var body =Request.Unvalidated("formBody");

　タグを生出力するには、“@Html.Raw()”を利用する。しかし、その場合テキストに危険なタグが含まれていないかどうか自分でチェックしたり、HTMLエンコードを施す必要があるだろう。

@Html.Raw(HttpUtility.HtmlEncode(post.body)

パッケージを追加してWebサイトを簡単に拡張しよう

　「WebMatrix」には“パッケージ管理システム”が搭載されており、ほかの人が作成したパッケージ（“Helper”）を簡単に自分のWebサイトへ組み込むことが可能。Twitterのツイートを表示するウィジェットや、WebサイトをFacebookと連携させる機能など、じつにさまざまなパッケージが用意されており、自分のWebサイトを簡単に拡張できる。

　このパッケージ管理システムは“NuGet”と呼ばれており、「Visual Studio 2010」でも利用可能だ。

　「WebMatrix」でパッケージを利用するには、まず作成中のWebサイトをWebブラウザーで開き、“/_Admin”へアクセスする。すると、“ASP.NET Webページの管理”という画面が現れ、パスワードの設定が始まる。

1. WebサイトをWebブラウザーで開き、“/_Admin”へアクセス1. WebサイトをWebブラウザーで開き、“/_Admin”へアクセス

2. 任意のパスワードを設定する2. 任意のパスワードを設定する

3. “_Password.config”が生成されるので“Password.config”へリネーム3. “_Password.config”が生成されるので“Password.config”へリネーム

4. 2で設定したパスワードでログイン4. 2で設定したパスワードでログイン

5. “パッケージマネージャー”画面が現れる5. “パッケージマネージャー”画面が現れる

好みの“NuGet”パッケージを検索・インストールできる好みの“NuGet”パッケージを検索・インストールできる

　たとえば、“Twitter Helper”をインストールすると、“App_Code”という特殊なフォルダが作成され、そこへTwitterのツイートボタンやウィジェットを簡単に表示するためのコードが自動的にインストールされる。“窓の杜”で検索した結果をウィジェットとして表示する場合のRazorのコードはこのような感じになる。

@TwitterGoodies.Search("窓の杜")

“窓の杜”で検索した結果をウィジェットとして表示“窓の杜”で検索した結果をウィジェットとして表示

　有名なWebサービスならばほぼ確実にパッケージが用意されているので、導入すれば自分でコードを書く必要がない。ツイートボタンや“いいね”ボタン、“はてなブックマーク”ボタン、リンクを埋め込んだQRコード、コメント管理サービス“DISQUS”のコメントフォームなどの設置も、同様の手順で簡単に行える。

　また、自分でパッケージを作成して公開することもできる。「WebMatrix」の利用に慣れたらぜひ挑戦してみてほしい。

さまざまなWebパーツを簡単に導入して、自分のサイトを外部サービスと連携させることができるさまざまなWebパーツを簡単に導入して、自分のサイトを外部サービスと連携させることができるさまざまなWebパーツを簡単に導入して、自分のサイトを外部サービスと連携させることができる

MEMOステップアップしよう

ASP.NET MVC3ASP.NET MVC3

　「WebMatrix」でWebサイトを開発していると、1つのCSHTMLファイルにさまざまなロジックが混在してしまうことがある。より大規模なWebサイトを開発するなら、それらをきれいに分離したほうがよいだろう。

　その場合は、MVCフレームワーク“ASP.NET MVC3”の利用を検討しよう。“ASP.NET MVC3”は“Ruby on Rails”のASP.NET版のようなもので、モデル（データとその操作手続き）、ビュー（ユーザーインターフェイス）、コントローラー（ユーザーの操作に対する応答）を分離して記述できる。

　「WebMatrix」も“ASP.NET MVC3”も、標準的なHTMLとASP.NETを技術基盤としていることでは共通している。必要に応じて、ほかの技術へも比較的簡単にステップアップできるのも、「WebMatrix」を学ぶ利点のひとつと言えるだろう。

さいごに

　全4回にわたって、Webサイトの開発環境「WebMatrix」の機能を紹介してきた。

　「WebMatrix」を利用すれば、オープンソースのWebアプリを簡単に導入できる。CMSも、ブログエンジンも、ECサイトも、これひとつで簡単にインストールできる。さらに、運用のアシストもしてくれる。

　また、「WebMatrix」は、Microsoft流のWeb開発のエッセンスをコンパクトにまとめたツールでもある。HTMLも、PHPも、データベースも、Webアプリも、これひとつで自在に操ることができる。ASP.NETとRazorの組み合わせは、おそらく個人開発者にとってもっとも親しみやすいWeb開発プラットフォームではないだろうか。

　さらに、現在ベータ版が公開されている次期バージョン「WebMatrix 2」では、PHP言語やRazor記法の入力補完機能が追加されるなど、とくにコードエディター機能が大幅に強化される予定だ。今後の「WebMatrix」の進化に目が離せない。

　Webアプリを使う人も、Webサイトを開発する人も、ぜひ一度「WebMatrix」を手に取って、Webアプリの世界へ足を踏み入れてみてほしい。本特集がその一助となれば幸いだ。

（柳 英俊）