特集：.NET業務アプリのスマホ対応のポイント

ある日、「アプリをスマートフォンに対応しろ」と言われたら

尾崎 義尚
2012/05/07
Page1 Page2 Page3

●5.3. PCサイトにモバイル機能を追加する

　もう1つ、ASP.NET MVC 4の興味深い機能として、「PCサイト用のASP.NET MVCプロジェクトに、モバイル用サイトの機能を追加できる」というものがあるので紹介しておこう。先ほどと同様に「ASP.NET MVC 4 Web Application」テンプレートを選択した場合のプロジェクト新規作成時に表示される［New ASP.NET MVC 4 Project］ダイアログで、「Internet Application」テンプレートか、「Intranet Application」テンプレートを選択する（次の画面を参照）。

新しいASP.NET MVC 4プロジェクト作成ダイアログ
「Internet Application」テンプレートか「Intranet Application」テンプレートを選択して、［OK］ボタンをクリックする。

　先ほどのモバイル用と同じように、デスクトップ用のASP.NET MVCプロジェクトが作成される。これを実行して見ると、デフォルト・ブラウザが起動して以下のようなページが表示される。

Intranet Applicationとして作成されたプロジェクトを実行したページ
デスクトップ・ブラウザに最適化されたページが表示される。

　自動的に生成されたページをモバイル・デバイスで表示してみると、そのままでもきれいに表示されることが分かる（次の画面を参照）。

デスクトップ用のページをモバイル・デバイスで表示
モバイル・デバイス用にレイアウトが調整されて、きれいに表示される。

　これは、出力しているHTMLコードをモバイル用に切り替えているわけではなく、HTMLコードやCSSコードの書き方によってデバイスに適した表示ができるようになっている（このようなデザインを「レスポンシブWebデザイン： Responsive Web Design」と呼ぶ）。Contentフォルダの下にあるSite.cssファイルを開いてみると、以下の記述があることが分かる。

/********************
*   Mobile Styles   *
********************/
@media only screen and (max-width: 850px) {
Site.cssのモバイル用の記述
モバイル・デバイスでもきれいに見えるように、横幅が最大850pxまでの画面だけに適用される、モバイル専用のCSSコードが記述されている。

　このようにHTMLコードやCSSコードを工夫することで、さまざまなデバイスに適したコンテンツを単一のページで作成することもできなくはないが、細かい調整が非常に面倒になることは想像に難くないだろう。従って通常は、モバイル用のページを追加するのがよいだろう。

　ASP.NET MVC 4では、作成済みのデスクトップ用プロジェクトにモバイル用の機能を追加できるようになっている。そのための手順を説明していこう。

　まずは、NuGetでモバイル機能を追加していく。次の画面のように、メニューバーから［ツール］−［Library Package Manager］と展開して、［Manage NuGet Packages for Solution］をクリックする。

［Manage NuGet Packges for Solution］メニューをクリックする

　［Manage NuGet Packages］ダイアログが表示されるので、左側のツリーから［Online］を選択したうえで、検索などで「jQuery.Mobile.MVC」を探して、その項目の［Install］ボタンをクリックする（次の画面を参照）。

「jQuery.Mobile.MVC」を探して、［Install］ボタンをクリックする

　［Select Projects］ダイアログが表示されるので、プロジェクトを選択して、［OK］ボタンをクリックする（次の画面を参照）。

［Select Projects］ダイアログで、モバイル機能を追加するプロジェクトを選択して、［OK］ボタンをクリックする

　インストール進行中のダイアログが表示されて、モバイル用機能が追加されていく。以下では、追加されたファイルを簡単に解説していこう。

　まずは、次の画面（＝［ソリューション エクスプローラー］の一部）を見てほしい。Contentフォルダにモバイル用のCSSファイル（例：「Site.Mobile.css」など）と、ScriptsフォルダにjQuery MobileのJavaScriptファイル（例：「jquery.mobile-1.0b3.js」など）が静的なコンテンツとして追加されていることが分かる。

追加されたjQuery Mobileファイル
ContentフォルダとScriptsフォルダにそれぞれjQuery Mobile用のファイルが追加されていることが分かる。

　次に、ソース・ファイルを見ていこう。次の画面（＝［ソリューション エクスプローラー］の一部）を見ると、Controllersフォルダに「ViewSwitcherController.cs」ファイル、ViewsのSharedフォルダには、「_ViewSwitcher.cshtml」ファイルとモバイル用の「_Layout.Mobile.cshtml」ファイルが追加されている。これらについては、もう少し詳細に解説していく。

追加されたソース・ファイル
ViewSwitcher関連ファイルと、モバイル用のレイアウト・ファイルが追加されている。

　_Layout関連ファイルは、ASP.NET Webフォームでいうマスター・ページのような位置付けで、_Layout.Mobile.cshtmlファイルは、モバイル・デバイス用にシンプルな内容になっており、またjQuery Mobileファイルを読み込むようになっている。

●5.4. モバイル・ページとPCページで切り替えられるようにする

　ここまでの手順で、ASP.NET MVCプロジェクトにモバイル機能を追加することができた。それでは、あらためてモバイル・デバイスでアクセスしてみると、実は先ほどまでと変わらず、PC向けデスクトップ・ブラウザ用のページが表示されてしまう。これにモバイル用のビューと切り替えられるようにする機能を追加していこう。

　と、大げさに書いてみたが、実は非常に簡単で、_Layout.cshtmlファイルに以下の1行を追加するだけだ。

<body>
  @Html.Partial("_ViewSwitcher")
_Layout.cshtmlファイルにViewSwitcher用の1行を追加
モバイル用ページに切り替えられるように、ViewSwitcherを表示するようにする。

　では、これを起動してみると、デスクトップ・ブラウザでは表示が変わらないが、モバイル・デバイスで表示してみると、ページ上部に「Displaying desktop view Mobile view」というリンクが追加されていることが分かる（次の画面を参照）。

ViewSwitcherを追加したビューをモバイル・デバイスで表示
ページ上部にビューを切り替えるリンクが表示される。

　では、［Mobile view］リンクをクリックして、モバイル用の表示に切り替えてみよう。すると、以下のような表示になる。

［Mobile view］リンクをクリック
モバイル用の_Layout.Mobile.htmlファイルをテンプレートにした表示に切り替わる。

　これまでと比べて、非常に見にくいページに切り替わっていることが分かると思う。これは、モバイル用の_Layout.Mobile.htmlファイルをテンプレートに読み込んで、デスクトップ・ブラウザ向けと同じIndex.cshtmlファイルを読み込んでいるためだ。

　次に、モバイル用のページを追加してみよう。（［ソリューション エクスプローラー］で）［Views］−［Home］フォルダを右クリックして、表示されるコンテキスト・メニューの［追加］−［View］をクリックする。これにより表示される［Add View］ダイアログ（次の画面を参照）で、［View name］欄に「Index.Mobile」と入力して［Add］ボタンをクリックすると、（［ソリューション エクスプローラー］上の）Index.cshtmlファイルの下に「Index.Mobile.cshtml」ファイルが追加される。

Viewの追加ダイアログ
モバイル用のViewを追加する。

　このようにView（今回の例では「Index.Mobile.cshtml」ファイル）を追加すると、以下のようなコードが生成される。

public class ViewSwitcherController : Controller
{
  ViewBag.Title = "Index.Mobile";
}

<h2>Index.Mobile</h2>
自動生成された新しいビュー（Index.Mobile.cshtml）
何の情報もないシンプルなページが生成される。

　これをもう一度モバイル・デバイスで表示して、「Mobile view」リンクをクリックすると、以下のようにモバイル用のページが表示される。

モバイル・デバイスを起動して、［Mobile view］をクリック
追加したモバイル用のページが表示される。

　このように「Index.Mobile.cshtml」というように「.Mobile」が指定されていると、モバイル・デバイス用のページとして処理される。そこで、「Mobile Application」テンプレートで生成された.cshtmlファイルを「.Mobile」というファイル名で、今回のPC向けWebアプリのプロジェクト内にコピーすれば、そのままモバイル・デバイス用のページが、1つのプロジェクトで利用できるようになる。

　では、これを実現しているViewSwitcherがどのように実装されているかを見ていこう。

　_ViewSwitcher.cshtmlファイルは以下のように記述されている。

   1: @if (Request.Browser.IsMobileDevice && Request.HttpMethod == "GET")
   2: {
   3:   <div class="view-switcher ui-bar-a">
   4:     @if (ViewContext.HttpContext.GetOverriddenBrowser().IsMobileDevice)
   5:     {
   6:       @: Displaying mobile view
   7:       @Html.ActionLink("Desktop view", "SwitchView", "ViewSwitcher", new { mobile = false, returnUrl = Request.Url.PathAndQuery }, new { rel = "external" })
   8:     }
   9:     else
  10:     {
  11:       @: Displaying desktop view
  12:       @Html.ActionLink("Mobile view", "SwitchView", "ViewSwitcher", new { mobile = true, returnUrl = Request.Url.PathAndQuery }, new { rel = "external" })
  13:     }
  14:   </div>
  15: }
_ViewSwitcher.cshtmlファイルのコード
モバイル・デバイス」かつ「GETリクエスト」のときだけ、HTMLコードを出力するようになっている。

　1行目を読むと、モバイル・デバイスかつ、HTTPリクエスト・メソッドが“GET”のときだけ処理されるようになっていることが分かる。これによって、デスクトップ・ブラウザでは表示されなかったわけだ。

　次に4行目で、表示モードがモバイル・デバイス用だったときには「デスクトップ・ビューへの切り替え」、それ以外のときには「モバイル・ビューに切り替え」のためのリンクを表示するようになっている。

　次にコントローラ側の実装も見てみよう。

   1: public class ViewSwitcherController : Controller
   2: {
   3:   public RedirectResult SwitchView(bool mobile, string returnUrl) {
   4:     if (Request.Browser.IsMobileDevice == mobile)
   5:       HttpContext.ClearOverriddenBrowser();
   6:     else
   7:       HttpContext.SetOverriddenBrowser(mobile ? BrowserOverride.Mobile : BrowserOverride.Desktop);
   8:      return Redirect(returnUrl);
   9:   }
  10: }
ViewSwitcherController.csファイルのコード（抜粋）
デバイスとスイッチを判定して、表示を切り替えている。

　4行目で、実行中のデバイス（＝「Request.Browser.IsMobileDevice」プロパティの値）と表示モード（＝「mobile」変数）が一致しているときには、ClearOverriddenBrowserメソッドを呼び出してブラウザ設定のオーバーライドをクリアしている。

　7行目では一致していない場合に、表示モード（＝「mobile」変数）によって、ブラウザ設定をオーバーライドしていることが分かる。このコードによって、表示ブラウザ設定をオーバーライドして、デスクトップ用とモバイル・デバイス用を切り替えているわけだ。

■まとめ

　今回は、技術的に深掘りするのではなく、業務アプリをスマートフォン対応するための基本的な考え方から、ASP.NET MVC 4で追加されたモバイル機能を使った開発の手順までを解説した。スマートフォン・アプリを理解するための手助けになれれば幸いだ。 end of article

　

　INDEX
　 特集：.NET業務アプリのスマホ対応のポイント
　 ある日、「アプリをスマートフォンに対応しろ」と言われたら
　   1．スマートフォン対応とは／ネットワーク接続／スマートフォン対応の検討事項
　   2．セキュリティ／ASP.NET MVC 4（1）
  3．ASP.NET MVC 4（2）


Insider.NET フォーラム 新着記事
  • 第2回　簡潔なコーディングのために （2017/7/26）
    　ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回　Visual Studio Codeデバッグの基礎知識 （2017/7/21）
    　Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回　明瞭なコーディングのために （2017/7/19）
    　C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator （2017/7/18）
    　Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）
- PR -

注目のテーマ

業務アプリInsider 記事ランキング

本日 月間
＠IT
ソリューションFLASH