モバイル デバイスで ASP.NET Web ページ (Razor) サイトをレンダリングする
作成者: Tom FitzMacken
この記事では、モバイル デバイスで適切にレンダリングされる ASP.NET Web ページ (Razor) サイトでページを作成する方法について説明します。
ここでは、次の内容について学習します。
- 名前付け規則を使用して、ページがモバイル デバイス専用に設計されていることを指定する方法。
チュートリアルで使用するソフトウェアのバージョン
- ASP.NET Web ページ (Razor) 3
このチュートリアルは、ASP.NET Web ページ 2 にも適用できます。
ASP.NET Web ページを使用すると、モバイルやその他のデバイスでコンテンツをレンダリングするためのカスタム ディスプレイを作成できます。
ASP.NET Web ページ サイトでデバイス固有のページを作成する最も簡単な方法は、FileName.Mobile.cshtml のようなファイル命名パターンを使用することです。 2 つのバージョンのページ(例: MyFile.cshtml という名前のページと MyFile.Mobile.cshtml という名前のページ) を作成できます。 実行時にモバイル デバイスが MyFile.cshtml を要求すると、ASP.NET は MyFile.Mobile.cshtml からコンテンツをレンダリングします。 それ以外の場合は、MyFile.cshtml がレンダリングされます。
次の例は、モバイル デバイス用のコンテンツ ページを追加してモバイル レンダリングを有効にする方法を示しています。 Page1.cshtml には、コンテンツとナビゲーション サイドバーが含まれています。 Page1.Mobile.cshtml にも同じコンテンツが含まれていますが、サイドバーは含まれていません。
ASP.NET Web ページ サイトで、Page1.cshtml という名前のファイルを作成し、現在のコンテンツを次のマークアップに置き換えます。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #navigation { position: absolute; top: 0; left: 0; width: 10em; } #content { margin-left: 13em; margin-right: 10em; } </style> </head> <body> <div id="navigation"> <h3>Related Sites</h3> <ul> <li><a href="http://www.adventure-works.com/">Adventure Works</a></li> <li><a href="http://www.contoso.com/">Contoso, Ltd</a></li> <li><a href="http://www.treyresearch.net/">Trey Research</a></li> </ul> </div> <div id="content"> <h1>Lorem ipsum dolor</h1> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> </body> </html>Page1.Mobile.cshtml という名前のファイルを作成し、既存のコンテンツを次のマークアップに置き換えます。 ページのモバイル バージョンでは、小さい画面でのレンダリングをより適切にするためにナビゲーション セクションが除外されていることに注意してください。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #content { margin-left: 2em; margin-right: 5em; } </style> </head> <body> <div id="content"> <h1>Lorem ipsum dolor</h1> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> </body> </html>デスクトップ ブラウザーを実行し、Page1.cshtml を参照します。
モバイル ブラウザー (またはモバイル デバイス エミュレーター) を実行し、Page1.cshtml を参照します (URL の一部として .mobile. を含めないことに注意してください)。要求は Page1.cshtml に対して行われますが、ASP.NET は Page1.Mobile.cshtml をレンダリングします。
Note
モバイル ページをテストするには、デスクトップ コンピューターで実行されるモバイル デバイス シミュレーターを使用することができます。 このツールを使用すると、モバイル デバイス (つまり、通常よりはるかに狭い表示領域) に Web ページがどのように表示されるかをテストできます。 シミュレーターの一例を挙げると、Mozilla Firefox 用の User Agent Switcher アドオンがあります。これを使用すると、デスクトップ バージョンの Firefox で、さまざまなモバイル ブラウザーをエミュレートできます。