しばやん雑記

Azure とメイドさんが大好きなフリーランスのプログラマーのブログ

ASP.NET MVC 3 でも使えるはてなスターとはてなブックマークのヘルパーを作った

ASP.NET

いやー、ASP.NET MVC 3 と Razor は盛り上がってますねー。マイクロソフトの本気恐ろしいです。

ついったーを見てると結構 WebMatrix で使えるヘルパーを作ってる方が多かったので、はてなーらしくはてなスターとはてなブックマーク機能を使うためのヘルパーを作りました。どっちもヘルパーにする必要あるの？という感じですが気にせず行きます。ヘルパーってそんなものですよね。

おさらい

Razor にはそれ自体にヘルパーを定義するための機能が追加されました。キーワードは @helper で、cshtml 中にメソッドのような形で埋め込むことが出来ます。

@helper HelperName(string param1, string param2)
{
    <span>@param1 : @param2</span>
}

見た目は殆どメソッドです。まあ実体もメソッドなんですけど {} の中に直接 HTML タグを書けばそれが出力されるのは便利ですね。

今までは HtmlHelper の拡張メソッドを TagBuilder や string.Format を使って書いてきた人が多いと思いますが、そんなことは Razor では不要です。最高ですね。

はてなスター

単純に貼り付け用の script 周りをヘルパーに持ってきただけなので、さっくりとコードを出します。

@helper HatenaStar(string entry, string uri = "window.location", string title = "h2", string container = "h2")
{
    <script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
    <script type="text/javascript">
        Hatena.Star.SiteConfig = {
            entryNodes: {
                '@entry': {
                    uri: '@uri',
                    title: '@title',
                    container: '@container'
                }
            }
        };
    </script>
}

まあ、大したものじゃないです。コピペの手間を省くためのものという感じですが、単体のファイルとして公開出来るのがいいんじゃないかと。

@HatenaStar("#main")

上のように書くと、表示されているページの #main h2 セレクタに該当する要素にはてなスターを表示させることが出来ます。

はてなブックマーク

こっちも提供されている画像 API を利用するだけの簡単なものです。

@helper HatenaBookmark(string url = null)
{
    url = url ?? Request.Url.AbsoluteUri;
    <a href="http://b.hatena.ne.jp/entry/@url">
    <img src="http://b.hatena.ne.jp/entry/image/@url" />
    </a>
}

使い方ははてなスターの時と同じような感じですが、引数を省略すると現在表示されている URL を使うようにしています。

@HatenaBookmark("http://d.hatena.ne.jp/shiba-yan/")

等と書くとこのブログのブックマーク数を表示できます。それではいつも通り実際に動かして確認してみました。

画像では見にくいですが、ちゃんとページの見出し要素にはてなスターの追加ボタン、そしてその下にはブックマーク数が表示されていますね。

書いていて思ったんですが、Razor のヘルパーってはてなモジュールに似てますね。というか、はてなダイアリーと WebMatrix は予め用意されているパーツをペタペタ張り付ける点とか似てるんですね。