|
.NET TIPS Visual StudioでZen-Codingするには？［VS 2010以降］デジタルアドバンテージ 一色 政彦2011/12/01 |
 |
|
|
|
HTMLコーディングをするWeb開発者やWebデザイナーの間でZen-Codingは人気が高い。Zen-Codingとは、極めて少ないタイプ量でHTMLコードを効率よく記述するためのHTMLコーディング支援機能のことで、テキスト・エディタのプラグインなどの形で、さまざまなツールに対して提供されている。もちろんVisual Studio向けのプラグインも存在しているので、.NET開発者もZen-Codingを利用して高速にHTMLコードを記述できる。
そこで本TIPSでは、Visual StudioでZen-Codingを使う方法を説明する。
なお、Zen-Codingの内容や使い方についての詳細は「＠IT リッチクライアント＆帳票： Zen-Codingで高速HTML＆CSSコーディング」を参照してほしい。
●Visual Studio用のZen-Codingプラグイン
まずは、Visual Studio拡張として提供されているZen-Codingプラグインのインストーラ（＝ZenCoding.vsixファイル）を、下記のリンク先からダウンロードしよう。
インストーラを実行すれば、簡単にインストールできるので、インストール方法は割愛する。
●Visual StudioでZen-Codingを使う方法
インストールが終わったら、Visual Studio 2010のIDEを起動して、何らかのプロジェクトを作り、.htmlファイルや.aspxファイルなどHTMLコードを扱うファイルを開こう。
次の画面は、.htmファイルを開き、「ul>li*3」というZen-Coding用の省略形コードを入力して、メニューバーから［ZenCoding］−［Expand Zen］（＝Zenを展開）を実行したところだ。
 |
［Expand Zen］を実行  |
 |
| Visual StudioでZen-Codingを使う例 |
| この例では、「ul>li*3」という省略形コードは、Zen-Codingプラグインにより「<ul> <li></li> <li></li> <li></li> </ul>」というHTMLコードに展開されている。 |
●ショートカット・キーの設定について
上記の使用例では、メニューバー上のメニュー項目をマウス操作で実行しているが、コーディング速度を求めるなら、キーボード操作にしたいところだ。
その場合は、メニューバーの［ツール］−［カスタマイズ］から表示できるダイアログで［コマンド］タブを開き、［変更するメニューまたはツール バーの選択］で［メニュー バー］ラジオボタンを選択してドロップダウンリストから「メニュー バー」を選択した状態で、［コントロール］から［ZenCoding］を選択して［選択したボタンの編集］をクリックし、［名前］欄を「&ZenCoding」に編集すればよい。この作業で、［Alt］＋［Z］キーというアクセス・キーで、該当メニュー項目にアクセスできるようになる。
 |
| ［ZenCoding］メニューのアクセス・キー設定 |
同様に、ドロップダウンリストから「ZenCoding」を選択した状態で、［コントロール］から［cmdidExpandZen］を選択して［選択したボタンの編集］をクリックし、［名前］欄を「Expand &Zen」に編集する。この作業で、［Alt］キーを押しながら、［Z］キーを2回というアクセス・キーで、Zen-Codingによる展開が実行できるようになる。
 |
| Zen-Codingによる展開実行のアクセス・キー設定 |
さらに、先ほどのダイアログの下部にある［キーボード］ボタンをクリックして［オプション］ダイアログの［キーボード］設定を開き、そこで［以下の文字列を含むコマンドを表示:］欄に「Zen」と入力して候補に表れる「ZenCoding.ExpandZen」を選択した状態で、好きなショートカット・キー（下の画面の例では［Ctrl］＋［Enter］キー）を押して、［割り当て］ボタンをクリックする。これにより、任意のショートカット・キーでZen-Codingによる展開が実行できるようになる。
 |
| Zen-Codingによる展開実行のショートカット・キー設定 |
●オプション設定とアンインストールについて
詳細は割愛するが、各種オプションの設定はメニューバーの［ツール］−［オプション］から表示できるダイアログの左側にあるツールの［ZenConfig］から行える。
また、Zen-Codingプラグインのアンインストールは、通常のVisual Studio拡張と同じように、メニューバーの［ツール］−［機能拡張マネージャー］から表示できるダイアログで行える。
| カテゴリ：Visual Studio 2010 処理対象：拡張機能 |
|
||||||||||||
 |
「.NET TIPS」 |
- 第2回 簡潔なコーディングのために （2017/7/26）
ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている - 第1回 Visual Studio Codeデバッグの基礎知識 （2017/7/21）
Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう - 第1回 明瞭なコーディングのために （2017/7/19）
C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える - Presentation Translator （2017/7/18）
Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
 |
|
|
|
|
