図1●Razorで作成したグリッド表
図1●Razorで作成したグリッド表
[画像のクリックで拡大表示]

 WebMatrixでは、より簡単にアプリケーションを開発するためのRazorビューエンジン*1が搭載されています。Razorを利用することで「@コード」のようなシンプルな構文で、ページにプログラムを埋め込めます。また、ヘルパーと呼ばれるユーティリティメソッドも豊富に用意されており、例えば、データベースアクセス、チャート作成、TwitterやFacebookなど外部サービスとの連携も直感的に記述できます。

 ここでは、図1のようなデータベースの内容をグリッド表として整形して表示する簡単なサンプルの作成を通じて、Razorの便利さ、簡単さを感じ取ってください。

WebMatrixで利用できるRazor構文

[1]新規のサイトを作成する
 WebMatrixを起動し、スタートメニューから[テンプレートからサイトを作成する]を選択してください。図2が表示されますので、テンプレートとして[空のサイト[英語]]を選択、サイト名は「NikkeiSample」と入力します。図3のように、NikkeiSampleサイトが作成されます。

図2●サイトの新規作成画面
図2●サイトの新規作成画面
[画像のクリックで拡大表示]
図3●サイト作成直後の画面
図3●サイト作成直後の画面
[画像のクリックで拡大表示]

[2]新規にデータベースを作成する
 ウィンドウ左下の[データベース]を選択した状態で、リボンメニューから[新しいデータベース]をクリックします。左上のツリー[NikkeiSample]配下に.sdfファイル(SQL CEデータベース)が作成されますので、名前を適当に設定します。とりあえずここでは「Sample.sdf」としておきます。

図4●テーブルデザイナ
図4●テーブルデザイナ
[画像のクリックで拡大表示]
表1●Bookテーブルのフィールドレイアウト
表1●Bookテーブルのフィールドレイアウト
[画像のクリックで拡大表示]

[3]テーブルを作成する
 Sample.mdf配下の[テーブル]を右クリックし、コンテキストメニューから[新しいテーブル]を選択します。テーブルデザインのための画面(図4)が表示されますので、表1のようなBookテーブルを作成しておきます。データ型のカッコ内の値は文字列の長さを表します。

 列(フィールド)を追加するには、リボンメニューから[新しい列の追加]ボタンを、主キーを設定するにはテーブルデザイナ下の[列のプロパティ]欄から[主キーかどうか]をTrueにセットしてください。

 保存ボタンをクリックすると、テーブル名を聞かれますので、「Book」と入力してください。[テーブル]配下に[Book]が追加されます。

図5●データ編集のためのグリッド
図5●データ編集のためのグリッド
[画像のクリックで拡大表示]
図6●新規ファイルの作成
図6●新規ファイルの作成
[画像のクリックで拡大表示]
リスト1●Grid.cshtml。追加個所を青字で示す
リスト1●Grid.cshtml。追加個所を青字で示す
[画像のクリックで拡大表示]

[4]適当なデータを入力する
 テーブルにデータをセットするには、ツリー上の[Book]を右クリックし、[データ]を選択します。図5のようなグリッド表が表示されます。適当なデータを入力しておきましょう。

[5]新規のファイルを作成する
 以上でデータベースの準備はできました。続いて、WebMatrix左下の[ファイル]を選択し、左上のツリー[NikkeiSample]を右クリック、[新しいファイル...]を選択します*2図6のようなファイル作成ダイアログが表示されますので、Razorページを作成するにはCSHTMLを選択してください。ファイル名は「Grid.cshtml」としておきます。

[6]コードを編集する
 メインウィンドウにGrid.cshtmlの骨組みが表示されますので、リスト1のようにコードを追加します。大まかな流れを説明しましょう。(1)ではSampleデータベースに接続し、Bookテーブルから取り出したデータをグリッド表(WebGridオブジェクト)にセットしています。そして、(2)ではWebGridオブジェクトで整形されたグリッド表をHTMLとして出力しています。

 いかがですか。わずかにこれだけのコードでデータベース連携アプリケーションを作成できてしまう辺り、Razorの強力さを感じ取っていただくには十分なのではないでしょうか。Razorは実に面白いツールです。興味のある方は、「Scott Guthrie氏 Blog翻訳」*3などの記事も参照してみてください。

山田 祥寛(やまだ よしひろ)
WINGSプロジェクト
我が家の息子(3歳)、ハナ(ハムスター♀)に噛まれる! 大泣きしていたので、ショックでしばらく近寄らないかと思っていたら、「ハナちゃん、噛んじゃ…ダメ!」とケージに向かって何度も諭していた。…仲良くね。http://www.wings.msn.to/