Visual Studio 2012 の ASP.NET と Web 開発の新機能

  • [アーティクル]

by Web Camps Team

Visual Studio の新しいバージョンでは、Web テクノロジを使用するときのエクスペリエンスとパフォーマンスの向上に重点を置いた多くの機能強化が導入されています。 CSS、JavaScript、HTML 用の Visual Studio エディターは、IntelliSense や自動インデントなど、最も要求の厳しいコード補助機能の多くを含むように完全に改良されました。 パフォーマンスに関しては、バンドルと縮小が組み込み機能として統合され、ページの読み込み時間を簡単に短縮できるようになりました。

Visual Studio を使用すると、最新の Web サイト テクノロジを操作できます。 クロスブラウザー CSS3 スニペットを使用すると、新しい HTML5 の要素と機能を利用しながら、クライアント プラットフォームに関係なくサイトが動作することを確認できます。

この Visual Studio バージョンでは、JavaScript コードの記述とプロファイリングが簡単になります。 IntelliSense リスト、統合 XML ドキュメント、ナビゲーション機能を JavaScript コードで使用できるようになりました。 これで、JavaScript カタログがすぐに手に入ります。 さらに、ECMAScript5 のスクリプトへの準拠をチェックし、早い段階で構文エラーを検出することもできます。

最後に、この Visual Studio バージョンでは組み込みのバンドルと縮小が実装されています。 スクリプト ファイルとスタイル シートがパックされ、サイトのパフォーマンスが向上するように圧縮されます。

このラボでは、Source フォルダーに用意されているサンプル Web アプリケーションに軽微な変更を適用することで、前述の機能強化と新機能について説明します。

目標

このハンズ オン ラボでは、次の方法を学習します。

  • CSS エディターで新機能と機能強化を使用する
  • HTML エディターで新機能と機能強化を使用する
  • JavaScript エディターで新機能と機能強化を使用する
  • バンドルと縮小の構成と使用

前提条件

演習

このハンズ オン ラボには、次の演習が含まれています。

  1. 演習 1: CSS エディターの新機能
  2. 演習 2: HTML エディターの新機能
  3. 演習 3: JavaScript エディターの新機能
  4. 演習 4: バンドルと縮小

このラボを完了するための推定時間: 60 分。

演習 1: CSS エディターの新機能

Web 開発者は、CSS 編集に関連する多くの困難に精通している必要があります。 CSS スタイル設定の最大の問題の 1 つは、ブラウザー間の互換性です。 多くの場合、サイトにスタイルを適用した後、別のブラウザーまたはデバイスでスタイルを開くと、外観が異なることがあります。 したがって、これらの視覚的な問題を修正するのにかなりの時間を費やして、最終的に 1 つのブラウザーで動作させると、他のブラウザーで壊れていることを認識できます。

Visual Studio には、開発者が CSS スタイル シートに効果的にアクセスし、作業し、整理するのに役立つ機能が含まれるようになりました。 この演習では、効果的なorganizationとエディションの新機能と、ブラウザー間の互換性のための CSS3 コード スニペットを紹介します。

タスク 1 - エディターの新機能

このタスクでは、CSS エディターの新機能について説明します。 この新しいエディターは、新しいスマート インデント、改善されたコード コメント、および強化された IntelliSense リストを利用して、生産性を向上させるのに役立ちます。

  1. Visual Studio を起動し、このラボの Source\WhatsNewASPNET フォルダーにある WhatsNewASPNET.sln ソリューションを開きます。

  2. ソリューション エクスプローラーで、[スタイル] フォルダーの下にある Site.css ファイルを開きます。 [テキスト エディター] ツールがツール バーに表示されていることを確認します。 これを行うには、[ツール バーの表示 | ] メニュー オプションを選択し、[テキスト エディター] オプションをチェックします。 この新しいバージョンでは、[ コメント ] ボタン ( ) と [ コメント解除 ] ボタン ( ) も CSS エディターで有効になっていることがわかります。

    エディターと CSS ツールを

    エディターと CSS ツールの有効化

  3. コードをスクロールし、CSS クラス定義を選択します。 [ コメント ] ( ) ボタンをクリックして、選択した行にコメントを付けます。 次に、 コメント解除 ( ) ボタンをクリックして変更を元に戻します。

  4. テキストの左余白にある [ 折りたたみ (折りたたみ )] ボタンと [展開 ( 展開 )] ボタンをクリックします。 よりクリーンなビューを表示するために使用しないスタイルを非表示にできるようになりました。

    CSS クラスの折りたたみ CSS クラス

    CSS クラスの折りたたみ

  5. スマート インデント機能が有効になっていることを確認します。 [ ツール | オプション] メニュー オプションを選択し、画面の左側のウィンドウで [ テキスト エディター | の CSS | 書式設定 ] ページを選択します。 [階層インデント] オプションをオンにします。

    階層インデントを有効にする階層

    階層インデントの有効化

  6. メイン クラス定義 (.メイン) を見つけて、div 要素にスタイルを追加します。 コードが自動的に配置され、ユーザーが親クラスを一目で見つけるのに役立ちます。

    CSS

    .main
{
  padding: 0px 12px;
  margin: 12px 8px 8px 8px;
  min-height: 420px;
}
  .main div
  {
    border: 0px;
  }

    CSS での階層配置 CSS での

    CSS での階層配置

  7. .メイン div クラス内で、境界線の末尾にカーソル (0px) を見つけ、Enter キーを押して IntelliSense の一覧を表示します。 top と入力し始め、入力時にリストがどのようにフィルター処理されるかに注目してください。 リストには、単語の任意の部分に top を含む要素が表示されます (以前のバージョンの Visual Studio では、リストは用語で 始まる 項目でフィルター処理されます)。

    CSS での IntelliSense の機能強化 CSS

    CSS での IntelliSense の機能強化

タスク 2 - カラー ピッカー

このタスクでは、Visual Studio IntelliSense に統合された新しい CSS カラー ピッカーを見つけます。

  1. Site.css で、ヘッダー クラス定義 (.header) を見つけて、そのコード行の ":" 文字と "#" 文字の間の背景色属性の横にカーソルを置きます。

    カーソルの検索 カーソル

    カーソルの検索

  2. コロンを削除する (:)をクリックし、もう一度書き込んでカラー ピッカーを表示します。 表示される最初の色は、サイトの最も頻繁な色であることに注意してください。 白い色をクリックすると、その HTML カラー コード (#fff) によって、スタイルシート内の現在のカラー コードが置き換えられます。

    カラー ピッカー カラー

    カラーピッカー

  3. カラー ピッカーの [展開 ] (com ) ボタンを押して色のグラデーションを表示し、グラデーション カーソルをドラッグして別の色を選択します。 その後、[ スポイト ] ボタンをクリックし、画面から任意の色を選択します。 カーソルを移動すると、背景色の値が動的に変化します。

    カラー ピッカー グラデーション

    カラー ピッカーグラデーション

  4. [ 不透明度 ] スライダーで、セレクターをバーの中央に移動して不透明度を下げます。 背景色の値が RGBA にスケールを変更することに注意してください。

    カラー ピッカー 不透明度

    カラー ピッカーの不透明度

    Note

    CSS3 の RGBA (赤、緑、青、アルファ) の色定義を使用すると、1 つの項目の色の不透明度の値を定義できます。 不透明度とは異なり 、 同様の CSS 属性 - RGBA 色も最新のブラウザーと互換性があります。

タスク 3 - CSS 互換コード スニペット

このタスクでは、ブラウザー間で互換性のある CSS3 スニペットを使用して、Web サイトにいくつかの機能を実装する方法について説明します。

  1. Site.css ファイルで、ヘッダー CSS クラス定義 (.header) を見つけ、/*border radius*/ プレースホルダーの下にカーソルを置いて新しいスニペットを追加します。 Enter キーを押して IntelliSense の一覧を表示し、「radius」と入力してリストをフィルター処理します。 ダブルクリックして一覧から 境界線半径 オプションを選択し、 Tab キーを押してスニペットを挿入します。 次に、半径サイズをピクセル単位で入力し、 Enter キーを押します。 たとえば、「 15px」と入力します。

    スニペットによって追加された CSS3 属性は、Mozilla や WebKit ベースのブラウザーを含むほとんどの HTML5 コンプライアンス ブラウザーで丸い罫線をレンダリングします。

    罫線半径スニペットの使用する

    罫線半径スニペットの使用

  2. ページ スタイル (.page) に同じ 罫線 スニペットを適用します。

    CSS

    .page
{
    width: 960px;
    background-color: #fff;
    margin: 20px auto 0px auto;
    border: 1px solid #496077;
    /*border radius*/
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}

  3. F5 キーを押して、ソリューションを実行します。 各ページの罫線が丸くなっていることに注意してください。

    角丸丸

    丸い角

  4. ブラウザーを閉じ、Visual Studio に戻ります。

  5. Styles フォルダーの下にある Custom.css ファイルを開き、div.images ul li img クラス定義内にカーソルを置きます。

  6. Enter キーを押して IntelliSense リストを表示し、「 box-shadow 」と入力し、 Tab キーを 2 回押して、クラス定義内に既定のシャドウ コード スニペットを挿入します。 影の値を 10px 10px 5px #888 に設定します。 次に、「 border-radius」 と入力し、コード スニペットを挿入します。 「 15px」 と入力して半径サイズを設定し、 Enter キーを押します。

    影付きの丸い角 影付

    影付きの角が丸い

    Note

    現時点では、Mozilla および Webkit (Chrome、Safari、Konkeror) ブラウザーをサポートするために、対応するプレフィックス (moz、webkit、o) がシャドウ属性に挿入されます。

  7. 新しいクラス div.images ul li img:hover を div.images ul li img クラス定義の下に作成し、カーソルを角かっこ 内に配置します 。

    CSS

    div.images ul li img
{
  ...
}

div.images ul li img:hover
{

}

  8. 変換スニペットを挿入するには、「 transform 」と入力し、 Tab キーを 2 回押します。 次に、「 rotate(-15deg)」 と入力して、画像をポイントしたときに回転角度の値を変更します。

    CSS

    div.images ul li img
{
  padding-top: 50px;
  padding-right: 15px;
  width: 150px;
  ...
}

div.images ul li img:hover
{
  -moz-transform: rotate(-15deg);
  -ms-transform: rotate(-15deg);
  -o-transform: rotate(-15deg);
  -webkit-transform: rotate(-15deg);
  transform: rotate(-15deg);
}

  9. F5 キーを押してソリューションを実行し、CSS3 ページを参照します。 画像の角とボックスの影が丸くなっていることに注意してください。 画像の上にマウス ポインターを合わせ、回転watchします。

    画像を回転する変換スニペット 画像を

    画像を回転する変換スニペット

    Note

    インターネット エクスプローラー 10 を使用していて、影が表示されない場合は、ドキュメント モードが IE10 標準に設定されていることを確認します。 F12 キーを押してインターネット エクスプローラー開発者ツールを開き、[ドキュメント モード] をクリックして IE10 標準に変更します。

    about-us

演習 2: HTML エディターの新機能

Visual Studio の HTML エディターが改善されました。 このバージョンに含まれる機能強化の一部は、HTML ドキュメント、HTML5 スニペット、HTML 開始タグと終了タグの照合、および HTML 検証のスマート インデントです。 この演習では、Web サイトのマークアップで作業するときに、これらの変更によって流暢さが向上する方法を確認できます。

CSS エディターと同様に、HTML エディターも改善されました。 これらの改善のほとんどは、Web 開発者の生活を容易にする小さな機能強化です。 HTML5 のコード スニペットの追加、スマート インデント、HTML ドキュメント DOCTYPE を対象とした編集と検証時の開始タグと終了タグの照合などが、これらの機能強化の一部です。

タスク 1 - DOCTYPE 検証の改善

HTML エディターでは、定義がマスター ページにある場合でも、ページの DOCTYPE をチェックできるようになりました。 ページの DOCTYPE に応じて、HTML エディターは正しい規則セットで検証し、DOCTYPE 要素を考慮して IntelliSense リストをフィルター処理します。

このタスクでは、ページの DOCTYPE を変更して、HTML エディターの動作がそれに応じてどのように変化するかを確認します。

  1. まだ開いていない場合は、Visual Studio を起動し、このラボの Source\WhatsNewASPNET フォルダーにある WhatsNewASPNET.sln ソリューションを開きます。

  2. Site.Master ページを開きます。

  3. 検証ツール バーのターゲット スキーマに注目してください。 HTML エディターの動作 (検証、IntelliSense など) は、選択した Doctype に合わせて適切に変更されます。

    ドロップダウン リストから DOCTYPE: XHTML5 が選択された [検証ツール バーのターゲット スキーマ] を示すスクリーンショット。

    HTML ソース編集ツール バーで Doctype を使用する

  4. ターゲット スキーマを HTML 4.01 に変更します。

    HTML ソース編集ツール バーの Doctype の

    HTML ソース編集ツール バーでの Doctype の変更

  5. body 要素の下にカーソルを置き、HTML5 要素の名前 (ビデオなど) の入力を開始します。 要素が IntelliSense の一覧に表示されないことに注意してください。

    HTML5 要素が一覧にない

    HTML5 要素が一覧にない

  6. 検証ツール バーのターゲット スキーマに対する変更を元に戻し、ドロップダウン リストから DOCTYPE: XHTML5 を選択します。

    DOCTYPE: XHTML5 がドロップダウン リストから選択されている [検証ツール バーのターゲット スキーマ] のスクリーンショット。

    HTML ソース編集ツール バーの Doctype のリセット

  7. body 要素の下にカーソルを置き、もう一度 HTML5 要素の入力を開始します (ビデオなど)。 HTML5 要素が IntelliSense の一覧で使用できるようになりました。

    HTML5 要素が一覧表示されている

    一覧表示されている HTML5 要素

タスク 2 - 開始/終了タグの自動更新

Visual Studio では、編集している要素の HTML の開始タグまたは終了タグが相互に一致するように更新されるようになりました。 この新機能により、HTML タグを編集するときの生産性が向上します。

  1. [ Default.aspx] ページで、タイトル (Visual Studio 2012 Rocks! など) を含む H3 要素を追加します。

    <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
  <br />
  <asp:Image ImageUrl="~/images/Web11.JPG" runat="server" />
  <h3>Visual Studio 2012 Rocks!!</h3>
</asp:Content>

  2. H3 タグを変更し、「H2」または「H1」と入力します。

    終了タグが自動的に更新されます。 終了タグを変更して、それに応じて開始タグが更新されることを確認することもできます。

    終了タグの自動更新 終了タグ

    終了タグの自動更新

タスク 3 - 新しい HTML5 コード スニペット

Visual Studio には、いくつかの HTML5 コード スニペットが含まれるようになりました。 このタスクでは、これらのスニペットの一部を使用します。

  1. web サイト フォルダーのルートに audio という名前の新しいフォルダーを追加します。 Windows エクスプローラーを開き、オーディオ ファイルを WhatsNewASPNET.sln ソリューションのオーディオ フォルダーにコピーします。

  2. Default.aspx ページで、Web11 Rocks!! ヘッダー。 オーディオを入力し、Tab キーを押します。

    新しい HTML エディターには、HTML5 コンテンツのコード スニペットが含まれています。 HTML5 スニペットを有効にするには、適切な DOCTYPE 定義を使用してください。

    HTML5 コード スニペットの挿入

    HTML5 コード スニペットの挿入

  3. 既存のオーディオ ファイルを指すオーディオ ソースを更新します。

    <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
  <br />
  <asp:Image ImageUrl="~/images/Web11.JPG" runat="server" />
  <h2>Visual Studio 2012 Rocks!!</h2>
  <audio controls="controls">
    <source src="audio/Kalimba.mp3" />
  </audio>
</asp:Content>

    Note

    オーディオ ファイルをソリューションに追加する必要があります。

  4. F5 キーを押してサイトを実行し、オーディオを再生します。

    オーディオ コントロールの実行 オーディオ コントロール

    オーディオ コントロールの実行

    Note

    ビデオ、図など、Visual Studio に含まれるスニペットをさらに試すこともできます。

  5. 次に、ページの一部にコントロールを挿入してみてください。 たとえば、GridView コントロールを挿入して、Gri と入力するのではなく、GV の入力<<を開始します。 IntelliSense の一覧に asp:GridView コントロールが表示されていることに注意してください。

    HTML エディターの IntelliSense では、タイトル大文字と小文字の区別の検索と部分的な一致 (用語を含むすべての要素の取得) が提供されるようになりました。

    IntelliSense リストを使用した GridView の

    IntelliSense リストを使用した GridView の挿入

    「grid」と入力<すると、用語に一致するすべての項目が取得されますが、Visual Studio では gridview コントロールが提案されます。

    IntelliSense リストを含む GridView の挿入と部分的な一致 IntelliSense リスト

    IntelliSense リストと部分一致を使用した GridView の挿入

タスク 4 - HTML エディターのスマート タグ

HTML エディターのもう 1 つの改善点は、スマート タグ機能です。 スマート タグを使用すると、一般的な開発タスクや反復的な開発タスクを制御単位で簡単に実行できます。 この機能は既に HTML Designerで使用できますが、HTML エディターでは使用できませんでした。

  1. Site.Master を開き、asp:Menu 要素を見つけます。 開始タグにカーソルを置き、要素の下部に小さなグリフが表示されていることを確認します。クリックしてスマート タスク メニューを開きます。 メニュー コントロールに関連するいくつかのタスクにすばやくアクセスできる点に注意してください。

    メニュー コントロールのスマート タスク メニュー コントロール

    メニュー コントロールのスマート タスク

タスク 5 - スマート インデント

HTML のベスト プラクティスの 1 つは、コードを読みやすくするために入れ子になった要素をインデントすることです。 Visual Studio 2012 では、コードの作成中にエディターによって要素が自動的にインデントされることがわかります。

Note

以前のバージョンの Visual Studio では、スマート インデントは XML エディターで使用できますが、HTML エディターでは使用できませんでした。

  1. HTML エディターのインデント構成が [スマート インデント] に設定されていることを確認します。 これを行うには、 ツール |[オプション] メニュー オプションを選択し、[ テキスト エディター |HTML | 画面の左側のウィンドウにある [タブ] ページ。 [スマート インデント] オプションを選択します。

    HTML エディターの設定

    HTML エディターの設定

  2. [ Default.aspx] ページで 、audio 要素の下にあるすべてのコンテンツを削除します。

  3. 開く オーディオ 要素の末尾にカーソルを置き、 Enter キーを押します。

    カーソルの新しい位置にインデント レベルが追加されていることに注意してください。

    HTML エディターでのスマート インデント HTML エディター

    HTML エディターでのスマート インデント

  4. 削除したコンテンツを含むオーディオ タグを復元するか、変更を保存せずに Default.aspx を 閉じます。

タスク 6 - ユーザー コントロールに抽出する

Visual Studio に含まれるリファクタリング ツール (コードの一部を関数に抽出するなど) は、改善と既存のコードのリファクタリングを容易にする優れた機能です。 ASP.NET ページに対応するのは、ユーザー コントロールへの HTML コードの抽出です。 手動で行うには、新しいユーザー コントロールの作成、コード セクションのユーザー コントロールへの移動、ユーザー コントロールのタグ プレフィックスの登録、ページでのユーザー コントロールのインスタンス化など、いくつかの手順が含まれます。 これで、新しい [ユーザー制御に抽出] ツールによって、これらのすべての手順が自動的に実行されます。

このタスクでは、新しいユーザー制御への抽出コンテキスト操作を使用して、選択したコードから新しいユーザー コントロールを生成します。

  1. [ Default.aspx] ページで 、 H2 要素と audio 要素を選択します。

  2. 右クリックして [ ユーザー コントロールに抽出] を選択します。

    [Extract to User Control]\(ユーザー コントロールに抽出\) メニュー オプション [

    [ユーザー コントロールに抽出] メニュー オプション

  3. 新しいユーザー コントロールの名前を入力します。 たとえば、 Jukebox.ascx を選択し、[OK] をクリック します。

    抽出されたユーザー コントロールの保存

    抽出されたユーザー コントロールの保存

  4. 選択したコードがユーザー コントロールに抽出され、選択したコードの元の場所が新しいユーザー コントロールのインスタンスに置き換えられたことに注意してください。

    新しいユーザー コントロールを使用するようにページが自動的に更新新しいユーザー コントロール

    新しいユーザー コントロールを使用するように自動的に更新されたページ

  5. F5 キーを押してページを実行し、コントロールが機能することを確認します。

演習 3: JavaScript エディターの新機能

JavaScript コードの記述や編集は簡単な作業ではありません。特に、アプリケーションのサイズが大きくなり始め、長いファイルと数百の関数を扱う場合に特に便利です。 スクリプト開発者は通常、コードの読みやすさを維持し、ファイル間を移動するために追加の作業を行う必要があります。 jQuery のような JavaScript ライブラリを含めることにより、コードの長さのためにスクリプト ナビゲーション自体が課題になっています。

Visual Studio では、コード モードにアクセスしやすく整理するための約束を使用して JavaScript エディターが更新されました。 C# エディターまたは VB エディターに既に存在していた多くの Visual Studio 機能が、JavaScript エディターに実装されるようになりました。[定義へ移動]、[自動インデント]、[ドキュメント]、および作成時の検証。 更新された IntelliSense リストを使用すると、JavaScript 関数カタログをすぐに入手できます。

この演習では、JavaScript エディターの新機能と機能強化について説明します。 サンプル ファイルを参照し、Visual Studio 2012 内で JavaScript プログラミングをより効率的にする新しい特性を見つけます。

タスク 1 - JavaScript エディターの新機能

このタスクでは、コードの整理とユーザー エクスペリエンスの向上に重点を置く、新しい JavaScript エディター機能の一部について説明します。

  1. まだ開いていない場合は、Visual Studio を起動し、このラボの Source\WhatsNewASPNET フォルダーにある WhatsNewASPNET.sln ソリューションを開きます。

  2. F5 キーを押してアプリケーションを実行し、ナビゲーション バーの [JavaScript] リンクをクリックします。 ページを数回更新し、カウンターの増分方法をチェックします。

    ページ カウンター ページ

    ページ カウンター

  3. ブラウザーを閉じて、Visual Studio に戻ります。

  4. JavaScript.aspx ページを開き、スクリプト> ブロックを<見つけます (以下に示します)。

    次のコードでは、HTML5 ローカル ストレージを使用して、現在のユーザーがページにアクセスした回数を格納する pageLoadCount 変数を格納します。 Local Storage は、HTML5 標準で導入されたクライアント側のキー値データベースです。 データは、ユーザーのブラウザー内のローカル コンピューターに保存されます。

    <script>
  addCount(1);
  document.getElementById('count').innerHTML = getCount();

  function getCount() {
    var storage = window.localStorage;
    if (!storage.pageLoadCount)
      storage.pageLoadCount = 0;

    return storage.pageLoadCount;
  }

  function addCount(value) {
    window.localStorage.pageLoadCount = parseInt(getCount(), 10) + value;
  }

  ...   
</script>

    Note

    次の手順に進む前に、DOCTYPE が XHTML5 に設定されていることを確認します。

  5. コードを編集し、IntelliSense for JavaScript にローカル ストレージなどの HTML5 機能とその内部メソッドが含まれていることに注意してください。

    JavaScript の HTML5 JavaScript 機能 JavaScript の

    JavaScript の HTML5 JavaScript 機能

  6. スクリプト コードから開始角かっこ ({) をクリックし、角かっこが強調表示されていることを確認します。

    角かっこが強調表示されている

    角かっこが強調表示されている

  7. 関数 testAutoAlign() のコメントを解除します (3 つの行を選択すると、CtrlKを + 使用できます。Ctrl + U) をクリックし、関数コード内でカーソルを見つけます。 Enter キーを押して 2 行目を追加します。 コードが 整列され 、 自動インデントされていることに注意してください。

    JavaScript コードが自動的にアラインされる

    JavaScript コードが自動的にアラインされる

タスク 2 - JavaScript の検証

このタスクでは、ECMAScript5 標準の新しい JavaScript 検証について説明します。 この機能は、サイトの展開前にスクリプトの問題を回避しながら、準拠している JavaScript コードを記述するのに役立ちます。

Note

Visual Studio 2010 では ECMAStript3 コンプライアンスが実装され、Visual Studio 2012 では ECMAScript5 コンプライアンスが提供されています。

  1. Scripts\custom プロジェクト フォルダーの下にあるECMA5script5.jsを開きます。 次に、ECMAScript5 標準の検証をテストします。

    "use strict";

if (true) {
    function StrictModeError()
    {
    }
}

    ファイルの最初の行で "use strict" 方向をチェックすると、ECMAScript5 strict モードが有効になります。 このモードは、過去のエディションのあいまいさを明確にする言語のサブセットで構成され、getter や setter、JSON のライブラリサポート、オブジェクト プロパティに対するより完全なリフレクションなど、いくつかの新機能が追加されます。

  2. まだ開いていない場合は 、エラー一覧 を開きます ([表示 ] メニュー | エラー一覧)。 関数宣言に下線が付いていることに注意してください。 これは、ECMA5 標準関数では言語構造内で入れ子にできないためです。 次のエラー一覧に、警告の詳細が表示されます。

    JavaScript 検証エラー メッセージ

    JavaScript 検証エラー メッセージ

  3. "use strict" の方向をコメントアウトし、エラーは消えますが、警告は残ります。

  4. ファイルの最後の行に 、"test" のような任意の文字列を書き込みます (文字列であることを示す引用符を含めます)。 文字列の横にピリオドを記述して IntelliSense の一覧を表示し、 トリミング オプションを選択します。

    ECMAScript5 標準では、文字列値と変数には、トリミング、大文字、検索、置換などの文字列メソッドも定義されています。

    JavaScript の IntelliSense リスト (JavaScript

    JavaScript の IntelliSense リスト

タスク 3 - JavaScript の XML ドキュメント

このタスクでは、JavaScript の XML 用 Visual Studio の機能に関するドキュメントを確認します。 JavaScript IntelliSense の一覧に、各関数の XML ドキュメントが表示されます。 さらに、JavaScript のナビゲーション機能を見つけ出します。

  1. Scripts/custom プロジェクト フォルダー にあるXMLDoc.jsファイルを開きます。 このファイルには、各 JavaScript 関数に関する XML ドキュメントが含まれています。

    IntelliSense に統合された JavaScript XML ドキュメント IntelliSense

    IntelliSense に統合された JavaScript XML ドキュメント

  2. 次の add function inXMLDoc.js ファイルで、test という名前の新しい関数を作成します。

  3. テスト関数で、2 つのパラメーターを受け取る乗算関数を呼び出します。 ツールヒント ボックスに 乗算 関数のドキュメントが表示されていることに注目してください。

    function test() {
  multiply(
}

    JavaScript 関数の XML ドキュメント JavaScript 関数

    JavaScript 関数の XML ドキュメント

  4. 関数呼び出しステートメントを完了し、 ドット を入力して、返された値の IntelliSense リストを開きます。 Visual Studio がドキュメント内の 戻り 値を検出し、値を数値として扱うことに注意してください。

    戻り値の型の XML ドキュメント 戻り値

    戻り値の型に関する XML ドキュメント

  5. 次に、関数を追加する呼び出しを挿入します。 JavaScript エディターで関数オーバーロードがサポートされるようになりました。 関数名を記述すると、ドキュメントで指定されている使用可能なオーバーロードのいずれかを選択できます。

    オーバーロードの XML ドキュメント オーバーロード

    オーバーロードの XML ドキュメント

  6. ファイルGotoDefinition.js開き、$().html() 関数呼び出しを見つけます。 html 上でカーソルを見つけます。

  7. F12 キーを押し、定義に移動します。 検索ツールを使用せずに JavaScript コードにアクセスして参照できるようになりました。

  8. コード ファイルの下部にある署名ブロックの前に、jQuery 命令にカーソルを置きます。 F12 キーを押します。 jQuery ライブラリ ファイルに移動します。 F12 を使用して jQuery ファイル間を移動することもできます。

    jQuery 定義への移動

    jQuery 定義への移動

Note

ファイルを保存する前に、GotoDefinition.jsに構文エラーがないことを確認してください。

演習 4: バンドルと縮小

Web サイトに複数の JavaScript または CSS ファイルが含まれている回数はいくつですか? これは、バンドルと縮小がファイル サイズを小さくし、サイトのパフォーマンスを速くするのに役立つ非常に一般的なシナリオです。 ASP.NET 4.5 の新しいバンドル機能は、JS または CSS ファイルのセットを 1 つの要素にパックし、コンテンツを縮小することによってサイズを小さくします (つまり、不要な空白を削除し、コメントを削除し、識別子を減らします)。

ASP.NET 4.5 のバンドルと縮小は実行時に実行されるため、プロセスでユーザー エージェント (IE、Mozilla など) を識別し、ユーザー ブラウザーをターゲットにして圧縮を改善します (たとえば、要求が IE から送信されたときに Mozilla 固有のものを削除するなど)。

この演習では、ASP.NET 4.5 でさまざまな種類のバンドルと縮小を有効にして使用する方法について説明します。

タスク 1 - NuGet からのバンドルと縮小パッケージのインストール

  1. まだ開いていない場合は、Visual Studio を起動し、このラボの Source\WhatsNewASPNET フォルダーにある WhatsNewASPNET.sln ソリューションを開きます。

  2. NuGet パッケージ マネージャー コンソールを開きます。 これを行うには、[その他の Windows | パッケージ マネージャー コンソールの表示 | ] メニューを使用します。

    パッケージ マネージャーを開く file:///C:/Users/User/AppData/Local/Temp/Marker3744//media/44462/Multiple-Stylesheets-and-JavaScript-files-in-the-application.pngconsole

    パッケージ マネージャー コンソールを開く

  3. パッケージ マネージャー コンソールで、「Install-Package Microsoft.Web.Optimization」と入力し、Enter キーを押します。

タスク 2 - 既定のバンドル

バンドルと縮小を使用する最も簡単な方法は、既定のバンドルを有効にすることです。 このメソッドでは、規則を使用して、フォルダー内の JS ファイルと CSS ファイルのバンドルバージョンと縮小バージョンを参照できます。

このタスクでは、バンドルおよび縮小された JS ファイルと CSS ファイルを有効にして参照し、結果の出力を表示する方法について説明します。

  1. まだ開いていない場合は、Visual Studio を起動し、このラボの Source\WhatsNewASPNET フォルダーにある WhatsNewASPNET.sln ソリューションを開きます。

  2. ソリューション エクスプローラーで、[スタイル]、[Scripts\custom]、[Scripts\bundle] フォルダーを展開します。

    アプリケーションで複数の CSS ファイルと JS ファイルが使用されていることに注意してください。

    アプリケーション内の複数のスタイルシートと JavaScript ファイル アプリケーション内

    アプリケーション内の複数のスタイルシートと JavaScript ファイル

  3. Global.asax.cs ファイルを開きます。

    新しい Microsoft.Web.Optimization 名前空間がファイルの先頭にコメント アウトされていることに注意してください。 using ディレクティブのコメントを解除して、バンドル機能と縮小機能を含めます。

    using System;
using Microsoft.Web.Optimization;

  4. Application_Start メソッドを見つけます。

    このメソッドでは、次のスニペットに示すように EnableDefaultBundles 呼び出しのコメントを解除します。 これにより、フォルダーへのパスに加えて、"CSS" または "JS" サフィックスを使用して、フォルダー内の CSS ファイルのバンドルされたコレクションを参照できます。

    void Application_Start(object sender, EventArgs e)
{
    // Default behavior
    // Bundles all .js files in folders such as "scripts" if URL pointed to it: http://localhost:54716/scripts/custom/js 
    BundleTable.Bundles.EnableDefaultBundles();

    ...
}

  5. Optimization.aspx ファイルを開き、HeadContent のコンテンツ コントロールを見つけます。

    CSS ファイルと JS ファイルには 1 つの参照タグがあることに注意してください。

    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
  <link href="Styles/CSS" rel="stylesheet" type="text/css" />
  <script src="Scripts/custom/JS"></script>
</asp:Content>

    Note

    このコードはデモ用です。 理想的には、Site.Master ファイル内のバンドルを参照します。 このサンプル コードでは、バンドルされたファイルの一部も Site.Master ファイルによって参照されており、この最後の参照が冗長になっていることがわかります。

  6. リンクは href 属性のバンドル規則を使用して、Styles フォルダーと Scripts\custom フォルダーからすべての CSS ファイルまたは JS ファイルをそれぞれ取得していることに注意してください。

    以下に示すように、 Scripts/custom/JS のパスを使用して、 Scripts/custom フォルダー内のすべての JS ファイルをバンドルおよび縮小できます。 これは、既定のバンドルでの既定の動作です。

    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <ul>
    <li>
      <h2><a href="Styles/CSS">CSS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/custom/JS">JS Bundle</a></h2>
    </li>

  7. Styles\Site.css ファイルを開きます。

    元の CSS ファイルには、インデントされたコード、空白のスペース、ファイルを拡大するコメントが含まれていることに注意してください。 (また、JavaScript ファイルには空白とコメントが含まれています)。

    Scripts フォルダー内の元の CSS ファイルの

    Scripts フォルダー内の元の CSS ファイルの 1 つ

  8. F5 キーを押してアプリケーションを実行し、[最適化] ページに移動します。

  9. [CSS バンドル] リンクをクリックして、ファイルをダウンロードして開きます。

    縮小されたバンドル ファイルを確認します。 空白、コメント、インデント文字がすべて削除され、小さなファイルが生成されていることがわかります。

    バンドルされた CSS ファイル

    バンドルされた CSS ファイル

  10. 次に、[ JS バンドル ] リンクをクリックして、JavaScript バンドル ファイルを開きます。 エクスプローラーの警告は無視しても問題ありません。 カスタム フォルダーの下の JavaScript ファイルもバンドルされ、縮小されていることに注意してください。

    バンドルされた JavaScript ファイル

    バンドルされた JavaScript ファイル

    以前の ASP.NET バージョンでは、CSS または JS ファイルの圧縮を有効にする方がはるかに複雑でした。 ここまでで説明したように、バンドルを有効にするには Global.asax ファイルに 1 行を追加し、バンドルされたファイルをサイトから参照するだけです。

タスク 3 - 静的バンドル

静的バンドルアプローチを使用すると、バンドルするファイルのセット、参照、および使用される縮小メソッドをカスタマイズできます。

このタスクでは、バンドルと縮小する特定のファイル セットを定義するように静的バンドルを構成します。

  1. ブラウザーを閉じます。

  2. Global.asax.cs ファイルを開き、Application_Start メソッドを見つけます。

  3. 次のコードに示すように、静的バンドル コードのコメントを解除します。

    "~/StaticBundle" 仮想パスで参照される静的バンドルを定義し、AddFile メソッドを使用して指定したすべてのファイルを縮小するには JsMinify を使用します。 最後に、静的バンドルを BundleTable に追加して有効にします。

    ファイルが同じ場所に配置されていないことに注意してください。これは、既定のバンドルよりももう 1 つの利点です。

    void Application_Start(object sender, EventArgs e)
{
    // Default behavior
    // Bundles all .js files in folders such as "scripts" if URL pointed to it: http://localhost:54716/scripts/custom/js
    BundleTable.Bundles.EnableDefaultBundles();

    // Static bundle.
    // Access on url http://localhosthost:54716/StaticBundle
    Bundle b = new Bundle("~/StaticBundle", typeof(JsMinify));
    b.AddFile("~/scripts/custom/ECMAScript5.js");
    b.AddFile("~/scripts/custom/GoToDefinition.js");
    b.AddFile("~/scripts/bundle/JScript1.js");
    b.AddFile("~/scripts/bundle/JScript2.js");

    BundleTable.Bundles.Add(b);

    // Dynamic bundle
    // Bundles all .coffee files in folders such as "script" when "coffee" is appended to it: http://localhost:54716/scripts/coffee
    // DynamicFolderBundle fb = new DynamicFolderBundle("coffee", typeof(CoffeeMinify), "*.coffee");
    // BundleTable.Bundles.Add(fb);
}

  4. Optimization.aspx ファイルを開きます。

    Static JS Bundle へのリンクでは、Global.asax.cs ファイルで静的バンドルを構成したときに宣言したパスが使用されていることに注意してください: /StaticBundle。

    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <ul>
    <li>
      <h2><a href="Styles/CSS">CSS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/custom/JS">JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="StaticBundle">Static JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/bundle/Coffee">Dynamic JS Bundle</a></h2>
    </li>
  </ul>
</asp:Content>

  5. F5 キーを押してアプリケーションを実行し、[最適化] ページに移動します。

  6. [ Static JS Bundle]\(静的 JS バンドル \) リンクをクリックして、ファイルを開きます。

    縮小バンドルされた JavaScript ファイルは、"/StaticBundle" というパスの静的バンドル ファイルで構成されているすべての JavaScript ファイルの出力であることに注意してください。

    静的 JavaScript ファイル バンドル

    静的 JavaScript ファイル バンドル

  7. ブラウザーを閉じ、Visual Studio に戻ります。

タスク 4 - 動的フォルダー バンドル

このタスクでは、動的フォルダー バンドルを構成する方法について説明します。 動的バンドルの機能は、静的な JavaScript と、JavaScript にコンパイルされる言語の他のファイルを含めることができるため、バンドルを実行する前に何らかの処理が必要です。

この例では、 DynamicFolderBundle クラスを使用して、CofeeScript で記述されたファイルの動的バンドルを作成する方法について説明します。 CofeeScript は、JavaScript にコンパイルされるプログラミング言語であり、JavaScript コードを記述するためのより簡単な構文を提供し、JavaScript の簡潔さと読みやすさを向上します。

  1. Global.asax.cs ファイルを開き、Application_Start メソッドを見つけます。

  2. 次のコードに示すように、動的バンドル コードのコメントを解除します。

    ".coffee" 拡張子 (CoffeeScript ファイル) のファイルにのみ適用される CoffeeMinify カスタム縮小プロセッサを使用する動的フォルダー バンドルを定義しています。 検索パターンを使用して、フォルダー内でバンドルするファイル ("*.coffee" など) を選択できることに注意してください。

    void Application_Start(object sender, EventArgs e)
{
    // Default behavior
    // Bundles all .js files in folders such as "scripts" if URL pointed to it: http://localhost:54716/scripts/custom/js
    BundleTable.Bundles.EnableDefaultBundles();

    // Static bundle.
    // Access on url http://localhosthost:54716/StaticBundle
    ...

    // Dynamic bundle
    // Bundles all .coffee files in folders such as "script" when "coffee" is appended to it:
         // http://localhost:54716/scripts/coffee
    DynamicFolderBundle fb = new DynamicFolderBundle("coffee", typeof(CoffeeMinify), "*.coffee");
    BundleTable.Bundles.Add(fb);
}

  3. NuGet パッケージ マネージャー コンソールを開きます。 これを行うには、[その他の Windows | パッケージ マネージャー コンソールの表示 | ] メニューを使用します。

  4. パッケージ マネージャー コンソールで、「Install-Package CoffeeSharp」と入力し、Enter キーを押します。

  5. [ソリューション エクスプローラー] ウィンドウで [すべてのファイルを表示] ボタンをクリックします

    すべてのファイルの表示

    すべてのファイルを表示する

  6. ソリューション エクスプローラーで CoffeeMinify.cs ファイルを右クリックし、[プロジェクトに含める] を選択します

    プロジェクトに CoffeeMinify.cs ファイルを

    プロジェクトに CoffeeMinify.cs ファイルを含める

  7. CoffeeMinify.cs ファイルを開きます。

    このクラスは JsMinify を継承して、CoffeeScript コードコンパイルの結果として得られる JavaScript 出力を縮小します。 最初に CoffeeScript コンパイラを呼び出して JavaScript コードを生成し、JsMinify.Process メソッドに送信して結果のコードを縮小します。

    public class CoffeeMinify : JsMinify
{
    public override void Process(BundleResponse bundle)
    {
        var compiler = new CoffeeScriptEngine();
        bundle.Content = compiler.Compile(bundle.Content);

        base.Process(bundle);
    }
}

  8. Scripts/bundle フォルダーから Script1.coffee ファイルと Script2.coffee ファイルを開きます。

    これらのファイルには、CoffeeMinify クラスとのバンドルの実行中にコンパイルされる CoffeScript コードが含まれます。

    わかりやすくするために、提供される CoffeeScript ファイルには CoffeeScript サンプル コードのみが含まれます。 コメントは JsMinify プロセスによって除外されます。

    CoffeeScript ファイル

    CoffeeScript ファイル

    Note

    CofeeScript は、JavaScript コードを記述するためのより簡単な構文を提供し、JavaScript の簡潔さと読みやすさを向上させるだけでなく、配列理解やパターン マッチングなどの他の機能を追加します。

  9. Optimization.aspx ファイルを開き、バンドル リンクを見つけます。

    ダイナミック JS バンドルへのリンクは、動的フォルダー バンドル用に構成した /Coffee サフィックスを使用して Scripts/bundle フォルダーを参照していることに注意してください。

    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <ul>
    <li>
      <h2><a href="Styles/CSS">CSS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/custom/JS">JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="StaticBundle">Static JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/bundle/Coffee">Dynamic JS Bundle</a></h2>
    </li>
  </ul>
</asp:Content>

  10. F5 キーを押してアプリケーションを実行し、[最適化] ページに移動します。

  11. [ダイナミック JS バンドル] リンクをクリックして、生成されたファイルを開きます。

    このバンドルに含まれていたコンテンツには 、.coffee ファイルのみが含まれていることに注意してください。 CoffeeScript コードが JavaScript にコンパイルされ、コメントアウトされた行が削除されていることがわかります。

    動的 JS ファイル バンドル

    動的 JS ファイル バンドル

Note

さらに、「 付録 B: Web Deploy を使用して ASP.NET MVC 4 アプリケーションを発行する」に従って、このアプリケーションを Windows Azure Web サイトにデプロイできます。

まとめ

このラボでは、Visual Studio 2012 の ASP.NET と Web 開発の新機能と、Visual Studio 2012 のさまざまな機能強化を活用する方法を理解するのに役立ちます。

このHands-On ラボを完了することで、VISUAL Studio 2012 Editors for CSS、JavaScript、HTML の新機能と機能強化を使用する方法を学習しました。 さらに、Visual Studio 2012 で組み込みのバンドルと縮小を実装する方法も学習しました。

付録 A: Visual Studio Express 2012 for Web のインストール

Microsoft Web Platform Installer Microsoft Visual Studio Express使用して、2012 for Web または別の "Express" バージョンをインストールできます。 次の手順では、Microsoft Web Platform Installerを使用して Visual Studio Express 2012 for Web をインストールするために必要な手順について説明します。

  1. [https://go.microsoft.com/?linkid=9810169]()https://go.microsoft.com/?linkid=9810169 に移動します。 または、Web プラットフォーム インストーラーを既にインストールしている場合は、それを開いて製品 "Visual Studio Express 2012 for Web with Windows Azure SDK" を検索することもできます。

  2. [ 今すぐインストール] をクリックします。 Web プラットフォーム インストーラーがない場合は、最初にダウンロードしてインストールするようにリダイレクトされます。

  3. Web プラットフォーム インストーラーが開いたら、[インストール] をクリックしてセットアップを開始します。

    インストール Visual Studio Express

    Visual Studio Expressのインストール

  4. すべての製品のライセンスと使用条件を読み、[ 同意 する] をクリックして続行します。

    ライセンス条項に同意する

    ライセンス条項に同意する

  5. ダウンロードとインストールのプロセスが完了するまで待ちます。

    Installation progress

    Installation progress

  6. インストールが完了したら、[完了] をクリック します。

    インストールが完了しました

    インストールが完了しました

  7. [ 終了 ] をクリックして Web プラットフォーム インストーラーを閉じます。

  8. web 用Visual Studio Expressを開くには、[スタート] 画面に移動し、"VS Express" の書き込みを開始し、[VS Express for Web] タイルをクリックします。

    VS Express for Web タイル

    VS Express for Web タイル

付録 B: Web 配置を使用した ASP.NET MVC 4 アプリケーションの発行

この付録では、Windows Azure 管理ポータルから新しい Web サイトを作成し、ラボに従って取得したアプリケーションを発行し、Windows Azure によって提供される Web デプロイ発行機能を利用する方法について説明します。

タスク 1 - Windows Azure Portal からの新しい Web サイトの作成

  1. Windows Azure 管理ポータルに移動し、サブスクリプションに関連付けられている Microsoft 資格情報を使用してサインインします。

    Note

    Windows Azure を使用すると、10 ASP.NET Web サイトを無料でホストし、トラフィックの増加に合わせてスケーリングできます。 こちらからサインアップできます。

    Windows Azure portalにログオンするします

    Windows Azure 管理ポータルにログオンする

  2. コマンド バーの [ 新規 ] をクリックします。

    新しい Web サイトの作成 新

    新しい Web サイトの作成

  3. [ コンピューティング | Web サイト] をクリックします。 次に、[ クイック作成 ] オプションを選択します。 新しい Web サイトの使用可能な URL を指定し、[ Web サイトの作成] をクリックします。

    Note

    Windows Azure Web サイトは、制御および管理できるクラウドで実行されている Web アプリケーションのホストです。 [クイック作成] オプションを使用すると、完成した Web アプリケーションをポータルの外部から Windows Azure Web サイトにデプロイできます。 データベースを設定する手順は含まれません。

    クイック作成を使用して新しい Web サイト

    クイック作成を使用して新しい Web サイトを作成する

  4. 新しい Web サイト が作成されるまで待ちます。

  5. Web サイトが作成されたら、 URL 列の下にあるリンクをクリックします。 新しい Web サイトが動作していることを確認します。

    新しい Web サイトを参照する

    新しい Web サイトを参照する

    実行中の Web サイト

    実行中の Web サイト

  6. ポータルに戻るし、[名前] 列の下にある Web サイトの名前をクリックして、管理ページを表示します。

    Web サイト管理ページを

    Web サイト管理ページを開く

  7. [ダッシュボード] ページの [概要] セクションで、[発行プロファイルのダウンロード] リンクをクリックします。

    Note

    発行プロファイルには、有効になっている各発行方法について、Web アプリケーションを Windows Azure Web サイトに発行するために必要なすべての情報が含まれています。 発行プロファイルには、発行メソッドが有効化される各エンドポイントに接続して認証するために必要な URL、ユーザーの資格情報、およびデータベース文字列が含まれています。 Microsoft WebMatrix 2、Microsoft Visual Studio Express for Web、および Microsoft Visual Studio 2012 では、Web アプリケーションを Windows Azure Web サイトに発行するためのこれらのプログラムの構成を自動化するための発行プロファイルの読み取りがサポートされています。

    Web サイト発行プロファイルのダウンロード Web

    Web サイト発行プロファイルのダウンロード

  8. 発行プロファイル ファイルを既知の場所にダウンロードします。 この演習では、このファイルを使用して、Visual Studio から Windows Azure Web サイトに Web アプリケーションを発行する方法について説明します。

    発行プロファイル ファイルの保存 発行

    発行プロファイル ファイルの保存

タスク 2 - データベース サーバーの構成

アプリケーションでSQL Serverデータベースを使用する場合は、SQL Database サーバーを作成する必要があります。 SQL Serverを使用しない単純なアプリケーションをデプロイする場合は、このタスクをスキップできます。

  1. アプリケーション データベースを格納するためのSQL Database サーバーが必要です。 サブスクリプションからSQL Database サーバーを表示するには、Windows Azure 管理ポータルの Sql Databases | Servers | Server のダッシュボードを参照してください。 サーバーを作成していない場合は、コマンド バーの [追加] ボタンを使用してサーバーを作成できます。 次のタスクで使用するように 、サーバー名と URL、管理者ログイン名、パスワードをメモしておきます。 データベースは後のステージで作成されるため、まだ作成しないでください。

    SQL Database サーバー ダッシュボード

    SQL Database サーバー ダッシュボード

  2. 次のタスクでは、Visual Studio からのデータベース接続をテストします。そのため、ローカル IP アドレスをサーバーの 許可 IP アドレスの一覧に含める必要があります。 これを行うには、[ 構成] をクリックし、[ 現在のクライアント IP アドレス ] から IP アドレスを選択し、[ 開始 IP アドレス ] テキスト ボックスと [終了 IP アドレス ] テキスト ボックスに貼り付けます。 ルールの名前を入力し、[ add-client-ip-address-ok-button] ボタン をクリックします。

    クライアント IP アドレスの追加

    クライアント IP アドレスの追加

  3. クライアント IP アドレスが許可された IP アドレスの一覧に追加されたら、[保存] をクリックして変更を確認します。

    変更の確認

    変更の確認

タスク 3 - Web 配置を使用して ASP.NET MVC 4 アプリケーションを発行する

  1. ASP.NET MVC 4 ソリューションに戻るします。 ソリューション エクスプローラーで、Web サイト プロジェクトを右クリックし、[発行] を選択します。

    アプリケーションの発行 アプリケーション

    Web サイトの発行

  2. 最初のタスクで保存した発行プロファイルをインポートします。

    発行プロファイルのインポート 発行

    発行プロファイルのインポート

  3. [ 接続の検証] をクリックします。 検証が完了したら、[ 次へ] をクリックします。

    Note

    [接続の検証] ボタンの横に緑色のチェックマークが表示されたら、検証が完了します。

    接続の検証

    接続の検証

  4. [ 設定] ページの [ データベース ] セクションで、データベース接続のテキスト ボックス ( DefaultConnection) の横にあるボタンをクリックします。

    Web 配置構成

    Web 配置の構成

  5. 次のようにデータベース接続を構成します。

    • [サーバー名] に、tcp: プレフィックスを使用してSQL Databaseサーバーの URL を入力します。

    • [ ユーザー名] に、サーバー管理者のログイン名を入力します。

    • [ パスワード] に、サーバー管理者のログイン パスワードを入力します。

    • 新しいデータベース名 ( MVC4SampleDB など) を入力します。

      宛先接続文字列の構成

      宛先接続文字列の構成

  6. 次に、 [OK] をクリックします データベースの作成を求められたら、[ はい] をクリックします。

    データベースの作成 データベース

    データベースを作成する

  7. Windows Azure のSQL Databaseに接続するために使用する接続文字列は、[既定の接続] ボックスに表示されます。 続けて、 [次へ] をクリックします。

    SQL Databaseを指す接続文字列

    SQL Databaseを指す接続文字列

  8. [プレビュー] ページ で 、[ 発行] をクリックします。

    Web アプリケーションの発行 Web アプリケーション

    Web アプリケーションの発行

  9. 発行プロセスが完了すると、既定のブラウザーで発行された Web サイトが開きます。

    Windows Azure に発行されたアプリケーション Windows Azure

    Windows Azure に発行されたアプリケーション