Windowsによる動的ウェブページの作成

１　はじめに

　これまで，ウェブベースの掲示板やアンケートフォームなどの動的ウェブページを作成する場合は，Ｌｉｎｕｘサーバ上でウェブサーバを立ち上げ，PerlやPHPなどのプログラム言語を利用することが多くありました。しかし，ＬｉｎｕｘはWindowsに比べ，ある程度の知識，技術が必要であり，しかも学校ではWindowsサーバが一般的に利用されることが多くなりました。そこで，Windowsサーバでウェブベースの掲示板やアンケートフォームなど動的ウェブページを容易に構築できる「WebMatrix」を紹介します。この「WebMatrix」は，Windows XP以上のOSにインストールすることができ，別途ソフトウェアをインストールすれば，Linuxサーバで利用されるPHPやPerlなどの資産も稼働させることができます。ここでは，「WebMatrix2」（図1）に標準で実装されている掲示板とアンケートフォームの作成から公開までの手順を紹介します。


　　　図1　起動画面

２　インストール

　(1)　今回使用したパソコン
　　　・CPU　Celeron 2.5GHz
　　　・メモリ　2GB　(一部がグラフィックに割り当てられています)
　　　・HDD　37GB
　　　・OS　Windows XP　Professional
　　　・IP　192.168.1.63 
　　　 ※ 授業では，上記のパソコンを使用しましたが，Windows Vista，Windows 7でも動作を確認しました。また，Windows Server 2008等のサーバでも利用できます。

　(2)　事前確認事項
　　　・Microsoft.NET Framework 2.0 のインストール(Windows XPの場合)
　　　・Windows Updateの自動更新は「OFF」
　　　　　※ インストールに失敗することがあるようです。インストールが完了したら「ON」に戻しておいてください。

　(3)　ダウンロードとインストール
　　　　①  http：//www.microsoft.com/web/webmatrix/ より「Web Platform Installer」をダウンロードします。
　　　　②　ダウンロードしたファイルを実行すると，インストールが開始され以下のパッケージがWebMatrix2と一緒にインストールされます。
　　　　　　・Microsoft.NET Framework 4
　　　　　　・ASP.NET Web Pages
　　　　　　・Microsoft　SQL Server Compact 4.0
　　　　　　・Web Deploy 3.0
　　　　　　・IIS7.5. Express
　　　　　　 ※ すでにインストールされているコンポ―ネントはインストールされません。

３　簡単なプログラム

　(1)　Razor(レイザー)について
　　　WebMatrix2は，従来のASP.NETの記法だけでなく「Razor」という新しい記法が使用できます。 また，ASP(Active Server Pages)のようにHTMLの中にスクリプトを埋め込むような書き方もします。 Razorは記法であり，言語としてはC#またはVisual Basicを基本としています。

　(2)　簡易掲示板 
　　　ア　仕様
　　　・シンプルな掲示板で発言者には，IPアドレスを表示するようにしました。これは，匿名であっても発信元が分かるようにしてあり，情報モラルの指導にも活用することができます。
　　　・書き込まれた内容はすべてデータベースに保存され，投稿内容を削除した場合，表示上は削除されますが，実際のデータは管理者が削除するまで，データベースから削除されません。

　　　イ　活用内容（図2～図4は，WebMatrix2をインストールしたパソコンで表示させています）

　　　 《一般ユーザが利用する画面》
　　　・アクセス方法： http://localhost：(ポート番号)/Default.cshtml
　　　　　※ Default.cshtmlは，省略可能です。投稿者名の横にIPアドレスが表示さます。
　　　・匿名やペンネームで書込みをしていても投稿者を知ることができます。また，投稿時間も表示させてあります。
　　　・管理者も投稿者と同じ画面（図2）を利用できます。


図2　掲示版表示画面

《管理者サイトへログイン》
・アクセス方法： http://localhost：(ポート番号)/login.cshtml
・ログインするためにはデータベースに登録されているユーザ名・パスワードを利用します。
・事前登録が必要となります（事前登録は，管理者サイトへのログイン情報を格納するテーブル 図8を参照してください）。 　　　　　　　　


図3　管理者サイトへのログイン画面

　《管理者サイト》
　・管理者は，掲示内容の「削除」・「復元」を行うことができます。　
　・「削除」
　　データベース内に削除フラグを立ててあるのみで，実際には削除されてはいません。　
　・「復元」
　　「削除されました」が消え，投稿内容が表示されます。 

図4　管理者サイト
 
ウ　設置方法
　（ア）　サイトの設置
　　　①　ソースファイルのダウンロード(文字コードは，UTF-8)　ソースファイル
　　　②　ダウンロードしたファイルを解凍すると以下のファイルやフォルダが展開されます。
　　　　　　・Default.cshtml：簡易掲示板入力
　　　　　　・login.cshtml：管理者サイトへのログイン入力
　　　　　　・kanri.cshtml：管理者サイト
　　　　　　・style/mystyle.css：スタイルシート
　　　③ インストール時に「マイドキュメント」に作成された「My Web Sites」フォルダ内に「WebSite2」フォルダを作成し，上記のファイルやフォルダを保存してください。
　　　④ WebMatrix2を起動してください(この内容は，Windows XPの場合です)。

　(イ)　データベースの作成
　　　　　データベース名・テーブル名・各テーブルの定義は，プログラム上変更しないでください。

　《新規データベースの作成の手順》
　　　① 図5の左下「データベース」をクリックします。
　　　② 図5の右側に表示されている「データベースをサイトに追加 (SQL Server Compact)」をクリックします。


図5　データベースの作成


    　 《データベース名とユーザ名とパスワードの入力》
　　　　　③ 図6の「新しいSQL Server データベース」に次の設定をします。
　　　　　　・データベース： bbs　（固定）
　　　　　　・ユーザ名： sa（既定）
　　　　　　・パスワード： （任意）
　　　　　　・「パスワードを保存する」にチェックを入れる。
　　　　　　・入力後「OK」ボタンをクリックします。
　　　　　④ 図7の左側の「WebSite2」の下に「bbs.sdf」のデータベース名が表示されます。
　　　　　⑤ 次にテーブルを作成します。図7の上部リボン「新しいテーブル」をクリックします。 


　図6　データベース名とユーザ名とパスワードの入力　　　　　　

　　
　　　⑥表を参考に投稿されたデータを蓄積するテーブルの設定します。

図7　投稿されたデータを蓄積するテーブルの作成		 投稿されたデータを蓄積するテーブル（図7）の設定
テーブル名：bbstable
名前 データ型 規定値 主キーかどうか IDかどうか Nullを許可
ID bigint NULL はい はい いいえ
MainID bigint NULL いいえ いいえ はい
PostUser nvarchar(10) NULL いいえ いいえ いいえ
PostIP nvarchar(20) NULL いいえ いいえ いいえ
PostTime datetime NULL いいえ いいえ いいえ
PostMsg nvarchar(255) NULL いいえ いいえ いいえ
PostDel bit 0 いいえ いいえ いいえ
※　「名前」の部分は，半角英数字
※　「はい」がチェックあり，「いいえ」がチェックなしです。
　　　⑦表を参考に管理者サイトへのログイン情報を格納するテーブルの設定をします。

図8　管理者サイトへのログイン情報を格納するテーブルの作成		 管理者サイトへのログイン情報を格納するテーブル（図8）の設定
テーブル名：bbsuser
名前 データ型 規定値 主キーかどうか IDかどうか Nullを許可
user nvarchar(10) NULL いいえ いいえ いいえ
password nvarchar(10) NULL いいえ いいえ いいえ
※　「名前」の部分は，半角英数字
※　「はい」がチェックあり，「いいえ」がチェックなしです。
　　　⑧表を参考に管理者サイトへのログインデータの設定をします。

図9　管理者サイトへのログインデータの入力		 管理者サイトへのログインデータの入力（図9）の設定
テーブル名：bbsuser
user password
任意 (第1レコードのみ有効)
（図10のサンプルは共に user として設定しています）

　　　エ　動作確認　　　


図10　動作確認

　　　 　データベースの作成が完了したら，動作確認をします。
　　　　　① 左下の「サイト」を選択し，上部リボン「実行」をクリックします。
　　　　　② 「Internet Explorer」を選択すると，ブラウザが起動し図2のような内容が表示されたら設置完了です。
　　　　　　※「ASP.NET Web ページ バージョンの選択」が選ばれていなければ最新バージョンに変更してください。


図11　ASP.NETのバージョン確認

　(3)　簡易アンケート
ア　仕様

イ　活用内容
　《設問入力（設問入力と選択肢の入力）》
　　　①アクセス方法： http：//localhost：(ポート番号)/Admin.cshtml
　　　②設問数は，最大20問となっています。
　　　　 最大設問数を変更する場合は，以下を変更してください(選択肢は，最大5個[変更不可])。
　　　　　・Answer.cshtml： 1行目のmaxnoの数値
　　　　　・Admin.cshtml ： 3行目のmostmaxの数値
　　　　　・Result.cshtml ： 1行目のmaxnoの数値
　　　③「登録」，「修正」，「削除」ボタンを押した段階でデータは，データベースに登録・修正・削除を完了します。

図12　アンケート設問入力

　《簡易アンケート入力》
　　　④ アクセス方法： http：//localhost：(ポート番号)/Default.cshtml
　　　　　　※　Default.cshtmlのみは，省略可能です。
　　　⑤ 各設問の回答は，一つのみの選択できます。
　　　⑥ 最後には，コメント欄があり未入力でも可能です。
　　　　　　※　テーブル作成時，「Comment」の「NULLを許可」を「はい」にしてあるため，未入力でも可能となります。
　　　　　　　もし，NULLを許可させない（未入力を許可しない）場合に対応する処置はしてありませんのでエラー表示で止まる場合があります。
　　　⑦ すべて入力が完了したら，一番下にボタン「回答送信」をクリックします。「回答送信」をクリック後，次の画面へ切り替わります。
　　　　　　※　登録確認やリロード等の対策はしていません。


図13　簡易アンケート入力

《回答のお礼のメッセージ》
　　⑧ このページが表示されたら，回答したデータがデータベースに登録されます。

図14　アンケートの回答後の表示

《アンケート集計結果》
　　⑨ アクセス方法： http://localhost：(ポート番号)/Result.cshtml
　　　　このページへのリンクの設定がありませんので，直接アドレスを入力してください。
　　⑩ 回答されたデータをデータベースから取り出し，グラフ化表示されます。
　　　　フォルダ「_CharImage」に保存されたグラフを表示しています。

図15　アンケートの集計結果

ウ　設置方法
（ア）　サイトの設置
　　　①ソースファイルのダウンロード(文字コードは，UTF-8)　ソースファイル
　　　②ダウンロードしたファイルを解凍すると以下のファイルやフォルダが展開されます。
　　　　・Default.cshtml：簡易アンケート入力
　　　　・Answer.cshtml：回答をデータベースに登録
　　　　・Admin.cshtml：設問入力
　　　　・Result.cshtml：回答をグラフ化
　　　　・style/mystyle.css：スタイルシート
　　　　・CharImage:グラフデータを保存するフォルダ(初期フォルダの中は空です)
　　　③「マイドキュメント」内の「My Web Sites」フォルダに「WebSite3」フォルダを作成し，上記のファイルやフォルダを保存してください。
　　　④サイト「WebSite3」として，WebMatrix2を起動してください。

（イ）　データベースの作成
　　　　　データベース名・テーブル名・各テーブルの定義は，プログラム作成上変更しないでください。
　《新規データベースの作成の手順》
　　　① 図16の左下「データベース」をクリックします。
　　　② 図16の右側「データベースをサイトに追加 (SQL Server Compact)」をクリックします。

図16　データベースの作成

《データベース名とユーザ名とパスワードの入力》
　　③ 図17の「新しいSQL Server データベース」に次の設定をします。
　　　・データベース： anke　（固定）
　　　・ユーザ名： sa（既定）
　　　・パスワード： （任意）
　　　・「パスワードを保存する」にチェック
　　　・入力後「OK」ボタンをクリック


図17　データベース名とユーザ名とパスワードの入力
　　
　　　④ 図18の左側「WebSite3」の下に「anke.sdf」のデータベース名が表示されます。
　　 ⑤ 次にテーブルの作成をします。図18の上部リボン「新しいテーブル」をクリックします。
　　 ⑥ 表を参考に設問と選択肢のデータを格納するテーブルの設定をします。


図18　設問と選択肢のデータを格納するテーブルの作成
 設問と選択肢のデータを格納するテーブル（図18）の設定
テーブル名：question
名前 データ型 規定値 主キーかどうか IDかどうか Nullを許可
no int NULL いいえ いいえ いいえ
Q nvarchar(100) NULL いいえ いいえ いいえ
A1 nvarchar(10) NULL いいえ いいえ はい
A2 nvarchar(10) NULL いいえ いいえ はい
A3 nvarchar(10) NULL いいえ いいえ はい
A4 nvarchar(10) NULL いいえ いいえ はい
A5 nvarchar(10) NULL いいえ いいえ はい
※　「名前」の部分は，半角英数字。
※　「はい」がチェックあり，「いいえ」がチェックなしです。
　　⑦ 表を参考に回答を格納するテーブルの設定をします。

図19　回答を格納するテーブル		 回答を格納するテーブル（図19）の設定
テーブル名：answer
名前 データ型 規定値 主キーかどうか IDかどうか Nullを許可
IP nvarchar(20) NULL いいえ いいえ いいえ
Date datetime NULL いいえ いいえ いいえ
Ans nvarchar(50) NULL いいえ いいえ はい
Comment nvarchar(100) NULL いいえ いいえ はい
※　「名前」の部分は，半角英数字。
※　「はい」がチェックあり，「いいえ」がチェックなしです。


　　　エ　動作確認
　　　　　 動作確認方法は，簡易掲示板の動作確認を参照してください。

　(4) その他
　WebMatrix2は，HTML5に対応しているため，スマートフォンやタブレット端末でも使用できます。

図20　タブレット端末の表示例（簡易アンケート)


４　公開手順


　上部リボンの「発行」ボタンをクリックすると，データがWindowsサーバにアップロードされ公開が完了します。Windowsサーバがない場合は，WebMatrix2をインストールしたパソコンから動的ウェブページを公開することができます。ただし，公開するパソコンのOSがWindows XP Professional／Vista（Home Preminum以外）／７（Home Preminum以外）でIISを利用する場合，「TCPでの同時接続数は最大10個まで」となっていることに注意してください。

(1)　Windows XP Professional搭載のパソコンで公開する手順を紹介します。
　　 《WebMatrix2の設定》
　　　　 ① WebMatrix2を使用して公開するサイトを読み込むには，図１の起動画面から「公開するサイト」をクリックし，公開するファイル（サイト）を選択します。
　　　　 ② 図21の「サイト」をクリック，「設定」を選択する(初期設定：WebSeite1)。
　　　　 ③　http：//localhost：(ポート番号) を http：//(IPアドレス)：(ポート番号)と変更します。
　　　　　　　(図21の例)　http：//192.168.1.63：8080
　　　　　　　(WebMatrix2は変更しても表示がlocalhostのままですが問題ありません)


図21　WebMatrix２の設定

《ポートの開放》
　　　④ Windows ファイアウォールのタブ「例外」より「ポートの追加」をクリックします。 

図22　ポートの開放

　　　⑤　名前：WebMatrix (任意)
　　　　　・ポート番号：(WebMatrixで設定したポート番号)
　　　　　　図23の例：8080
　　　　　・TCPを選択

図23　ポートの編集（自動起動の設定）

　≪自動起動の設定≫
WebMatrix2がインストールされたパソコンをサーバとして常時電源をＯＮのまま使用する場合は，次の設定(⑥～⑪)は不要です。
WebMatrix2がインストールされたパソコンを起動している間だけサーバとして使用する場合は，上記①～⑤と併せて次のタスクスケジュールの設定(⑥～⑪)をしておくと，WebMatrix2がインストールされたパソコンの電源をONにしたときに自動でサイト公開の設定(①～⑤)がされ，起動時の設定操作を省略することができます。

　　　⑥ 「スタート」ボタンより「すべてのプログラム」→「アクセサリ」→「システムツール」の順に選択し，「タスク」をクリックします。
　　　⑦ 「スケジュールされたタスクの追加」をダブルクリックします。
　　　⑧　実行するプログラムを一つ選択する。
　　　　　「C：\Program files\IIS Express\iisexpress.exe」(Windows XPの場合)を選択。

図24　新規タスク

　　　⑨ タスクの実行の選択で「コンピュータ起動時」を選択します。

図25　タスクの実行条件

　　　⑩ ユーザー名とパスワード(必須)を入力します。
　　　　　ここではログオンユーザの権限で実行させますので，Windowsのログオン時のユーザ名とパスワードを入力します。

図26　タスクのユーザ名とパスワードの入力

　　　⑪ 内容を確認して登録を完了します。

図27　タスクの登録



図28　タスクの登録された内容

　《動作確認》
　　　⑫ コンピュータを再起動します(ログオン画面のままにしておく)。
　　　⑬ ローカルネットワーク内にある別のコンピュータからブラウザを使って表示されるか確認をします。
　　　 　 図29の例：ブラウザのアドレスに http：//192.168.1.63：8080/ を入力して確認をします。（図29はwindows Vistaで確認した画面）

図29　タスクの登録後の動作確認

５　最後に

　LinuxベースのPHPで動的ウェブページを作成する従来の方法に比べ，このWebMatrix2により比較的容易に，しかも短時間で同様なウェブページを作成，公開することできました。さらにスマートフォンやタブレット端末にも対応しているので，今後を見すえたウェブサイト開発環境であると感じました。また，制限はありますが，Windows サーバがなくても開発で利用したパソコンで公開することもできますので気軽に試すこともできます。開発にあたっては、Microsoft冊子「WebMatrixでWebアプリをはじめよう！」が参考になりました。
　最後に，とても便利なWebMatrixが今後，発展していくことを期待しています。

参考資料

Microsoft冊子「WebMatrixでWebアプリをはじめよう！」
Microsoft，Windows，WebMatrix は，米国Microsoft Corporation の米国およびその他の国における登録商標です。