[アーティクル]
03/22/2017

June 2012

Volume 27 Number 06

Web 開発レポート - HTML5 を ASP.NET Web フォームアプリケーションや ASP.NET MVC アプリケーションに統合する

Racehel Appel | June 2012

公共アプリケーションでも基幹業務 (LOB) アプリケーションでも、また Web サイトでも、HTML5 とその関連テクノロジが使用されています。HTML5 は宣伝過剰のテクノロジではありません。また、単なる HTML でもありません。HTML5 とその関連 Web 開発テクノロジは W3C によって仕様が定められ、開発者にとっては Web アプリケーションの開発が容易になり、ユーザーにとっては Web アプリケーションが使いやすくなる、優れた機能を提供します。以下に、こうした機能の例をいくつか示します。

HTML の新しい要素
地理位置情報
ドキュメントオブジェクトモデル (DOM) ストレージ
セマンティック要素
HTML5 フォーム
CSS メディアクエリ

Web フォームや以前のバージョンの ASP.NET MVC への HTML5 の統合を容易にする ASP.NET MVC 4 アプリケーションテンプレートが ASP.NET に付属するようになったため、LOB アプリケーションを作成する ASP.NET 開発者は簡単に HTML5 フォームを利用できます。HTML5 フォームの各要素は、よく使用するデータ型の自動検証をサポートするようになったため、HTML5 フォームはすべての Web 開発者にメリットがあり、作成および保守するコードの量が少なくなります。擬似要素や擬似クラスなど、HTML5 の一部の新機能を使用すると、通常実行されるスクリプトを、同じ動作を生み出す、新しく柔軟なセレクターに置き換えることによってスクリプトの量が減り、コードの保守がさらに容易になります。

ASP.NET Web フォームや ASP.NET MVC のビューを HTML5 対応にする

HTML5 (任意の新しいテクノロジ) を操作するにあたり、明確で保守しやすいコードを作成できる優れたツールを求めるのは当然です。このような目的で Visual Studio 2010 を使用する場合、ASP.NET MVC 3 Tools Update や Web Standards Update など、いくつかの拡張機能や NuGet パッケージ (英語) が HTML5 を対象としています。Visual Studio 2012 のプロジェクトテンプレートは、ASP.NET Web フォームと ASP.NET MVC の両方を対象に、HTML5 の多くの機能を標準でサポートします。

Web フォームまたはビューで HTML5 の機能を正しく動作させるには、現在の <!DOCTYPE> 要素と <html> 要素を HTML5 の同等の要素に置き換える必要があります。ASP.NET Web フォームでは、置き換えが必要なコードはマスターページにあります。ASP.NET MVC では、置き換えが必要なコードはレイアウトページの _Layoutpage.cshtml にあります。ファイルの種類にかかわらず、マークアップは同じで、以下のようなマークアップを使用します。

<!DOCTYPE html>
<html>

HTML5 の機能を統合する計画がある場合は、機能の検出を行う必要があります。すべてのブラウザーが同じ機能を備えていたり、マークアップを同じ方法でレンダリングするわけではありません。また、ブラウザーによっては、タブレット端末、携帯電話などのインターネット対応のデバイスからコンテンツを要求されている場合もあります。1 つのブラウザーがサポートする HTML5 機能が増えたことと、プラットフォームやデバイスの種類が増えたことが相乗効果となり、単純にブラウザーの種類を検出するというこれまでのやり方では追いつかなくなりました。現在では、ページを要求しているブラウザーの種類をチェックするのではなく、ブラウザーがサポートする機能を機能単位にチェックすることが必要です。機能単位の検出は大変な作業に思えるかもしれませんが、適切なツールを使用すれば簡単です。Modernizr はまさにこのための適切かつ優れた機能検出ツールです。

Modernizr は軽量かつシンプルなオープンソースの機能検出フレームワーク (英語) です。以下のような数行のコードで、40 を超える HTML5 とその関連機能を、すべての主要ブラウザーで使用できるかどうかをチェックできます。

<script type="text/javascript"> 
    if (Modernizr.geolocation) 
        $("p").text("Hello, Modernizd World, I can find you with Geolocation!"); 
  
    if (Modernizr.webworkers) 
        $("p").text("Web workers work wonders on the Web.");  
</script> 
<p>Testing Modernizr</p>

Modernizr は、照会可能なプロパティを備えた Modernizr オブジェクトを作成します。上記のコードで、地理位置情報や Web ワーカーをチェックしている部分がこれに当たります。Modernizr は JavaScript にすぎないので、Modernizr Web サイトから直接ダウンロードするか、Visual Studio で NuGet (英語) を使用して、既存の ASP.NET プロジェクトに追加できます。

HTML5 のセマンティックレイアウトを使うように ASP.NET Web アプリケーションを更新する

Web 開発の重要な側面として、ページのレイアウトと構造があります。インターネット初期の時代、ページを構造化する唯一の手段は表形式にすることだったので、HTML の開発者は表を使っていました。後に CSS が標準化されてからは、<div> 要素を使って位置を決めるのが一般的になりました。 CSS ボックスモデルによる位置決めは、依然として要素の位置を決める業界標準の方法ですが、HTML5 のセマンティック要素 (英語) をページ構造に組み込むと、構造とコンテンツの両方をより明確に定義できるようになるため、すぐに新しい標準になるでしょう。

ASP.NET ページを更新するときに、<header>、<footer>、<nav> などのセマンティック要素を簡単に使用することができます。つまり、Web フォームまたは ASP.NET MVC の既存の <div> 要素をセマンティックマークアップに単純に置き換えることができます。Web フォームでは、次のコードのように、<asp:menu> コントロールを囲んでいる <div> 要素を <nav> 要素に置き換えます。目的の要素を囲む <div> 要素に特殊なスタイルが設定されている場合は、対応する CSS のスタイル設定を、<nav> 要素に設定するスタイルに置き換えるのを忘れないでください。

<nav><!--replaced <div> with <nav> -->
    <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu"
    EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
        <Items>
            <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
            <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
        </Items>
    </asp:Menu>
</nav><!--replaced </div> with </nav> -->

図 1 に、ASP.NET MVC 3 インターネットアプリケーションの完全なレイアウトページテンプレートを示します。ASP.NET MVC 3 と ASP.NET MVC 4 のビューテンプレートはどちらもセマンティックマークアップを既定で含んでいますが、ASP.NET MVC 2 で同じ結果を生み出すには <ul> 要素や <ol> 要素を <nav> 要素で囲む必要があります。

<!DOCTYPE html>
<html class="no-js">
<head >
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/modernizr-2.0.6.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
</head>
<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>My MVC Application</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <nav>
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
            </nav>
        </header>
        <section id="main">
            @RenderBody()
        </section>
        <footer>
        </footer>
    </div>
</body>
</html>

図 1 組み込みセマンティックマークアップを含む ASP.NET MVC 3 レイアウトページテンプレート

<section> 要素と <article> 要素は、コンテンツの構造を定義するときに、微妙な違いを反映できます。これらの要素をマスターページやレイアウトページのどこに置くかは、ページの正確なレイアウトによって異なります。ガイドラインとして、<section> 要素は、ログインボックスなど、1 つのページのさまざまなセグメントを明確に切り分けます。<article> 要素には、多くの場合、HTML の多種多様な静的要素と動的に作成される要素の両方を含めます。

セマンティックマークアップを使うことにはこれ以外にも優れた二次効果があり、コンピューティングデバイスにとっても人間にとっても、従来の <div> 要素の処理に比べて、簡単にマークアップを読み取り、その意味をすばやく理解できます。

上記の要素は、ASP.NET 開発者チームが必須で使用する、共通で再利用可能なプロジェクトテンプレートに統合します。このようなプロジェクトテンプレートを見つける最善の場所は、HTML5 Boilerplate Web サイトです。HTML5 Boilerplate は、マスターページやレイアウトページの基礎となるダウンロード用テンプレートです。このテンプレートにより、CSS でのベンダープレフィックスの適切な使用、CSS のリセット、Modernizr による機能検出、およびその他の重要なクロスブラウザー設定を確実に行うことができます。

CSS3 を使用してスクリプトを減らし保守しやすいコードにする

新しいバージョンのソフトウェアや新しいテクノロジが利用可能になっても、大幅な時間の節約を見込める機能や生産性を向上する機能 (特に CSS のようなデザイン側のテクノロジ) は見落とされがちです。開発者は、CSS をデザイナーだけが使用するものと考えがちで、このように時間を節約できる機能があることに気付いていません。先月の「Web 開発レポート」のコラムでは、保守しやすいコードにするために開発者が CSS について知っておくべきいくつかの項目を指摘しました。ここではいくつか重要なポイントについて説明します。

CSS3 で新しく導入された General Descendant (一般子孫) 連結子により、1 つの CSS セレクターで 1 つの要素のすべての子孫を選択でき、一致する子要素を探すためにループ処理するスクリプトを記述する必要がなくなるため、記述するコード量が少なくなります。たとえば、次の CSS のサンプルでは、1 行のコードだけで、段落内にあるすべてのアンカーを 2 ピクセル幅の青い実線の罫線で囲みます。構文では、親と子孫間に 1 文字のスペースを入れ、このスペース文字を子孫セレクターにしているのがわかります。

p a { border 2px solid #000099 }

ほかにも、強力かつシンプルなセレクターとして、サブ文字列一致属性セレクターや、新しい擬似クラスと擬似要素などがあります。サブ文字列の一致に以前からよく使われていたツールには、instr や substr などの文字列操作メソッドがあります。しかし、擬似クラスまたは擬似要素を含む 1 つのセレクターが、通常必要になる数行のコードに置き換わります。図 2 は CSS、jQuery、JavaScript で順に行を置き換え、各手法の違いを比較しています。CSS が最もコードが少なく、わかりやすいサンプルになっています。

/* CSS3 nth child selector */
tr:nth-child(odd) {
    background-color:#c8c8c8;
}
<!-- jQuery selector -->
<script>
$(function () {
   $("tr:odd").css("background-color", "# c8c8c8");
});
</script>
<!--Traditional JavaScript -->
<script>
window.onload = function () {
   var table = document.getElementById("MyTable");
   for (var i = 0; row = table.rows[i]; i++) {
       row.addClass("background-color", "c8c8c8");
   }
}
</script>

図 2 行を置き換えるさまざまな方法

HTML5 のフォームとその機能で ASP.NET LOB アプリケーションを強化する

ASP.NET 開発者は、多くの場合、LOB アプリケーションやエンタープライズアプリケーションなどのミッションクリティカルなアプリケーションを作成します。このようなアプリケーションは、業種別アプリケーションであっても、業務別アプリケーションであっても、HTML5 の機能を使用することによってメリットを得ることができます。

たとえば、HTML5 Geolocation API (英語) を使用して、数行の JavaScript だけで、ユーザーの物理ロケールに応じてコンテンツを配信できます。または、ローカル DOM ストレージ (英語) を使用して、オフラインの間にユーザーがデータを失わないように定期的にデータを保存することができます。地理データを利用する業界 (海運業や運輸業など) もまた、あらゆる種類の ASP.NET アプリケーションで Bing Maps API と HTML5 の地理位置情報を統合 (英語) することができます。

HTML5 フォームと HTML5 検証を使用して、幅広い市場に LOB 機能を配信できます。どちらの機能も、ASP.NET MVC 3 以上向けの既定のプロジェクトテンプレート、および Visual Studio 2012 の ASP.NET Web Forms 4 プロジェクトテンプレートに付属しています。

多くの Web フォームプロジェクトでは、範囲入力のためのスライダー、日付入力のためのカレンダーなど、さまざまなフォーム操作を目的とする Web フォームコントロールと共に、データを収集するための <asp:TextBox> コントロールを使用しています。HTML5 フォームを使用する場合は、図 3 に示すように既存の Web フォームコントロールに HTML5 の属性を単に追加するか、既存のコントロールを新しい入力の種類に完全に置き換えます。

以下は HTML5 の新しい入力の種類 (英語) の一部です。

Email
Tel
URL
Placeholder
Autofocus
Min と Max
Date と Time
Progress と Meter
Pattern

図 3 は、年齢を取得するシンプルなフォーム要素 (数値データを増減するコントロール) を、純粋な HTML5、ASP.NET MVC、ASP.NET Web フォームの順に示しています。その後、それぞれに対応するクライアントでの表示 (数値を上限するテキストボックス) を示します。

HTML <input id="Age" type="number" /><br/>
MVC @Html.TextBox("Age", "", new { type = "Number"} )
Web Forms <asp:TextBox ID="Age" runat="server" type="number"></asp:TextBox>

図 3 複数のテクノロジでの HTML5 数値テキストボックスのサンプル

現状では、HTML5 フォームの要素をサポートしないブラウザーもあるため、Modernizr を使って機能検出を実行することを忘れないでください。要求された機能を的確にサポートしない場合、ブラウザーは HTML の <input> 要素を基本的なテキストボックスにフォールバックして表示します。

ASP.NET Web フォームの開発者も、ASP.NET MVC の開発者も、現在の任意の ASP.NET テクノロジと共に HTML5 と関連機能を使用して、そのメリットを利用することができます。HTML5 は単に目新しい機能やユニークな機能を集めたものではありません。地理位置情報や HTML5 フォームなどの多くの機能は、ビジネスアプリケーションにもすばらしい効果をもたらします。

Rachel Appel は、マイクロソフトのニューヨークオフィスで働いている開発系エバンジェリストです。彼女の Web サイト (http://rachelappel.com、英語) または電子メール (rachel.appel@microsoft.com、英語のみ) で連絡できます。Twitter (@rachelappel) で最新のツィートをフォローすることもできます。

Web 開発レポート - HTML5 を ASP.NET Web フォーム アプリケーションや ASP.NET MVC アプリケーションに統合する

ASP.NET Web フォーム や ASP.NET MVC のビュー を HTML5 対応にする

HTML5 のセマンティック レイアウトを使うように ASP.NET Web アプリケーションを更新する

CSS3 を使用してスクリプトを減らし保守しやすいコードにする

HTML5 のフォームとその機能で ASP.NET LOB アプリケーションを強化する

その他のリソース

Web 開発レポート - HTML5 を ASP.NET Web フォームアプリケーションや ASP.NET MVC アプリケーションに統合する

ASP.NET Web フォームや ASP.NET MVC のビューを HTML5 対応にする

HTML5 のセマンティックレイアウトを使うように ASP.NET Web アプリケーションを更新する