06:45「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タグで囲むことができる。その状態でさらにタイプすると、別の種類のタグに変更することもできる。このようにWebコーディング向けにも機能が充実した「EmEditor」だが、残念ながら1つ、大切な機能が欠けていた。HTMLの構文が正しいかどうかをチェックする、“lint”や“linter”などと呼ばれる構文の静的解析ツールだ。構文チェックツールはHTMLドキュメントをスキャンし、不具合の要因となりそうな部分に警告を発する。Webブラウザーで表示を確認しなくても記述ミスを見つけられるし、目で見ただけではわからない間違いも簡単に発見できる。改善した方が望ましい部分や、その改善方法などを指摘してくれるツールも存在する。正しいHTMLドキュメントを書くためのサポートツールとしても役立つわけだ。その待望の構文チェック機能が、「EmEditor」v19でとうとう導入された。使い方やその実力を詳しく見ていこう。「EmEditor」の構文チェック機能。Validator」というアプリのライブラリが用いられいる。Edtion)が無償で添付されており、以下の3つのフォーマットをサポートしている。HTMLCSSJSONライブラリは「EmEditor」本体に組み込まれているので、ユーザーによるセットアップ処理は不要。プラグインやアドオンを導入する手間がなく、「EmEditor」をインストールしてすぐに使い始められる。本家よりサイズが削減されている上、レジストリを汚さないようにカスタマイズされているため、ポータブル版でも安心して利用可能だ。構文チェックを実際に利用してみるそれでは、試しに手持ちのHTMLドキュメントを「EmEditor」で開いてみよう。ドキュメントにエラーがあれば、編集画面下部に[構文チェッカー]ペインが現れ、ドキュメントに関するエラーやコメントがリストアップされるはずだ。構文チェックは(ドキュメントのサイズが小さければ)基本的に自動で行われるため、ユーザーがわざわざ更新を行う必要はない。ドキュメントにエラーがあれば、編集画面下部に[構文チェッカー]ペインが現れ、ドキュメントに関するエラーやコメントがリストアップされるリストビューのそれぞれの行には、問題のタイプ、問題が発生している個所、問題に対するメッセージが記載されており、クリックするとドキュメントの当該箇所にジャンプできる。構文エラーが検出されたテキスト部分には赤い波線が下に引かれ、マウスをポイントすると詳細なエラーの内容をツールチップで表示される。翻訳”でメッセージを翻訳する機能が備わっているので、恐れることはない(翻訳エンジンは変更することも可能)。エラーメッセージは平易で、コンパイラーなどにありがちな難しさはない。あるミスであれば修正方法も教えてくれるのがありがたい。翻訳”でエラーメッセージを翻訳する機能が備わっている問題のタイプは“エラー”、“警告”、“コメント”の3種類があり、“エラー”は修正すべき箇所、“警告”は修正の必要はないが注意を要する箇所、コメントはそれ以外のメッセージをしてしている。Validator」の上位バージョンを導入する必要があるので注意したい。Validator」の上位バージョンを導入する必要があるなお、[構文チェッカー]ペインが自動で開くのを抑制したい場合は、[ツール]-[現在の設定のプロパティ]ダイアログの[構文チェック]セクションで設定を変更しよう。[ツール]-[現在の設定のプロパティ]ダイアログの[構文チェック]セクションまた、[構文チェッカー]ペインの開閉を手動で行いたい場合は、[表示]-[構文チェッカー]メニューを利用すればよい。[構文チェッカー]ペインを開くと同時に、構文チェックが行われる。構文チェック機能の応用さて、先ほどの例はHTMLドキュメントを用いたが、スタイルシート(CSSファイル)でも同様に構文チェックを行える。基本的には「EmEditor」でファイルを開くだけだ。スタイルシート(CSSファイル)の構文チェックただし、JSONデータの場合はひと工夫が必要だ。[ツール]-[定義の選択]-[設定の定義]ダイアログを開く。「EmEditor」には初期状態でJSONの定義が含まれていない(近日対応予定)ので、[新規作成]ボタンを押して新たに作成しよう。JSONの書式はJavaScriptと同じなので、JavaScriptテンプレートからコピーしてしまうのが楽だろう。今回は、新たに作成した定義の名前を“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の構文チェックにも拡張された。Parser」ライブラリを利用したXML文書の構文チェックも実現されている。XML文書の構文チェックも可能HTML/CSS/JSONと同様、XML文書の構文チェックも「EmEditor」本体に組み込まれており、そのまま利用できる。Validator」ほど親切なエラーメッセージではないが、見落としを防ぐには十分だろう。まとめ「EmEditor」v19.0では、CSVデータに加え、HTML/CSS/JSON/XMLの構文チェックが可能となった。簡単なスペルミスや入力間違い、文法の誤りを事前に検出できるのは、生産性に大きく寄与する。Validator」でも十分役に立つが、“警告”の指摘機能は省略されている。Edition」をインストールすると、より詳細な情報を得ることができるので試してみるとよいだろう。ストアアプリ版「EmEditor」には対応していないので注意したい。【特別企画】そうだ、“モバイルディスプレイ”があれば働き方改革もリア充生活も実現できるんだ。