아주 좋은 정보가 있어서, 퍼왔습니다. (제일밑에 출처게재있음)

[소스 다운로드]

Windows Azure モバイルアプリケーション開発実践

ASP.NET MVC 4 を使った Mobile Web ソリューション実装

執筆者: 日本マイクロソフト株式会社エバンジェリスト鈴木章太郎 & 井上章

更新日: 2012 年 4 月 20 日

サンプルファイルのダウンロード

Windows Azure で公開中のサンプルアプリケーション

今回は、Visual Studio 2010 SP1、C# と、ASP.NET MVC 4 、SQL Azure、jQuery Mobile 等を利用して新しい Mobile Web アプリケーションを作成します。

1. Web アプリケーションにおける課題

PC 用 Web ブラウザーと Mobile Web ブラウザー

Web アプリケーションを作成して、Web サーバーや Windows Azure にデプロイした場合、様々なデバイスからアクセスされることになります。その場合、良く遭遇するのが、下記のような現象でしょう。下記の図を見てください。

このアプリケーションは、2012 年 4 月開催の Windows Developer Days のセッション管理を、ASP.NET MVC 4 を使い、SQL Azure に作成済みの RDB を使って Model を作成し、そこから簡単に View と Controller を生成し、Web アプリケーションを生成して作ったものです。非常に単純なテクニカルセッション情報管理のデモアプリケーションです。画面遷移としては、まずホーム画面が表示されます。

図 1: ホーム画面

その後、画面中のセッションリストをクリックすると、セッション一覧画面に遷移します。

図 2: セッション一覧画面

この中で、あるセッションを選択して、Details をクリックすると、セッション詳細画面に、

図 3: セッション詳細画面

Edit をクリックすると、セッション情報編集画面に、それぞれ遷移します。

図 4: セッション情報編集画面

iPhone の Safari でアクセスした場合

さて、当たり前ですが、これは、PC 用のブラウザー用に作成したアプリケーションなので、例えば iPhone の Safari では少し工夫が必要となります。下記の図はホーム画面にアクセスした場合です。

図 5: Safari で見たホーム画面

これはまだ良い方ですが、セッションリストをクリックしてセッション一覧画面に遷移してみましょう。

図 6: Safari で見た session 一覧画面

このような状況は、iPhone 以外に、例えば、Android でも、 Windows Phone でもブラウザーアプリケーションである限り生じることでしょう。ASP.NET であれば、コンテンツ自体を HTML5 で作成・配信することができますが、このままでは表示が最適化できないので、個別に対応しておきたいところです。このような状況に対応するソリューションは、昔から存在しており、有償のパッケージとして売られているものも多数あります。しかし、ASP.NET MVC 4 を使えば、この Web アプリケーションを、iPhone のみならず、各種モバイルデバイス毎に最適化させることができるのです。

今回は、この ASP.NET MVC 4 を使った Mobile Web アプリケーションの作成と実行について、ご説明していきます。

ページのトップへ

2. ASP.NET MVC アプリケーションの作成

SQL Azure データベースの作成

今回は、テクニカルセッション情報を収納するデータベースを作成します。まず、Windows Azure ポータルにログインします。

図 7: Windows Azure Portal へのログイン

"データベース" タブをクリックすると、SQL Azure の管理画面に遷移します。

図 8: SQL Azure 管理画面

画面上にある、作成ボタンをクリックして、新規でデータベースを作ります。下記のダイアログが出ますので、名前は適当につけて、Web エディション、1 GB で作成します。

図 9: SQL Azure データベースの作成

テーブルの作成

SQL Azure のポータル画面で、作成したばかりのデータベースを選択して、管理ボタンをクリックすると、個別のデータベースの管理画面に遷移しますので、ユーザー名とパスワードを入力して、ログインします。

図 10: SQL Azure 管理ポータルログイン

すると、下記のようなデータベースの管理画面が表示されます。このデータベースに関する諸情報が表示されており、ここから、テーブル作成、ビュー作成、ストアドプロシージャ作成、新規クエリ発行等、次のアクションをとることが可能となっています。

図 11: データベースの管理画面

次は、データベースの概要画面です。

図 12: データベースの概要画面

ここで、データベースのデザイン画面に遷移し、テーブルを作成します。

図 13: データベースのデザイン画面

テーブルを作成するには、新しいクエリ ボタンを押して、出てきたテキストエリアに入力して実行します。テーブルは下記のクエリの通り、作成してください。最初は TimeSlots テーブルです。

/***** CREATE TABLE [TimeSlots] *****/
USE [WDD2425]
GO

/****** Object: Table [dbo].[Timeslots] Script Date: 04/10/2012 13:56:36 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[Timeslots](
[Id] [int] IDENTITY(1,1) NOT NULL,
[Name] [nvarchar](max) NULL,
[Start] [datetime] NULL,
[End] [datetime] NULL,
CONSTRAINT [PK_Timeslots] PRIMARY KEY CLUSTERED
(
[Id] ASC
)WITH (STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF)
)

GO 

次は、Sessions テーブルです。

/***** CREATE TABLE [Sessions] *****/
USE [WDD2425]
GO

/****** Object: Table [dbo].[Sessions] Script Date: 04/10/2012 13:44:03 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[Sessions](
[Id] [int] IDENTITY(1,1) NOT NULL,
[Code] [nvarchar](max) NULL,
[Title] [nvarchar](max) NULL,
[Room] [nvarchar](max) NULL,
[Hash] [nvarchar](max) NULL,
[Timeslot_Id] [int] NOT NULL,
CONSTRAINT [PK_Sessions] PRIMARY KEY CLUSTERED
(
[Id] ASC
)WITH (STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF)
)

GO

ALTER TABLE [dbo].[Sessions] WITH CHECK ADD CONSTRAINT [FK_SessionTimeslot] FOREIGN KEY

([Timeslot_Id])
REFERENCES [dbo].[Timeslots] ([Id])
GO

ALTER TABLE [dbo].[Sessions] CHECK CONSTRAINT [FK_SessionTimeslot]
GO

次は、Speakers テーブルを作成します。

/***** CREATE TABLE [Speakers] *****/
USE [WDD2425]
GO

/****** Object: Table [dbo].[Speakers] Script Date: 04/10/2012 13:50:00 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[Speakers](
[Id] [int] IDENTITY(1,1) NOT NULL,
[Name] [nvarchar](max) NULL,
CONSTRAINT [PK_Speakers] PRIMARY KEY CLUSTERED
(
[Id] ASC
)WITH (STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF)
)

GO

以上でテーブル作成は終了です。

ASP.NET MVC Web Application の作成

Visual Studio に戻り、この SQL Azure データベースに接続し、作成した WDD2425 データベースを用いて、ASP.NET MVC アプリケーションを作成します。データは適当に入れておいてください。

※なお、これまでの作業に関しては、SQL Server Management Studio を使って、SQL Azure に接続して行っても OK です。

次の手順で、ASP.NET MVC 4 Web Application を作成します。適当な名前 (例: MvcApplication1) で、ASP.NET MVC 4 Web Application プロジェクトを新規作成します。

図 14: ASP.NET MVC3 Web Application の作成

次に出てくるダイアログでは、テンプレートでインターネットアプリケーションを選択し、ビューエンジンは、今回は ASPX ではなく、Razor を選択します。

図 15: プロジェクトテンプレートとビューエンジンの選択ダイアログ

次いで、ソリューションエクスプローラー上の Model のフォルダーを右クリックして、Model の追加を行います。追加→新しい項目を選択します。

図 16: Model の追加

新しい項目の追加ダイアログが出るので、データ タブを選択し、ADO.NET Entity Data Model を選択します。

図 17: ADO.NET Entity Data Model の選択

ウィザードが起動するので、最初に、データベースから作成、を選択して次へをクリックします。

図 18: データベースから作成を選択

次に、データ接続の選択、で、Microsoft SQL Server にチェックして、続行します。

図 19: Microsoft SQL Server にチェック

そして、データソースの箇所で、SQL Azure のサーバー名と、SQL Azure 認証のためのユーザー ID とパスワードを入力します。データベースは、WDD2425 を選択します。

図 20: データベースの選択

そして、テーブルの左のチェックボックスにチェックを入れて全てのテーブルを選んで、完了をクリックします。

図 21: Model ウィザードの完了

すると、必要なライブラリが読み込まれて、同時に WDD2425 アプリケーションの Model が生成されます。この状態で必ず Ctrl+Shift + B で忘れずにビルドをしておきましょう。そうしないと次のコントローラーの追加のダイアログボックスの画面で、Class のリスト内に必要なモデルが表示されません。

図 22: 生成された Model

次いで、ソリューションエクスプローラー上で、Controller のフォルダーを右クリックして、新規コントローラーを追加します。

図 23: Controller の追加

コントローラーの追加ダイアログボックスが出るので、SessionController という名前にして、モデルクラス = Sessions、データコンテキストクラス = WDD2425 と設定して、追加をクリックします。

図 24: コントローラーの追加ダイアログボックス

すると、自動的に各種 (CRUD 用の) View も生成され、ソリューションエクスプローラーは下記の通りになります。

図 25: 自動生成される View 他

この状態で、Ctrl + F5 を押して、アプリケーションを起動しホーム画面を表示します。

図 26: アプリケーションの起動画面

この URL の部分の最後に、session (例: http://localhost:62217/session) と入れてリターンキーを押すと、下記の通り、既に全て必要な View その他機能が生成されていることが確認できます。各リンクをクリックして確認してみてください。

図 27: View その他機能の確認

あとは、ホーム画面のタイトルや Session 一覧へのリンク等を、図 1 にご紹介したように修正して、ASP.NET MVC Web アプリケーションの作成は終了です。

ページのトップへ

3. Display Modes によるビューの切り替え

デバイス/ブラウザー検出とビューの切り替え

1. でご紹介した通り、昨今では、PC 上の Web ブラウザーだけでなくスマートフォンやタブレットの呼ばれるモバイル端末上の Web ブラウザーで Web サイトを閲覧することが増えています。いつでも、どこでも、どんなデバイスでも使用可能な Web アプリケーションを開発するにあたって、モバイル端末からのアクセスか否かによってビューを自動で切り替える機能や、モバイルブラウザー向けのビューと、デスクトップ・フルブラウザー向けのビューをユーザーが任意に切り替え可能な機能が ASP.NET MVC 4 で容易に実装できます。

図 28: Display Modes によるビューの切り替え機能適用のイメージ

ASP.NET MVC 4 の Display Modes と呼ばれる機能では、デスクトップ PC 上の Web ブラウザー向けのビューと、モバイル端末の Web ブラウザー向けのビューをそれぞれ用意しておくだけで、ASP.NET MVC 4 フレームワークが自動でブラウザー種別を判断して切り替えをおこないます。

Display Modes

ASP.NET MVC 4 の Display Modes と呼ばれる機能では、デスクトップ PC 上の Web ブラウザー向けのビューと、モバイル端末の Web ブラウザー向けのビューをそれぞれ用意しておくだけで、ASP.NET MVC 4 フレームワークが自動でブラウザー種別を判断して切り替えをおこないます。例えば、下記のようにデスクトップ PC の Web ブラウザー向けの Index.cshtml と共に、モバイルブラウザー向けの Index.Mobile.cshtml を作成します (ここでは Index.cshtml ファイルをコピーして同フォルダーにペーストして使用しています)。

図 29: Index.Mobile.cshtml の作成

さらに、分かりやすいように各ビューの一部を変更して下記のように記述します。

Index.cshtml

@{
ViewBag.Title = "Windows Developer Days PC";
}

...

Index.Mobile.cshtml

@{
ViewBag.Title = "Windows Developer Days Mobile";
}

...

この状態で、Visual Studio 2010 のメニューの [デバッグ開始 (F5)] または [デバッグなしで開始 (Ctrl + F5)] でアプリケーションを開始すると、デスクトップ PC 上の Web ブラウザーでは下記のように Index.cshtml がビューとして使用されます。

図 30: デスクトップ PC の Web ブラウザーでの表示

一方、同じ URL に対してモバイル端末の Web ブラウザーを使ってアクセスすると、下記のように Index.Mobile.cshtml がビューとして使用されます。

図 31: Windows Phone Emulator での表示

このように、モバイル端末用のビューを用意するだけで容易に表示を切り替えることが可能です。

この DisplayMode 機能では、HttpBrowserCapabilities の IsMobileDevice プロパティを元にモバイル Web ブラウザーか否かの判別がおこなわれています。

例えば、ビュー "Views\Home\Index.cshtml" に対して、通常のデスクトップ PC の Web ブラウザーでアクセスすると、通常は "IsMobileDevice == false" と判定され、そのまま Index.cshtml がビューとして使用されます。一方、この Web アプリケーションをモバイル端末の Web ブラウザーでアクセスして "IsMobileDevice == true" と判定されると、ASP.NET MVC 4 の DisplayMode 機能によってデフォルトでは Index.Mobile.cshtml が自動的にビューとして使用されるようになります。ここでは Index ページを例にとりましたが、この DisplayMode 機能はレイアウトページ (_Layout.cshtml など) や部分ビュー (_LoginPartial.cshtml など) に対しても同じように動作します。

モバイルデバイス毎にビューを切り替える

デフォルトの Display Modes 機能では、モバイル Web ブラウザーか否かの判定でビューを切り替えるのみですが、モバイルと判定された場合のビューをさらに分けて用意し、モバイル端末の種別ごとにビューを切り替えることも可能です。

例えば、iPhone 専用のビューを用意したい場合、System.Web.WebPages を参照した上で、下記のコードを Global.asax.cs の Application_Start メソッドに追加し、DefaultDisplayMode インスタンスを追加登録します (UserAgent をベースとした判別ロジックは一例です)。

using System.Web.WebPages;

...

protected void Application_Start()
{
DisplayModeProvider.Instance.Modes.Insert
(0, new DefaultDisplayMode("iPhone")
{
ContextCondition = (context => context.GetOverriddenUserAgent().
IndexOf("iPhone", StringComparison.OrdinalIgnoreCase) >= 0)
});

...
}

そして、例えば Index.cshtml に対して、iPhone 用のビュー Index.iPhone.cshtml を用意します。

図 32: Index.iPhone.cshtml の追加

また、Index.Mobile.cshtml の例と同様に、Index.iPhone.cshtml の記述をわかりやすいように下記のように書き換えます。

Index.iPhone.cshtml

@{
ViewBag.Title = "Windows Developer Days iPhone";
}

...

この状態で、Visual Studio 2010 のメニュー [デバッグ開始 (F5)] または [デバッグなしで開始 (Ctrl + F5)] でアプリケーションを開始し iPhone でページを表示すると、下記のように iPhone 用のビューが使用されるようになります。

図 33: iPhone (Simulator) での表示

Note:
Display Modes では、ビューのファイル名に追加する文字列 (Mobile や iPhone など) の大文字・小文字の区別はされません。

ページのトップへ

4. jQuery Mobile を使ってモバイル向けビューを作成する

プロジェクトへ jQuery Mobile を追加する

jQuery Mobile (英語) と呼ばれる JavaScript ライブラリを使用すると、モバイルデバイスに最適化したビューを簡単に作成することができます。

ASP.NET MVC 4 の Internet Application プロジェクトテンプレートでは、標準では jQuery Mobile は含まれていませんが、NuGet と呼ばれるパッケージマネージャの仕組みを使うことで簡単に jQuery Mobile をプロジェクトに追加することができます。

Visual Studio 2010 のメニューから、[ツール] – [Library Package Manager] – [Manage NuGet Packages for Solution...] を選択すると、[Manage NuGet Packages] ダイアログが表示されます。このダイアログの左側の "Online" を選択してから右上の検索ボックスに "jQuery.Mobile" と入力すると簡単に jQuery Mobile パッケージを検索することができます。

図 34: NuGet による jQuery Mobile のインストール

ここで [Install] ボタンをクリックすると、jQuery Mobile の JavaScript ファイルと CSS ファイルがプロジェクトに追加されます。

なお、NuGet パッケージマネージャでは、上記のダイアログベースの管理だけでなくコマンドラインベースの管理も可能です。メニューの [ツール] – [Library Package Manager] – [Package Manager Console] を選択するとコンソールウィンドウが開きますので、ここで "Install-Package jQuery.Mobile" と入力することでもパッケージを追加可能です。

図 35: コマンドラインでの jQuery Mobile の追加

現時点では、jQuery Mobile のバージョン 1.0.1 が Script フォルダーに追加され、同時に依存関係を持った jQuery が 1.6.4 に更新されます。

図 36: プロジェクトに追加された jQuery Mobile 関連ファイル

モバイル用レイアウトビューの作成

続いて、前述の Display Modes の機能を使ってレイアウトビューもデバイス毎に切り替えるようにします。
下記のようにデスクトップ PC の Web ブラウザー向けのレイアウトビュー _Layout.cshtml と共に、モバイルブラウザー向けの _Layout.Mobile.cshtml を作成します。

図 37: _Layout.Mobile.cshtml の追加

そして、jQuery Mobile の機能を使って下記のようにビューを記述します。

_Layout.Mobile.cshtml

<!DOCTYPE html>
<html<
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="~/Content/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript"
src="~/Scripts/jquery-1.6.4.min.js"></script>
<script type="text/javascript"
src="~/Scripts/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>

<div data-role="page" data-theme="a">

<div data-role="header">
<h1>WDD モバイル</h1>
<div data-role="navbar">
<ul>
<li>@Html.ActionLink("Sessions", "Index", "Session")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>

<div data-role="content">
@RenderBody()
</div>

</div>

</body>
</html>

同時に、Index.Mobile.csthml と Index.iPhone.cshtml のセッション情報一覧へのリンクを下記のように jQuery Mobile のボタンとアイコン属性を指定して書き換えます。

Index.Mobile.cshtml と Index.iPhone.csthml

@{
ViewBag.Title = "Windows Developer Days Mobile"; // または iPhone
}
<div>
<h1>@ViewBag.Title.</h1>
<h2>@ViewBag.Message</h2>
<p>
<a href="@Url.Action("Index", "Session")"
data-role="button" data-icon="star">セッション情報一覧はこちら</a>
</p>
</div>

この状態で iPhone でアプリケーションを表示すると、下記のように jQuery Mobile で最適化されたレイアウトやボタンが使用されたトップページが表示されます。

図 38: jQuery Mobile で最適化されたトップページ

モバイル用セッション情報一覧ビューの作成

同様に、セッション情報一覧のビューの表示を jQuery Mobile を使って最適化します。セッション情報一覧表示用のビューファイル "Views\Session\Index.cshtml" のモバイル用ビューファイル "Views\Session\Index.Mobile.cshtml" を作成します。

図 39: モバイル用セッション一覧ビューの作成

そして、下記のようにセッション情報一覧表示用のビューを記述します。

Views\Session\Index.Mobile.cshtml

@model IEnumerable<MvcApplication1.Models.Sessions>

@{
ViewBag.Title = "セッション一覧";
}

<h2>@ViewBag.Title</h2>

<div>
<ul data-role="listview" data-theme="c">
@foreach (var item in Model) {
<li>
<a href="@Url.Action("Details", new { item.Id })">
<h4>@Html.DisplayFor(modelItem => item.Title)</h4>
<p>Session Code: @Html.DisplayFor(modelItem => item.Code)</p>
<p>Room: @Html.DisplayFor(modelItem => item.Room)</p>
</a>
</li>
}
</ul>
</div>

<p>
<a href="@Url.Action("Create", "Session")"
data-role="button" data-icon="plus">追加</a>
</p>

この状態で iPhone でセッション情報一覧を表示すると、下記のような表示となります。

図 40: jQuery Mobile を使って最適化したセッション情報一覧ビュー

各セッションをタップ (クリック) すると、セッション情報の詳細ビューに表示が変わり、詳しい情報を確認することもできます。

Note:
このドキュメントでは、詳細ビュー "Details.cshtml" の変更まではご紹介しませんが、ここまでご紹介した jQuery Mobile を使ってモバイルデバイスで見やすいレイアウトに容易に変更することができます。

検索機能の追加

jQuery Mobile を使うと、リスト表示されたデータアイテムの検索機能を簡単に追加することができます。前述の Views\Session\Index.Mobile.cshtml の ul リストの属性に、下記のように data-filter="true" と data-filter-placeholder="検索" を追加します。

Views\Session\Index.Mobile.cshtml

...

<div>
<ul data-role="listview" data-theme="c"
data-filter="true" data-filter-placeholder="検索">
...

この修正だけで、下記の実行例のように検索ボックスが表示されるようになります。

図 41: 検索ボックスの追加

検索はクライアントサイドでインクリメンタルにおこなわれるため、とても軽快にリストアイテムを検索することができます。

図 42: アイテムの検索の様子

以上のように、ASP.NET MVC 4 と jQuery Mobile、そして SQL Azure などを利用することで、スマートフォンやタブレットなどの各種モバイルデバイスに対応した Web アプリケーションを迅速に作成することが可能です。

출처 : http://msdn.microsoft.com/ja-jp/windowsazure/hh965702(ja-jp)

저작자표시 비영리 변경금지

'VB.NET' 카테고리의 다른 글

값비교 및 결과출력에 대한 예제 (0)	2013.01.29
커서의 위치를 취득하는 방법 (0)	2013.01.28
타이머 테스트 (0)	2013.01.21
Visual Basic 6.0에서 Visual Basic .NET으로 마이그레이션할 경우 얻을 수 있는 이점 (0)	2013.01.08
상수 및 열거형(Visual Basic) (0)	2013.01.08

.Net 해외개발자

MVC4, Azure 소스 및 예제입니다.

아주 좋은 정보가 있어서, 퍼왔습니다. (제일밑에 출처게재있음)

[소스 다운로드]

Windows Azure モバイルアプリケーション開発実践

ASP.NET MVC 4 を使った Mobile Web ソリューション実装

目次

1. Web アプリケーションにおける課題

PC 用 Web ブラウザーと Mobile Web ブラウザー

iPhone の Safari でアクセスした場合

2. ASP.NET MVC アプリケーションの作成

SQL Azure データベースの作成

テーブルの作成

ASP.NET MVC Web Application の作成

3. Display Modes によるビューの切り替え

デバイス/ブラウザー検出とビューの切り替え

Display Modes

モバイルデバイス毎にビューを切り替える

4. jQuery Mobile を使ってモバイル向けビューを作成する

プロジェクトへ jQuery Mobile を追加する

モバイル用レイアウトビューの作成

モバイル用セッション情報一覧ビューの作成

検索機能の追加

'VB.NET' 카테고리의 다른 글

티스토리툴바

« 2024/04 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

MVC4, Azure 소스 및 예제입니다.

아주 좋은 정보가 있어서, 퍼왔습니다. (제일밑에 출처게재있음)

[소스 다운로드]

Windows Azure モバイル アプリケーション開発実践

ASP.NET MVC 4 を使った Mobile Web ソリューション実装

目次

1. Web アプリケーションにおける課題

PC 用 Web ブラウザーと Mobile Web ブラウザー

iPhone の Safari でアクセスした場合

2. ASP.NET MVC アプリケーションの作成

SQL Azure データベースの作成

テーブルの作成

ASP.NET MVC Web Application の作成

3. Display Modes によるビューの切り替え

デバイス/ブラウザー検出とビューの切り替え

Display Modes

モバイル デバイス毎にビューを切り替える

4. jQuery Mobile を使ってモバイル向けビューを作成する

プロジェクトへ jQuery Mobile を追加する

モバイル用レイアウト ビューの作成

モバイル用セッション情報一覧ビューの作成

検索機能の追加

'VB.NET' 카테고리의 다른 글

'VB.NET' 관련글

티스토리툴바

Windows Azure モバイルアプリケーション開発実践

モバイルデバイス毎にビューを切り替える

モバイル用レイアウトビューの作成