モバイルWebの傾向とモバイルアプリケーションを構築するための2つのアプローチ

最新のWebの最も強力なトレンドの1つはモバイルWebです。これは、さまざまなモバイルデバイス、スマートフォン、タブレットなどのサイトの特別なプレゼンテーションです。

この記事では、モバイルWebの現在の傾向について説明します。 モバイルWebの成長速度は？ 数年後にモバイルWebに何を期待しますか？ モバイルサイトのプレゼンテーションは、ビジネスやオンラインショッピングにどのように影響しますか？ 今日のモバイルサイトの状況はどうですか？

この記事の目的は、モバイルサイトの作成方法に関する質問に答えることでもあります。 モバイルサイトの作成プロセスにおける2つの主な方向と、 Visual Studio 2012とASP.NET MVCの効果的なツールを使用して、サイトのモバイルプレゼンテーションに直面するタスクを実装する方法を検討します。

モバイルWebトレンド

まず、実用的な部分に移る前に、モバイルWebの現在の傾向を見てみましょう。 「モバイルWebは2年でどれくらいの速さで成長しましたか？」という質問に答えてみてください。 正解は驚くかもしれません。2009年から2011年にかけて、Webサイトを閲覧するためのモバイルデバイスの使用が1000％または10倍に増加しました（図1）。


図1 モバイルWebトレンド（秒）

さらに、2011年8月には、モバイルWebがユーザーによるWebへの総訪問数の7％をすでに占めています。 この記事の執筆時点では、この数字はかなり高い可能性があります。

将来に目を向け、さまざまなアナリストの予測を考慮すると、2014年までにモバイルWebはWebへの通常のデスクトップアクセスを上回ることがわかります（図2）。


図2。 モバイルWebは2014年にデスクトップをバイパスします（c）

非常によく、これらの予測は実際に私たちが観察するものと大差ありません：スマートフォンとタブレットはよりアクセスしやすくなり、ますます普及しています。 たとえば、エジプトの一部の国では、大多数のユーザーがデスクトップインターネットを見逃し、コンピューターを持っていない（または今ではない）状況で、モバイルデバイスですぐにインターネットを使用し始めました。

モバイルWebのこのような強い傾向に関連して、モバイルパフォーマンスがビジネスまたはWebサイトへのトラフィックにどのように影響するかを評価することは興味深いものになります。


図3 モバイルバージョンのサイトのトラフィックの増加

サイトのモバイルバージョンが存在するだけで、リソースのページへのトラフィックが大幅に増加することがわかります。 一部のレポートによると、この増加は最大85％になる可能性があります（図3）。

同時に、ユーザーがモバイルデバイス経由でストアにアクセスできるようにするサイトでは、最大51％の売上成長が見られます（図4）。


図4 モバイルバージョンのサイトの売上成長

モバイルデバイスとモバイルWebには着実な傾向があるように思われます。 研究では、モバイルプレゼンテーションを導入し、サイトやオンラインストアでモバイルデバイスをサポートすることの確かな利点が示されています。 しかし、実際にはどうですか？ すべてのサイトがモバイルWebサポートをサポートしていますか？

いや 2010年の調査によると、モバイル送信のサポートを提供した500の最大のリストのサイトの20％をわずかに超えています（図5）。


図5 モバイルWebサイトのサポート（c）

また、モバイルユーザーをサポートしているeコマースサイトは約5％だけです！ （図6）


図6 モバイルプレゼンテーション用のインターネットサイトの最適化（c）

もちろん、状況は徐々に改善されていますが、ビジネスとWebだけがモバイルWebの開発に追いついていないことは明らかです。

そして、ここで疑問が生じます。ビジネスオーナーはこの問題をどのように解決すべきでしょうか？ モバイルサイトの構築方法

モバイルWeb：2つのアプローチ

この記事では、モバイルWebを構築するための2つの主なアプローチを強調します。 最初のアプローチ：すべてのタイプの画面用の単一サイトおよび2番目のアプローチ：モバイルデバイス用のサイトの個別バージョン。

アプローチにはそれぞれ長所と短所があります。 それらを順番に見てみましょう。

アプローチ：すべてのデバイスに対して1つのサイト

モバイルデバイスでLenta.ruルネットの最大のニュースリソースに切り替えようとすると、次の図が表示されます（図7）。


図7 モバイルブラウザのLenta.ru

タッチスクリーンでジェスチャーを使用してテキストを拡大するために必要な情報を表示するには、写真は不満です（図8）。


図8 おおよそのテキストLenta.ru

ここに私たちがサイトに来たアイデアがあります。この形式で情報を読むことができます。

1つのサイトの情報を異なるデバイスに表示する問題の解決策は、Web標準にあります。 たとえば、Visual Studio 2012のASP.NET MVC4に同梱されているデフォルトのテンプレートを見てください（図9）。


図10 さまざまな画面でのサイトのスケーリング。

それにもかかわらず、デスクトップコンピューターの大画面に焦点を当てたWebサイトを持っているので、他のデバイスで表示するときに画面を縮小しても読みやすさは失われません。

それどころか、Web標準のサポートのおかげで、当社のサイトは画面解像度に適応し、必要に応じて、ページのレイアウト、ページ上の要素の位置を変更したり、モバイルデバイスでプレゼンテーションを便利にできない場合はそれらの一部を削除したりします。

たとえば、図10では、サイズを小さくすると、ページヘッダーのレイアウトの変更、リストデザイン要素（黒丸）の削除に注意できます。 最終的に、最小の解像度であっても、ページは読みやすいままであり、ユーザーが必要とするメインコンテンツへの便利なアクセスを提供します。

私が言ったように、このメカニズムはWeb標準（CSS3 Media Queries）の助けを借りて達成されます。これについては記事の技術部分で説明します。

アプローチ：サイトには別の「モバイル」バージョンがあります

モバイルプレゼンテーションを構築する際の2番目のアプローチ-別のモバイルサイトを検討してください。 たとえば、ソーシャルネットワークFacebookの有名なWebサイトを取り上げます（図11）。


図11 Facebookのデスクトップおよびモバイルバージョン

ご覧のとおり、Facebookはデスクトップユーザーとモバイルユーザーに2つのまったく異なるバージョンのサイトを提供しています。 Facebookのモバイルバージョンの利便性については説明しませんが、このアプローチにより問題を効果的に解決できることに注意してください。

このアプローチをサポートするために、Visual Studio 2012は特別なモバイルサイトテンプレートを追加し、ASP.NET MVCとjQuery UIに基づいて別のモバイルサイトを短時間で構築できるようにしました（図12）。


図12 デスクトップおよびモバイルASP.NETサイト

モバイルサイトを構築する方法に慣れてきたので、モバイルサイトの構築に関する技術的な詳細と、効果的な開発のためにVisual Studio 2012およびASP.NET MVC4が提供するツールを見てみましょう。

ASP.NET MVC 4による効果的なモバイルサイト開発

説明したアプローチの順序でモバイルサイトの開発を検討してください。最初は「すべての画面に1つのサイト」アプローチ、次に「別のサイト」です。

すべての画面に1つのサイトを作成

前に書いたように、Webアプリケーションのコンテンツをさまざまなデバイスに適応させるメカニズムはCSS3 Media Queriesと呼ばれます。 このWeb標準はWeb開発者によく知られていると思います。 ASP.NET MVCはデフォルトでその使用を提供します。

Visual Studio 2012でMVC4アプリケーションを作成する場合、Site.cssスタイル定義ファイルはContentフォルダーにあります。 このファイルには、CSS3メディアクエリの使用が含まれており、ページコンテンツを解像度に適合させることができます（図13）。


図13 CSS3メディアクエリの使用

CSS3 Media Queriesを使用すると、特定の画面幅などの特定の条件でのみ適用されるCSSスタイルのセットを定義できます。

ASP.NET MVC 4はこのメカニズムを使用して、デフォルトのモバイルビューを作成します。 図13は、画面の幅が850ピクセル未満の場合にのみ適用される一連のルールを示しています。

このメカニズムを独自のルールで使用および拡張して、サイトをさらに柔軟にし、ユーザーのデバイスに適応させることができます。

各サイトページに使用する必要があるもう1つの重要なメカニズムは、「ビューポート」メタタグです。

<meta name = "viewport" content = "width = device-width" />

この定義は、画面に合わせてページのテキストとコンテンツを調整するようモバイルデバイスに指示します。 ASP.NET MVC4テンプレートでは、この定義は_Layout.cshtmlレイアウトファイルに追加され、すべてのページに適用されます。

デバイスや条件ごとに異なるビューを作成する

デスクトップユーザーとモバイルユーザー用に1つのサイトがあっても、多くの場合、デバイスごとに異なる表現（デザイン）を作成する必要があります。 デスクトップユーザー用に1つ、モバイルユーザー用に1つ、iPhoneユーザー用に3つ目のデザインを作成する場合のオプションを想像してください。

単純なタスクですが、単一のプロジェクト内で一般的なビジネスロジックを使用して実装する方法は？ ASP.NET MVC 4は、このための非常にシンプルなツールを提供します。これにより、問題を数分で解決できます。

ウィザードを使用して、Index.Mobileという名前の新しいビューをViews / Homeフォルダーに追加します


図14 新しいビューを追加する

その後、このビューのマークアップを次のように変更します。

<h2>こんにちは、モバイルユーザー！</ h2>

そして、実行のためにアプリケーションを実行します。 デスクトップユーザーとして、標準ページが表示されます（図15）。


図15 デスクトップアプリケーションビュー

ここで、アプリケーションを閉じずに、モバイルクライアントの同じアドレスに移動します。 これにはOpera Mobile Emulatorを使用します。 同じ住所のモバイルビューが新しいビューに変更されていることがわかります（図16）。


図16 モバイルビューアプリケーション

ご覧のとおり、同じアプリケーション内で2つの異なるデザインを作成するために、1行のコードを記述する必要はありませんでした。この機能は、MVC4ですぐにサポートされています。

仕事の半分は完了しましたが、3番目のプレゼンテーション、特にiPhoneについてはどうでしょうか？ 前と同じように、Index.iPhoneという別の新しいビューを追加しましょう。 そして、次のコードでマークアップを変更します。

<h2>こんにちはiPhoneユーザー！</ h2>

IEの開発者ツールをiPhoneとして使用して自分自身を紹介し、ページに目を向けると、期待していた正確な結果が得られません（図17）。


図17 iPhoneとしてページに移動する

そうです、MVC4はモバイルデバイス全般ですぐに使用できる機能をサポートしていますが、特定のデバイスを決定するには、ヒントフレームワークを作成する必要があります。

これは、3行のコードで実行されます。 Global.asaxファイルのApplication_Start（）に次のコードを追加します。

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

アプリケーションを起動し、iPhoneを装ってアクセスすると、目的の結果が得られます（図18）。


図18 iPhone専用のアプリビュー

そのため、ASP.NET MVC4メカニズムと3行のコードを使用して、さまざまな種類のデバイス（デスクトップ、モバイルデバイス、特にiPhone用）向けに3つの異なる表現を持つアプリケーションを作成できました（図19）。


図19 1ページの3つのビュー

これらの機能のおかげで、さまざまなデバイス用だけでなく、一般的にあらゆる条件に基づいて、さまざまなビューを作成できます-あなたはそれを自分でインストールします。

モバイルプレゼンテーション用に別のWebサイトを作成する

モバイルプレゼンテーションを作成する2番目の方法は、モバイル固有のインターフェイス（指のコントロールとジェスチャ）に特化した特別なインターフェイスを備えた別のサイトを作成することです。

Visual Studio 2012とASP.NET MVC4はこのシナリオを完全にサポートし、一般的なjQuery UIソリューションに基づいた特別なテンプレートの形でソリューションを提供します（図20）。


図20 単一サイトのモバイルプレゼンテーション

これらのテンプレートと、標準パッケージに含まれるjQuery UIおよびjQuery Mobileコンポーネントを使用して、モバイルクライアント用に個別のサイトを作成できます。

2つのアプローチの選択

必要なアプローチの選択に直面する可能性があります：すべての画面とデバイスに対して1つのサイトを作成するか、モバイルデバイス用に別のサイトを選択します。 選択は完全にあなた次第であり、サイトの詳細とタスクに依存します。

1つのサイトのアプローチは、1つのチームがプロジェクトに取り組んでいるとき、サイトに複雑なレイアウトが含まれていないとき、およびサイトページに犠牲にできない重要な設計要素が含まれていないときに意味があります。

メインサイトに多数の機能ブロックを含む複雑なレイアウトが含まれている場合、別のチームまたはアウトソーシングが関与している場合、別のモバイルサイトのアプローチは理にかなっています。

どちらの方法を選択しても、 Visual Studio 2012とASP.NET MVC4はすべてのアイデアと要望を完全に実現します。

おわりに

この記事では、モバイルWebの現在の傾向、モバイルWebが移動している場所と速度を調べました。 ビジネスおよびサイトの成功に対するモバイル送信サポートの影響に関するデータを確認しました。 今日、モバイルサイトの提出の重要性について学びました。

モバイルユーザーをサポートするという問題を解決するための2つのアプローチについて説明しました。1つはすべてのデバイス用のサイトで、もう1つはモバイルユーザー用のサイトです。 これらの各アプローチは、Visual Studio 2012およびASP.NET MVC 4で効果的にサポートされています。わずか数行のコードで、あらゆるタイプのモバイルユーザーに固有の表現を作成できます。

この資料がお役に立てば幸いです。 すべてのユーザーにとってウェブを便利にしましょう！