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

Cutting Edge

モバイル サイト開発 (第 4 部): デバイス プロファイルを管理する (機械翻訳)

Dino Esposito

コード サンプルのダウンロード

この記事ではモバイル デバイスを分類して、異なるマークアップをさまざまなデバイスのデバイスの機能に基づいて Web サイトを構築する方法を説明します。

要求側のブラウザーの機能にレンダリングされるマークアップを適応する必要がある場合は、モバイル サイトの構築、シームレスな体験をすることができます。しかし、多くの場合、コンテンツを提供し、それは、ブラウザーの効果的な機能に適応を微調整する必要があります。古い話の繰り返しその音が好きですか年前に、開発者はデスクトップ ブラウザー用の同様の問題を直面してください。種類 (と時々 バージョン) ブラウザーのマークアップについて決定する前に戻るにチェックしています。 Web ページを作成する一般的だった。最近では、Web プログラミングの焦点よりクライアント側に向かってシフトしているように、jQuery と Modernizr などのライブラリ開発者のブラウザーの違いの多くの距離を保つことの重要な貢献を提供しています。

それはまだ困難かつ高価に見えるし、ブラウザーに関係なく同じ動作デスクトップ Web サイトを構築することができます。ただし、デスクトップ ブラウザーの数が比較的小さいです、すべてのブラウザーの最新バージョンの間のギャップは巨大ではありません。モバイル ブラウザーにに関しては、しかし、デバイスのほぼすべてのモデルは独自のわずかに異なる、カスタマイズされたブラウザーがあります。さらに、クロス デバイス ブラウザー フェネックや Opera Mini などユーザーがインストールされている可能性があります。多数の可能な携帯電話のブラウザーを作るそれらの各ターゲットに個別に — 開発者がデスクトップのブラウザーと同様 — 非常に非現実的なアプローチ。スマートなアプローチは、モバイル ブラウザーはいくつかのクラスに分割し、アドホックのバージョンの特定のページの各クラスを提供します。このアプローチは、しばしば multiserving として呼ばれます。

この記事のサンプル Web サイトは、ASP.NET MVC 3 を使用して構築されています。ただし、ASP.NET MVC の 4 multiserving の実装を簡単に作ることができるいくつかの新しい施設をもたらすことに注意してください。私は今後のコラムでモバイル サイトに関連して ASP.NET MVC 4 をカバーします。

デバイス プロファイルの断片化

モバイルの断片化は、ユニークなデバイスの数千と何百ものそれらを完全に記述する機能は重要です。あなたは理想的にインテリジェントに要求元のブラウザーの特性に調整できますページ必要があります。これを実現するには、本質的に 2 つのルートがあります。1 つは、同じページの異なるバージョンをオーサリングです — それをサポートする意図があるデバイスの各クラスの 1 つ。もう 1 つの一般的なページ テンプレートを持つことと、デバイス固有のコンテンツ要求ごとに充填するので構成されます。

最後に、ただし、両方のアプローチは、共通の地面から開始します。ユーザーが予想されるいくつかのカテゴリに分割します。その後、サイトの各ページの各カテゴリのアドホック マークアップを提供します。

デバイス断片化を飼いならすを持っているつもりモバイル サイトの早い段階でどのように多くのバージョンを決定する必要があります。サイトと、最終的に、その成功の知覚に影響するため、これは、重要な決定です。それはない、したがって、軽く取る決定およびビジネスに関する考慮事項の適用 — 単に、実装の詳細や技術の決定ではないです。ビジネス ケースによっては、スマート フォンだけにサイトを提供し、おそらく言って、Windows Phone デバイス用のサイトを最適化する決定する可能性があります、多くの同じ方法をいくつかのデスクトップのサイト「最高の XXX が 10 年を表示」ラベルの展示されたほど前。可能性が高く、しかし、あなたのサイトに少なくとも 2 つのバージョンがある必要があります — スマートおよびレガシ デバイス — とたぶん具体的目標はタブレット デバイスまたはスマートなテレビもまだ別のバージョンを検討してください。

スマート フォン、レガシー デバイス、タブレット デバイスのプロファイルをユーザーが予想される分割のすべての例です。名前でデバイスのアドレス数千にモバイル サイトを記述する必要はありません。 代わりに、いくつかのデバイスのプロファイルを識別し、各プロファイルに参加するのに必要な機能を定義します。それがない修正される可能性があります言わずとなるときに、デバイスを定義する普遍的な規則は、「スマート フォン」とないとき。このため、批准された標準がないとあなたのサイトのコンテキストで、スマート フォンとして分類されるデバイスに必要な機能を定義する責任があります。また、スマート フォンの定義によって設計変数であることを考慮します。Windows CE デバイスは、確かにのみ 5、6 年前、非常にスマート デバイスとして感知されました。今日では、スマート フォンのカテゴリーでそれを含めるは難しいでしょう。

プロジェクト Liike — パターンの努力 ＆ microsoft プラクティス グループ向けモバイル参考サイトを構築することを-携帯電話の観客親しく WWW 短いうわ、作品、おっとと呼ばれる 3 つのクラスに分割します。

うわクラスに今日の豊富なとスマート デバイスを指します。作品クラスので豊富なと対応のデバイスを指します。最後に、おっとクラスはやっとインターネットに接続していくつかの基本的な HTML コンテンツをレンダリングする能力を持っている他のレガシー デバイスを指します。プロジェクト Liike の詳細についてを参照してください liike.github.com。

この記事では次のデバイス プロファイルを使用します。スマート フォン、タブレット、従来の携帯。図 1 （最小） の一連の規則のさまざまなプロファイル内のデバイスを受け入れるために使用示しています。ルール ページを本当に必要なものに依存する特定の機能を含むように展開する必要があることに注意してください。たとえば、非同期 JavaScript および XML と HTML ドキュメント オブジェクト モデルの操作を使用する場合は、デバイスがこれらの機能を持つようにしたいかもしれない。ビデオを提供している場合は、デバイスがいくつか特定のコーデックをサポートするために可能性があります。すべてのあなたの期待に一致することができない可能性がありますデバイスでは、フォールバックのページを提供する必要があります、これは、従来の役割を正確にです （つまり、キャッチ オール) プロファイル。

図 1 サンプル デバイス プロファイル

デバイス プロファイル	機能
Smartphone	タッチ デバイスのモバイル デバイスの画面の幅に基づいて、既知の OS （アンドロイド 2.1、iOS、ブラックベリー 6.0 または Windows Phone）、240 ピクセルより大きい。
タブレット	モバイル デバイス、タブレット デバイス。
モバイル	モバイル デバイスは他のプロファイルに該当しません。

単純なデバイス プロファイラーの実装

サンプル サイトでは、私のコンテンツを正式図 1 に IDeviceProfiler という名前のインターフェイス。

public interface IDeviceProfiler
{
  Boolean IsDesktop(String userAgent);
  String MobileSuffix { get; }
  Boolean IsMobile(String userAgent);
  String SmartphoneSuffix { get; }
  Boolean IsSmartphone(String userAgent);
  String TabletSuffix { get; }
  Boolean IsTablet(String userAgent);
}

サフィックスは、ビューを区別するために使用される一意の名前を指します。 たとえば、ページの index.cshtml、index.smartphone.cshtml、index.tablet.cshtml、index.mobile.cshtml さまざまなプロファイルのために展開されます。 図 2 デバイス プロファイラー オブジェクトの基本的な実装を示しています。

図 2 最小デバイス プロファイラーの実装

public class DefaultDeviceProfiler : IDeviceProfiler
{
  public virtual String MobileSuffix {     get { return "mobile"; }   }
  public virtual Boolean IsMobile(String userAgent)
  {
    return HasAnyMobileKeywords(userAgent);
  }
  public virtual String SmartphoneSuffix {
    get { return "smartphone"; }
  }
  public virtual Boolean IsSmartphone(String userAgent)
  {
    return IsMobile(userAgent);
  }
  public virtual String TabletSuffix {
    get { return "tablet"; }
  }
  public virtual Boolean IsTablet(String userAgent)
  {
    return IsMobile(userAgent) &&
      userAgent.ContainsAny("tablet", "ipad");
  }
  public virtual Boolean IsDesktop(String userAgent)
  {
    return HasAnyDesktopKeywords(userAgent);
  }
  // Private Members
  private Boolean HasAnyMobileKeywords(String userAgent)
  {
    var ua = userAgent.ToLower();
    return (ua.Contains("midp") ||
      ua.Contains("mobile") ||
      ua.Contains("android") ||
      ua.Contains("samsung") ||      ...
}
  private Boolean HasAnyDesktopKeywords(String userAgent)
  {
    var ua = userAgent.ToLower();
    return (ua.Contains("wow64") ||
      ua.Contains(".
net clr") ||
      ua.Contains("macintosh") ||
      ...
}
}

推測できるように図 2、各デバイスはそのユーザー エージェント文字列を通して識別されます。 ユーザー エージェント文字列を処理して、携帯電話やデスクトップのブラウザーを表す知られているいくつかのキーワードが含まれているかどうかを参照してくださいします。 たとえば、部分文字列「アンドロイド」が含まれているユーザー エージェント文字列は、安全に携帯電話のブラウザーを照合できます。 同様に、"wow64"部分文字列は通常、デスクトップの Windows ブラウザーを指します。 アップ フロント ユーザー エージェント文字列に依存することは、おそらくサーバー側のデバイス機能を検出するために最善のアプローチですが、成功の保証はないことを言わせてください。 個人的には、最近人造人間 4.0 タブレットを買って、埋め込みブラウザーちょうど iOS 3.2 を実行する iPad のユーザー エージェントを逐語的送信することを発見しました。 これらの問題のため、ハード デバイス断片化です。

ビュー、レイアウトおよびモデルの選択

デバイス プロファイラーは確実に私たち要求側のブラウザーが属するプロファイルを言うことができるとしましょう。 ASP.NET MVC サイトでは、どのように右側のビューおよび各コント ローラーのメソッド内のレイアウトから選択だろう？ HTML マークアップを返しますコント ローラー メソッドでは、ビューと関連するレイアウトの名前を明示的に示すことがあります。 次のコードを使用して、コント ローラー メソッドの両方の名前を決定できます。

// Assume this code is from some Index method
var suffix = AnalyzeUserAgent(Request.UserAgent);
var view = String.Format("index.{0}", suffix);
var layout = String.Format("_layout.{0}", suffix);
return View(view, layout);

Multiserving のシナリオでは、同じページのビューの相違表示テンプレートに限られたことがあります。 他の言葉では、特定のビューとレイアウトのテンプレートのペアをピッキング十分でないかもしれない-あなたも、別のビュー モデル オブジェクトを渡す必要があります。

ビュー モデル データ ViewBag または ViewData など、組み込みコレクションを渡している場合で、コント ローラーからユーザー エージェント文字列の解析を行う任意のコードの移行を検討することができます。 サンプルの携帯サイトのコード ダウンロードをこの記事に付属のホーム ページのインデックス法はこのようになります：

public ActionResult Index()
{
  ViewBag.Title = "...";  ...
return View();
}

ご覧のとおり、ビューの名前とレイアウトを明示的に示すせず生成されます。 これが起こるときは、ビュー エンジンが最終的に使用するビューとそのレイアウトを完成させるために責任です。 ビュー エンジンは、したがってデバイス プロファイルを管理する任意のロジックを埋め込むための可能な場所です。 作成しカスタム ビュー エンジンを登録する、デバイスのプロファイルを 1 か所で分析するための任意のロジックを分離して関連ページのプレーンなコレクションとしてあなたの携帯サイトの残りの部分を開発できます。 次のコードは、カスタム ビュー エンジンを global.asax に登録する方法を示しています。

 

// Get rid of any other view engines
ViewEngines.Engines.Clear();// Install an ad hoc mobile view engine
ViewEngines.Engines.Add(new MobileRazorViewEngine());

図 3 カスタム (かみそりベース) のビュー エンジンのソース コードを示します。

図 3 モバイル対応ビュー エンジン

public class MobileRazorViewEngine : RazorViewEngine
{
  protected override IView CreatePartialView(
    ControllerContext context, String path)
  {
    var view = path;
    if (!String.IsNullOrEmpty(path))
      view = GetMobileViewName(context.HttpContext.Request, path);
    return base.CreatePartialView(controllerContext, view);
  }
  protected override IView CreateView(
    ControllerContext context, String path, String master)
  {
    var view = path;
    var layout = master;
    var request = context.HttpContext.Request;
    if (!String.IsNullOrEmpty(path))
      view = GetMobileViewName(request, path);
    if (!String.IsNullOrEmpty(master))
      master = GetMobileViewName(request, master);
    return base.CreateView(context, view, master);
  }
  public static String GetMobileViewName(
    HttpRequestBase request, String path)
  {
    var profiler =  DependencyResolver.Current.GetService(
      typeof(IDeviceProfiler)) as IDeviceProfiler
      ??
new DefaultDeviceProfiler();
    var ua = request.UserAgent ??
String.Empty;
    var suffix = GetSuffix(ua, profiler);
    var extension = String.Format("{0}{1}",
      suffix, Path.GetExtension(path));
    return Path.ChangeExtension(path, extension);
  }
  private static String GetSuffix(String ua, IDeviceProfiler profiler)
  {
    if (profiler.IsDesktop(ua))
      return String.Empty;
    if (profiler.IsSmartphone(ua))
      return profiler.SmartphoneSuffix;
    if (profiler.IsTablet(ua))
      return profiler.TabletSuffix;
    return profiler.IsMobile(ua)
      ?
profiler.MobileSuffix
      : String.Empty;
  }
}

ビューをレンダリングする前に、ビュー エンジンはインストールされているデバイス プロファイラーを要求元のユーザー エージェントのプロファイルに関するクエリを使用します。 に基づいて、ビュー エンジンは、最も適切なビューに切り替えます。 明示的に、コント ローラー内でビュー呼び出しにからビュー エンジン、シームレスに解決できる提供されるレイアウト名の場合は。 レイアウト名 _viewStart.cshtml （ASP.NET MVC のコードのほとんど） のように設定されている場合は、ビュー エンジン CreateView のマスターのパラメーターは常に空であるために、それを解決することはできません。 _ViewStart.cshtml で適用する苦境があります。

@using MultiServing.ProfileManager.Mvc
@{
  const String defaultLayout = "~/Views/Shared/_Layout.cshtml";
  Layout = MobileRazorViewEngine.GetMobileViewName(
    Context.Request, defaultLayout);
}

どのような場合あなたは、同じページを (スマート フォン、タブレットなど) 各強く型付けされたビュー、および各種のモバイル ビューを使用、独自のビュー モデルが必要ですか？ この場合、ユーザー エージェントを分析し、ビューのレイアウトの名前を返します、このコンポーネントから各コント ローラーのメソッド内で使用するワーカー コンポーネントを構築する可能性があります。 についてビュー モデルを決定するユーザー エージェント権利コント ローラー レベルで解析する必要がある場合のことを参照するくださいは、呼び出しビューをすでに知っているので、[カスタム ビュー エンジンに依存することは冗長です。

このポイントを超えてすべての適切なデバイス プロファイラーを使用して複数の HTML ページのテンプレートの構築です。

ASP.NET MVC で WURFL を構成します。

このシリーズの以前の分割払いのように、ワイヤレスのユニバーサル リソース ファイル (WURFL） は、人気のあるデバイス説明リポジトリ (Google と Facebook のモバイル サイトのバックエンドで使用 DDR) です。 WURFL マルチプラット フォーム対応の API を提供し、NuGet を使用して任意の ASP.NET MVC プロジェクトに簡単に接続できます (を参照してください図 4)。

図 4 WURFL NuGet を介して ASP.NET MVC を追加します。

WURFL は、XML データベース デバイス情報が含まれているプロジェクトに追加します。 データベースは、アプリケーションの起動時にメモリに読み込まれる必要があります、デバイス プロファイルへのほぼ瞬時のアクセスを提供します。 Global.asax 内のコードを追加図 5。

図 5 WURFL を使用

public class MyApp : HttpApplication
{
  public static IWURFLManager WurflContainer;
  protected void Application_Start()
  {    ...
RegisterWurfl();    
    DependencyResolver.SetResolver(new SimpleDependencyResolver());  }
  public static void RegisterWurfl()
  {
    var configurer = new ApplicationConfigurer();
    WurflContainer = WURFLManagerBuilder.Build(configurer);
  }
}

図 6、WURFL を使用して、スマート フォンやタブレットを検出する IDeviceProfiler コンポーネントを参照してください。 カスタム依存関係リゾルバーを介してプロファイラーを解決します。 (付属のソース コードの詳細については、競合回避モジュールを参照）。

図 6 WURFL デバイス プロファイラー

public class WurflDeviceProfiler : DefaultDeviceProfiler
{
  public override Boolean IsMobile(String ua)
  {
    var device = MyApp.WurflContainer.GetDeviceForRequest(ua);
    return device.IsWireless();
  }
  public override Boolean IsSmartphone(String ua)
  {
    var device = MyApp.WurflContainer.GetDeviceForRequest(ua);
    return device.IsWireless() && !device.IsTablet() &&
      device.IsTouch() &&
      device.Width() > 240 &&
      (device.HasOs("android", new Version(2, 1)) ||
      device.HasOs("iphone os", new Version(3, 2)) ||
      device.HasOs("windows phone os", new Version(7, 1)) ||
      device.HasOs("rim os", new Version(6, 0)));
  }
  public override Boolean IsTablet(String ua)
  {
    var device = MyApp.WurflContainer.GetDeviceForRequest(ua);
    return device.IsTablet();
  }
}

GetDeviceForRequest メソッドは、WURFL データベースに問い合わせ、比較的流暢な構文を使用して照会できます IDevice オブジェクトを返します。 IsTouch、IsTablet、HasOs などのメソッドは、実際には拡張メソッドのサンプル プロジェクトで見つけるネイティブ WURFL API 上に構築されます。 例として、ここで IsTablet のコードは次のとおりです。

public static Boolean IsTablet(this IDevice device)
{
  return device.GetCapability("is_tablet").ToBool();
}

このコラムでは、さまざまなデバイスでさまざまな経験を提供する、ASP.NET MVC のモバイル サイトの具体例説明した：示すように、スマート フォン、タブレット、レガシーのモバイル デバイス、 図 7。 ソース コードをダウンロードして実行するさまざまなユーザー エージェント切り替え Internet Explorer (または他のブラウザー) で勧めします。 Www.expoware.org/amse/ddr でのライブのサイトをテストすることもできます。 デスクトップのブラウザーからサイトにアクセスして結果をメッセージに注意してください。"このサイトはデスクトップのブラウザーでご利用いただけません。 携帯電話を使用してくださいまたはタブレットのブラウザー"。

図 7 タブレット、スマート フォン、プレーンのモバイル デバイスをサンプル サイトへのアクセス

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

この記事のレビュー、次技術専門家のおかげで。エリック ・ ポーターと Pranav Rastogi