ASP.NET Web ページ 2 のトップ機能

[アーティクル]
06/16/2023

この記事では、Microsoft WebMatrix 2 RC に含まれる軽量の Web プログラミングフレームワークである ASP.NET Web ページ 2 RC の新しいトップ機能の概要について説明します。

含まれているもの:

WebMatrix のインストール

新機能と強化された機能

RC リリースの変更点

ベータリリースの変更点

新規および更新されたサイトテンプレートの使用

ユーザー入力の検証

OAuth と OpenID を使用して Facebook やその他のサイトからのログインを有効にする

マップヘルパーを使用したマップの追加

複数の Web ページアプリケーションを並行して実行する

モバイルデバイスのページのレンダリング

その他のリソース

Note

このトピックでは、WebMatrix を使用して ASP.NET Web ページ 2 コードを操作していることを前提としています。ただし、Web ページ 1 と同様に、Visual Studio を使用して Web ページ 2 Web サイトを作成することもできます。これにより、IntelliSense 機能とデバッグが強化されます。 Visual Studio で Web ページを操作するには、まず Visual Studio 2010 SP1、Visual Web Developer Express 2010 SP1、または Visual Studio 11 ベータ版をインストールする必要があります。次に、Visual Studio で ASP.NET MVC 4 および Web ページ 2 アプリケーションを作成するためのテンプレートとツールを含む、ASP.NET MVC 4 ベータ版をインストールします。

最終更新日: 2012 年 6 月 18日

WebMatrix のインストール

Web ページをインストールするには、Microsoft Web Platform Installer を使用します。これは、Web 関連テクノロジのインストールと構成を簡単にする無料のアプリケーションです。 Web ページ 2 ベータ版を含む WebMatrix 2 ベータ版をインストールします。

Web Platform Installer の最新バージョンのインストールページを参照します。

https://go.microsoft.com/fwlink/?LinkId=226883

Note

WebMatrix 1 が既にインストールされている場合は、このインストールによって WebMatrix 2 ベータ版に更新されます。バージョン 1 または 2 を使用して作成された Web サイトは、同じコンピューター上で実行できます。詳細については、「複数の Web ページアプリケーションを並行して実行する」のセクションを参照してください。
[今すぐインストール] を選択します。

インターネットエクスプローラーを使用する場合は、次の手順に進みます。 Mozilla Firefox や Google Chrome などの別のブラウザーを使用している場合は、Webmatrix.exe ファイルをコンピューターに保存するように求められます。ファイルを保存し、それをクリックしてインストーラーを起動します。
インストーラーを実行して、[インストール] ボタンを選択します。これにより、WebMatrix と Web ページがインストールされます。

新機能と強化された機能

RC バージョンの変更点 (2012 年 6 月)

2012 年 6 月の RC バージョンリリースでは、2012 年 3 月にリリースされたベータ版の更新からいくつかの変更があります。これらの変更は次のとおりです。

Validation.AddFormError メソッドが Validation ヘルパーに追加されました。これは、検証を手動で実行して (たとえば、クエリ文字列で渡された値を検証して)、Html.ValidationSummary メソッドで表示できるエラーメッセージを追加する場合に便利です。詳細については、「ASP.NET Web ページ (Razor) サイトでのユーザー入力の検証」の「ユーザーから直接取得されないデータの検証」セクションを参照してください。
バンドルと縮小の機能は、コア ASP.NET Web ページ 2 アセンブリから削除されました。その結果、このドキュメントの後半に記載されている Assets ヘルパーは使用できません。代わりに、ASP.NET 最適化 NuGet パッケージをインストールする必要があります。詳細については、「ASP.NET Web ページ (Razor) サイトでのアセットのバンドルと縮小」を参照してください。
ASP.NET Web ページ 2 をサポートするアセンブリが追加されました。この変更の唯一の顕著な効果は、サイトを作成するか、ホスティングプロバイダーにサイトを展開した後に、サイトの bin フォルダーにさらに多くのアセンブリが表示される可能性があることです。

ベータ版の変更点 (2012 年 2 月)

2012 年 2 月にリリースされたベータ版では、2011 年 12 月にリリースされたベータ版からの変更はごくわずかです。これらの変更は次のとおりです。

Razor で条件付き属性がサポートされるようになりました。 HTML 要素で、属性をサーバーコードで false または null に解決される値に設定した場合、ASP.NET は属性をまったくレンダリングしません。たとえば、チェックボックスに次のマークアップがあるとします。
```
<input type="checkbox"
name="check1"
value="check1"
checked="@checked1" />
```
checked1 の値が false または null に解決される場合、checked 属性はレンダリングされません。これは重大な変更です。
Validation.GetHtml メソッドの名前が Validation.For に変更されました。これは破壊的変更です。Validation.GetHtml はベータリリースでは機能しません。
マークアップに ~ 演算子を含めて、Href 関数を使用せずにサイトルートを参照できるようになりました。 (つまり、Razor パーサーは、Href への明示的なメソッド呼び出しを必要とせずに ~ 演算子を見つけて解決できるようになりました)。Href メソッドは引き続き機能するため、これは破壊的変更ではありません。

たとえば、以前に次のようなマークアップがあった場合:

<a href="@Href("~/Default.cshtml")">Home</a>

次のようなマークアップを使用できるようになりました。

<a href="~/Default.cshtml">Home</a>
資産 (リソース) 管理の Scripts ヘルパーは、次のような少し異なるメソッドを持つ Assets ヘルパーに置き換えられました。
- Scripts.Add の場合は、Assets.AddScript を使用します
- Scripts.GetScriptTags の場合は、Assets.GetScripts を使用します
  
  これは破壊的変更です。Scripts クラスはベータリリースでは使用できません。資産管理を使用するこのドキュメント内のコード例は、この変更に伴って更新されました。

新規および更新されたサイトテンプレートの使用

スターターサイト テンプレートは、既定で Web ページ 2 で実行されるように更新されました。また、次の新機能も含まれています。

モバイルに対応したページレンダリング。 スターターサイトでは、CSS スタイルと @media セレクターを使用して、モバイルデバイス画面を含む小さい画面でのページのレンダリングが改善されています。
メンバーシップと認証オプションが改善されました。 Twitter、Facebook、Windows Live などの他のソーシャルネットワークサイトのアカウントを使用して、ユーザーがサイトにログインできるようにすることができます。詳細については、「OAuth と OpenID を使用して Facebook やその他のサイトからのログインを有効にする」のセクションを参照してください。
HTML5 要素。

新しい個人用サイト テンプレートを使用すると、個人用ブログ、写真ページ、Twitter ページを含む Web サイトを作成できます。次の手順を実行して、個人用サイト テンプレートに基づいてサイトをカスタマイズできます。

レイアウトファイル (_SiteLayout.cshtml) とスタイルファイル (Site.css) を編集して、サイトの外観を変更します。
サイトに機能を追加する NuGet パッケージをインストールします。 ASP.NET Web ヘルパーライブラリなどのパッケージをインストールする方法については、ヘルパーのインストールに関するチュートリアルを参照してください。

個人用サイト テンプレートにアクセスするには、WebMatrix クイックスタート画面で [テンプレート] を選択します。

[テンプレート] ダイアログボックスで、個人用サイト テンプレートを選択します。

個人用サイト テンプレートのランディングページでは、リンクに従ってブログ、Twitter ページ、写真ページを設定できます。

ユーザー入力の検証

Web ページ 1 では、送信されたフォームでのユーザー入力を検証するために、System.Web.WebPages.Html.ModelState クラスを使用します。 (これは、「データの操作」というタイトルの Web ページ 1 チュートリアルのいくつかのコードサンプルで説明されています)。この方法は Web ページ 2 でも引き続き使用できます。ただし、Web ページ 2 には、ユーザー入力を検証するための改善されたツールも用意されています。

System.Web.WebPages.ValidationHelper と System.Web.WebPages.Validator を含む新しい検証クラスを使用すると、数行のコードで強力な検証タスクを実行できます。
必要に応じてクライアント側の検証を使用することで、検証エラーをチェックするためのサーバーとの往復なしで、ユーザーに即時にフィードバックを提供することができます。 (事前にクライアントでチェックが実行されている場合でも、セキュリティ上の理由から、サーバーで検証が実行されます)。

新しい検証機能を使用するには、次の操作を行います。

ページのコードで、Validation ヘルパーのメソッド Validation.RequireField、Validation.RequireFields (複数の要素を必須として登録する場合)、または Validation.Add を使用して、検証対象の要素を登録します。 Add メソッドを使用すると、データ型チェック、異なるフィールドのエントリの比較、文字列長チェック、パターン (正規表現を使用) など、他の種類の検証チェックを指定できます。次に例をいくつか示します。

Validation.RequireField("text1");
Validation.RequireField("text1", "The text1 field is required");
Validation.RequireFields("text1", "text2", "text3");

Validation.Add("text1", Validation.StringLength(5));
Validation.Add("textDate", Validation.DateTime("Enter a date"));
Validation.Add("textCount", Validation.Integer("Enter a number"));
Validation.Add("textCount",
Validation.Range(1, 10, "Enter a value between 1 and 10"));

フィールド固有のエラーを表示するには、検証対象の各要素のマークアップで Html.ValidationMessage を呼び出します。

<input type="text" name="course"
value="@Request["course"]" />
@Html.ValidationMessage("course")

ページ内のすべてのエラーの概要 (<ul> 一覧) を表示するには、マークアップで Html.ValidationSummary を呼び出します。

@Html.ValidationSummary()

これらの手順は、サーバー側の検証を実装するのに十分です。クライアント側の検証を追加する場合は、さらに次の操作を行います。

Web ページの <head> セクション内に、次のスクリプトファイル参照を追加します。最初の 2 つのスクリプト参照は、コンテンツ配信ネットワーク (CDN) サーバー上のリモートファイルを指します。 3 番目の参照は、ローカルスクリプトファイルを指してます。 CDN が使用できない場合は、運用アプリでフォールバックを実装する必要があります。フォールバックをテストします。

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

jquery.validate.unobtrusive.min.js ライブラリのローカルコピーを取得する最も簡単な方法は、いずれかのサイトテンプレート (スターターサイトなど) に基づいて新しい Web ページサイトを作成することです。テンプレートによって作成されたサイトの Scripts フォルダーには jquery.validate.unobtrusive.js ファイルが含まれており、このファイルをそこからサイトにコピーすることができます。

Web サイトで _SiteLayout ページを使用してページレイアウトを制御する場合は、そのページにこれらのスクリプト参照を含めることで、すべてのコンテンツページで検証が利用できるようになります。特定のページでのみ検証を実行する場合は、アセットマネージャーを使用して、それらのページにのみスクリプトを登録することができます。これを行うには、検証するページで Assets.AddScript(path) を呼び出し、各スクリプトファイルを参照します。次に、登録された <script> タグをレンダリングするために、_SiteLayout ページに Assets.GetScripts への呼び出しを追加します。詳細については、「アセットマネージャーを使用したスクリプトの登録」セクションを参照してください。

個々の要素のマークアップで、Validation.For メソッドを呼び出します。このメソッドは、クライアント側の検証を提供するために jQuery がフックできる属性を出力します。次に例を示します。

<input type="text" name="course"
value="@Request["course"]"
@Validation.For("course")
/>
@Html.ValidationMessage("course")

次の例は、フォーム上のユーザー入力を検証するページを示しています。この検証コードを実行してテストするには、次の操作を行います。

スタートサイト テンプレートなど、Scripts フォルダーを含む WebMatrix 2 サイトテンプレートのいずれかを使用して、新しい Web サイトを作成します。
新しいサイトで、新しい .cshtml ページを作成し、ページの内容を次のコードに置き換えます。
ブラウザーでページを実行します。有効な値と無効な値を入力して、検証への影響を確認します。たとえば、必須フィールドを空白のままにしたり、[クレジット] フィールドに文字を入力したりします。

@{
// Specify what fields users must fill in.
Validation.RequireFields("course", "professorname", "credits");
// Add validation criteria.  Here, require that input to Credits is an integer.
Validation.Add("credits", Validator.Integer());

if (IsPost)  {
// Wrap the postback code with a validation check.
if (Validation.IsValid()) {
    var course = Request["course"];
    var professorName = Request["professorname"];
    var credits = Request["credits"];
    // Display valid input values.
    <text>
        You entered: <br />
        Class: @course <br />
        Professor: @professorName <br />
        Credits: @credits <br />
    </text>
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Testing Validation in ASP.NET Web Pages version 2</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js"></script>
<script  src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
<script src="@Href("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
</head>
<body>
<form method="post" action="">
<!-- Display a summary message about any validation issues. -->
@Html.ValidationSummary()
<fieldset>
  <legend>Add Class</legend>
<div>
  <label for="Course">Class:</label>
  <!-- Validation.For("course") adds validation attributes to the input element. -->
  <input type="text" name="Course" value="@Request["course"]"  @Validation.For("course") />

  <!-- Display a field-specific message about validation issues. -->
  @Html.ValidationMessage("course")
</div>

<div>
  <label for="ProfessorName">Professor:</label>
  <input type="text" name="ProfessorName" value="@Request["professorname"]"
      @Validation.For("professorname") />
  @Html.ValidationMessage("professorname")
</div>

<div>
  <label for="Credits">Credits:</label>
  <input type="text" name="Credits" value="@Request["credits"]" @Validation.For("credits") />
  @Html.ValidationMessage("credits")
</div>

<div>
  <label>&nbsp;</label>
  <input type="submit" value="Submit" class="submit" />
</div>
  </fieldset>
</form>
</body>
</html>

ユーザーが有効な入力を送信したときのページを次に示します。

ユーザーが必須フィールドを空のままにして送信したページを次に示します。

ユーザーが [クレジット] フィールドに整数以外の値を入力して送信した場合のページを次に示します。

詳しくは、次のブログ記事を参照してください。

Web ページ v2 で検証を更新しましたValidation ヘルパーを使用した検証の追加の基本 (サーバー側のみ)
Web ページ v2、パート 2 で検証を更新しましたクライアント側の検証の追加。
Web ページ v2、パート 3で検証を更新しました検証エラーの書式設定。

アセットマネージャーを使用したスクリプトの登録

アセットマネージャーは、クライアントスクリプトを登録およびレンダリングするためにサーバーコードで使用できる新機能です。この機能は、実行時に 1 つのページに結合される複数のファイル (レイアウトページ、コンテンツページ、ヘルパーなど) のコードを操作する際に役立ちます。アセットマネージャーは、スクリプトファイルがどのコードファイルから呼び出されるか、何回呼び出されるかに関係なく、レンダリングされたページでスクリプトファイルが正しく効率的に参照されるようにソースファイルを調整します。また、アセットマネージャーは <script> タグを適切な場所でレンダリングすることで、レンダリング中にスクリプトをダウンロードしなくてもページをすばやく読み込めるようにし、レンダリングが完了する前にスクリプトが呼び出されると発生する可能性があるエラーを回避します。

たとえば、JavaScript ファイルを呼び出すカスタムヘルパーを作成して、コンテンツページコード内の 3 つの異なる場所でこのヘルパーを呼び出すとします。アセットマネージャーを使用してスクリプト呼び出しをヘルパーに登録しないと、同じスクリプトファイルを指す 3 つの異なる <script> タグがレンダリングされたページに表示されます。さらに、レンダリングされたページに <script> タグが挿入される場所によっては、ページが完全に読み込まれる前にスクリプトが特定のページ要素にアクセスしようとすることでエラーが発生する可能性があります。アセットマネージャーを使用してスクリプトを登録すれば、これらの問題を回避できます。

次の操作を行うことで、アセットマネージャーを使用してスクリプトを登録できます。

スクリプトを参照する必要があるコードで、Assets.AddScript メソッドを呼び出します。
_SiteLayout ページで、Assets.GetScripts メソッドを呼び出して <script> タグをレンダリングします。

Note

Assets.GetScripts への呼び出しを _SiteLayout ページの <body> 要素の最後の項目として配置します。これにより、ページの読み込みが速くなり、スクリプトエラーを回避することができます。

次の例は、アセットマネージャーのしくみを示しています。コードには、次の項目が含まれています。

MakeNote という名前のカスタムヘルパー。このヘルパーは、境界線で囲まれた div 要素をボックスの周囲で折り返し、そこに "Note:" を追加することで、ボックス内の文字列をレンダリングします。このヘルパーは、メモに実行時の動作を追加する JavaScript ファイルも呼び出します。ヘルパーは、<script> タグを使用してスクリプトを参照するのではなく、Assets.AddScript を呼び出してスクリプトを登録します。
JavaScript ファイル。これはヘルパーによって呼び出されるファイルであり、mouseover イベント中にメモ項目のフォントサイズを一時的に大きくします。
_SiteLayout ページを参照するコンテンツページは、本文内のコンテンツをレンダリングした後、MakeNote ヘルパーを呼び出します。
_SiteLayout ページ。このページには、共通のヘッダーとページレイアウト構造が用意されています。また、Assets.GetScripts への呼び出しも含まれています。これは、アセットマネージャーがページ内でスクリプト呼び出しをレンダリングする方法です。

サンプルを実行するには

空の Web ページ 2 Web サイトを作成します。これには WebMatrix の空のサイト テンプレートを使用できます。
サイトに Scripts という名前のフォルダーを作成します。
Scripts フォルダーに Test.js という名前のファイルを作成し、例から Test.js の内容をそこにコピーして、ファイルを保存します。
サイトに App_Code という名前のフォルダーを作成します。
App_Code フォルダーに Helpers.cshtml という名前のファイルを作成し、そこにコード例をコピーして、ルートフォルダー内の App_Code という名前のフォルダーにそのファイルを保存します。
サイトのルートフォルダーに _SiteLayout.cshtml という名前のファイルを作成し、そこに例をコピーして、ファイルを保存します。
サイトのルートに ContentPage.cshtml という名前のファイルを作成し、コード例を追加して、ファイルを保存します。
ブラウザーで ContentPage を実行します。 MakeNote ヘルパーに渡した文字列は、ボックス化されたメモとしてレンダリングされます。
マウスポインターをメモの上に置きます。スクリプトによってメモのフォントサイズが一時的に大きくなります。
レンダリングされたページのソースを表示します。 Assets.GetScripts への呼び出しを配置した場所により、Test.js を呼び出すレンダリングされた <script> タグはページ本文の最後の項目になっています。

Test.js

function UpdateNoteStyle(id) {
var theNote = document.getElementById(id);
theNote.style.fontSize = "150%";
}
function ReturnNoteStyle(id) {
var theNote = document.getElementById(id);
theNote.style.fontSize = "inherit";
}

Helpers.cshtml

@helper MakeNote(string content, string noteid) {
Assets.AddScript("~/Scripts/Test.js");

<div id="@noteid" style="border: 1px solid black; width: 90%; padding: 5px; margin-left: 15px;"
 onmouseover="UpdateNoteStyle('@noteid')" onmouseout="ReturnNoteStyle('@noteid')">
  <p>
  <strong>Note</strong>&nbsp;&nbsp; @content
   </p>
</div>
}

_SiteLayout.cshtml

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<header>
    <div class="content-wrapper">
        <h1>Contoso Ltd.</h1>
    </div>
</header>
<div id="body">
    <section class="content-wrapper main-content clear-fix">
        @RenderBody()
    </section>
</div>
@Assets.GetScripts()
</body>
</html>

ContentPage.cshtml

@{
Layout = "~/_SiteLayout.cshtml";
}
<p>
Nullam scelerisque facilisis placerat. Fusce a augue
erat, malesuada euismod dui.
</p>
@Helpers.MakeNote("Latin is fun to translate.", "note1")

次のスクリーンショットは、メモの上にマウスポインターを置いたときのブラウザー内の ContentPage.cshtml を示しています。

OAuth と OpenID を使用して Facebook やその他のサイトからのログインを有効にする

Web ページ 2 には、メンバーシップと認証のための拡張オプションが用意されています。主な機能強化は、新しい OAuth プロバイダーと OpenID プロバイダーがあることです。これらのプロバイダーを使用すれば、ユーザーは Facebook、Twitter、Windows Live、Google、Yahoo の既存の資格情報を使用してサイトにログインすることができます。たとえば、Facebook アカウントを使用してログインする場合、ユーザーは Facebook アイコンを選択するだけで Facebook ログインページにリダイレクトされ、そこでユーザー情報を入力することができます。その後、ユーザーは Facebook ログインをサイト上の自分のアカウントに関連付けることができます。 Web ページのメンバーシップ機能に関連する拡張機能により、ユーザーは複数のログイン (ソーシャルネットワークサイトからのログインを含む) を Web サイト上の 1 つのアカウントに関連付けることができます。

この画像は、スターターサイト テンプレートのログインページを示しています。ユーザーはこのページで Facebook、Twitter または Windows Live のアイコンを選択して、外部アカウントでのログインを有効にすることができます。

わずか数行のコードを使用するだけで OAuth メンバーシップと OpenID メンバーシップを有効にすることができます。 OAuth プロバイダーと OpenID プロバイダーを操作するために使用するメソッドとプロパティは、WebMatrix.Security.OAuthWebSecurity クラスにあります。

ただし、コードを使用して他のサイトからのログインを有効にする代わりに、新しいプロバイダーの使用を開始するための推奨される方法は、WebMatrix 2 ベータ版に含まれている新しいスターターサイト テンプレートを使用することです。 スターターサイト テンプレートには、ログインページ、メンバーシップデータベース、ローカル資格情報または別のサイトの資格情報のいずれを使用してもユーザーがサイトにログインできるようにするために必要なすべてのコードを備えた完全なメンバーシップインフラストラクチャが含まれています。

OAuth プロバイダーと OpenID プロバイダーを使用してログインを有効にする方法

このセクションでは、ユーザーが外部サイト (Facebook、Twitter、Windows Live、Google、または Yahoo) からスターターサイト テンプレートに基づくサイトにログインできるようにする方法の例を示します。スターターサイトを作成したら、次の操作を行います (詳細を以下に示します)。

OAuth プロバイダー (Facebook、Twitter、Windows Live) を使用するサイトの場合は、外部サイトでアプリケーションを作成します。そうすることで、これらのサイトのログイン機能を呼び出すために必要なアプリケーションキーが得られます。 OpenID プロバイダー (Google、Yahoo) を使用するサイトの場合、アプリケーションを作成する必要はありません。これらのサイトすべてについて、ログインして開発者アプリケーションを作成するには、アカウントが必要です。

Note

Windows Live アプリケーションは、稼働中の Web サイトのライブ URL のみを受け入れるため、ログインのテストにローカル Web サイトの URL を使用することはできません。
適切な認証プロバイダーを指定し、使用するサイトにログインを送信するために、Web サイト内のいくつかのファイルを編集します。

Google ログインと Yahoo ログインを有効にするには:

Web サイトで、_AppStart.cshtml ページを編集し、WebSecurity.InitializeDatabaseConnection メソッドへの呼び出しの後の Razor コードブロックに次の 2 行のコードを追加します。このコードにより、Google と Yahoo 両方の OpenID プロバイダーが有効になります。
```
OAuthWebSecurity.RegisterOpenIDClient(BuiltInOpenIDClient.Google);
OAuthWebSecurity.RegisterOpenIDClient(BuiltInOpenIDClient.Yahoo);
```

~/Account/Login.cshtml ページで、ページの末尾付近にある次の <fieldset> マークアップブロックからコメントを削除します。コードのコメントを解除するには、<fieldset> ブロックの前後の @* 文字を削除します。結果のコードブロックは次のようになります。

<fieldset>
<legend>Log in using another service</legend>
<input type="submit" name="provider" id="facebook" value="Facebook" title="Log in using your Facebook account." />
<input type="submit" name="provider" id="twitter" value="Twitter" title="Log in using your Twitter account." />
<input type="submit" name="provider" id="windowsLive" value="WindowsLive" title="Log in using your Windows Live account." />
</fieldset>

Google プロバイダーまたは Yahoo プロバイダーの <input> 要素を ~/Account/Login.cshtml ページの <fieldset> グループに追加します。 Google と Yahoo 両方の <input> 要素を含む更新された <fieldset> グループは、次の例のようになります。

<fieldset>
<legend>Log in using another service</legend>
<input type="submit" name="provider" id="facebook" value="Facebook" title="Log in using your Facebook account." />
<input type="submit" name="provider" id="twitter" value="Twitter" title="Log in using your Twitter account." />
<input type="submit" name="provider" id="windowsLive" value="WindowsLive" title="Log in using your Windows Live account." />
<input type="submit" name="provider" id="yahoo" value="Yahoo" title="Log in using your Yahoo account." />
<input type="submit" name="provider" id="google" value="Google" title="Log in using your Google account." />
</fieldset>

~/Account/AssociateServiceAccount.cshtml ページで、Google または Yahoo の <input> 要素をファイルの末尾付近の <fieldset> グループに追加します。先ほど追加したものと同じ <input> 要素を /Account/Login.cshtml ページの <fieldset> セクションにコピーできます。

スターターサイトテンプレートの ~/Account/AssociateServiceAccount.cshtml ページは、ユーザーが他のサイトの複数のログインを Web サイト上の 1 つのアカウントに関連付けられるようなページを作成する場合に使用できます。

これで、Google と Yahoo のログインをテストできます。

サイトの default.cshtml ページを実行し、[ログイン] ボタンを選択します。
[ログイン] ページの [別のサービスを使用してログインする] セクションで、Google または Yahoo の送信ボタンを選択します。この例では、Google ログインを使用します。

Web ページは、要求を Google ログインページにリダイレクトします。
既存の Google アカウントの資格情報を入力します。
Localhost にアカウントからの情報の使用を許可するかどうかを確認するメッセージが Google で表示されたら、[許可] をクリックします。

このコードでは、Google トークンを使用してユーザーを認証し、Web サイトのこのページに戻ります。このページでは、ユーザーが Google ログインを Web サイト上の既存のアカウントに関連付けたり、サイトに新しいアカウントを登録して外部ログインを関連付けたりすることができます。
[関連付け] ボタンを選択します。ブラウザーがアプリケーションのホームページに戻ります。

Facebook ログインを有効にするには:

Facebook 開発者向けサイトに移動します (まだログインしていない場合はログインします)。
[新しいアプリの作成] ボタンを選択し、プロンプトに従って、名前を付けて新しいアプリケーションを作成します。
[アプリを Facebook と統合する方法を選択する] セクションで、[Web サイト] セクションを選択します。
[サイトの URL] フィールドにサイトの URL を入力します (例: http://www.example.com)。 [ドメイン] フィールドは省略可能です。これを使用して、ドメイン全体 (example.com など) の認証を提供できます。

Note

ローカルコンピューター上で http://localhost:12345 (数字はローカルポート番号) のような URL を持つサイトを実行している場合は、サイトをテストするためにこの値を [サイトの URL] フィールドに追加することができます。ただし、ローカルサイトのポート番号が変更されるたびに、アプリケーションの [サイトの URL] フィールドを更新する必要があります。
[変更の保存] ボタンを選択します。
[アプリ] タブをもう一度選択し、アプリケーションのスタートページを表示します。
アプリケーションのアプリ ID とアプリシークレットの値をコピーし、一時テキストファイルに貼り付けます。これらの値は、Web サイトのコードで Facebook プロバイダーに渡されます。
Facebook 開発者向けサイトを終了します。

次に、ユーザーが自分の Facebook アカウントを使用してサイトにログインできるように、Web サイトの 2 つのページに変更を加えます。

Web サイトで、_AppStart.cshtml ページを編集し、Facebook OAuth プロバイダーのコードのコメントを解除します。コメント解除されたコードブロックは次のようになります。
```
OAuthWebSecurity.RegisterOAuthClient(
BuiltInOAuthClient.Facebook,
consumerKey: "",   // for Facebook, consumerKey is called AppID in the SDK
consumerSecret: "");
```
Facebook アプリケーションからアプリ ID の値を consumerKey パラメーターの値 (引用符内) としてコピーします。
Facebook アプリケーションからアプリシークレットの値を consumerSecret パラメーター値としてコピーします。
ファイルを保存して閉じます。

~/Account/Login.cshtml ページを編集して、ページの末尾付近にある <fieldset> ブロックからコメントを削除します。コードのコメントを解除するには、<fieldset> ブロックの前後の @* 文字を削除します。コメントが削除されたコードブロックは、次のようになります。

<fieldset>
<legend>Log in using another service</legend>
<input type="submit" name="provider" id="facebook" value="Facebook" title="Log in using your Facebook account." />
<input type="submit" name="provider" id="twitter" value="Twitter" title="Log in using your Twitter account." />
<input type="submit" name="provider" id="windowsLive" value="WindowsLive" title="Log in using your Windows Live account." />
</fieldset>

ファイルを保存して閉じます。

これで、Facebook ログインをテストできます。

サイトの default.cshtml ページを実行し、[ログイン] ボタンを選択します。
[ログイン] ページの [別のサービスを使用してログインする] セクションで、Facebook アイコンを選択します。

Web ページは、要求を Facebook ログインページにリダイレクトします。
Facebook アカウントにログインします。

このコードでは、Facebook トークンを使用してユーザーを認証し、Facebook ログインをサイトのログインに関連付けられるページに戻ります。ユーザー名またはメールアドレスがフォームの [Email] フィールドに入力されます。
[関連付け] ボタンを選択します。

ブラウザーがホームページに戻り、ログインした状態になります。

Twitter ログインを有効にするには:

Twitter 開発者向けサイトにアクセスします。
[アプリの作成] リンクを選択し、サイトにログインします。
[アプリケーションの作成] フォームで、[名前] フィールドと [説明] フィールドに入力します。
[WebSite] フィールドにサイトの URL (例: http://www.example.com) を入力します。

Note

サイトを (http://localhost:12345 のような URL を使用して) ローカルでテストしている場合、Twitter は URL を受け入れない可能性があります。ただし、ローカルループバック IP アドレス (例: http://127.0.0.1:12345) を使用できる可能性があります。これにより、アプリケーションをローカルでテストするプロセスが簡略化されます。ただし、ローカルサイトのポート番号が変更されるたびに、アプリケーションの [WebSite] フィールドを更新する必要があります。
ユーザーが Twitter にログインした後に戻ってくる Web サイト内のページの URL を [コールバック URL] フィールドに入力します。たとえば、(ユーザーのログイン状態を認識する) スターターサイトのホームページにユーザーを移動させるには、[WebSite] フィールドに入力したものと同じ URL を入力します。
使用条件に同意し、[Twitter アプリケーションの作成] ボタンを選択します。
[マイアプリケーション] ランディングページで、作成したアプリケーションを選択します。
[詳細]タブで一番下までスクロールし、[マイアクセストークンの作成] ボタンを選択します。
[詳細]タブで、アプリケーションのコンシューマーキーとコンシューマーシークレットの値をコピーし、一時テキストファイルに貼り付けます。これらの値は、Web サイトのコードで Twitter プロバイダーに渡されます。
Twitter サイトを終了します。

次に、ユーザーが自分の Twitter アカウントを使用してサイトにログインできるように、Web サイトの 2 つのページに変更を加えます。

Web サイトで、_AppStart.cshtml ページを編集して、Twitter OAuth プロバイダーのコードのコメントを解除します。コメント解除されたコードブロックは次のようになります。
```
OAuthWebSecurity.RegisterOAuthClient(
BuiltInOAuthClient.Twitter,
consumerKey: "",
consumerSecret: "");
```
Twitter アプリケーションからコンシューマーキーの値を consumerKey パラメーターの値 (引用符内) としてコピーします。
Twitter アプリケーションからコンシューマーシークレットの値を consumerSecret パラメーターの値としてコピーします。
ファイルを保存して閉じます。

<fieldset>
<legend>Log in using another service</legend>
<input type="submit" name="provider" id="facebook" value="Facebook" title="Log in using your Facebook account." />
<input type="submit" name="provider" id="twitter" value="Twitter" title="Log in using your Twitter account." />
<input type="submit" name="provider" id="windowsLive" value="WindowsLive" title="Log in using your Windows Live account." />
</fieldset>

ファイルを保存して閉じます。

これで、Twitter ログインをテストできます。

サイトの default.cshtml ページを実行し、[ログイン] ボタンを選択します。
[ログイン] ページの [別のサービスを使用してログインする] セクションで、Twitter アイコンを選択します。

Web ページは、作成したアプリケーションの Twitter ログインページに要求をリダイレクトします。
Twitter アカウントにログインします。
このコードでは、Twitter トークンを使用してユーザーを認証し、ログインを Web サイトアカウントに関連付けられるページに戻ります。名前またはメールアドレスがフォームの [Email] フィールドに入力されます。
[関連付け] ボタンを選択します。

ブラウザーがホームページに戻り、ログインした状態になります。

マップヘルパーを使用したマップの追加

Web ページ 2 には、Web ページサイト用のアドインパッケージである ASP.NET Web ヘルパーライブラリへの追加機能が含まれています。その 1 つが Microsoft.Web.Helpers.Maps クラスによって提供されるマッピングコンポーネントです。 Maps クラスを使用すると、住所または経度と緯度の座標セットのいずれかに基づいてマップを生成できます。 Maps クラスを使用すると、Bing、Google、MapQuest、Yahoo などの一般的なマップエンジンを直接呼び出すことができます。

Web サイトで新しい Maps クラスを使用するには、まず Web ヘルパーライブラリのバージョン 2 をインストールする必要があります。これを行うには、現在リリースされているバージョンの ASP.NET Web ヘルパーライブラリをインストールする手順に進み、バージョン 2 をインストールします。

ページにマッピングを追加する手順は、どのマップエンジンを呼び出す場合も同じです。マッピングページに JavaScript ファイル参照を追加し、ページで <script> タグをレンダリングする呼び出しを追加するだけです。次に、マッピングページで、使用するマップエンジンを呼び出します。

次の例では、住所に基づいてマップをレンダリングするページと、経度と緯度の座標に基づいてマップをレンダリングする別のページを作成する方法を示します。アドレスマッピングの例では Google Maps を使用し、座標マッピングの例では Bing Maps を使用します。コード内の次の要素に注意してください。

2 つのマッピングページの上部にある Assets.AddScript への呼び出し。このメソッドは、スターターサイト テンプレートに含まれており、Maps クラスで必要とされる jquery-1.6.2.min.js ファイルへの参照を追加します。
レイアウトファイル内の Assets.GetScripts メソッドへの呼び出し。このメソッドは、2 つのマッピングページで <script> タグをレンダリングします。
マッピングページ内の @Maps.GetGoogleHtml メソッドと @Maps.GetBingHtml メソッドへの呼び出し。アドレスをマップするには、アドレス文字列を渡す必要があります。座標をマップするには、経度と緯度の座標を渡す必要があります。 Bing Maps エンジンの場合は、キーも渡す必要があります (Bing Maps 開発者向けサイトにサインアップすると無料でキーを取得できます)。他のマップエンジンのメソッドも同様に動作します (@Maps.GetYahooHtml、@Maps.GetMapQuestHtml)。

マッピングページを作成するには:

スターターサイト テンプレートに基づいて Web サイトを作成します。
サイトのルートに MapAddress.cshtml という名前のファイルを作成します。このページでは、渡された住所に基づいてマップを生成します。

次のコードをファイルにコピーし、既存のコンテンツを上書きします。

@{
Layout = "~/_MapLayout.cshtml";
Assets.AddScript("~/Scripts/jquery-1.6.2.min.js");
}

<div id="navigation">
<h3>Map an Address:</h3>
<form method="post" action="" id="coordinates" style="width: 320px">
<fieldset>
  <div>
    <label for="address">Address:</label>
    <input style="width: 300px" type="text"  name="address"  value="@Request["address"]"/>
    <input type="submit" value="Map It!" />
   </div>
</fieldset>
</form>
</div>
<div id="content">
@if(IsPost) {
var theAddress = Request["address"];
@Maps.GetGoogleHtml(theAddress,
    width: "800",
    height: "800")
}
</div>

サイトのルートに _MapLayout.cshtml という名前のファイルを作成します。このページは、2 つのマッピングページのレイアウトページになります。

次のコードをファイルにコピーし、既存のコンテンツを上書きします。

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />

<title></title>
<style type="text/css">
    #navigation {
        position: absolute;
        top: 1em;
        left: 3em;
        width: 18em;
    }
    #content {
        margin-top: 10em;
        margin-left: 3em;
    }
</style>
</head>
<body>
  @RenderBody()

  @*
Call the Assets helper to render tags for the Maps helper. For
releases after Web Pages 2 Beta, call Assets.GetScripts().
  *@
  @Assets.GetScripts()
</body>
</html>

サイトのルートに MapCoordinates.cshtml という名前のファイルを作成します。このページでは、渡された座標セットに基づいてマップを生成します。

次のコードをファイルにコピーし、既存のコンテンツを上書きします。

@{
Layout = "~/_MapLayout.cshtml";
Assets.AddScript("~/Scripts/jquery-1.6.2.min.js");
}

<div id="navigation">
<h3>Map a set of coordinates:</h3>
<form method="post" action="" id="coordinates">
<fieldset>
<div>
    <label for="latitude">Latitude:&nbsp;&nbsp;&nbsp;</label>
    <input type="text"  name="latitude" value="@Request["latitude"]"/>
</div>
<div>
    <label for="longitude">Longitude:</label>
    <input type="text" name="longitude" value="@Request["longitude"]"/>
</div>
<div>
    <input type="submit" value="Map It!" />
</div>
</fieldset>
</form>
</div>
<div id="content">
@if(IsPost) {
var theLatitude = Request["latitude"];
var theLongitude = Request["longitude"];
@Maps.GetBingHtml("Ag6C5Ci9VUGz9AIhQyJ7YNwGraanqwy5-V3LK1qGDpdEVPV-MUPBryG18ELoC6g6",
    "",
    theLatitude,
    theLongitude,
    width: "800",
    height: "800")
}
</div>

マッピングページをテストするには:

ページ MapAddress.cshtml ファイルを実行します。
番地、都道府県、郵便番号を含む完全な住所文字列を入力し、[マップ] ボタンを選択します。このページでは、Google Maps からマップをレンダリングします。
特定の場所の緯度と経度の座標セットを見つけます。
MapCoordinates.cshtml ページを実行します。座標を入力し、[マップ] ボタンを選択します。このページでは、Bing Maps からマップをレンダリングします。

複数の Web ページアプリケーションを並行して実行する

Web ページ 2 では、複数のアプリケーションを並行して実行する機能が追加されています。これにより、Web ページ 1 アプリケーションを実行し、続けて新しい Web ページ 2 アプリケーションをビルドして、それらすべてを同じコンピューター上で実行することができます。

WebMatrix を使用して Web ページ 2 ベータ版をインストールする際に覚えておく必要がある点を次に示します。

既定では、既存の Web ページアプリケーションはコンピューター上でバージョン 2 のアプリケーションとして実行されます。 (バージョン 2 のアセンブリは GAC にインストールされ、自動的に使用されます)。
上記のような既定の設定ではなく、Web ページバージョン 1 を使用してサイトを実行する場合は、そのようにサイトを構成することができます。サイトのルートに web.config ファイルがまだない場合は、新しいファイルを作成し、次の XML をそのファイルにコピーして、既存のコンテンツを上書きします。サイトに既に web.config ファイルが含まれている場合は、次のような <appSettings> 要素を <configuration> セクションに追加します。
```
<?xml version="1.0"?>
<configuration>
<appSettings>
<add key="webPages:Version" value="1.0"/>
</appSettings>
</configuration>
```
web.config ファイルでバージョンを指定しない場合、サイトはバージョン 2 サイトとして展開されます。 (バージョン 2 のアセンブリは、展開されたサイトの bin フォルダーにコピーされます)。
Web Matrix バージョン 2 ベータ版のサイトテンプレートを使用して作成する新しいアプリケーションには、サイトの bin フォルダーに Web ページバージョン 2 のアセンブリが含まれます。

一般に、NuGet を使用して適切なアセンブリをサイトの bin フォルダーにインストールすることで、サイトで使用する Web ページのバージョンを常に制御することができます。パッケージを見つけるには、NuGet.org にアクセスしてください。

モバイルデバイスのページのレンダリング

Web ページ 2 を使用すると、モバイルやその他のデバイスでコンテンツをレンダリングするためのカスタムディスプレイを作成できます。

System.Web.WebPages 名前空間には、表示モードの操作を可能にする次のクラスが含まれています: DefaultDisplayMode、DisplayInfo、DisplayModes。これらのクラスを直接使用して、特定のデバイス向けに適切な出力をレンダリングするコードを記述することができます。

または、FileName.Mobile.cshtml のようなファイルの名前付けパターンを使用して、デバイス固有のページを作成することもできます。たとえば、MyFile.cshtml という名前のページと MyFile.Mobile.cshtml という名前のページのように、2 つのバージョンのページを作成できます。実行時にモバイルデバイスが MyFile.cshtml を要求すると、Web ページは MyFile.Mobile.cshtml からコンテンツをレンダリングします。それ以外の場合は、MyFile.cshtml がレンダリングされます。

次の例は、モバイルデバイス用のコンテンツページを追加してモバイルレンダリングを有効にする方法を示しています。 Page1.cshtml には、コンテンツとナビゲーションサイドバーが含まれています。 Page1.Mobile.cshtml にも同じコンテンツが含まれていますが、サイドバーは含まれていません。

サンプルをビルドして実行するには:

Web ページサイトで、Page1.cshtml という名前のファイルを作成し、例からそのファイルに Page1.cshtml のコンテンツをコピーします。
Web ページサイトで、Page1.Mobile.cshtml という名前のファイルを作成し、例からそのファイルに Page1.Mobile.cshtml のコンテンツをコピーします。ページのモバイルバージョンでは、小さい画面でのレンダリングをより適切にするためにナビゲーションセクションが除外されていることに注意してください。
デスクトップブラウザーを実行し、Page1.cshtml を参照します。
モバイルブラウザー (またはモバイルデバイスエミュレーター) を実行し、Page1.cshtml を参照します。今回は Web ページによってページのモバイルバージョンがレンダリングされることに注意してください。

Note

モバイルページをテストするには、デスクトップコンピューターで実行されるモバイルデバイスシミュレーターを使用することができます。このツールを使用すると、モバイルデバイス (つまり、通常よりはるかに狭い表示領域) に Web ページがどのように表示されるかをテストできます。シミュレーターの一例を挙げると、Mozilla Firefox 用の User Agent Switcher アドオンがあります。これを使用すると、デスクトップバージョンの Firefox で、さまざまなモバイルブラウザーをエミュレートできます。

Page1.cshtml

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
    #navigation {
        position: absolute;
        top: 0;
        left: 0;
        width: 10em;
    }
    #content {
    margin-left: 13em;
        margin-right: 10em;
    }
</style>
</head>
<body>
<div id="navigation">
    <h3>Related Sites</h3>
    <ul>
        <li><a href="http://www.adventure-works.com/">Adventure Works</a></li>
        <li><a href="http://www.contoso.com/">Contoso, Ltd</a></li>
        <li><a href="http://www.treyresearch.net/">Trey Research</a></li>
    </ul>
</div>
<div id="content">
    <h1>Lorem ipsum dolor</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
    no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
    amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
    labore et dolore magna aliquyam erat, sed diam voluptua. </p>
    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
    gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
    dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
    ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
    et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</body>
</html>

Page1.Mobile.cshtml

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
    #content {
    margin-left: 2em;
        margin-right: 5em;
    }
</style>
</head>
<body>
<div id="content">
    <h1>Lorem ipsum dolor</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
    no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
    amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
    labore et dolore magna aliquyam erat, sed diam voluptua. </p>
    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
    gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
    dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
    ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
    et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</body>
</html>

デスクトップブラウザーでレンダリングされた Page1.cshtml

Firefox ブラウザーの Apple iPhone シミュレータービューに表示された Page1.Mobile.cshtml。要求は Page1.cshtml に対して行われますが、アプリケーションは Page1.Mobile.cshtml をレンダリングします。

その他のリソース

ASP.NET Web ページ 1 リソース

Note

ほとんどの Web ページ 1 プログラミングリソースと API リソースは、Web ページ 2 にも適用されます。

ASP.NET Web ページプログラミングの概要

WebMatrix リソース

Microsoft WebMatrix サイト
Microsoft WebMatrix を使用した Web 開発の開始 (完全なサンプル Web ページアプリケーションを含む)

次の方法で共有

ASP.NET Web ページ 2 のトップ機能

WebMatrix のインストール

新機能と強化された機能

RC バージョンの変更点 (2012 年 6 月)

ベータ版の変更点 (2012 年 2 月)

新規および更新されたサイト テンプレートの使用

ユーザー入力の検証

アセット マネージャーを使用したスクリプトの登録

OAuth と OpenID を使用して Facebook やその他のサイトからのログインを有効にする

OAuth プロバイダーと OpenID プロバイダーを使用してログインを有効にする方法

マップ ヘルパーを使用したマップの追加

複数の Web ページ アプリケーションを並行して実行する

モバイル デバイスのページのレンダリング

その他のリソース

ASP.NET Web ページ 1 リソース

WebMatrix リソース

フィードバック

その他のリソース

新規および更新されたサイトテンプレートの使用

アセットマネージャーを使用したスクリプトの登録

マップヘルパーを使用したマップの追加

複数の Web ページアプリケーションを並行して実行する

モバイルデバイスのページのレンダリング