ハンズオンラボ: Visual Studio 2013 Web ツール

Visual Studio は、.NET ベースの Windows および Web プロジェクトのための優れた開発環境です。これには、プロジェクトなしでスタンドアロンファイルを簡単に編集できる強力なテキストエディターが含まれています。

Visual Studio では、各ファイルを編集するときに、フル機能の解析ツリーが保持されます。これにより、Visual Studio は、開発エクスペリエンスをより迅速かつ快適にしながら、比類のないオートコンプリートとドキュメントベースのアクションを提供できます。これらの機能は、HTML および CSS ドキュメントで特に強力です。

この機能はすべて拡張機能でも使用できるため、ニーズに合わせて強力な新機能を使用してエディターを簡単に拡張できます。 Web Essentials は、(主に) Visual Studio に対する Web 関連の拡張機能のコレクションです。これには、新しい IntelliSense の入力候補 (特に CSS の場合)、ブラウザーリンクの新機能、JavaScript ファイル用の自動 JSHint、HTML と CSS の新しい警告、最新の Web 開発に不可欠なその他の多くの機能が含まれています。

すべてのサンプルコードとスニペットは、 https://aka.ms/webcamps-training-kitで入手できる Web Camps トレーニングキットに含まれています。

概要

目標

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

豊富な HTML5 コードスニペットや Zen コーディングなど、Web Essentials に含まれる新しい HTML エディター機能を使用する
カラーピッカーやブラウザーマトリックスのヒントなど、Web Essentials に含まれる新しい CSS エディター機能を使用する
Web Essentials に含まれる新しい JavaScript エディター機能 (すべての HTML 要素に対するファイルへの抽出や IntelliSense など) を使用する
ブラウザーリンクを使用してブラウザーと Visual Studio の間でデータを交換する

前提条件

このハンズオンラボを完了するには、次のものが必要です。

セットアップ

このハンズオンラボで演習を実行するには、まず環境を設定する必要があります。

Windows エクスプローラーウィンドウを開き、ラボの ソース フォルダーを参照します。
Setup.cmd右クリックし、[管理者として実行] を選択して、環境を構成し、このラボの Visual Studio コードスニペットをインストールするセットアッププロセスを起動します。
[ユーザーアカウント制御] ダイアログボックスが表示されている場合は、続行するアクションを確認します。

注

セットアップを実行する前に、このラボのすべての依存関係を確認してください。

コードスニペットの使用

ラボドキュメント全体で、コードブロックを挿入するように指示されます。便宜上、このコードのほとんどは Visual Studio Code スニペットとして提供されています。Visual Studio 2013 内からアクセスして、手動で追加する必要がなくなります。

注

各演習には、演習の Begin フォルダーにある開始ソリューションが伴います。これにより、他の演習とは別に各演習に従うことができます。演習中に追加されるコードスニペットは、これらの開始ソリューションには含まれていないので、演習を完了するまで機能しない可能性があることに注意してください。演習のソースコード内には、対応する演習の手順を完了した結果のコードを含む Visual Studio ソリューションを含む End フォルダーもあります。このハンズオンラボを進める際に追加のヘルプが必要な場合は、これらのソリューションをガイダンスとして使用できます。

演習

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

ブラウザーリンクと Web Essentials の操作
コードスニペットと IntelliSense を活用する

注

Visual Studio を初めて起動するときは、定義済みの設定コレクションのいずれかを選択する必要があります。定義済みの各コレクションは、特定の開発スタイルに一致するように設計されており、ウィンドウレイアウト、エディターの動作、IntelliSense コードスニペット、ダイアログボックスのオプションを決定します。このラボの手順では、 一般開発設定 コレクションを使用するときに Visual Studio で特定のタスクを実行するために必要なアクションについて説明します。開発環境に別の設定コレクションを選択した場合は、考慮する必要がある手順に違いがある可能性があります。

演習 1: ブラウザーリンクと Web Essentials を使用する

Web Essentials は、最新の Web 開発に役立つさまざまな機能を追加する Visual Studio 拡張機能です。主に、Web 開発エクスペリエンスをより迅速かつ快適なものにすることに重点を置いています。 Web Essentials は、Visual Studio の拡張機能ギャラリーからインストールできます。

Browser Link は Visual Studio 2013 に含まれる新機能で、Visual Studio IDE と開いているブラウザーの間のチャネルを提供し、Web アプリケーションと Visual Studio の間でデータを交換します。 Web Essentials は、ブラウザーから直接、WEB ページの DOM オブジェクトモデルと CSS スタイルを操作するためのツールを使用して Browser Link を拡張します。

この演習では、 Web Essentials と Browser Link でサポートされている機能の一部を調べて、簡単なクイズページを強化します。

タスク 1 - 複数のブラウザーでプロジェクトを実行する

このタスクでは、複数のブラウザーで一度に実行するように Web アプリケーションを構成します。これは、クロスブラウザーテストに役立ちます。

Microsoft Visual Studio を開きます。
[c0]<ファイル] メニューで [開く | プロジェクト/ソリューション...] を選択し、ラボの Source フォルダー (C:\WebCampsTK\HOL\VSWebTooling\Source) 内の Ex1-WorkingwithBrowserLinkandWebEssentials\Begin を参照します。 Begin.slnを選択し、[開く] をクリックします。
Visual Studio ツールバーで、ブラウザーメニューを展開し、[ Browse With...] を選択します。

[Browse With]$メニューオプションで参照$
[参照方法] ダイアログボックスで、Ctrl キーを押しながら [既定に設定] をクリックして、Google Chrome と Internet Explorer の両方を選択します。

複数の既定のブラウザーを選択する
Google Chrome と Internet Explorer の両方が既定のブラウザーとして表示されるようになります。 [ キャンセル] をクリックしてダイアログボックスを閉じます。

既定のブラウザーとしての Google Chrome と Internet Explorer

注

既定のブラウザーを構成すると、ブラウザーメニューで [複数のブラウザー ] オプションが選択されます。
+ F5 キーを押して、デバッグなしでアプリケーションを実行します。
両方のブラウザーウィンドウが開いたら、両方のブラウザーで更新プログラムを同時に表示するために、いずれかのウィンドウを他のブラウザーの上に配置します。ブラウザーには、水色の四角形を含む Web ページが表示されます。

一方のブラウザーを他のブラウザーの上に配置する
ブラウザーを閉じないでください。次のタスクで使用します。

タスク 2 - Zen コーディングを使用して HTML 要素を作成する

Zen Coding は、高速 HTML、XML、XSL (またはその他の構造化されたコード形式) のコーディングと編集のためのエディタープラグインです。このプラグインの中核となるのは、CSS セレクターのような式をHTMLコードに拡張することができる強力な省略エンジンです。 Zen Coding は、CSS スタイルセレクター構文を使用して HTML を記述する高速な方法です。

この演習では、Web Essentials によって提供される Zen コーディング機能を使用して、質問のオプションを表す HTML ボタンを生成します。

Visual Studio に戻ります。
Views | フォルダーにある Index.cshtml ファイルを開きます。
コメントを次のコードに置き換え、Tab キーを押します。
```
button.btn.btn-info.btn-lg.option{Answer $}*4
```
コードは HTML に展開する必要があります。

拡張 HTML

注

Zen コーディング構文の詳細については、次の記事を参照してください。
[ リンクされたブラウザーの更新 ] ボタンをクリックして、両方のブラウザーを更新します。

する

リンクされたブラウザーを更新する

Internet Explorer - 4 つのボタンで更新されたページ

Google Chrome - ページを 4 つのボタンで更新
Visual Studio に戻ります。
ページにボタンを追加しましたが、テンプレートの質問を追加する必要があります。これを行うには、 Lorem Ipsum ジェネレーターと呼ばれる Web Essentials の新機能を使用します。 クラス属性 front を使用して div 要素を見つけます。
div の最初の子要素として次のコードを追加し、Tab キーを押します。
```
p.lead>lorem5
```
コードは HTML に展開する必要があります。

Lorem Ipsum 自動生成

注

Zen Coding の一部として、HTML エディターで直接 Lorem Ipsum コードを生成できるようになりました。 「lorem」と入力して Tab キーを押すだけで、30 単語の Lorem Ipsum テキストが挿入されます。例: lorem10 は、10 個の Lorem Ipsum 単語を挿入します。
Web Essentials のもう 1 つの新機能である Lorem Pixel ジェネレーターを使用して、質問の上部にロゴを追加します。クラス値としてコンテナーを持つ div 要素の最初の子要素として次のコードを追加し、Tab キーを押します。
```
div.row.header>pix-436x185-abstract
```
コードは HTML に展開する必要があります。

Lorem Pixel 自動生成

注

Zen Coding の一部として、HTML エディターで直接 Lorem Pixel コードを生成することもできます。 pix-200x200-animals を入力して TAB キーを押すだけで、200x200 画像の動物を含む img タグが挿入されます。
[ リンクされたブラウザーの更新 ] ボタンをクリックして、両方のブラウザーを更新します。

Internet Explorer - 自動生成された画像とテキスト

Google Chrome - 自動生成された画像とテキスト

注

コードスニペットを追加するときに画像がランダムに選択されるため、ブラウザーに表示されるイメージが異なる場合があります。
ブラウザーを閉じないでください。次のタスクで使用します。

タスク 3 - スタイルプロパティの更新

このタスクでは、ブラウザーリンクの 検査モード 機能を使用して、特定の DOM 要素が生成される正確な場所を検出し、Web Essentials によって提供されるカラーピッカーを使用してその要素の color プロパティを更新します。

Internet Explorer ブラウザーで Ctrl + + キーを押して検査モードを有効にします。
水色の境界線の上にポインターを移動し、クリックします。

水色の境界線の上にポインターを移動する
Visual Studio に戻ります。ブラウザーで選択した HTML 要素が Visual Studio HTML エディターでも選択されていることに注目してください。

)

Visual Studio HTML エディターで選択された HTML 要素
選択した要素のスタイルを変更するために、 フロント CSS クラスを更新します。これを行うには、Ctrl + を押して、[移動先検索]ボックスを開きます。 site.css入力し、Enter キーを押してファイルを開きます。

Site.cssファイルを開く
+ F キーを押し、「.flip-container .front」と入力して CSS セレクターを見つけます。
クラスの border プロパティの水色の四角形をクリックして、カラーピッカーを開きます。

カラーピッカーを開く
シェブロンボタンをクリックしてカラーピッカーを展開し、新しい色を選択します。

カラーピッカーの拡張
Ctrl + + キーを押して、リンクされたブラウザーを更新します。
Internet Explorer に切り替えて、境界線の色がどのように変化したかを確認します。

Internet Explorer - 罫線の色が更新されました
Google Chrome に切り替えて、罫線の色がどのように変化したかを確認します。

Google Chrome - 罫線の色が更新されました
Visual Studio に戻ります。
Site.css ファイルの末尾に移動し、Ctrl + キーを押して .btn セレクターを見つけます。
-webkit-border-radius プロパティは緑色で下線が付いています。

btn セレクターの -webkit-border-radius プロパティ
キャレットを -webkit-border-radius プロパティに 配置します。青い線は、プロパティの最初の単語の最初の文字の下に表示されます。これが スマートタグです。
+ を押します。検索候補メニューを開き、[不足している標準プロパティの追加 (罫線半径)] をクリックします。

不足している標準プロパティの候補を追加する
border-radius プロパティは CSS ルールに自動的に追加されます。

標準プロパティが追加されていません
境界線の半径プロパティの上にポインターを移動して、 ブラウザーマトリックスのヒントを表示します。 ブラウザーマトリックスのツールヒントには、各ブラウザーでのプロパティの可用性が表示されます。

ブラウザーマトリックスのツールヒント
border-radius プロパティの値には引き続き下線が付いています。ポインターを値の上に移動すると、警告メッセージが表示されます。

Border-radius プロパティの値に関する警告
ツールヒントで示されているように、 境界線と半径の プロパティ値の単位を削除します。
罫線の半径は、罫線の角の丸みを定義するための標準プロパティであるため、-webkit-border-radius プロパティと値を CSS ルールから削除できます。
キャレットを ワードラップ プロパティに配置すると、スマートタグも下に表示されます。
メニューを開き、[ 不足しているベンダーの詳細を追加] をクリックします。

不足しているベンダー固有の提案を追加する
ms-word-wrap プロパティが CSS ルールに自動的に追加されます。

ベンダー固有のプロパティの追加

タスク 4 - ブラウザーからの HTML コードの更新

このタスクでは、ブラウザーリンクの デザインモード 機能を使用して、ブラウザーから DOM オブジェクトを編集し、Visual Studio で HTML ソースファイルに変更を転送します。

Google Chrome で Ctrl + + キーを押してデザインモードを有効にします。
Lorem Ipsum dolor sit amet ラベルにポインターを移動してクリックします。

質問の編集
カーソルが表示されます。元のテキストを 長い質問を書くときの外観に置き換え、 Esc キーを押してデザインモードを終了します。

編集された質問
Visual Studio に戻り、まだ開いていない場合は Index.cshtml を開きます。 <p> 要素の内部テキストが更新されていることに注意してください。

HTML ページの質問を更新しました

検索エンジンの最適化 (SEO) は、検索エンジンの結果の一覧で Web サイトのランクを高くするプロセスです。サイトのランクが高く、一貫して一覧表示されるほど、サイトはその検索エンジンから取得する訪問者が多くなります。 Web Essentials には、HTML を調べ、検出された問題を報告し、それらを修正するための支援を提供する分析ツールが組み込まれています。

[表示] メニューに移動し、[エラー一覧] をクリックして [エラー一覧] ウィンドウを開きます。

[表示] メニューの [エラー一覧]
ページの説明の <meta> タグが見つからないことを通知する SEO 警告があることに注意してください。 SEO 警告エントリをダブルクリックして修正します。

[エラー一覧] ウィンドウ
[ Web Essentials ] ダイアログボックスで、[ はい ] をクリックして説明 <meta> タグを挿入します。

[Web Essentials] ダイアログボックス
_Layout.cshtml のエディターが開き、<meta> タグが HTML ファイルのヘッド セクションに自動的に追加されます。

メタタグが_Layoutページに自動的に追加されます
content 属性の値をギークキーズに変更し、ファイルを保存します。

演習 2: コードスニペットと IntelliSense を利用する

Web Essentials では、HTML エディターが追加機能で拡張されました。この演習では、Web アプリケーションの開発に役立ついくつかの新機能が表示されます。

タスク 1 - HTML ドキュメントでの IntelliSense の使用

このタスクに表示される最初の新機能は、 Dynamic IntelliSense と呼ばれます。動的 IntelliSense は、他のタグと属性を読み取って、使用する可能性のある ID を推測します。

このタスクでは、ラベルと入力フィールドを含む新しい HTML フォーム要素を作成します。次に、 for 属性をラベルに追加して入力にバインドします。スコープ内の入力の ID に基づいて IntelliSense の候補が表示されます。

Visual Studio Express 2013 for Web を開き、Source/Ex2-TakingAdvantageofCodeSnippetsandIntelliSense/Begin フォルダーにあるBegin.sln ソリューションを開きます。または、前の演習で取得したソリューションを続行することもできます。
ソリューションエクスプローラーで、Views | フォルダーにある Index.cshtml ファイルを開きます。
<ection> 要素内に次のフォームを追加します。

(コードスニペット - VisualStudio2013WebTooling - Ex2 - フォーム)
```
<form>
     <input type="text" id="name" />
</form>
```
入力タグの前に、フィールドの説明を含むラベルを付ける必要があります。入力タグの前に次のラベルを追加します。
```
<form>
    <label id="name">Name</label>       
    <input type="text" id="name" />
</form>
```
for 属性は、<label> がどのフォーム要素にバインドされているかを指定します。属性の値は、関連する要素の ID と同じである必要があります。 for 属性を <label> 要素に追加します。次の図に示すように、同じスコープ内の要素の ID (外側の <フォーム>) に基づいて、IntelliSense ボックスに "name" 値がポップアップ表示されます。

IntelliSense での ID の表示
最近追加した <form> 要素とその内容を削除します。

タスク 2 - HTML コードスニペットの使用

HTML5 では、25 を超える新しいセマンティックタグが導入されました。 Visual Studio には既にこれらのタグに対する IntelliSense のサポートがありましたが、Visual Studio 2013 では、新しいコードスニペットを追加することで、マークアップをより迅速かつ簡単に記述できます。これらのタグは複雑ではありませんが、 オーディオ タグに正しいコーデックフォールバックを追加するなど、いくつかの小さな微妙な機能が付属しています。このタスクでは、オーディオタグの HTML コードスニペットが表示されます。

Index.cshtml ファイルで、次の図に示すようにsection要素内に「aud」と入力します。

オーディオ要素の挿入
Tab キーを 2 回押して、次のコードがページに追加され、カーソルが最初のソースの src 属性にどのように配置されるかを確認します。
```
<audio controls="controls">
     <source src="file.mp3" type="audio/mp3" />
     <source src="file.ogg" type="audio/ogg" />
</audio>
```
注

Tab キーを 2 回押すと、コードスニペットが挿入されます。オーディオスニペットは、サポートを強化するために 2 つのソースファイルを含む 、オーディオ タグの標準的な使用法を示しています。
2 行目を削除し、1 行目のソースを更新します。[ Installing ASP.NET and Web Tools]$インストール中の ASP.NET と Web ツール $ show: https://learn.microsoft.com/shows/asp-net-site-videos/installing-aspnet-web-toolsへのリンクを使用します。結果のコードを次に示します。
```
<audio controls="controls">
     <source src="http://media.ch9.ms/ch9/11d8/604b8163-fad3-4f12-9607-b404201211d8/KatanaProject.mp3" type="audio/mp3" />
</audio>
```
注

ソースファイルが例として使用されます。必要に応じて、別のソースを使用できます。
+ S キーを押してファイルを保存します。
+ F5 キーを押してアプリケーションを起動します。
オーディオプレーヤーがアプリケーションに追加されたことに注意してください。

Internet Explorer のオーディオプレーヤー

Google Chrome のオーディオプレーヤー
ブラウザーを閉じないでください。次のタスクで使用します。

タスク 3 - JavaScript ドキュメントでの IntelliSense の使用

Web Essentials 2013 では、スタイルシートと HTML ページによって ID とクラス名の一覧が生成されます。このタスクでは、これらのリストが Web Essentials 2013 で JavaScript IntelliSense のサポートを改善する方法について説明します。

Index.cshtml ファイルに次のコードを追加して、JavaScript コードのスクリプト タグを定義します。
```
...
</section>
@section scripts{
    <script type="text/javascript">

    </script>
}
```
スクリプト タグ内に次のコードを追加して、準備完了コールバック関数を定義します。

(コードスニペット - VisualStudio2013WebTooling - Ex2 - ReadyFunction)
```
(function () {
    $(document).ready(function () {

    });
}());
```
スクリプト タグにキャレットを配置し、 + を押します。候補メニューを開きます。
ファイルに抽出をクリックします。

JavaScriptの抽出結果をファイルに保存する提案
[ 名前を付けて保存 ] ウィンドウで、[ スクリプト ] フォルダーを選択し、ファイル にinit.js 名前を 付けて、[保存] をクリックします。

「名前を付けて保存」ウィンドウ

注

init.js ファイルが作成され、スクリプトの内容がファイルに移動されます。

含まれているコンテンツで作成されたInit.js ファイル
Index.cshtml ファイルを開き、スクリプトタグが init.js ファイルへの参照に置き換えられたことを確認します。

Init.js html リファレンス
ソリューションエクスプローラーに移動し、init.js ファイルがソリューションに自動的に含まれていることに注意してください。

ソリューションに含まれるInit.js ファイル
init.js ファイルに戻り、準備完了の関数コールバックを更新します。
ready に渡される関数コールバック定義内に、次のコードを追加して、特定のクラス属性によってすべての要素を取得します。
```
(function () {
     $(document).ready(function () {
          document.getElementsByClassName("")
     });
}());
```
+ Space キーを押して、getElementsByClassName 関数呼び出し内の引用符の間を移動します。

getElementsByClassName 関数の IntelliSense の表示

注

IntelliSense には、プロジェクトスタイルシートで定義されているクラスが表示されます。

作成した行を次のコードに置き換えます。

(function () {
     $(document).ready(function () {
          var audioElements = document.getElementsByTagName("au");
     });
}());

getElementsByTagName 関数の引用符内に au の後にカーソルを置き、Ctrl + Space キーを押します。

getElementsByTagName メソッドの IntelliSense の表示
一覧から [オーディオ] を選択し、 Enter キーを押します。結果を次の図に示します。

オーディオ要素の取得
ソリューションエクスプローラーで、[スクリプト] フォルダー内の init.js ファイルを右クリックし、[Web Essentials] メニューから [Minify JavaScript ファイル] を選択します。

JavaScript ファイルを縮小します
ソースファイルが変更されたときに自動縮小を有効にするように求められたら、[ はい] をクリックします。

自動縮小警告の有効化

注

init.min.js が作成され、init.js ファイルの依存関係として追加されます。

作成Init.min.js ファイル
init.min.js ファイルを開き、ファイルが縮小されていることを確認します。

Init.min.js ファイルの内容
init.js ファイルで、getElementsByTagName 関数呼び出しの下に次のコードを追加して、すべてのオーディオ要素を再生します。

(コードスニペット - VisualStudio2013WebTooling - Ex2 - PlayAudioElements)
```
var len = audioElements.length;
for (var i = 0; i < len; i++) {
    audioElements[i].play();
}
```
Ctrl + キーを押してファイルを保存します。縮小されたファイルは既に開かれているため、ソースエディターの外部でファイルが変更されたことを示すダイアログボックスが表示されます。 [ はい] をクリックします。

Microsoft Visual Studio の警告
init.min.js ファイルに戻り、ファイルが新しいコードで更新されたことを確認します。

Init.min.js ファイルが更新されました
[ ブラウザーリンクの更新 ] ボタンをクリックします。
両方のブラウザーが更新されると、前のタスクで見たオーディオプレーヤーの再生が自動的に開始されます。

ビューに含まれるオーディオプレーヤー

まとめ

このハンズオンラボを完了することで、次の方法を学習しました。

豊富な HTML5 コードスニペットや Zen コーディングなど、Web Essentials に含まれる新しい HTML エディター機能を使用する
カラーピッカーやブラウザーマトリックスのヒントなど、Web Essentials に含まれる新しい CSS エディター機能を使用する
Web Essentials に含まれる新しい JavaScript エディター機能 (すべての HTML 要素に対するファイルへの抽出や IntelliSense など) を使用する
ブラウザーリンクを使用してブラウザーと Visual Studio の間でデータを交換する

フィードバック

このページはお役に立ちましたか?

Last updated on 2026-03-27

次の方法で共有

ハンズオン ラボ: Visual Studio 2013 Web ツール

概要

目標

前提条件

セットアップ

コード スニペットの使用

演習

演習 1: ブラウザー リンクと Web Essentials を使用する