WebMatrixに対応した、新しいけど新しくないRazor

アジェンダ  HTMLの歴史  WebMatriｘの紹介  Razorとは  Razor構文の説明  他言語との比較  Helperを使ってみる  まとめ

HTMLの歴史  シンプルな静的表示時代通常のHTMLタグしか使わない表示 JavascriptやCSSなどは使わずに表示しているためブラウザ依存せ表示できた  動きのある静的表示時代 DynamicHTML時代（DHTML、IE4.0以降）対応ブラウザ側でスタイルやJavascriptを動かすため非対応ブラウザではうまく再現されず変な動きにることがよあった（ブラウザごとでJavascriptを記述して対応する必要があった）  シンプルな動的表示時代 CGIやクラッシASP、PHPなどのスクリプト言語を使用してHTML表示をサーバ側で制御きるようになったこれにより、サーバデタを保持できるうなっためショップイトど運用できるようになった

HTMLの歴史  プログラムと連携した拡張表示時代クライアントに事前コポーネ（ドオ）をスルすることでブラウザ側でActiveXオブジェクトとして連携表示する Flashなど特にアニメーションで利用された（アドイン配布方法やセキュリティ面の課題があった）  ちかしないWeb２．０時代非同期通信とJavascript(Ajax)を連携することにより、単一画面でデータ連携したHTML表示を切り替えることが可能なった  HTMLの進化やっと各ブラウザでW3C準拠表示に切り替えることよ、デザイン崩れのない表示が可能となってきたまた、新時代のHTMLとして新機能がHTML５で追加提言されたことアドオンを利用せず動的な表示が可能とる

WebMatrixの紹介  Microsoftより無償で提供されている動的Webサイトを作成可能なツール http://www.microsoft.com/web/webmatrix/ IIS７．５エクスプレと連携するこで、ASP.NETはもちろんオープンソスのPHPなどのWeb開発を行うことができる（HTML、XML、CSS、C#、VB、Javascript、PHP、クラッシASP、SQLに対応）さらにはWebPlatformInstalleｒ３.0でさまざなオープンソスCMSを簡単に導入することが可能 CMS：コンテツマネージメトシスムベースとなる機能がパッケジ化されていため、コンテツモュルを追加するだけでプログラムなしも簡単に複雑サイトを構築きWordPress、Xoops、Drupal、DotNetNukeなど

Razorとは  WebMatrixとASP.NET（MVC）で利用きるシンプルなビューエジScott Guthrie氏のブログより http://www.atmarkit.co.jp/fdotnet/scottgublog/20100714razor/razor.html 設計目標：いくつかの設計目標があったで、“Razor”をプロトタイ化し評価また。コンパクトさ、表現的流動： Razorはファイルに必要な文字やキーストロクの数を最小化し、高速で流動的コーディング・ワクフロを可能にします。多くのテンプレート文法とは違い、HTML内で明示的にサーバ・ブロックをすためのコーディングが必要ありません。パサはこれをドから推測できるようになっていすこのために、非常コンパクトで表現的な文法が可能りリー素早く楽しタイプできます。簡単に習得： Razorは簡単に習得できるの、最小限概念素早く実用的なります。使用するのはべて既存言語やHTMLのスキルです。

Razorとは新しい言語ではありません： Razorでは意識的に新しい命令言語を作成なようまた。その代わり、開発者が既存C#／VB（またはそのほか）言語スキルをRazorで使用できるようにし、選択た言語素晴らいHTML構築のワークフロを可能にするテンプレート・タグの文法を提供するようにしまた。テキスト・エディタでの作業： Razorでは特別なツール必要く、プレン昔がらのテキスト・エディタも生産的に使えます（メモ帳アプリでもしっかりと動き）。優れたIntelliSenseを完備： Razorは特別なツールやコド・エディタを必要としい設計にってますが、 Visual Studioでは素晴らしいステートメン補完のサポがあります。Visual Studio 2010や Visual Web Developer 2010を更新して、完全なIntelliSenseが装備されるようにす予定で。

Razorとは単体テストが可能：新しいビュー・エンジの実装により、単体テストが可能なます（コントローラやWebサーバを必要とせず、すべての単体テスト・プロジェクでホ可能。特別なアプリケーション・ドメイも不要です）。・らしいです。ちなみにASP.NET MVCに対応したビュー・エンジとては、 NVelocity、NDjango、NHaml、Spark、Brailがあります。

Razor構文の説明 Razor構文は「＠」シンボルを利用したプなコード記述ですそのため、通常HTMLデザインコードを崩さない形でのィグが可能すまた、新しい言語ではなの制御構文もVBやC#のそまコードが利用できます基本的にメイン処理コードを＠｛｝の中で処理して、された変数や関をコードナゲット方式HTMLタグの中に組み込む形をとります

Razor構文の説明 Razor： @{ Page.Title= "Welcome to my Web Site!"; varpasswordErrorMessage= “Password Error”; } <html> <head></head> <body> <div> @if (!passwordErrorMessage.IsEmpty()) { <label for="password" class="validation-error"> @passwordErrorMessage</label> } </div> </body> </html> メインコードを記述 HTML部分に組み込（シンプルに記述できる）

他言語との比較他のコードと比べてみます余計なタグどがいため、HTMLとしてもかなり可読性が高くっいます Razor： @{//データベスとの接続処理コドを記入（省略）} <table> @for (int i = 0; =10; i++) { <tr> <td>@i</td> <td>@rs[“name”]</td> <td><input type=“text” value=“@rs[“phone”]”/></td> </tr> } </table>

他言語との比較クラッシASP and ASP.NETコードナゲット： <%‘データベスとの接続処理コドを記入（省略）%> <table> <% Fori=0 to 10%> <tr> <td><%= i%></td> <td><%= rs(“name”) %></td> <td><input type=“text” value=‘<% = rs(“phone”) %>’ /></td> </tr> <% Next%> </table>

他言語との比較 PHP： <?php#データベスとの接続処理コドを記入（省略）?> <table> <?phpfor($i=1;$i<=10;$i++){ ?> <tr> <td><?phpecho $i; ?></td> <td><?phpecho $rs[“name”]; ?></td> <td><input type=“text” value=‘<?phpecho $rs[“phone”]; ?>’ /></td> </tr> <?php} ?> </table>

Helperを使ってみる Twitter Helper for WebMatrix：http://twitterhelper.codeplex.com/ TwitterのHelperがあるのでこちらを使ってみますサイトからHelperのソースファイルをダウンロドして標準テプレトジェクに追加します

Helperを使ってみる Twitter Helper for WebMatrix： Default.cshtmlにHelperのコードを追加（ハッシュタグ「#razor」で検索させる） @{ Layout = "~/_SiteLayout.cshtml"; Page.Title= "Welcome to my Web Site!"; } <p> @Twitter.Search(“#razor") </p>

Helperを使ってみる Twitter Helper for WebMatrix：実行するとたっ１追加だけで、こんな感じにHelperの機能が便利に使えます

まとめ  かなりコードが短く表現できる一度覚えてしまば、めんどくさがりには強力つかえる。  シンプルでわかりやすい初心者でも見た目わかりやすいの、デザインし。  ヘルパーが強力簡単に使えて面白いヘルパーが今後出くる可能性あり。期待大 知っている人ならけど・表示制御だけなら初心者でも問題いが、細かをするためにはやっぱりC#orVB.NETを覚える必要あり。

参考資料  ＠IT“Razor”の紹介－ ASP.NET向け新ビュー・エンジhttp://www.atmarkit.co.jp/fdotnet/scottgublog/20100714razor/razor.html  MicrosoftWebMatrixhttp://www.microsoft.com/web/webmatrix/ ご清聴ありがとうざいました。

WebMatrixに対応した、新しいけど新しくないRazor

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (10)

Similar to WebMatrixに対応した、新しいけど新しくないRazor

Similar to WebMatrixに対応した、新しいけど新しくないRazor (20)

More from Sho Okada

More from Sho Okada (16)

Recently uploaded

Recently uploaded (9)

WebMatrixに対応した、新しいけど新しくないRazor