WebMatrix 2：フォルダーから Web サイトを作ってみる

フォルダーから Web サイトの作成

まず、デスクトップ（どこでもいいのだけど！）に空のフォルダーを作成します。

次にこのフォルダーのコンテキストメニューから、［Open as a Web Site with Microsoft WebMatrix］を選択。

すると、「WebMatrix 2」が起動します。これで Web サイトが完成しました！（ぇ

中身は「WebMatrix 2」が勝手に追加する Robot.txt 以外何もないのだけど（この画面は、左下の［ファイル］というボタンを押すと表示されます）。

「WebMatrix 2」では、指定したフォルダーが Web サイトのルートフォルダになります。あとはそこへ HTML ファイルや CSS ファイル（スタイルシート）、スクリプトファイル、画像ファイルなどを置いていけばいい*1。

世の中には「マウス操作で簡単にカッコいい Web サイトが制作できる！」なんていう GUI ツールも多いですけど、ちゃんと HTML タグから学んで Web サイトを作っていきたい人にとって、「WebMatrix 2」は最良の選択肢の一つです。マウスでチョチョイ、というのも便利なんですけどね。

コンテンツの追加

これではあまりにも寂しいので、実際に簡単な Web ページを追加してみましょう。

リボンの［新規］ボタンを押して、HTML ファイルを追加します。名前は“index.html”とでもしておきます。

というのも、あらかじめ“既定のページ”に登録されたファイル名は、アクセスする際に名前を省略できるからです（カスタマイズ可能）。ファイル名を省略してアクセスすると、登録リストの上から順にファイルがあるかチェックされ、あればそれを返します。なければ“404 Not found”になるわけ。

おっと、話がそれた。HTML ファイルを作成したらコードを記述します。

body タグの間に以下のように記述し……

<p>Hello! WebMatrix</p>

リボンの［実行］ボタンを押せば、

ちゃんと Web ブラウザーで Web サイトが表示されました。

WebMatrix 2 ＝ ファイル管理 ＋ テキストエディター ＋ IIS Express 7.5 ＋……and more！

ここで、アドレスバーを確認。

“http://localhost:31675”と書いてありますけれど、これは“localhost”というアドレスのの“31675”番ポート*2へ“http”というプロトコルで接続しました、という意味です。

つまり、HTML ファイルを直接 Web ブラウザーで開いたのではなく、間に Web サーバー（HTTP で応答してくれるサーバー）を挟んで HTML ファイルへアクセスしているということになります。

ちなみに、HTML ファイルをダブルクリックして直接 Web ブラウザーで開くと、アドレスバーにはファイルパスが表示されます。

Web サーバーをセットアップしたり Web サイトがちゃんと動くように配置するのは結構めんどくさいのですが、「WebMatrix 2」には開発用の簡易 Web サーバー（IIS Express 7.5）が含まれていて、勝手に Web サイトをホストしてくれます。「WebMatrix 2」のインストール時に必要なコンポーネントがたくさんインストールされていましたけど、要はこういうのをセットアップしてくれていたのですね。

WebMatrix 2 ＋ IIS Express 7.5 なら、サーバーを止めるのも再開するのもボタンやメニューで簡単。何ならこのまま全世界へ公開することもできますけれど*3、あんまりオススメはしません*4。

あと、IIS Express 7.5 は HTTP で一般的に利用される 80 番ポートを使わないので、ほかの Web サーバーとの共存が可能です。少なくとも、自分で使った限りではトラブルを経験したことはない。ただ、これは“理論的には可能”というだけで、実際にはいろいろあるようですね。まぁ、XAMPP などを使う人はそういうのを自分で解決できる人だと思うので……頑張れ！