ローカルストレージにある HTML の表示を HTTP 経由でお手軽に確認する方法

 テキストエディタで HTML をゴリゴリと書いていると、Web ブラウザ上での表示をファイルとして直接開くのではなく、パスの関係等で HTTP 経由で確認したくなることがあると思います。

 無くても、あることにしてください。そうしないと、話が進まないので。

 さて、ちょっと確認したいだけなのに、いちいちリモートにアップロードして確認するなんて面倒だし、毎回インターネット経由でデータをやり取りするのも、なんだか無駄な気がします。

 そんな場合に、どこのご家庭の PC にもインストールされている HTTP サーバー――例えば Apache やら nginx やら IIS やら tomcat やら、この際 node.js でもなんでもいいので、それらをローカルで動かしても良いのですが、そういうちゃんとしたサーバーを使うとなると、適当な場所に置かれた HTML を、何もしないでそのまま適当に表示する、という訳には、なかなかいきません。

 コンフィグファイルの編集か、最低でも仮想ディレクトリの設定くらいは必要になるでしょう。

 いや、違うんスよ、そんな大袈裟なモンじゃなくてですね、静的な HTML をホントにちょっと表示したいだけなんスよ。

 みたいな時に、もしあなたが Windows ユーザーで、且つ一般的な開発者であるのなら、これ以上ないくらい適切な回答が、既にローカルストレージの中に用意されています。

 一体ぜんたい、それは何かと申しますと――

スポンサーリンク

読み込み中です。少々お待ち下さい

小回りの利くニクい奴

 あなたが一般的な Windows 開発者であるのなら、既にマシンには Visual Studio がインストールされていると思います。

 もし、まだの場合は、Microsoft 御自らが「無料開発ツール」を謳っている「Visual Studio Community」の導入を検討してください。

 Microsoft の Visual Studio は、昔から最強の開発環境でしたが、最近では本当になんでも出来る無敵の開発環境と化していますので、とりあえず入れておいて損はありません。

 で、ここからが本題。

 Visual Studio Community をインストールすると、開発環境として必要になるので、同時に「IIS Express」もインストールされます(デフォルトでは「C:\Program Files (x86)」配下。以下、32bit 環境では (x86) を省いてください)。

「Visual Studio はデカいから入れたくない」という場合は、IIS Express を単独でインストールすることも可能です。

 こちらでしたら、インストーラーはわずか数 MB です。驚くべきコンパクトさ。

 ただし、今回の記事のベースにした Visual Studio Community 2015 に付属の IIS Express は 10.0 のようなので、もしかしたら細かい部分で差異があるかも知れません(簡単に確認した限りでは、同じように使えそうですが)。

 この「IIS Express」がですね、大変に小回りの利く簡単便利な賢い子でして、ちゃんとした方の IIS とは異なり、サービスなんぞに登録する必要もなく、独立したアプリケーションとして単独で動作するので、非常に気軽に扱えるのです。

 とりあえずコマンドプロンプトを開いて「C:\Program Files (x86)\IIS Express\iisexpress.exe /?」を実行すると、こんな風に標準出力されます。

IIS Express Usage:
------------------
iisexpress [/config:config-file] [/site:site-name] [/siteid:site-id] [/systray:true|false] [/trace:trace-level] [/userhome:user-home-directory]
iisexpress /path:app-path [/port:port-number] [/clr:clr-version] [/systray:true|false] [/trace:trace-level]

/config:config-file
The full path to the applicationhost.config file. The default value is the IISExpress\config\applicationhost.config file that is located in the user's Documents folder.

/site:site-name
The name of the site to launch, as described in the applicationhost.config file.

/siteid:site-id
The ID of the site to launch, as described in the applicationhost.config file.

/path:app-path
The full physical path of the application to run. You cannot combine this option with the /config and related options.

/port:port-number
The port to which the application will bind. The default value is 8080. You must also specify the /path option.

/clr:clr-version
The .NET Framework version (e.g. v2.0) to use to run the application. The default value is v4.0. You must also specify the /path option.

/systray:true|false
Enables or disables the system tray application. The default value is true.

/userhome:user-home-directory
IIS Express user custom home directory (default is %userprofile%\documents\iisexpress).

/trace:trace-level
Valid values are 'none', 'n', 'info', 'i', 'warning', 'w', 'error', and 'e'. The default value is none.

\Examples:
iisexpress /site:WebSite1
This command runs WebSite1 site from the user profile configuration file.

iisexpress /config:c:\myconfig\applicationhost.config
This command runs the first site in the specified configuration file.

iisexpress /path:c:\myapp\ /port:80
This command runs the site from the 'c:\myapp' folder over port '80'.

 要するに、簡単な設定であればコマンドライン引数で指定できてしまうという訳です。

たったひとつの冴えたコマンド

 ヘルプには色々と出力されますが、とりあえず使いたいという場合に必要なオプションは、たったひとつ「/path」だけです。

 冒頭で触れたように、ローカルストレージの「とある場所」に適当に置かれた静的な HTML(および参照ファイルを含む関連した構造)の Web ブラウザ上での表示を、HTTP 経由で確認しようと思ったならば。

 コマンドライン引数で、ドキュメントルートのパスを指定してあげるだけで良いのです。

 そう、iisexpress ならね(懐かしの表現)。

 つまり、「D:\temp\gootara\hoge\index.html」を「http://localhost:8080/」で表示したければ、以下のコマンドを実行するだけです(iisexpress のデフォルトポートは 8080)。

"C:\Program Files (x86)\IIS Express\iisexpress.exe" /path:D:\temp\gootara\hoge

 面倒なコンフィグファイルを用意する必要はありません。

 たったひとつのコマンドで、HTTP サーバーとして普通に機能します。

しかも、このように簡単なアクセスログも見られて便利
プロンプト上で「Q」を入力することで、お手軽に終了できます

 よく使うディレクトリに関しては、例えば以下のようなショートカットを用意しておけば、ダブルクリックでいつでも起動できるでしょう。

複数起動する場合は、それぞれポート番号を変えることをお忘れなく

 ちょいとコンテンツを HTTP サーバー経由で見たいという時に、マジで便利ですよ、これ。

おわりに

 念の為に申し添えておきますが、IIS Express は開発用の簡易サーバーですので、間違っても公開用のサーバーとして利用してはいけません(デフォルトだとリモート接続が許可されていないので、大丈夫だとは思いますが)。

 また、今回は静的なコンテンツについてのみ触れていますが、当然のことながら aspx 等の動的なコンテンツを扱うことも可能です。

 ですが、まぁ、その場合は Visual Studio 経由で扱った方が、よほど簡便かと思いますので、ここでは特に触れません。ご了承ください。

この記事をシェア
  • このエントリーをはてなブックマークに追加
  • Share on Google+
  • この記事についてツイート
  • この記事を Facebook でシェア

「Tips」カテゴリの関連記事