.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用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
|
|