HTMLのソースをエディタで開く方法：3分LifeHacking

ブラウザでHTMLソースを見る際、任意のテキストエディタを使用する方法をまとめてみた。

[kizuki，ITmedia]

　Web制作に携わっている人を中心に、WebページのHTMLソースを閲覧する機会というのは何かと多いものだ。しかし時と場合によっては、デフォルトで指定されているソース表示用のプログラムでは物足りなさを感じてしまうことも多い。

　例えばInternet Explorer（IE）の場合、「表示」から「ソース」を見ようとするとデフォルトでは「メモ帳」が起動する。しかしメモ帳だと、EUCコードで書かれたHTMLソースは文字化けしてしまうし、改行を示す「改行コード」すら無視してしまう。当然ながら、HTMLタグの色分け表示もしてくれない。

　お気に入りのエディタでソースを見たいときは、「ツール」−「インターネットオプション」−「プログラム」でHTMLエディタを設定して、「ファイル」−「［指定したアプリ］で編集」でソースを確認する方法がオススメ。秀丸やワードパッドを用いて、HTMLソースが表示できるようになるのだ。

「インターネットオプション」の「プログラム」で「HTMLエディタ」を指定する

「ファイル」のメニューにさきほど選択したアプリで編集できるメニュー。ここでは「Hidemaruで編集」が表示されるようになる。画像はIE7のものだが、IE6でも同様に設定できる

クリックすれば、秀丸エディタでのソース確認が可能だ

　ただ、普段のくせで「表示」から「ソース」を見たい人もいるだろう。こうした場合に便利なのが「View Source Editor」だ。このソフトを使えば、「表示」−「ソース」からも使用するテキストエディタを自由に指定ができるようになる。

　ごく稀に、IEのソース表示に自らを使うよう設定できるテキストエディタも存在するが、どのソフトでもこうした設定が可能なわけではない。その点「View Source Editor」を使えば、どんなエディタでも設定ができてしまうので、ソースがぐんと読み取りやすくなることうけあいだ。

「View Source Editor」の設定画面。任意のテキストエディタのEXEファイルを指定する。ここではワードパッドを指定した

「表示」−「ソース」を選択すると、通常であればメモ帳が起動するが……

ワードパッドでHTMLソースを表示

　Firefoxを使っている場合は、同様の機能を持つアドオン「ViewSourceWith」を使うとよい。Firefoxでは、通常はview-sourceウィンドウによってHTMLソースを表示する仕組みになっており、外部のテキストエディタは使用できないが、本アドオンを使用すると任意のエディタでソースが表示できるようになる。

　IEと同様にメモ帳を使うこともできるし、ほかに自由なソフトを指定することもできる。複数のエディタを登録できるうえにショートカットも設定できるので、作業効率は向上するだろう。

「ViewSourceWith」の設定画面。機能はView Source Editorと同じだが、複数のテキストエディタが指定できるのが特徴

登録したプログラムにはショートカットを指定することもできる。ただし使用済みのショートカットキーを登録しても動作しないので注意

表示メニューに、新たに「ソースをプログラムで開く」という項目が出現しているので、その中から登録したエディタを選択する。View Source Editorと同様に「ページのソース」で起動するソフトそのものを置換することも可能

外部のエディタ（ここではメモ帳）で、FirefoxのHTMLソースを表示したところ

本日のレシピ

ブラウザ	方法
IE6／7	1）「ツール」−「インターネットオプション」−「プログラム」でHTMLエディタを設定して、「ファイル」−「［指定したアプリ］で編集」でソースを確認する 2）「View Source Editor」を使う
Firefox	「ViewSourceWith」を使う