.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拡張と同じように、メニューバーの[ツール]−[機能拡張マネージャー]から表示できるダイアログで行える。End of Article

カテゴリ:Visual Studio 2010 処理対象:拡張機能

この記事と関連性の高い別の.NET TIPS
[ASP.NET]デザイン・ビュー/ソース・ビュー/コードビハインド・ファイルを順に切り替えるには?
このリストは、(株)デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw(ジグソー) により自動抽出したものです。
generated by

「.NET TIPS」

@IT Special

- PR -

TechTargetジャパン

Insider.NET フォーラム 新着記事
  • 第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用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

イベントカレンダー

PickUpイベント

- PR -

アクセスランキング

もっと見る

ホワイトペーパーTechTargetジャパン

注目のテーマ

Insider.NET 記事ランキング

本日 月間
ソリューションFLASH