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

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

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

含まれているもの:

WebMatrix のインストール

新機能と強化された機能

RC リリースの変更

ベータ版リリースの変更点

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

ユーザー入力の検証

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

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

Web ページアプリケーションをサイドバイサイドで実行する

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

その他のリソース

注意

このトピックでは、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 Beta をインストールする必要があります。次に、visual Studio で MVC 4 および Web ページ 2 アプリケーション ASP.NET 作成するためのテンプレートとツールを含む、ASP.NET MVC 4 ベータ版をインストールします。

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

WebMatrix のインストール

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

Web プラットフォームインストーラーの最新バージョンのインストールページを参照します。

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

注意

WebMatrix 1 が既にインストールされている場合は、このインストールによって WebMatrix 2 Beta に更新されます。バージョン 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 要素で、サーバーコードでまたは nullに解決される値に属性をfalse設定した場合、ASP.NET 属性はまったくレンダリングされません。たとえば、チェックボックスに対して次のマークアップがあるとします。
```
<input type="checkbox"
name="check1"
value="check1"
checked="@checked1" />
```
のchecked1値がまたはにfalsenull解決される場合、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.Validatorを含むSystem.Web.WebPages.ValidationHelper新しい検証クラスを使用すると、数行のコードで強力な検証タスクを実行できます。
必要に応じて、クライアント側の検証。検証エラーをチェックするためにサーバーへのラウンドトリップを要求する代わりに、ユーザーに即時フィードバックを提供します。 (セキュリティ上の理由から、事前にクライアントでチェックが実行されている場合でも、サーバーで検証が実行されます)。

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

ページのコードで、ヘルパー Validation.RequireFieldValidation.RequireFields のメソッドを使用して検証する要素を登録します。(必要な複数のValidation要素を登録するには)、または 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 ページサイトを作成することです。テンプレートによって作成されたサイトには 、スクリプトフォルダーjquery.validate.unobtrusive.js ファイルが含まれており、そこからサイトにコピーできます。

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

個々の要素のマークアップで、メソッドを 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 で検証が更新されました検証エラーの書式設定。

Assets Manager を使用したスクリプトの登録

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

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

アセットマネージャーにスクリプトを登録するには、次の操作を行います。

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

注意

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

次の例は、assets Manager のしくみを示しています。コードには、次の項目が含まれています。

という名前 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 Beta に含まれる新しい スターターサイト テンプレートを使用することをお勧めします。 スターターサイト テンプレートには、完全なメンバーシップインフラストラクチャが含まれており、ログインページ、メンバーシップデータベース、およびユーザーがローカル資格情報または別のサイトの資格情報を使用してサイトにログインするために必要なすべてのコードが含まれています。

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

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

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

注意

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

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

Web サイトで 、_AppStart.cshtml ページを編集し、メソッドの呼び出しの後に Razor コードブロックに次の 2 行のコードを WebSecurity.InitializeDatabaseConnection 追加します。このコードにより、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>

<input> Google または Yahoo プロバイダーの要素を <fieldset>~/Account/Login.cshtml ページのグループに追加します。 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 の要素を<fieldset>ファイルの末尾付近のグループに追加<input>します。 ~/Account/Login.cshtml ページのセクションに<fieldset>追加したのと同じ<input>要素をコピーできます。

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

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

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

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

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

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

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

注意

(番号がローカルポート番号である) などの 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:12345URL を使用して) サイトをローカルでテストしている場合、Twitter は URL を受け入れられない可能性があります。ただし、ローカルループバック IP アドレス (例: http://127.0.0.1:12345) を使用できる場合があります。これにより、アプリケーションをローカルでテストするプロセスが簡略化されます。ただし、ローカルサイトのポート番号が変更されるたびに、アプリケーションの WebSite フィールドを更新する必要があります。
[ コールバック URL ] フィールドに、Twitter にログインした後にユーザーが戻る Web サイトのページの 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地図を使用しています。コード内の次の要素に注意してください。

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

Web ページアプリケーションをサイドバイサイドで実行する

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

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

既定では、既存の Web ページアプリケーションはコンピューター上でバージョン 2 のアプリケーションとして実行されます。 (バージョン 2 のアセンブリは GAC にインストールされ、自動的に使用されます)。
Web ページバージョン 1 を使用してサイトを実行する場合は (前の時点のように既定ではなく)、サイトを構成してこれを行うことができます。サイトのルートに まだweb.config ファイルがない場合は、新しいファイルを作成し、次の XML をコピーして既存のコンテンツを上書きします。サイトに既にweb.config ファイルが含まれている場合は、次のような要素をセクションに<configuration>追加<appSettings>します。
```
<?xml version="1.0"?>
<configuration>
<appSettings>
<add key="webPages:Version" value="1.0"/>
</appSettings>
</configuration>
```
'- web.config ファイルでバージョンを指定しない場合、サイトはバージョン 2 サイトとして展開されます。 (バージョン 2 のアセンブリは、展開されたサイトの bin フォルダーにコピーされます)。
Web マトリックスバージョン 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 コンテンツをコピーします。
Page1.Mobile.cshtml という名前のファイルを作成し、例から Page1.Mobile.cshtml コンテンツをコピーします。ページのモバイルバージョンでは、小さな画面でのレンダリングを向上するためにナビゲーションセクションが省略されていることに注意してください。
デスクトップブラウザーを実行し、 Page1.cshtml を参照します。
モバイルブラウザー (またはモバイルデバイスエミュレーター) を実行し、 Page1.cshtml を参照します。今回の Web ページでは、ページのモバイルバージョンがレンダリングされます。

注意

モバイルページをテストするには、デスクトップコンピューター上で実行されるモバイルデバイスシミュレーターを使用できます。このツールを使用すると、モバイルデバイスで見たように Web ページをテストできます (通常は、表示領域がはるかに小さくなります)。シミュレーターの 1 つの例として、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 リソース

注意

ほとんどの 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 月)

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

ユーザー入力の検証

Assets Manager を使用したスクリプトの登録

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

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

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

Web ページ アプリケーションをサイド バイ サイドで実行する

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

その他のリソース

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

WebMatrix リソース

フィードバック

フィードバック

その他のリソース

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

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

Web ページアプリケーションをサイドバイサイドで実行する

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