読者です 読者をやめる 読者になる 読者になる

だるろぐ

とてもだるだるした日記です http://about.daruyanagi.jp/

お知らせ

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

WebMatrix

f:id:daruyanagi:20121207114255p:plain

「WebMatrix 2」の導入 - だるろぐ の続き。

普通は「それでは“テンプレート”または“アプリ ギャラリー”から Web サイトを新規作成しましょう」という話になるのだと思うけれど、今回はちょっと趣向を変えてみようかな。

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

f:id:daruyanagi:20121207114618p:plain

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

f:id:daruyanagi:20121207114717p:plain

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

f:id:daruyanagi:20121207114848p:plain

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

f:id:daruyanagi:20121207114929p:plain

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

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

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

コンテンツの追加

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

f:id:daruyanagi:20121207114932p:plain

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

f:id:daruyanagi:20121207124225p:plain

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

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

f:id:daruyanagi:20121207115200p:plain

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

<p>Hello! WebMatrix</p>

リボンの[実行]ボタンを押せば、

f:id:daruyanagi:20121207115303p:plain

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

WebMatrix 2 = ファイル管理 + テキストエディター + IIS Express 7.5 +……and more!

f:id:daruyanagi:20121207120349p:plain

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

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

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

f:id:daruyanagi:20121207120941p:plain

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

f:id:daruyanagi:20121207120022p:plain

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 などを使う人はそういうのを自分で解決できる人だと思うので……頑張れ!

*1:これらを“リソース”と呼ぶことがあります

*2:これは「WebMatrix 2」が勝手に決めてくれます

*3:実際にやっている

*4:あくまで開発用です!