第 1 章 Web サーバーを 設 定 する はじめに 第 1 章 では 製 作 の 前 準 備 として Windows Server 2008 をンストールし その 中 に 同 梱 されて いる IIS7 をンストールします 学 生 の 皆 様 は DreamSpark から Windows Se

1

IIS7 + Expression Webで Webサイトを作ろう

- Webサイトの作成と公開 -

■はじめに

本シリーズは全 3 回で、Web サーバーを構築して Web サ゗トを作り公開する方法を学びます。 Windows Server 2008 に付属されている IIS7（Internet Information Services 7.0）を使い Web サーバーを構築し、Expression Web 3 でオリジナルの Web サ゗トを作成して公開する方法を、ス テップバ゗ステップでご紹介します。

■ 「IIS7」とは？

IIS（Microsoft Internet Information Services）は、Windows 上で動作する゗ンターネット サー バー ソフトウェゕです。Web サーバー、FTPサーバー、SMTPサーバーなど、さまざまなサーバー機 能をもっています。IIS7 は IIS の現行バージョンで、開発、管理共に最も優れており、多くの管理 機能を備えているため、他の Web サービスに比べて、わかりやすく利用しやすいことが特徴です。 ■ 「Expression Web 3」とは？

Microsoft Expression Web 3（マ゗クロソフト エクスプレッションウェブ 3）は、Web サ゗トを製 作するソフトウェゕ（Web オーサリングツール）です。Web 標準に準拠したサ゗トや ASP.NET、 PHP などの機能を活用したサ゗ト制作を効率的に行えます。Web サ゗ト制作が初めての方でも、わ かりやすく容易に Web サ゗トを製作できます。

2

第 1 章 Web サーバーを設定する

■はじめに

第 1 章では、製作の前準備として Windows Server 2008 を゗ンストールし、その中に同梱されて いる IIS7 を゗ンストールします。

学生の皆様は、DreamSpark から Windows Server 2008 を無償でダウンロードしてご利用いただ けます。DreamSpark は、学生の方を対象にしたソフトウェゕ開発製品、ゕプリケーションデザ゗ン 製品などの無償提供プログラムです。早速、DreamSpark に登録してWindows Server 2008 を゗ン

ストールしてみましょう。

→DreamSpark にゕクセスする

■Windows Server 2008 をインストールする Windows Server 2008 をダウンロードしたら、手順に従って゗ンストールします。 ※ 注意 ※ 「゗ンストールの種類」の画面で「カスタム（詳細）」を選択して、デゖスク パーテゖションを設定 して、゗ンストールします。 ■IIS7 を設定する Windows Server 2008 を起動します。「スタート」メニューから、「管理ツール」＞「サーバーマ ネージャ」を選択します。

3

「サーバーマネージャ」ウゖンドウで「役割の概要」の「役割の追加」を選択します。

4

「サーバーの役割」で、「Webサーバー(IIS)」をチェックし、「次へ」をクリックします。

5

「役割サービス」では、デフォルトの設定のまま、「次へ」をクリックします。

6

゗ンストールが始まり、進行状況が表示されます。

7

■Webサーバーの確認 Webサーバーの設定が正常に完了したことを確認してみましょう。 「Internet Explorer」を起動し、URLゕドレス「http://localhost/」を入力して実行します。 次のような画面が表示されたら、IIS7 は正常に設定されています。 ■ まとめ

本章では、IIS7 を゗ンストールし Web サーバー を準備しました。これで Web サ゗トを作成する 準備ができました。第 2 章からは、Web サ゗トを作成するオーサリングツール Expression Web 3 を使って、実際に Web サ゗トを作成します。

8

第 2 章 Webサイトを作成する ①

■はじめに

第 1 章では、IIS7 を゗ンストールし Web サーバー を準備しました。本章は、Web サ゗トを作成 するオーサリングツール Expression Web 3 を゗ンストールして準備します。第 1 章で準備した Windows Server 2008 に゗ンストールすれば良いでしょう（※他の環境に゗ンストールして利用す ることも可能です）。そして、実際に Web サ゗トを作成してみます。 ■インストールする前に ＜ Internet Explorer セキュリティの設定＞ まず、゗ンターネットから、いくつかのフゔ゗ルをダウンロードする必要がありますが、Windows Server 2008 のセキュリテゖ設定によって、ダウンロードできない可能性があります。その場合は、 次のように設定し、ダウンロードを可能にします。 Windows Server 2008 の「スタート」メニューから、「管理ツール」＞「サーバーマネージャ」を 選びます。「サーバーマネージャ」ウゖンドウで、「セキュリテゖ情報」の「IE ESC の構成」をクリ ックします。 「Internet Explorer セキュリテゖ強化の構成」ウゖンドウで、「管理者」の「オフ」と「ユーザー」 の「オフ」をチェックし、「OK」をクリックします。

9

＜.Net Framework 3.5 SP 1＞

Expression Web 3 を゗ンストールするには、「.Net Framework 3.5 SP 1」サービスパックが必要 です。Windows Server 2008 をまだ更新されていない場合には、まずこのサービスパックをダウン

ロードし、゗ンストールしてください。

→.NET Framework 3.5 Service Pack 1

■Expression Web 3 をインストールする

学生の皆様は、DreamSpark から Expression Studio 3 を無償でダウンロードしてご利用いただけ ます。 Expression Studio 3 には、Expression Blend 3, Expression Web 3, Expression Design 3,

Expression Encoder 3 が含まれています。

→DreamSpark にアクセスする

■デスクトップ エクスペリエンス の設定

Expression Encoder 3 （Silverlight ビデオ）を使用可能にするため、次のように設定します。 1. Windows Server 2008 の「スタート」メニューから「管理ツール」＞「サーバーマネージャ」を 選びます。 2. 左側のパネルで「機能」を選択し、右側のパネルの「機能の追加」をクリックします。 3. 「デスクトップ エクスペリエンス」をチェックし「次へ」をクリックします。

1

2

10

4. ゗ンストールが完了したら、再起動します。 ■Silverlight 3 ランタイムをインストールする

Internet Explorer 上で Silverlight のコンポーネントを表示できるように、Microsoft Silverlight サ

゗トから Silverlight3 のゕドオンを゗ンストールします。

→ Microsoft Silverlight

※上記 URL サ゗トにゕクセスし、 をクリックして゗ンストールしてください。 ■インストールの後 「IE ESC の構成」を元の状態に戻します。 1. Windows Server 2008 の「スタート」メニューから「管理ツール」＞「サーバーマネージャ」を 選びます。 2. 「サーバーマネージャ」ウゖンドウで「役割の概要」の「役割の追加」を選びます。 3. 「Internet Explorer セキュリテゖ強化の構成」ウゖンドウで、「管理者」と「ユーザー」を「オ ン」にして「OK」をクリックします。

11

■Web サイトを新規作成する 1. Expression Web 3 を起動します。 2. メニューから「サ゗ト」＞「新規サ゗ト」をクリックします。※あるいは、 （新規サ゗ト）を クリックします。 3. 「新規作成」ウゖンドウで「テンプレート」を選択し、「パーソナル 3」を選び、「場所」と「名 前」の値をそのままにして「OK」をクリックします。すると、個人のホームページが作成されま す。 4. 中央の「サ゗トビュー」から「default.html」を選び、 をクリックして（あるいは、F12 キーを 押す）サ゗トをプレビューできます。

12

■ページを追加する 5. 次に「ビデオ ギャラリー」というページを追加します。メニューから「フゔ゗ル」＞「新規」＞ 「ダ゗ナミック Web テンプレート作成」を選択します。※あるいは （新規ドキュメント）の ↓ を ク リ ッ ク し て 、 「 ダ ゗ ナ ミ ッ ク Web テ ン プ レ ー ト 作 成 」 を 選 択 し ま す 。 「フゔ゗ル名」には ”master” と入力し「開く」をクリックします。 6. メニューから「フゔ゗ル」＞「保存」を選択します。※あるいは、 （保存）をクリックします。 7. Mysite のフォルダーの中に、新しいフォルダー「video_gallery」を作成します。 「フゔ゗ル名」に ”default.html” と入力します。 「タ゗トルの変更」ボタンをクリックし、ページタ゗トルに ”ビデオギャラリー” と入力して、 「OK」をクリックします。 最後に「保存」ボタンをクリックします。

13

8. 同じように ”Game” という名前で新しいページを作成してください。 項目 値 フォルダー ルート フゔ゗ル名 game.html ページタ゗トル フルーツバスケット ■ダイナミックWebテンプレートを変更する 9. 追加した 2 つのページにゕクセスするために master.dwt にリンクを追加します。 10. 左側にある「フォルダーリスト」ウゖンドウの「master.dwt」をダブルクリックします。 11. 開いた「master.dwt」の下には「分割」をクリックすると、デザ゗ンとコードが両方も表示され ます。 デザ゗ン画面で「PhotoGallery」を選択すると、コード画面に対処タグが表示されます。

1

2

3

3

4

5

6

14

12. 下記の゗エローマーカーの行を追加します。また、グリーンマーカーの部分はこのように変更しま す。

<div id="footer">

<div id="copyright">

<p>Copyright © 0000. All Rights Reserved.</p>

</div>

<p>

<a href="default.html">ホーム</a> |

<a href="about_me/default.html">自己紹介</a> |

<a href="resume/default.html">履歴書</a> |

<a href="photo_gallery/default.html">フォト ギャラリー</a> |

<a href="video_gallery/default.html">ビデオ ギャラリー</a> |

<a href="game.html">ゲーム</a> |

<a href="links/default.html">リンク</a> |

<a href="contact/default.html">連絡先</a>

</p>

15

13. フッタも、下記のように変更します。 14. ページの上部にあるタ゗トルと説明を編集します。「Web サ゗トの名前」を ”僕の庭” へ、 「Web サ゗トの説明」を ”植物の世界へようこそ” に変更します。 15. メニューから「フゔ゗ル」＞「すべて保存」を選択します。※あるいは、 （すべて保存）をク リックします。次のダ゗ゕログが表示されたら「はい」をクリックします。

<div id="footer">

<div id="copyright">

<p>Copyright © 0000. All Rights Reserved.</p>

</div>

<p>

<a href="default.html">ホーム</a> |

<a href="about_me/default.html">自己紹介</a> |

<a href="resume/default.html">履歴書</a> |

<a href="photo_gallery/default.html">フォト ギャラリー</a> |

<a href="video_gallery/default.html">ビデオ ギャラリー</a> |

<a href="game.html">ゲーム</a> |

<a href="links/default.html">リンク</a> |

<a href="contact/default.html">連絡先</a>

</p>

16

■イメージ（画像）を追加する 16. ルートの default.html を開きます。 17. 「ツールボックス」ウゖンドウで「HTML」－「タグ」－「゗メージ」をドラッグし、ページ内の ゗メージを配置したい場所へドロップします。 18. ドロップした゗メージ、 をダブルクリックすると「画像のプロパテゖ」ウゖンドウが表示され ます。「画像」を選択し、「代替テキスト」に入力し、ハ゗パーリンクの「場所」を指定します。 19. 設定した゗メージのサ゗ズが大きすぎるので、゗メージサ゗ズを小さくします。゗メージの右下角 を Shift キーを押しながらドラッグすると、縦横比を固定したままリサ゗ズできます。 20. ゗メージをリサ゗ズしても、フゔ゗ルサ゗ズ（バ゗トサ゗ズ）は変わりません。画像をより速く表 示できるよう、表示サ゗ズのフゔ゗ルサ゗ズへ変更しましょう。リサ゗ズした画像の下にある （画像の処理）にマウスを移動し、↓をクリックして「変更したサ゗ズに画像をリサンプルする」 をチェックします。

1

2

3

4

17

21. ルートの default.html を保存すると「埋め込みフゔ゗ルの保存」ウゖンドウが表示されます。 「フォルダーの変更」をクリックし「images」を選択して保存します。

22. サ゗トをプレビューします。

■ まとめ

本章では、Web サ゗トを作成するオーサリングツール Expression Web 3 を準備し、実際に Web サ゗トを作成してみました。静的な Web ページは、テンプレートを使ってこのように簡単に作成す ることができます。Expression Web を使って、いろいろなレ゗ゕウトデザ゗ンの Web ページを作 成してみてください。

18

第 3 章 Webサイトを作成する ②

■はじめに

第 2 章では、Expression Web 3 を準備し、実際に Web サ゗トを作成してみました。

次回、第 3 章では、ビデオなど動きのあるページを作成してみましょう。Web サ゗トにフォトギャ ラリー、Silverlight 動画を追加します。 ■フォトギャラリーを作成する 1. Expression Web 3 を起動します。 2. メニューの「サ゗ト」＞「サ゗トを開く」を選択し、第２章で作成したサ゗トを開きます。 3. 「フォルダーリスト」ウゖンドウで「photo_gallery」フォルダー内の「defult.html」を開きます。 4. メニューの「テーブル」＞「テーブルの挿入」をクリックすると、「テーブルの挿入」ウゖンドウ が表示されます。「セル内容のスペース」に「５」を設定し「OK」をクリックします。 5. テーブルのセルに゗メージを入力します。 6. ゗メージのソースを設定してから、右クリックして、「オートサムネ゗ル」を選択すると、自動的 にサムネ゗ルが作成されます。

19

7. 別の゗メージとサムネ゗ルを作成してみましょう。 8. ページの上部にあるタ゗トルと説明を編集します。「フォトギャラリーのタ゗トル」を ”きれいな 木” へ、「ここにフォトギャラリーを挿入します」を ”気に入った写真” へ変更します。 9. 変更してフゔゖルを保存すると、「埋め込みフゔ゗ルの保存」ウゖンドウが表示されます。「フォ ルダーの変更」をクリックして、「photo_gallery」に「tree_images」というフォルダーを新規 作成して保存します。 10. プレビューしてみましょう。

20

■Silverlight ビデオ 11. 「フォルダーリスト」ウゖンドウで「video_gallery」フォルダーを開いて、「defult.html」を開 きます。 12. 「ツールボックス」ウゖンドウで「HTML」－「メデゖゕ」－「Silverlight ビデオ」をドラッグし て、「default.html」デザ゗ンにドロップすると、「ビデオの選択」が表示されます。 13. ビデオフゔ゗ルを選択すると「Silverlight ビデオを挿入する」ウゖンドウが表示されます。 14. 「テンプレート」のリストから、テンプレートを選びプレビューします。 15. 「幅」を「300」に設定し「エンコード」をクリックします。 16. 「default.html」デザ゗ンには埋め込んだビデオフゔ゗ルは表示されませんが、プレビューすると ビデオを確認できます。 17. プレビューする際には「ブロックされているコンテンツを許可」してください。

21

■Silverlight コントロール

18. 「フォルダーリスト」ウゖンドウで「game.html」を開きます。

「ツールボックス」ウゖンドウの「HTML」－「メデゖゕ」－「Silverlight」をドラッグし、 「game.html」デザ゗ンにドロップします。「Silverlight 2 XAP フゔ゗ルか Silverlight 3 XAP フゔ゗ルを選択します」ウゖンドウでは XAP フゔ゗ルを選択します。 19. 「 game.html 」デ ザ゗ ンに 埋 め込 んだ Silverlight オ ブジ ェク トを ダブ ルク リッ ク する と 「ActiveX コントロールのプロパテゖ」ウゖンドウが表示されます。「サ゗ズ」の「幅」を 「400」に変更し、「高さ」を「300」に変更します。 20. 「game.html」を保存します。 21. プレビューする際には「ブロックされているコンテンツを許可」してください。

22

■ パブリッシュ 22. これで、サ゗トのデザ゗ンが完了しました。 23. サ゗トを公開する前に、Web サーバーにドメ゗ン名もしくは IP ゕドレスを用意する必要があり ます。ここでは例として「www.example.co.jp」というドメ゗ンを使用します。 24. メニューから「サ゗ト」＞「パブリッシュの設定」を選択すると、「サ゗トの設定」ウゖンドウが 表示されます。「全般」タブの「Web 名」を ”MyGarden” に変更します。 「パブリッシュ」タブで「パブリッシュ先」の「追加」ボタンをクリックします。「接続の設定」 ウゖンドウで「場所」と「資格情報」などを入力し「追加」ボタンをクリックします。

23

25. 「サ゗トの設定」の「パブリッシュ先」に設定した接続が表示されます。「オプション」の「サブ サ゗トを含む」をチェックし「OK」をクリックします。 26. メニューから「サ゗ト」＞「パブリッシュ」を選択します。「サ゗トビュー」の「パブリッシュ」 タブで、フゔ゗ルとフォルダーをすべて選択し、「→」（フゔ゗ルをサ゗トにパブリッシュ）をク リックします。

24

27. Internet Explorer を起動し ”http://www.example.co.jp/MyWebSite/default.html” のページ を開きます。先にデザ゗ンしたホームページが表示されました。

25

■ まとめ

本シリーズでは、IIS7 で Web サーバーを準備し、Expression Web 3 を使って Web サ゗トを製 作し公開しました。テンプレートを利用したページデザ゗ン、画像の埋め込み、フォトギャラリーの 作成、Silverlight ビデオなどを利用して、バリエーションのある Web サ゗トを作成してみました。 このように、管理機能に優れた IIS7 と 簡易なオーサリングツールを使えば、 Web サ゗トを手軽に 製作し公開することができます。今回、ご紹介できなかった機能もありますので、いろいろと試しな がらオリジナルの Web サ゗トを作成してみてください。