特別企画

「EmEditor」はWebコーディングでも大活躍! HTML/CSS/JSON/XMLの構文チェック

構文の問題をすばやく見付け、原因を特定

「EmEditor」はWebコーディングでも大活躍!

 日本語のテキスト編集からCSVデータの取り扱いまでを幅広くカバーする「EmEditor」だが、Webコーディングにおいてもなかなか有用だ。

 たとえば、ステータスバーの構文設定(初期状態では“Text”)をダブルクリックして“HTML”へ変更すると、HTMLコードを構文色分け(シンタックスハイライト)できる。HTMLファイルを「EmEditor」で開いた場合は、構文設定が“HTML”と自動認識されるので、設定を変更する必要はない。

定義を“HTML”に変更すれば、HTMLコードを構文色分け(シンタックスハイライト)できる

 このようなシンタックスハイライトは今となっては当たり前の機能だが、「EmEditor」の場合は老舗だけあって、“ASP”タグや“SCRIPT”タグの“LANGUAGE”属性をちゃんと識別して、JavaScriptやVBScript、PerlScriptのコードを色分けできる。また、JSPやPHPのコードにも、構文設定“HTML-埋め込み”を利用することで対応できる。

HTMLコードの入力を支援する[HTML]プラグイン

 また、[HTML]プラグインが初めから組み込まれており、[HTML]ツールバーを表示させておくと、ヘッダーや大文字・斜字といった文字スタイル、色、リンク、テーブルといった、よく使うHTMLタグを簡単に挿入できるのもうれしいポイントだ。[HTML]ツールバーは初期状態で非表示となっているが、HTMLコードを扱う時だけ表示するといったことも可能。

少ないタイプ数で定型文を入力できる[スニペット]プラグインは、HTML関連のプリセットも充実

 さらに、「EmEditor」の強力な[スニペット]プラグインを利用すれば、キーワードやテンプレートの挿入も手軽に行える。HTMLのためのスニペットも充実しており、たとえば[スニペット]サイドバーを表示した状態で[p]キーと[Tab]キーを続けて入力すれば“<p></p>”が自動で入力され、Pタグの間にテキストカーソル(キャレット)がセットされる。テキストを選択して、[スニペット]サイドバーの“p”スニペットをダブルクリックすれば、選択テキストをPタグでくくるのも簡単だ。少し古い記事となるが、スニペットに関しては以前にも紹介したことがあるので参考にしてほしい。

 そのほか、タグで囲みたいテキストを選択してから、[マクロ]ツールバーの[<p>]ボタンをクリックするか、既定では、[Ctrl]+[Shift]+[<]キーを押すと、“HTML/XML タグで囲む”マクロが実行されて、選択テキストをPタグで囲むことができる。その状態でさらにタイプすると、別の種類のタグに変更することもできる。

 さて、このようにWebコーディング向けにも機能が充実した「EmEditor」だが、残念ながら1つ、大切な機能が欠けていた。HTMLの構文が正しいかどうかをチェックする、“lint”や“linter”などと呼ばれる構文の静的解析ツールだ。

 構文チェックツールはHTMLドキュメントをスキャンし、不具合の要因となりそうな部分に警告を発する。わざわざWebブラウザーで表示を確認しなくても記述ミスを見つけられるし、目で見ただけではわからない間違いも簡単に発見できる。また、改善した方が望ましい部分や、その改善方法などを指摘してくれるツールも存在する。より正しいHTMLドキュメントを書くためのサポートツールとしても役立つわけだ。

 その待望の構文チェック機能が、「EmEditor」v19でとうとう導入された。さっそく使い方やその実力を詳しく見ていこう。

「EmEditor」v19の構文チェック機能

「EmEditor」の構文チェック機能。特別版「CSS HTML Validator EmEditor Edtion」を標準搭載

 「EmEditor」の構文チェック機能には「CSS HTML Validator」というアプリのライブラリが用いられいる。本来は有償で購入しなければならないものだが、「EmEditor」には特別にカスタマイズされた特別バージョン(CSS HTML Validator EmEditor Edtion)が無償で添付されており、以下の3つのフォーマットをサポートしている。

  • HTML
  • CSS
  • JSON

 ライブラリは「EmEditor」本体に組み込まれているので、ユーザーによるセットアップ処理は不要。プラグインやアドオンを導入する手間がなく、「EmEditor」をインストールしてすぐに使い始められる。本家よりサイズが削減されている上、レジストリを汚さないようにカスタマイズされているため、ポータブル版でも安心して利用可能だ。

構文チェックを実際に利用してみる

 それでは、試しに手持ちのHTMLドキュメントを「EmEditor」で開いてみよう。ドキュメントにエラーがあれば、編集画面下部に[構文チェッカー]ペインが現れ、ドキュメントに関するエラーやコメントがリストアップされるはずだ。構文チェックは(ドキュメントのサイズが小さければ)基本的に自動で行われるため、ユーザーがわざわざ更新を行う必要はない。

ドキュメントにエラーがあれば、編集画面下部に[構文チェッカー]ペインが現れ、ドキュメントに関するエラーやコメントがリストアップされる

 リストビューのそれぞれの行には、問題のタイプ、問題が発生している個所、問題に対するメッセージが記載されており、クリックするとドキュメントの当該箇所にジャンプできる。構文エラーが検出されたテキスト部分には赤い波線が下に引かれ、マウスをポイントすると詳細なエラーの内容をツールチップで表示される。

 問題のメッセージは英文となるが、「EmEditor」は親切にも“Google 翻訳”でメッセージを翻訳する機能が備わっているので、恐れることはない(翻訳エンジンは変更することも可能)。エラーメッセージは平易で、コンパイラーなどにありがちな難しさはない。よくあるミスであれば修正方法も教えてくれるのがありがたい。

“Google 翻訳”でエラーメッセージを翻訳する機能が備わっている

 問題のタイプは“エラー”、“警告”、“コメント”の3種類があり、“エラー”は修正すべき箇所、“警告”は修正の必要はないが注意を要する箇所、コメントはそれ以外のメッセージをしてしている。[構文チェック]ボタンのドロップダウンでリストビューに表示する問題のタイプはフィルタリングできるが、“警告”のみ、後述の「CSS HTML Validator」の上位バージョンを導入する必要があるので注意したい。

問題のタイプは“エラー”、“警告”、“コメント”の3種類
“警告”のみ、後述の「CSS HTML Validator」の上位バージョンを導入する必要がある

 なお、[構文チェッカー]ペインが自動で開くのを抑制したい場合は、[ツール]-[現在の設定のプロパティ]ダイアログの[構文チェック]セクションで設定を変更しよう。

[ツール]-[現在の設定のプロパティ]ダイアログの[構文チェック]セクション

 また、[構文チェッカー]ペインの開閉を手動で行いたい場合は、[表示]-[構文チェッカー]メニューを利用すればよい。[構文チェッカー]ペインを開くと同時に、構文チェックが行われる。

構文チェック機能の応用

 さて、先ほどの例はHTMLドキュメントを用いたが、スタイルシート(CSSファイル)でも同様に構文チェックを行える。基本的には「EmEditor」でファイルを開くだけだ。

スタイルシート(CSSファイル)の構文チェック

 ただし、JSONデータの場合はひと工夫が必要だ。まず、[ツール]-[定義の選択]-[設定の定義]ダイアログを開く。「EmEditor」には初期状態でJSONの定義が含まれていない(近日対応予定)ので、[新規作成]ボタンを押して新たに作成しよう。JSONの書式はJavaScriptと同じなので、JavaScriptテンプレートからコピーしてしまうのが楽だろう。今回は、新たに作成した定義の名前を“JSON”とした。

[設定の定義]ダイアログ。[新規作成]ボタンを押して、JSONの定義を作成
JSONの書式はJavaScriptと同じなので、JavaScriptテンプレートからコピーしてしまうのが楽
新たに作成した定義の名前を“JSON”に

 次に、[設定の定義]ダイアログで先ほど作成した“JSON”定義を選択し、[関連付け]ボタンを押す。自動で“*.json”ファイルを“JSON”定義で開けるよう、関連付けを作成するためだ。[新規作成]ボタンを押して新しいエントリを作成し、“ファイルの種類”を“*.json”に、“設定”プルダウンを“JSON”へ変更しよう。

“*.json”ファイルを“JSON”定義で開けるよう、関連付けを作成

 続いて、開いたJSONファイルへ自動で構文チェックが実行されるようにする。[設定の定義]ダイアログで“JSON”定義を選択し、[プロパティ]ボタンを押そう。すると“JSON”定義の設定画面が現れるので、[構文チェック]セクションへ移動する。“文書タイプ”を“JSON”に、“一覧を表示”を好みの値にセットし、[構文チェックを有効にする]オプションをONにしたら、準備は完了。ダイアログをすべて閉じて、JSONファイルを[EmEditor]で開いてみよう。HTMLやCSSのときと同じように、構文色分けとチェックが行われるはずだ。

“JSON”定義の設定画面。[構文チェック]セクションへ移動し、オプションを変更
JSONファイルの構文チェック。引用符が抜けていることを指摘してくれている

 ついでに、エラーの波線が見にくかったり、気に入らない場合の対処も紹介しておこう。まず、[ツール]-[現在の設定のプロパティ]メニューから現在開いている定義のプロパティダイアログを開き、[表示]セクションへ移動する。このセクションではテーマのカスタマイズが行える。構文チェックのエラー表示もここで変更が可能。検索ボックスに“構文チェック”と入力すれば、構文チェック関連のエントリがフィルタリングされるので、自由に変更してみよう。構文チェックのエラーは初期状態で“赤い波下線”がスタイルとして指定されているが、背景色を赤くしたり、フォントを太くすれば、視認性が向上するだろう。

エラーの波線が見にくかったり、気に入らない場合はカスタマイズも可能

「EmEditor」はXML文書の構文チェックも可能!

 「EmEditor」にはもともとCSVデータの正当性(フォーマットが正しいかどうか)をチェックする機能が備わっており、v19.0ではそれがHTML/CSS/JSONの構文チェックにも拡張された。同時に、「MSXML Parser」ライブラリを利用したXML文書の構文チェックも実現されている。

XML文書の構文チェックも可能

 HTML/CSS/JSONと同様、XML文書の構文チェックも「EmEditor」本体に組み込まれており、そのまま利用できる。「CSS HTML Validator」ほど親切なエラーメッセージではないが、見落としを防ぐには十分だろう。

まとめ

 「EmEditor」v19.0では、CSVデータに加え、HTML/CSS/JSON/XMLの構文チェックが可能となった。簡単なスペルミスや入力間違い、文法の誤りを事前に検出できるのは、生産性に大きく寄与する。

 なお、組み込みの「CSS HTML Validator」でも十分役に立つが、“警告”の指摘機能は省略されている。129米ドルで有償販売されている「CSS HTML Validator Professional Edition」をインストールすると、より詳細な情報を得ることができるので試してみるとよいだろう。ただし、ストアアプリ版「EmEditor」には対応していないので注意したい。

[制作協力:Emurasoft, Inc.]