ASP.NET MVC 4 の機能を先取りする

ASP.NET MVC 4 のロードマップが公開されましたが、この中には MVC フレームワーク自体の新機能は思ったより多くない感じですね。開発環境周りの充実やパフォーマンス改善など、実際に開発・運用する上での問題点解消に取り組んでいくのかという印象です。

それほどまでに MVC 3 でフレームワークの完成度が上がったということでしょう。

まあ、それはいいとして。この中にあるモバイル周り、特に

に関しては今でも少しコードを追加するだけで実現出来ます。今回、ちょっとだけ先取りしてしまいしょう。

これはロードマップにあった画像を見るだけでわかりますが、デフォルトテンプレートの CSS レベルでの改善です。CSS Media Queries を使って解像度ごとに切り替えるような CSS になるのかもしれないです。

とりあえず、今の MVC 3 でも以下の一行を _Layout.cshtml の head 内に追加するだけで実現できます。

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

元々、画像のようにサイズがあってない表示になってしまう原因は Safari などの最近のモバイルブラウザが、標準で 980px ぐらいの解像度としてレンダリングしてしまうからです。

なので viewport を追加して幅をデバイスサイズでレンダリングするように指定すれば綺麗な表示になります。

これもロードマップにあった画像を見るだけでわかりますね。標準で jQuery Mobile を利用したテンプレートが追加になるのでしょう。

今でも jQuery Mobile は NuGet で公開されているので、以下のコマンドを打ち込むだけで簡単に MVC プロジェクトへ追加することが出来ます。

Install-Package jquery.mobile

後は _Layout.cshtml に jQuery Mobile の CSS と JavaScript、そして data-* を指定するだけで以下のような UI を実現できました。

これはデバイス専用のビューを用意して、そのデバイスでアクセスされた場合にはビューを切り替えるという仕組みだと思います。ビューの切り替えは標準のビューエンジンをオーバーライドするだけで実現できます。

以前、チャックさんが @IT で書かれていた記事を見ていただければ問題ないでしょう。

実際には既に出来ることばかりですが、それが標準対応されるということは非常に大きな意義がありますね。これからも ASP.NET MVC から目が離せそうにありません。

しばやん雑記