ASP.NET MVC 4 で理想的なスマートフォン対応サイトを作成する方法

ちょっと前にこんな記事が Twitter や Facebook で話題になっていました。PC とスマホ両対応しているサービスは要注意かもしれません。

グーグル、スマホ対応が不適切なサイトの検索順位を引き下げへ - CNET Japan

Twitter や Facebook でシェアされた URL を踏むと、強制的にスマートフォン向けのトップに飛ばされるサイトってありますよね。どうやら、そういうページは Google では検索順位が下げられるようです。

ソーシャル対応を考えると、PC 向けとスマホ向けを同一の URL で運用したいものです。ちなみにはてなブログはちょっと前に同じ URL で表示されるようになりました。

これまでは、はてなブログをスマートフォンで閲覧すると、次の表のように「/touch」を含むURLで表示されていました。このため、ソーシャルメディア等にシェアする際に複数のURLに分散したり、閲覧時のスタイルが適切でなかったりといった問題がありました。
スマートフォンでも、PCと同じURLでブログを表示するようにしました！利便性と表示速度が向上しています。 - はてなブログ開発ブログ

割と単純に見えるんですが、ゼロから作ろうとするとかなりめんどくさいんですよね。

しかし、ASP.NET MVC 4 というか Web Pages 2 で追加された Display Mode を使えば、同一 URL で PC 向けとスマホ向けのページを提供できるし、切り替えだってブラウザオーバーライド機能があるから、何もしなくても対応出来るので最高に楽ですね。

という訳で、今回は ASP.NET MVC 4 でスマートフォン対応の方法を振り返りつつ、総集編的な感じにまとめておきます。

ビューだけ用意して対応

Display Mode の機能を使って、ビューを複数用意して対応します。実際に作成したビューは以下のようになります。

f:id:shiba-yan:20130624232646p:plain

簡単ですね。Display Mode を使ったビューの切り替えは部分ビューに対しても有効なので、以下のようなコードを書いても意図したとおりに動作します。

@* ページャを表示する *@
@Html.Partial("_Pager", Model.Items)

f:id:shiba-yan:20130624232949p:plain

Display Mode を使っている限り、ビューに関しては何も考える必要が無いです。

ビューとアクションを用意して対応

しかし、ビューだけ用意すれば対応できるのかと言えば、そうは問屋が卸さないのがこの世の中。

殆どの場合は表示する内容が PC 版と微妙に異なってくる現実が待ってます。実際にはビューだけで対応できることなんて少ないと思うので、アクションも部分的に別々に用意してしまいましょう。

拙作の NuGet Gallery | SwissKnife.Mvc 0.0.17 にある DisplayMode 属性を使えば、簡単に実装できます。*1

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [DisplayMode("Mobile")]
    public ActionResult Index(string userAgent)
    {
        return View();
    }
}

引数の userAgent というのはオーバーロード用の意味のないものです。別に ActionName 属性を使って名前を割り当ててやればいいんですが、見た目分かりにくくなるのでこんな方法をとってます。

アクションが 2 つになるからコードが増えるとか言われそうですが、綺麗に作っておけばコントローラのコードなんて数行で済むはずなので、アクションが増えても問題ないと思います。

表示の切り替え

当然ながらスマホ向けから PC 向けのページを表示したいという需要は存在しています。さて、それにどうやって対応しようかという話になるのですが、Display Mode には User-Agent をオーバーライドする機能が用意されているので、それを利用すれば簡単に対応出来ます。

// スマホ向けに切り替える
HttpContext.SetOverriddenBrowser(BrowserOverride.Mobile);

// PC 向けに切り替える
HttpContext.SetOverriddenBrowser(BrowserOverride.Desktop);

Display Mode のブラウザ情報はデフォルトではクッキーに格納されているので、以下の記事のようにクッキーを直接操作すればクライアントサイドで完結することもできます。

ASP.NET MVC 4 のブラウザオーバーライドを JavaScript から設定する - しばやん雑記

リクエストが 1 回分減るのでお得ですね。

ちなみに、ブラウザ情報をクッキー以外に保存したい場合には、以下の記事を参照してください。

ASP.NET MVC 4 のブラウザオーバーライド設定の保存先をカスタマイズする - しばやん雑記

まとめ

今までの記事からも引っ張りつつ、理想的なスマホサイトを作る方法を紹介しました。

ASP.NET MVC 4 にはスマホ対応のために必要な機能がすべて用意されているので、ぶっちゃけかなりおすすめです。拡張性が高いのも非常に良いですね。

*1:ステマ