モバイル対応(DisplayModes)

モバイル対応(DisplayModes)


【デスクトップ/モバイルの振り分け】

 Display Modesという機能により、デスクトップ用とモバイル用とでページを振り分けることが出来る。
 方法は簡単で、モバイル用に ~.Mobile.vbhtml といったファイルを用意するだけである。
 以下は、モバイル用に、_Layout.Mobile.vbhtmlとContact.Mobile.vbhtmlのビュースクリプトを用意した例

[_Layout.Mobile.vbhtml]

[Contact.Mobile.vbhtml]

arrow_down
[出力結果]
アクセス元がモバイルかどうかに応じてビューが切り替わる。

モバイル向け ※PC向け
30 31

【デバイス単位にビューを振り分ける】

上記のように、デフォルトでは、Display Modesはモバイル端末かどうかでのみビューを振り分ける。
特定のデバイスに対して特定のビューを表示する場合には振り分けルールを更に細分化することができる。
そのためにはGlobal.asaxのApplication_Startイベントハンドラーに以下の記述を追加する。

[Global.asax.vb]

DisplayModeProviderオブジェクトのModes.Insertメソッドで表示ルール(DefaultDisplayModeオブジェクト)
を追加し、DefaultDisplayModeのインスタンス生成時にContextConditionプロパティに対してFunc型(デリゲート)
のルールを追加している。
ユーザーエージェントに指定した文字列が含まれる場合、DefaultDisplayModeのコンストラクタで指定した引数の
文字列の接尾辞のビューを選択するというルールになる。
 
iPhone用とAndroid用にビューを用意しそれぞれの環境でアクセスする。

[Contact.iPhone.vbhtml]

[Contact.Android.vbhtml]

arrow_down
[出力結果]
アクセス元のデバイスに応じてビューが切り替わる。
※ここではPCのChromeのEmulationによりデバイスを切り替えて表示している

iPhone Android
32 33