• [アーティクル]

この記事は機械翻訳されたものです。

Cutting Edge

モバイル サイト開発 (第 2 部): 設計

Dino Esposito

 

Dino Espositoほとんどモバイル ソリューションを既存の Web サイトのデスクトップのスピンオフであるという考えから派生するモバイル サイト開発についてのいくつかの神話です。 用語のスピンオフは、携帯電話やデスクトップの Web サイトとの関係を説明する、きわめて適切なです。 重要な問題はどのモバイル サイト完全なデスクトップのサイトを実際にはスピンの詳細を懸念します。

彼らがデバイスのための最高のナビゲーション体験をユーザーに提供する — は通常の PC、スマート フォン、タブレット、昔ながらの携帯電話かどうか。 (は、新興の家族、自分は、近い将来のアドホック レンダリングが必要になりますスマートのテレビなどの大画面デバイスのオーバーしています。)あなたも最高の要求元のデバイスを表示できるページのセットをユーザーに提示したいと思う。 どのように特定のデバイスに最も適したマークアップを選ぶだろうか。 私の意見では、これは痛む点であるし、少しの注意と神話を信じることと現実世界の条件を無視してからを維持する分析に値する。

1 つのサイトに収まるすべての神話

ほとんどの開発者は、携帯電話や、一から別に異なるように見えるデスクトップの Web サイトがある必要性を認識します。 画面サイズ別のコンピューティング パワーが違う、ユース ケースは特に少ないと大きく異なるのモバイル サイトになります。 にもかかわらず、別の解像度を自動的に調整されます 1 つだけの Web サイトの構築のアイデアは多くの開発者にとって魅力的です。 しかしより多くの短所長所より危険なルートもあります。 現実的に、プロ/コンのバランスはアプリケーションの性質に依存する起こっている： より高度なサイトより多くの短所と少ないプロ。 、正確には、複数のデバイスに適合させる、1 つのサイトにどういうことですか？ 多くの開発者がときの悪い記憶がある-だけは数年前、まだ今日ではない場合 — Web サイトが構築された自分自身 (デスクトップ) の異なるブラウザーと異なるレンダリング機能の混乱から脱却の問題。 このため、ほとんどの開発者は任意のデバイス (ラップトップ、タブレット、携帯電話、e 読者スマート テレビや)、別の経験ではなくユーザーが訪問することができます 1 つのサイトのアイデアを歓迎します。

ポイント デスクトップのブラウザーでこの違いのほとんどでレンダリング領域です。 モバイル デバイスは、代わりに、問題に 1 つ以上のディメンションを追加: 機能が異なる。 だから、目標は、自動的に、最も適切な経験、以上のコンテンツの最も適切な表示ではなく、異なるデバイスにサービスを提供する Web サイトを構築することです。

微妙な違いのような音か。 まあ、クライアント側の適応対のモバイル コンテンツのサーバー側の適応を開くポイントこれらの日です。

私には、原則としてをブラウザーの調整だけに使用されるデバイスによると、同じコンテンツを提供しています 1 つだけの Web サイトのアイデアを動作しません — が、例外として動作可能性があります。 1 サイトに収まるすべての神話のいくつかの物理デバイスの特性を与え、最も適切なの CSS スタイル シートを動的に選択、ブラウザー機能の上に構築します。 詳細を見てみましょう。

CSS メディア クエリ

CSS3 を導入、メディア クエリは、ブラウザーの機能を別の画面サイズのデバイスを介して消費されるサイトの設計を簡素化するためのものです。 それは、この特定の文脈で用語デバイスもノート パソコンやデスクトップ Pc を含むご注意ください。 このため、画面サイズから 24 インチのデスクトップ モニターに 3 インチのほとんどのスマート フォンの範囲があります。

CSS のメディア クエリの背後にあるアイデアは、関数の単一セットを 1 つの Web サイトを作成してして別の CSS スタイルを別のメディアを異なるスタイル シートをロードすることによって適用することです。 画面ページ中今のセットに一致するすべてのデバイスに制限することができますで CSS3 をもたらした偉大な改善であるルールを与えられました。 ここでは、メディアのクエリの例です。

<link type="text/css"
  rel="stylesheet"
  href="downlevel.css"
  media="only screen and (max-device-width: 320px)">

場合はページを表示して、幅 320 ピクセル以下でのブラウザーを介してのみを Web ページ (または ASP.NET MVC ビューで)、前にマークアップが downlevel.css ファイルにリンクします。 上記の要素のいくつかを使用して任意のページに別の画面サイズのデバイスのレンダリングを最適化できます。 素敵なスタイル シート ルールは動的に適用され、ユーザー デスクトップのブラウザー ウィンドウのサイズを変更するときも、ページのコンテンツを調整します。

CSS メディア クエリがない明示的なチェックをブラウザーの種類、モバイルまたはデスクトップかどうかに注意してください。 すべての事項について、効果的な画面の幅です。 メディア クエリを使用して、幅 320 ピクセルより大きいブラウザーを除外すると、しかし、あなた確かにすべてのモバイル デバイス、携帯電話の画面サイズを選択しています。

メディア クエリでのみキーワードのメディア クエリ ステートメント メディア クエリをサポートしていないブラウザーから隠すことを唯一の目的のために追加してください。 理解これらのブラウザーでは、実際には、メディア タイプしていないし、穏やかにレンダリングをどうぞ。 それは単にメディアを追加するモバイル クライアントに対して準備があるとするサイトにクエリを実行する共通の考えこれらの日です。 私の意見は、わずかに異なるです。 CSS のメディア クエリは、ページが携帯-友好的なしかし彼らの要求の HTTP の数ページあたりのデータ量をダウンロードよう、モバイル サイトの他の重要な側面を最適化する任意の方法で助けにはならないコンテンツをヘルプします。

さらに、メディア クエリ ブラウザーのプロパティの数に制限を見分けることができます。 メディア クエリに関する完全なドキュメントで発見することができます bit.ly/yOuW7q。

CSS メディア クエリ プロパティか何かについてデバイス — すべてではない知っている必要があります。 タブレットやスマート テレビまたはおそらくはボットかどうかは、デバイス、携帯電話かどうかたとえば、あなたは OS についての手掛かりあります。 非同期 JavaScript および XML およびドキュメント オブジェクト モデルの操作、どのように HTML5 と jQuery モバイル、お得なまたはそれを好むマークアップの種類を要求元のブラウザーをサポートする場合同様に、CSS のメディア クエリでは、あなた考えがあるありません。

CSS 機能をされて、メディア クエリは、ブラウザーの CSS サブシステムによって処理されます。 メディア クエリがいずれかいくつかの要素のサイズを変更または非要素のスタイルのセットを選択できるだけことが判明も大きなまたは小さな画面に削減することができます。 CSS メディア クエリには、まだダウンロードとも表示されていないときにメモリにこれらの要素を維持のコストを支払います。 プログラムをダウンロードまたはイメージを構成するにはのページいくつかの JavaScript を使用できます。 この方法では、重い要素より最適化された方法で管理できます。 この余分な作業は、しかし、あなた次第です。

最後に、メディア クエリ CSS3 をサポートするブラウザーが必要です。 つまり、CSS のメディア クエリ素晴らしい仕事ほとんどのスマート フォンが、古いデバイスではなく — と Windows Phone 7 でもないです。 JQuery プラグインを取得することによってメディア クエリはすべてブラウザー ソリューションを選ぶことができます bit.ly/JcwwFY。 ただし、この場合が保証はありませんどこをこのプラグインを使用してされる可能性があります携帯電話のブラウザーは本当に jQuery を実行できます。

全体的にみて、CSS メディア クエリは具体的で携帯電話の開発を目的とする技術です。 ただし、CSS のメディア クエリの柔軟性を使用してさまざまなデバイスを 1 つのコードベースを提供する説得力のあるになります。 彼らはいくつかのケースでは、ソリューションが CSS メディア クエリだけすべてのシナリオに移動する方法はありません。

Multi-Serving

携帯電話の開発へのサーバー側のルートは、Web サイトが要求を受信、ユーザー エージェントを取得します。 その情報を使用して、ブラウザーの効果的な機能を把握するという考えに基づいています。 次に、その知識を武器に、Web サイト インテリジェントに最も適切なコンテンツを要求元のデバイスは何だろう決定します。

あなたはブラウザーの機能について見つけるでしょうか？ 現在、最も効果的な戦略、デバイス説明リポジトリ (DDR) を使用するようである — すなわち、データベースはほぼすべてのデバイスのほぼすべての可能なプロパティを格納、ことは絶えず更新新しいデバイスが市場に出回るよう。 どのような方法で、DDR ASP.NET Request.Browser オブジェクトから異なるでしょうか。 方法では、デスクトップ ブラウザーに関する良い情報がモバイル デバイスの特に正確ではない情報を含む単純な DDR として Request.Browser オブジェクトを見られます。

モバイル デバイスの異なるモデルの数は、数千と成長の順です。 開発者が特定のユース ケースに各デバイスのプロファイルを興味深い見つけることができるプロパティが大幅に異なる場合がありますが、すべてのそれらの連合を取る場合に簡単に、数百に達する。 どのようなオプションが今日の正確なデバイス情報を取得するためありますか

ワイヤレス ユニバーサル リソース ファイル (WURFL) と呼ばれる、DDR は、現在のモバイル デバイスの 15,000 以上のプロファイルを含む半分百万のユーザー エージェント文字列と一致する XML データベースです。 各プロファイルには、500 以上の機能が含まれます。 WURFL は、古典的なデュアル ライセンス スキーム、AGPL v3 と商業の下でリリース、オープン ソースのフレームワークです。 WURFL も、クラウド サービスとして利用可能でありいくつか基本的な計画は、いくつかのプロパティには、限られた無料。 詳細についてを参照してください scientiamobile.com。 WURFL 唯一の DDR はありませんが、WURFL は事実上の標準と見なされることができます。 他のものの間では、Facebook や Google の携帯電話プラットフォームに WURFL を採用します。 WURFL Api PHP、Java および Microsoft .net Framework と ASP.NET アプリケーション NuGet 経由でスムーズに差し込みます。

ASP.NET プラットフォームがかかわっている限りでは、別の興味深い DDR ソリューション弯だ (51degrees.codeplex.com)。 弯はもともと WURFL でのデバイス情報のソースとして依存が、それは新しい内部アーキテクチャと語彙が最近リニューアルしました。 弯は純粋に商業的イニシアチブですが 4 つのプロパティに限られた枠組みの無料版を提供しています： isMobile、ScreenPixelWidth、ScreenPixelHeight、LayoutEngine は、ブラウザーのレンダリング エンジンを指します。 無料のささげ物を懸念している限りでは、WURFL と弯ライセンスから離れて、ほぼ等価です。

理解の望みとニーズ

携帯電話の開発は、ほとんどあなたの顧客がし、必要があるを理解することについてです。 これは重要なポイントで、ユース ケースの適切な選択があるときに解決されます。 モバイル サイトでは特に、ユース ケースを実装するの良い選択を得る仕事の最大のシェアは推定します。 これ以外に、モバイル開発モバイル ブラウジングが異なっていることを認識する必要があります。 これは異なるレンダリング デバイス別に 1 つだけの Web サイトをあなたの目標がいくつかの CSS ファイルのマジックにちょうど無料達成されませんを意味します。 CSS が含まれているほとんどのロジックが、おそらく論理デバイスの特定のクラスを提供するコンテンツを決定することに関与します。

次の記事では、こうして 2 つのサイトがおそらく 1 つの経験をユーザーに提供する、デスクトップからモバイル サイトには、スイッチする方法を説明します。 後に、私はブラウザーのセグメンテーションとのメディア クエリの代替に掘り下げるよ。

Dino Esposito 「設計モバイル ソリューションをエンタープライズ」(Microsoft Press、2012年) の著者ですと"プログラミング ASP.NET MVC 3"(Microsoft Press、2011年) との共著者「Microsoft .net: Architecting Applications for the Enterprise” (Microsoft Press, 2008).Esposito はイタリアに在住し、世界各国で開催される業界のイベントで頻繁に講演しています。Twitter ( twitter.com/despos、英語) で彼をフォローしてください。

この記事のレビューには次の技術エキスパートのおかげで： Steve Sanderson