@jsakamoto

Razorで空テンプレートとセパレータテンプレート - テンプレートデリゲートでやってみる

ASP.NET Razor ビューの話。

Twitter 上で @neuecc さんが、

悩みの種 / “neue cc - Razorで空テンプレートとセパレータテンプレート” htn.to/8n1vJM

— neueccさん (@neuecc) 2013年2月2日

とのこと。

上記ツイート中に貼られている、@neuecc さんのブログ記事はこちら。

Razorで空テンプレートとセパレータテンプレート
http://neue.cc/2013/02/02_395.html

以下引用:「Razorに限らずT4でもなんでもいいんですが、テンプレートで素のforeachだと、セパレータだったり空の時の代替テンプレートだったりを、どういう風に表現すればいいのかなあ、と悩ましいのです、どうなっているのでしょう実際世の中的に。」

@shibayan 曰く、

@neuecc テンプレートデリゲート使うとかどうでしょ haacked.com/archive/2011/0…

— しばやんさん (@shibayan) 2013年2月2日

ということで、割と自分もテンプレートデリゲート派だったので、試しに実装してみた。

ちなみに、テンプレートデリゲートについては、上記 @shibayan のツイートにあるように、以下の Phill Haack 氏のブログを参照されたし。

Templated Razor Delegates
http://haacked.com/archive/2011/02/27/templated-razor-delegates.aspx

さて、ということで、Repeater という名前で HTMLヘルパーを自作してみた。

以下はその自作ヘルパを用いた例。



実装はプロジェクト一式まるごと GitHub に置いておいた。

https://github.com/jsakamoto/RepeaterHelperSample/blob/master/RepeaterHelperSample/RepeaterHelper.cs

偶数行/奇数行で違うテンプレートを指定したり、あるいは何アイテム目を列挙中かの数値変数を混入させたり、あるいは「@item」じゃなくて、「@comic」等々自分の好きな名前で列挙アイテムを示すとかの拡張も可能だが、まずは基本コンセプトを示すということでここまでに留める。

個人的には if 文で判定するよりは、省略可能な名前付き引数で、明示的にテンプレートを渡すほうが好きですね。

以上、どうぞご参考まで。
　

WebMatrix による ASP.NET "超" 入門ハンズオン - フォローアップ(2) - さらに勉強したい人へ

前回の投稿で、先日12/18(土)に開催した CLR/H 第53回勉強会の「WebMatrix による ASP.NET "超" 入門ハンズオン」について、いくつかコメントした。

さて、このハンズオンセッションで ASP.NET "超" 入門を果たしたのち、さらに ASP.NET 道を進んで行くにはどうしたらよいだろうか?

幸い、インターネット上には、WebMatrix についてもたくさんの情報で溢れている。

下記 Microsoft の公式サイトも大変役に立つ。
http://www.microsoft.com/web/webmatrix/learn/

私個人的にお勧めなのは、下記ブログサイト。

「IIS+αでいってみよう」
http://blog.datajapan.jp/ktsukada

「ASP.Net Razor で Go!」
http://razor.datajapan.jp/

@IT や CodeZine などでもいろいろ良記事はあるのだが、こと、自習書としては、上記ブログが大変親切で、かつ、実践的で、わかりやすいように思う。

もちろん、個人個人の好みや相性もあると思うので、一概には言えないが...。

いずれにせよ、これを機会に ASP.NET を通して Web アプリケーションへの窓を開くことができれば、セッション担当冥利につきる。

WebMatrix で Razor 構文で Web ヘルパーを自作する

先日、北海道の IT コミュニティ CLR/H の第51回勉強会に、セッション担当として参加させて頂いた。

題目は "WebMatrix についてお話ししませんか?"。

WebMatrix とは、そう、今年7月頃にβ版が公開された、ASP.NET Web アプリケーション開発環境だ。
WebMatrix の概要を掴むには @IT に掲載されている、Chica さんの翻訳による Scott Guthrie 氏のブログなどがわかりやすい。

セッションで使用した、マインドマップ的覚え書きとして用意した Prezi の資料は下記。
http://prezi.com/vgxwh6bu5k1d/webmatrix/

さて当日セッション中は、ご参加頂いた皆様と大変有意義な時間を過ごすことが出来たのだが、もとよりディスカッションっぽい形態を狙っていたこともあり、仕込んで置いたものの披露できなかったネタもある。

そのひとつが、Webヘルパーの自作。

"Webヘルパー" とは、なにか凝った HTML を簡単な構文ではき出してくれたり、などといった、早い話がライブラリ。
WebMatrix 界隈では、@Twitter.Search("#clrh51") などとするだけで Twitter 公式の検索パネルがレンダリングされるというデモがあるが、その @Twitter.～ のことである。

わざわざ "Webヘルパー" という言葉を新たに持ち出すことで、初学者に対する敷居を下げようとしているだろうか?

さておき。

この Web ヘルパーは自作も出来る。

というか、実際のところ、とくにユーザーインターフェース、すなわち、HTML を出力する系の Web ヘルパーとは、IHtmlString を返す "何か" に過ぎない。

静的メソッド（C#で実装する場合）として実装することも多いようだが、とにかくそういうことである。

インスタンスメソッドだろうが静的メソッドだろうがなんだろうが、とにかく IHtmlString を返すものを "Web ヘルパー" とラベリングしているだけなのだ。

別途 Visual Studio ( Express Edition で OK ) があれば、それを使ってクラスライブラリとして Web ヘルパーを実装し、ビルドして出来たアセンブリ ( .dll ) を WebMatrix のプロジェクト中、bin フォルダに放り込めばそれでよし。

Visual Studio など持ち出さずに、WebMatxi 単体で完結させたいなら、~/App_Code フォルダを作成して、ここに C# コードファイル ( .cs ) を配置し、この .cs ファイル中に実装すればよい。
App_Code フォルダは特別なフォルダで、この中に配置したコードはちゃんと実行時にビルドされるのだ。
（これは、ASP.NET 2.0 以降、Visual Studio 上で、Web "アプリ" ではなく、Web "サイト" としてプロジェクトを構成した場合の動きなので、おなじみの方もいらっしゃると思う。)

とまぁ、ここまでは、ある意味当たり前の話。


"ほほぅ" と面白かったのは、この Web ヘルパーは Razor 構文でも書ける、ということ。

すなわち、App_Code フォルダに、( .cs などではなく ) ASP.NET Web ページファイル ( .cshtml ) を配置し、この .cshtml ファイル中に Razor 構文で Web ヘルパーを実装できるのだ。

この場合、.cshtml ファイル中に特殊なキーワード @helper に続けてヘルパメソッドを定義することになる。

たとえば、~/App_Code/Foo.cshtml を配置し、下記のとおり記述した場合、

@helper Bar(string s, double z=2.0) {
　<span style="zoom:@z">@s</span>
}

以降、次のようにこの Web ヘルパーを利用できるようになる。

<div>
@Foo.Bar("Hello")
</div>

この ASP.NET Web ページは、次のようにレンダリングされるという次第。

<div>
<span style="zoom:2.0">Hello</span>
</div>

とこんな具合。

Razor 構文で Web ヘルパーが記述できると、結構便利である。
C# で実装すると、最終的に出力したい HTML 文字列を構築するために、文字列連結の嵐となって、お世辞にも保守しやすいとは言えない状況になりがちだ。

その点、Razor 構文はそもそも HTML を組み立てるのに適した言語なので、書いていても効率が良いし、なによりも読みやすい。

参考までに、Google のチャートAPIを使って QR コード ( 二次元バーコード ) を生成する Web ヘルパーの実装例を示す。

[C#版 - ~/Ap_Code/QRHelper.cs]
using System;
using System.Collections.Generic;
using System.Web;

public static class QRHelper
{
　public static IHtmlString GetHtml(string url, int pixelSize=150)
　{
　　var qrcodeBaseUrl = "http://chart.apis.google.com/chart?chs={0}x{0}&cht=qr&chl={1}";
　　var qrcodeUrl = string.Format(qrcodeBaseUrl, pixelSize, HttpUtility.UrlEncode(url));
　　var html = string.Format("<img src='{0}'/>", qrcodeUrl);
　　return new HtmlString(html);
　}
}

[Razor版 - ~/Ap_Code/QR.cshtml]
@helper GetHtml(string url, int pixelSize=150){
　@{
　　var sizeUrl = string.Format("{0}x{0}", pixelSize);
　}
　<img src='http://chart.apis.google.com/chart?chs=@sizeUrl&cht=qr&chl=@HttpUtility.UrlEncode(url)'/>
}

[使用例 - ~/Page.cshtml]
<body>
<!-- C# 版の使用例 -->
<p>@QRHelper.GetHtml("http://clr-h.jp")</p>
<!-- Razor 版の使用例 -->
<p>@QR.GetHtml("http://clr-h.jp")</p>
</body>

実行結果は次のとおり。
ついでにプロジェクト一式を Zip 圧縮して SkyDrive に置いておく。
http://cid-5dd1e083875ff918.office.live.com/self.aspx/CLR-H/%e7%ac%ac51%e5%9b%9e%20%e5%8b%89%e5%bc%b7%e4%bc%9a/MyHelper.zip

なお、以上の Web ヘルパーの話は、WebMatrix 固有の話ではなく、ASP.NET Web ページの実装・機能のレベルにおける話のハズなので、ASP.NET MVC3 ( 現時点ではまだβ だが、Go Live ライセンス有効 ) とかでも同じように応用できるのではないかと思われる（確かめていないが...）。


と、まぁ、以上のことは、実は Channel 9 に詳しいビデオがある。

Web Camps TV #5 - Building your own WebMatrix Helpers
http://channel9.msdn.com/Shows/Web+Camps+TV/Web-Camps-TV-5-Building-your-own-WebMatrix-Helpers

このブログエントリの内容は、すべてこのビデオで知った次第。