Developer's Blog

秀丸エディタをもうちょっと便利にする方法

WebDevBlogTitle

こんにちは、WEB 担当の青野です。
今回は前回に引き続き秀丸エディタをもうちょっと便利にする方法を紹介します。

前記事の終わりにマクロの紹介をすると書いていましたが、ついでなのでちょこっとだけ便利な機能についても触れたいと思います。

単語補完

秀丸エディタには単語補完機能というものがついています。
この補完機能は辞書ファイルを使用することができるので、WEB で公開されている辞書ファイルをダウンロードし、指定しておきましょう。

この単語が辞書に登録されていない!という場合でも問題ありません。辞書はtxtファイルなので、ファイルを開き単語を簡単に追加することができます。もちろん0からオリジナルの辞書ファイルを作ることもできます。

単語補完は入力するとでてくるツールチップ、またはリストのなかから目的のものを選ぶと挿入されます。(Alt+数字でのショートカットもあります)

ちなみにこの補完機能は日本語にも対応していたりします。

単語補完は、メニューの その他 > ファイルタイプ別の設定 > その他 > 単語補完 から設定することができます。

アウトライン解析

アウトライン解析とは編集中のファイルの特定のテキストを指定・設定することで、構造的に位置関係を表示し、目次のようなものを作ることで一瞬で移動することができるようになります。
この機能は数十行のコードでは恩恵はありませんが、数千行からなるコード群を編集する際は絶大な効果を発揮します。

設定画面で、インデントの深さでレベルを決めるにチェックしておくと、より見やすく表示してくれます。(※インデント必須)

設定方法は、メニューの その他 > ファイルタイプ別の設定 > アウトライン > 解析 からできます。

カーソル線

そのままです。カーソル位置の縦線横線を表示させることで現在の位置がわかりやすくなります。

設定方法は、メニューの その他 > ファイルタイプ別の設定 > デザイン のカーソルの項目でできます。

(ちなみに、カーソル行(IME ON時)の項目にチェック入れていると、ON / OFF が線の色で分かるので地味に便利です)

Zen-Coding

そして今回の紹介するマクロの Zen-Coding です!Zen-Coding とは、ある記法をすることによって、ズバッと整形されたコードを変換してくれるすぐれものです。

まずはマクロに登録し、ショートカットキーにも割り当てます。割り当てたら実際に使ってみましょう。

以下のものは、変換前と変換後の基本的なサンプルになります。

E

変換前

  1. img

変換後

  1. <img src=”” alt=”” width=”” height=””>

変換前

  1. a

変換後

  1. <a href=””></a>

E#id, E.some.class

変換前

  1. div#test

変換後

  1. <div id=”test”></div>

変換前

  1. p#read.small.left

変換後

  1. <p id=”read” class=”small left”></p>

この記事では機能すべては紹介できませんが、Zen-Coding を覚えることで以下のようなコードもすぐに生成することができます。

変換前

  1. (#header h1)+(#content h2+p*3+img.photo)+(#footer ul#nav li*5 a[href=./test_$.html])

変換後

  1. <div id=”header”>
  2.     <h1></h1>
  3. </div>
  4. <div id=”content”>
  5.     <h2></h2>
  6.     <p></p>
  7.     <p></p>
  8.     <p></p>
  9.     <img src=”” alt=”” width=”” height=”” class=”photo”>
  10. </div>
  11. <div id=”footer”>
  12.     <ul id=”nav”>
  13.         <li><a href=”./test_1.html”></a></li>
  14.         <li><a href=”./test_2.html”></a></li>
  15.         <li><a href=”./test_3.html”></a></li>
  16.         <li><a href=”./test_4.html”></a></li>
  17.         <li><a href=”./test_5.html”></a></li>
  18.     </ul>
  19. </div>

秀丸エディタの Zen-Coding は下記で入手することができ、この記事では紹介しきれていない Zen-Coding の使い方について詳しく説明してくれています。

秀丸マクロでZen-Coding
http://exoego.net/archives/zencoding-in-hidemaru

以上、秀丸エディタをもうちょっと便利にする方法でした。


フェンリルのオフィシャル Twitter アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。よろしければフォローしてください!

Copyright © 2019 Fenrir Inc. All rights reserved.