新村 剛史
マイクロソフト株式会社デベロッパー&プラットフォーム統括本部Web プラットフォーム推進部
Twitter: @tashinmu
今回は Part 2 の翻訳です。
元ネタはこちら：
http://www.microsoft.com/web/post/Web-Development-101-Part-2-Create-your-first-Web-Page
HTML の書き方とその原理を開発しています。
また、目次はこちらになります。
http://blogs.msdn.com/b/tashinmu/archive/2011/02/04/webmatrix-web-20110204.aspx
Web 開発入門：Part 2 Web ページを作ってみる
Part 1 では WebMatrix はどのようなツールで、どのようにインストールして実行するのかを紹介しました。今回は WebMatrix を使って Web サイトを作成し、そこに Web ページを追加していきましょう。
サイトを作成する
WebMatrix を起動して Welcom スクリーンを表示します。そこで、[テンプレートからサイトを作成する] を選択すると、下のようなダイアログが表示されます。このテンプレートは徐々に増えているため、画像の内容と異なるテンプレートが表示される場合もありますが、問題ありません。ここでは [空のサイト] のテンプレートを使用します。[空のサイト] を選択し、サイト名を ”Movies” とします。
[OK] をクリックすると、WebMatrix が新しい空の Web サイトを作成します。そしてこのサイトを WebMatrix のエディターが読み込み、下記のような画面が表示されます。
チュートリアルを進める前に、ここで表示されているものを理解しておいた方が良いでしょう。まず最初に理解していただきたいのが、WebMatrix は単なるコード編集ツールではないという事です。WebMatrix は IIS Exress と呼ばれる Web サーバーが統合されています。Web サーバーはインターネット越しにユーザーからの要求を受け付けて、その要求に基づいてデータを (主にブラウザに) 返すという役割を担うソフトウェアです。
たとえば、ブラウザを開いて http://www.microsoft.com と入力すると、ブラウザにマイクロソフトの Web サイトが表示されるかと思います。実際にはその背後ではブラウザがマイクロソフトの Web サーバーに要求を出して、サーバーがその要求にこたえて HTMLや CSS、JavaScript といったコードや画像といったデータをブラウザに返す、そして、ブラウザはそれぞれのファイルを組み合わせて表示するといった作業が行われているのです。
WebMatrix に Web サーバーが組み込まれていることで、Web サイトを開発する際にインターネット上の Web サーバーと同様の動きを実現でき、Web サイトを作成するのが非常に簡単になります。画面を見ると、サイト名 (この場合は “Movies”) の下に http://localhost:34524/ というサーバーが実行しているサイトのアドレスが表示さているのがわかるかと思います。このアドレスは Web サーバーが動いているマシン (host) は今使っている (local) マシンであることを表しています。
WebMatrix から Web サーバーを起動してサイトを実行することもできますが、そのまま試すとエラー画面が表示されます。それはまだサイト上に何も作っていないからです。それでは次のステップではサイト上でコンテンツを作成していきましょう。
Web ページを作成する
WebMatrix では左下にあるボタンを使って、作業領域を切り替えることができます。初期の状態では [サイト] ボタンが選択されています。この状態ではサイトの URL などの情報を確認したり、サイトに対する要求を監視するようなツールの利用したりなど、Web サイトに関する詳細な情報を確認、設定することができます。このシリーズを通して下記のような様々な作業領域を説明していきますが、まずは [ファイル] ボタンを押してファイルの作業領域を選択してください。
ファイルの作業領域が表示されたかと思います。現時点ではこの Web サイトにファイルが存在していないため、空の状態です。この状態でファイルを追加するために画面には [ファイルの新規作成] というリンクが表示されています。この Web サイトにファイルを新規追加するにはこのリンクをクリックするか、ツールバーにある [新規] をクリックします。
上記のどちらかの方法でファイルを新規作成しようとすると [ファイルの種類の選択] のダイアログが表示され、Web 開発でよく使用される様々なファイルの種類を選択することができます。
[HTML] を選択して [名前] に default.html と入力して [OK] をクリックします。そうすると、WebMatrix によって簡単な HTML ファイルが作成され、開かれます。
HTML (Hyper Text Markup Language) ファイルはブラウザにページを表示するための構造を定義しただけのファイルです。HTML ファイルは一般的にページ自体の概要を定義している Head 部分と、ページの内容を定義した Body 部分の2つから構成されています。ページの内容はタグによって表現されます。このタグは <body> のように角括弧で囲まれた名前で始まり、</body> のような角括弧で囲まれスラッシュ (/) で始まる名前で終わるように記述されています。つまり、この例ではブラウザはこれらの body タグで囲まれた部分すべてをページの body 部分として扱います。より詳しくは W3Cschool.com というサイトで学ぶことができます。
http://w3schools.com/html/default.asp.
次のようにページを編集してみてください：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>My Favorite Movies</title> </head> <body> <h1>A list of my Favorite Movies</h1> <ol> <li>It's a wonderful life</li> <li>Lord of the Rings</li> <li>The Fourth World</li> <li>The Lion King</li> </ol> </body> </html>
まずは title タグの中の中に何か文字を、body タグの中に何かHTMLのコードを入れてみてください。この例は 見出しのスタイルを表す <h1> と一覧を表す <ol>、 一覧の中の各要素を表す <li> を使っています。
WebMatrix のツールバーに [実行] というボタンがあるのを確認できるかと思います。
[実行] ボタンをクリックすると、ブラウザが起動し、自分の環境で動いている Web サイトの内容が表示されます。
この裏側では非常に多くの処理が発生しています。ここではそれを少し深堀していきましょう。
Web サーバー
ブラウザのアドレスバーに注目してください。ハードディスクからファイルを直接開いているのではなく、Web サーバーが起動され、ブラウザにより Web サーバーが指定され、サーバーに対して default.html を開くように要求しているのがわかるかと思います。
コンピューターのシステムトレーを見てください。IIS Express というアイコンが表示され Web サーバーが動いているのが確認できるかと思います。
アイコンを右クリックすると、Movies のサイトが動いているのが確認できるかと思います。
ページのタイトル
今度はブラウザのタブの部分を見てみましょう。My Favorite Movies というタイトルが表示されているはずです。比較のために Internet Explorer、Chrome、Safari、FireFox、そして Opera で同じサイトを開いてみましょう。<head> タグの中の <title> タグに入力した内容が表示されているのがわかるでしょうか？実はここでページのタイトルを設定していたわけです。複数の種類のブラウザがそれぞれの方法でページのタイトルを表示しているのを確認できるかと思います。
Internet Explorer:
Chrome:
Safari:
Firefox:
Opera:
Web 開発者にとって異なるブラウザでは微妙に表現が異なる場合があるという事は常に気にかけておく必要があります。異なるブラウザでもそれぞれ期待通りの動きをするかチェックすることはWeb 開発者にとって重要な作業です。
Note: 異なるブラウザでサイトを表示する
開発環境で Web サーバーを実行できるという以外にも WebMatrix は非常に優れた機能を持っています。それはインストールされているブラウザですぐにテストを行うことができるという機能です。[実行] ボタンの下矢印をクリックするとその下のようなメニューが表示されます。
このリストは WebMatrix を実行している環境にインストールされているブラウザのみを表示しています。
ページの内容
HTML のコードの中で 「A list of my Favorite Movies」という文字列を <h1> タグで囲みました。これはブラウザに対して見出し 1 (大きなサイズで太字) のスタイルでこの文字列を表示するように指示しています。
最終的に、あなたの好みの映画のリストを <ol> タグ ( Ordered List を意味しています) と <li> タグ (List Item を意味しています) を使って記述したものをブラウザが解釈をして表示します。リスト番号を自分では入れていないにもかかわらず、ブラウザが自動的に番号を振ってくれていることに気付いたでしょうか？これは <li> タグで定義されたアイテムを表示するブラウザの既定のスタイルなのです。このチュートリアルでは後程、このスタイルを変更して、あなたの思い通りのスタイルにする方法を紹介します。
まとめ
このパートでは WebMatrix を使って簡単な Webページを作成する方法を紹介しました。その過程で Web ページが Web サイトの一部であり、Web サーバーによって配信されるのを理解することができたかと思います。HTML のページを作成し、その中に HTML のコードを記述することで、ブラウザに対してどのように表示するかを伝えることができました。また、head に関してはそのページの情報を定義する部分、body はそのページの内容を定義する部分という事も理解できたかと思います。そして、ページを実行して様々なブラウザで表示できるのを体験しました。次のパートではページの見た目をよりきれいにするためにスタイルを変更する方法を紹介します。