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

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

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

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

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

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

概要

目標

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

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

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

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

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

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

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

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

既定のブラウザーとしての Google Chrome とインターネットエクスプローラー

注意

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

する

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

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

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

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

Visual Studio に戻ります。
Views | Home フォルダーにある Index.cshtml ファイルを開きます。
[TODO: ここに>オプションを<追加する] の!--を次のコードに置き換え、Tab キーを押します。
```
button.btn.btn-info.btn-lg.option{Answer $}*4
```
コードは HTML に展開する必要があります。

拡張 HTML

注意

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

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

インターネットエクスプローラー - 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 単語を挿入します。
Lorem Pixel ジェネレーターと呼ばれる Web Essentials の別の新機能を使用して、質問の上部にロゴを追加します。次のコードを div 要素の最初の子要素として追加し、 コンテナー を クラス 値として追加し、 Tab キーを押します。
```
div.row.header>pix-436x185-abstract
```
コードは HTML に展開する必要があります。

Lorem Pixel 自動生成

注意

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

インターネットエクスプローラー - 自動生成された画像とテキスト

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

注意

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

タスク 3 - スタイルプロパティを更新する

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

インターネットエクスプローラーブラウザーで、Ctrlキーを押しながらIキー + + を押して検査モードを有効にします。
水色の境界線の上にポインターを移動し、をクリックします。

する

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

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

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

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

カラーピッカーの展開
Ctrl キーを押しながら + + Enter キーを押して、リンクされたブラウザーを更新します。
インターネットエクスプローラーに切り替えて、境界線の色がどのように変化したかを知る。

インターネットエクスプローラー - 罫線の色が更新されました
Google Chrome に切り替えて、罫線の色がどのように変化したかを確認します。

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

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

をする

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

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

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

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

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

ベンダー固有のプロパティが追加されました

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

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

Google Chrome で CtrlAlt + Dキー + を押してデザインモードを有効にします。
Lorem Ipsum dolor の上にポインターを移動し、アメットラベルを座ってクリックします。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

タスク 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 行目のソースを[インストール中] ASP.NET and Web Tools表示へのリンクで更新します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>
```
注意

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

インターネットエクスプローラーのオーディオプレーヤー

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 () {

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

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("")
     });
}());
```
getElementsByClassName 関数呼び出し内の引用符の間で Ctrl キー + を押します。

の

getElementsByClassName 関数の IntelliSense の表示

注意

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

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

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

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

の

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

オーディオ要素の取得
ソリューションエクスプローラーで、Scripts フォルダー内のinit.js ファイルを右クリックし、[Web Essentials] メニューから [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 S キーを押 + してファイルを保存します。縮小されたファイルは既に開かれているため、ソースエディターの外部でファイルが変更されたことを示すダイアログボックスが表示されます。 [はい] をクリックします。

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

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

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

まとめ

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

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

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

概要

目標

前提条件

セットアップ

コードスニペットの使用

演習

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

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

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

タスク 3 - スタイルプロパティを更新する

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

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

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

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

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

まとめ

フィードバック

フィードバック

その他のリソース

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

概要

目標

前提条件

セットアップ

コード スニペットの使用

演習

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

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

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

タスク 3 - スタイル プロパティを更新する

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

タスク 5 - SEO 関連の警告を確認する

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

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

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

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

まとめ

フィードバック

フィードバック

その他のリソース

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

コードスニペットの使用

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

タスク 3 - スタイルプロパティを更新する

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

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