【日本語訳】ASP.NET MVC4 Mobile Features Part1 はじめに～準備

こちらのエントリーでも紹介したようにASP.NET MVC4 Developer Previewがリリースされ、こんなアプリを作ってみました。ただ、世間的にはMVC4の話題は全く盛り上がっていないようで、なんとか自分のブログで盛り上げていきたいと思います。

今回は、ASP.NETの公式サイトに掲載されているチュートリアル「ASP.NET MVC4 Mobile Features」を日本語訳して、ASP.NET MVC4のモバイル新機能の紹介を行いたいと思います。ただ、このチュートリアルは非常に長いので、全5回に分けて公開したいと思います。

それでは、チュートリアルの開始です。

————————–
このチュートリアルでは、ASP.NET MVC4 developer preview Webアプリのモバイル機能の基本的な内容について説明を行います。開発ツールとしてVisual Studioの無償版であるVisual Web Developer 2010 Express Service Pack1を使用します。手元にVisual Studio 2010 SP1の環境があれば、それを使用することもできます。

チュートリアルを始める前に、以下のソフトウェアがインストールされていることを確認してください。

また、アプリケーションの動作確認にモバイル用のブラウザエミュレーターが必要です。以下のどれでも構いません。

※訳者注: 元のコンテンツはWindows Phone Emulatorを使用していますが、日本語訳版はAndroidの実機(docomo SH-12C)のキャプチャーを使用します。

プログラミングにC#を使用しますが、starter project(チュートリアル開始時点)とcompleted preject(チュートリアル終了時点)はVisual Basicのプロジェクトも含まれています。

  • Starter project download（チュートリアル開始時点）
  • Completed project download（チュートリアル完了時点）

 

作成するアプリケーション

このチュートリアルでは、チュートリアル開始時点のプロジェクトに含まれる単純な会議リストアプリケーションにモバイル機能を追加します。以下のスクリーンショットはチュートリアル終了時点のものです。(オリジナルコンテンツのWindows Phone Emulatorの画像を使用しています）

p1_Tags_CompletedProj

 

学習内容

このチュートリアルでの学習内容は以下の通りです。

  • ASP.NET MVC4テンプレートはどのようにHTML5のviewport属性と、モバイルに適応したレンダリングをモバイルデバイス向けの表示に使用しているのか
  • モバイルに特化したViewの作成方法
  • ユーザーにモバイル用表示とデスクトップ用表示の切り替えをさせる機能の作り方

 

はじめに

こちらから、会議リストアプリケーションのソース(starter project)をダウンロードします。エクスクローラーから「MvcMobile.zip」を右クリックし、[プロパティ]を選択します。MvcMobile.zipのプロパティダイアログから、[ブロックの解除]ボタンをクリックします。(Webからダウンロードしたzip形式ファイルを使用するときにセキュリティの警告が表示されないようにします）

image

MvcMobile.zipファイルを右クリックして、[すべて展開]を選択してファイルを解凍します。Visual Web Developer、または、Visual Studio 2010からMvcMobile.slnファイルを開きます。Ctrl+F5を押してアプリケーションを実行すると、デスクトップ用のブラウザが表示されます。モバイルブラウザエミュレーターを起動して、会議リストアプリのURLをエミュレーターに貼り付けます。そして、[Browse by tag]リンクをクリックします。以下のように全タグが表示される画面が表示されます。

20111104-002106

画面はモバイルデバイスからも見やすくなっています、[ASP.NET]リンクをクリックします。

20111104-002139

ASP.NETタグを表示した画面はごちゃっとしており、Date列は非常にわかりにくくなっています。後ほどこのチュートリアル内でモバイルブラウザに特化した全タグ画面を作成し、見やすくなるように改良していきます。

コメントを残す