NuGet でゲット! ASP.NET MVC 3 (w/Razor) で使う QR コード ヘルパー

さて、早くも 2 月も終わりですね。早い・・・(って、いつも同じような書き出しだなぁ、と反省)

気を取り直して、今日は Razor ヘルパーの紹介をします。しばらくヘルパー紹介シリーズでこのブログ書いていこうかと思案中でもありますw

ASP.NET MVC 3 からは、これまでの Web フォーム ビュー エンジン (.aspx) に加えて、Razor ビュー エンジン (.cshtml / .vbhtml) が使用できるようになりました。この Razor ビュー エンジンでは、Razor (レイザー) 構文という新しい Web ページ記述構文を使用してビューを書いていくことができます。また、この Razor 構文は、Web サイト作成のための新しい無償ツール WebMatrix でも使用することができ、両者で Web ページのデザインなどを含めたページ定義を共通化することもできます。

この Razor 構文でかかれたページ定義ファイル (.cshtml / .vbhtml) と、この Razor 構文のパーサー エンジンを、通称 ASP.NET Web ページ (英語名: ASP.NET Web Pages) と呼び、独立したコンポーネントとして公開されています。

ASP.NET Web ページ w/Razor Syntax: ダウンロード

この ASP.NET Web ページを中心として、ASP.NET MVC 3 と WebMatrix で共通で使用することができる Razor ベースの Web パーツのことを「ヘルパー」と呼び、現時点でも数多くのヘルパーがオンラインで公開されているうえ、みなさま独自にヘルパーを作成することも簡単におこなうことができます。

このヘルパーを含めた、オンラインで公開されているさまざまなオープンソース ライブラリを一括して管理・公開しているサイトとして、下記の NuGet (ぬげっと) ギャラリーがあります。

NuGet ギャラリー

NuGet

こちらのサイトでは、今日時点で 688 のパッケージが登録されており、みなさんが作成したヘルパーも登録して公開していくことができます。そして、このサイトに登録されているパッケージ情報はフィードとして提供されており、Visual Stuido 2010 に ASP.NET MVC 3 をセットアップすると使用することができる、NuGet Package Manager とよばれる Visual Studio 2010 の拡張機能の中で、簡単に追加パッケージを検索しプロジェクトに登録することができます。

現在、NuGet ギャラリーに日本の開発者の j.sakamoto さんが作成された QR コード ヘルパーが登録されていますので、今回はこのヘルパーを使ってみたいと思います。

QRCodeHelper
NuGet ギャラリーに登録されている QR コード ヘルパー

★ QR コード ヘルパーのダウンロードとプロジェクトへの登録

Visual Studio 2010 で、QR コードを表示したい Web プロジェクトを開きます。そして、「ツール」メニューの「Library Package Manager」ー「Add Library Package Reference」ダイアログで、左側に表示される Online を選択した後に、右上の検索ボックスに qrcode などと入力して、NuGet ギャラリーを検索します。すると、下記の図のように QRCodeHelper が表示されますので、ここで [Install]ボタンを押すと、必要なファイル群がダウンロードされて自動的にプロジェクトに追加されます。

QRCodeHelper_UIInstall 「Add Library Package Reference」ダイアログ

QRCodeHelper_filesプロジェクトに登録された QR コード ヘルパーの関連ファイル

このように、ダイアログ ベースでヘルパー等をプロジェクトに登録する方法だけではなく、PowerShell ベースの「Package Manager Console」ウィンドウを使って、コマンド ベースでも同様の操作を行っていくことができます。「Package Manager Console」は、「ツール」メニューの「Library Package Manager」ー「Package Manager Console」から表示することができます。

この「Package Manager Console」で、”Install-Package QRCodeHelper” と入力するだけで、QR コード ヘルパーをプロジェクトに追加可能です。パッケージの名前を知っている場合はかなりお手軽です。

QRCodeHelper_CmdInstall
「Package Manager Console」ウィンドウ

ここで使用できるコマンドは下記のサイトでコマンド・リファレンスを参照できます。

Package Manager Console Commands

★ QR コードの使用方法

上記の手順でプロジェクトに正常に登録できていれば、ヘルパーを使用するのはとても簡単です。

QR コードを表示したい ASP.NET Web ページ (.cshtml / .vbhtml) に、下記の一行を記述するだけです。

 <div>
     @QRCode.Render("https://edtter.codeplex.com") 
</div>

ここでは URL を文字データとして指定していますが、QR コード化する文字列は基本的にはなんでも OK でしょう。

これで、Web アプリケーションを実行すると、下記のように QR コードが Web ページに現れます。

QRCode

 

いかがでしょうか。ASP.NET MVC 3 や WebMatrix では Razor 構文をベースに、ヘルパーという Web パーツをどんどん取り入れて、Web アプリケーションに機能追加を行っていくことができます。

また、次の機会にその他のヘルパーの紹介や、独自にヘルパーを作成する方法などをご紹介していきたいと思います。