Tweet

.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ファイル）を、下記のリンク先からダウンロードしよう。

• ZenCoding - Visual Studio ギャラリー

　インストーラを実行すれば、簡単にインストールできるので、インストール方法は割愛する。

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

この記事と関連性の高い別の.NET TIPS ［ASP.NET］DataGridコントロール内のドロップダウンリストに動的に項目を追加するには？ このリストは、（株）デジタルアドバンテージが開発した 自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。 generated by

「.NET TIPS」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード