無料で作るASP.NETでWebサイト(5)

なおさん

18年前

今回から、具体的にWebページをサイトに追加していきたいと思う。ところで、いきなりWebページをサイトに追加していく前に、どのようなサイトにするかということを、おおまかに固めておきたい。といっても、とりたてて豪華なサイトにする気持ちはないので、メニューをどこからでも参照できる程度のシンプルな作りにしたい。また、ページトップ（ヘッダ）、ページボトム（フッタ）はどのページを表示しても共通して現れるものとして、中央部だけがコンテンツとして変化するようにしてみたい。このような構成のサイトは、どこでも見られるタイプのものである。

殺風景なので花でも。キリシマツツジ。

前の回へ：無料で作るASP.NETでWebサイト(4)
次の回へ：無料で作るASP.NETでWebサイト(6)―無料ホスティングサービス申し込み編

マスターページを追加する

サイトの各ページのデザインを共通にしたい場合、使用するのは「マスターページ」である。マスターページで共通のデザイン、パーツを決めておき、個々のページでは「マスターページ」を使うと宣言しておけば、基本的にマスターページのデザイン、パーツがそのまま引き継がれる。このほかに、各ページ個々のパーツを設置すれば、マスターページの構成を活かしながら、個々のページの中身を表示できる。

マスターページの追加は、前に「アプリケーション構成ファイル」を追加したのと同じ要領で、「新しい項目の追加」ダイアログボックスで行う。ここに「マスタページ」という項目があるので選択し、「名前」欄はデフォルトのまま、「別のファイルにコードを書き込む」はチェックを入れないままにしておく。「名前」を変えたいのは、マスターページがいくつかあるときやマスターページを入れ子にしたいときだが、今回はどのような複雑な構成のサイトにはしないので、デフォルトの名前のものを1個だけ使うことにする。また、「別のファイルにコードを書き込む」はC#によるプログラムコードだけをWebページのファイルとは別のファイルに切り離したい場合にチェックするが、これはデザインとプログラムを分離したい場合に使用するためのもので、今回のように自分で何もかもする場合には、特に切り離す必要はない（それでも、切り離した方がいい、という人もいる）。

クリックすると拡大します。

マスターページの追加ができると、ファイル「MasterPage.master」が作成され、マスターページのデザインができるようになる。

クリックすると拡大します。

マスターページをデザインする

マスターページを追加したら、「デザイン・ビュー」に切り替えてマスターページに置きたいものをどんどん追加していこう。デザイン・ビューとは、Webページをグラフィカルにデザインするモードである。これに対してソース・ビューとは、WebページをHTMLタグなどで編集するモードである。切り替えは、中央やや下にある「デザイン」「ソース」のボタンで行う。「デザイン」を押すと、「ContentPlaceHolder…」と表示された枠が1個だけ現れた画面になる。ContentPlaceHolderとは、マスターページにのみ配置できる「サーバコントロール」で、マスターページを適用した個々のページが独自に内容を配置するために使える予約領域を定義する。ある意味必須のコントロールなので、初期状態で作成されるようになっている。

ここで、「サーバコントロール」について触れておくと、わかりやすく言えば「ボタン」や「テキストボックス」といったWebページの構成要素（コントロール）の仲間で、ASP.NET特有のものである。いわば、効率的なWebサイトの構築のために、特別に用意されたコントロールと思えばいいだろう。ASP.NETによるWebサイトの構築とは、いわばサーバコントロールの使いこなしが多くの部分を占めるので、どのようなサーバコントロールがあるか、どのような機能を持っているか、どのように使いこなすかということを知っているいないでは、だいぶ開発効率に差が出る。機会があれば、それらについて調べておくことをお勧めしたい。
もうひとつ付け加えておくと、サーバコントロールはその名のとおりサーバ側で処理されるコントロールで、最終的にはHTMLのタグやスクリプトに置き換えられる。ブラウザが処理できない、HTMLなどの標準から外れたものを使うわけにもいかないので、サーバコントロールの複雑な機能をサーバ側で処理し、大量（？）のHTMLタグやJavaScriptのコードを吐き出すというわけだ。これを認識しているといないとでは、ASP.NETへの取っつきやすさがずいぶんと変わってくるはずだ。

作成したマスターページ

ここで、とりあえず作成したマスターページの外観を紹介する。見てのとおりグラフィックも何も使っていないシンプルなものだが、ここには前ほどのContentPlaceHolderサーバコントロールのほかに、中央ちょっと上の青いMenuサーバコントロール、右上のSiteMapPathサーバコントロールが特筆すべきサーバコントロールとして配置されている。それぞれ、サイト全体のページ構成をメニュー化して表示するもの、見ているページの階層をたどって戻れるようにする、いわゆる「パンくずリスト」に対応する。これらのサーバコントロールは、「サイトマップ」情報を参照してメニューを表示したり、階層構造を表示したりする。一貫した情報をサーバコントロールに与えるために、「サイトマップ」を適切に作成し、管理する必要がある。

クリックすると拡大します。

サイトマップ

サイトマップは、Webサイトの階層構造をXML形式で記述したファイルだ（XMLファイルを使わなくてもデータベースで管理することもできるが今回は触れない）。サイトマップファイルを適切に記述し、MenuサーバコントロールやSiteMapPathサーバコントロールと結び付けておけば、メニューの表示やパンくずリストの表示が自動的に行われる。これはかなり楽だ。

クリックすると拡大します。

Webサイトの既定のサイトマップとして、Web.sitemapファイルを作成しておけば、Menuサーバコントロール（正確にはSiteMapDataSourceサーバコントロール）とSiteMapPathサーバコントロールが参照する規定値となる。では、このファイルを作成しよう。作成は、今までと同じ、「新しい項目の追加」ダイアログボックスを開いて行う。ここで「サイトマップ」を選択し、ファイル名はデフォルトのままで進めば、既定のサイトマップを作成できる。さらに、作成したサイトマップファイルに、以下の要素を追加する。url属性が空なので、項目が出るだけで先には進めない、ダミーのメニューが構成できる。

トップページの作成

マスターページを作ったら、いよいよトップページを作成する。そう、マスターページだけでは何もできない。それを適用する、何らかのページがなければWebサイトとしてコンテンツを見せることはできない。そこで、Webページを追加する。追加は、改めて説明する必要はないだろう。これまでと同じく、「新しい項目の追加」ダイアログボックスで行う。

クリックすると拡大します。

Webページは、特に指定しないと「Default.aspx」という名前で作成される。すでにファイルがある場合は、「Default」のあとに数字が付いていく。また、拡張子はASP.NETのWebページであることを表す「.aspx」となっている。これを変えてはいけない。Webページの追加の際には、「マスタページを選択する」という項目が出てくるので、もちろんこれにチェックを入れる。すると、続けてマスターページを選択するダイアログボックスが出てくるので、何も考えずに「OK」する（1個しかないからだ）。これで、マスターページを適用されたトップページが作成されたことになる。

なぜここで作成したWebページがトップページになるのかというと、それはWebサイトのルート階層で「Default.aspx」という名前を使用したからに尽きる。ルートにあるDefault.aspxは、ASP.NETの場合トップページになる。なので、別のファイル名にしたりした場合には設定を変更するか、あるいは「http://～/Default99.aspx」というように、ファイル名まで含めてURLを指定する必要がある。
さて、トップページができたところで、実行してみる。Webサイトの実行というと変な感じだが、要は作成した各ページをコンパイルし、Webブラウザで表示させてみようということだ。メニューから「デバッグ開始」を選べば実行される。

クリックすると拡大します。

たいした作業量でもないのに、ここまでのサイトができていることに驚かされる。メニューにマウスポインタを持っていけばメニュー項目が開く。残念ながらこの段階では下の階層に進めないので、SiteMapPathサーバコントロールの動作を確認することはできない。下の階層については、徐々に実装してみることになる。最初は、「Health」メニューの下だ。