図１ 操作イメージ
生徒実習室用のWindowsサーバを活用して，生徒が個別学習等で利用できるｅラーニングシステムを構築します。学習ページはPHPとMySQLを用いて，視聴した内容に合わせた質問ができるようにします。また，生徒の解答データを記録する管理ページも作成し，学習状況が把握できるようにします。
教員，生徒それぞれの操作のイメージです。「教員の作業」③で作成する学習ページを蓄積することで，継続的に活用できるeラーニングのライブラリを作成することもできます。
図１ 操作イメージ
(1) 使用環境
今回使用したコンピュータの環境は以下のとおりです。
| OS | CPU | メモリ | HD | |
| サーバ | Microsoft Windows server 2003 R2 Standard Edition Service Pack2 | Intel(R) Pentium(R)Dual CPU E2160 1.80GHz | 2.5GB | 60GB |
| クライアント | Microsoft Windowsvista Buisiness Service Pack1 | Intel(R) Pentium(R) CPU G645 @ 2.93GHz | 3.0GB | 100GB |
(2) 開発環境
| 使用ソフトウェア | XAMPP 1.8.3 |
| 主な特徴 | Apache2.4.7 MySQL 5.5.34 PHP 5.4.22 phpMyAdmin 4.0.9 |
XAMPPのインストールには，メモリが64MB以上，ハードディスクの空き200MBが最低要件です。
(3) XAMPPの導入
XAMPPは，Apache，MySQL，PHP，Perlなど，ウェブアプリケーションの実行に必要なフリーウェアがパッケージングされたオープンソースソフトウェアです。
XAMPPは以下のサイトからインストールします。
XAMPPダウンロードページ（http://sourceforge.jp/projects/xampp/）
ア XAMPPのインストール
インストーラをダウンロードして実行します。
図２ インストローラのダウンロード
インストールを実行すると，導入するコンポーネントを選択する画面が表示されます。
初期設定では全てにチェックが入っているので，必要な Apache，MySQL，PHP，phpMyAdmin 以外のチェックを外し（図３），[Next]をクリックします。
図３ コンポーネントのセレクト
イ XAMPPの環境設定
インストール後に，C:\xampp\xampp-control.exe を起動します
図４ XAMPP Control Panel のメイン画面
図５のようにApacheとMySQLの[Service]にチェックを入れ，[Actions]の[start]をクリックします。
他のサービスが既にポート80を利用している場合は，Apacheの[Config]（httpd.conf）でポートの設定を80から8080などへ変更します。
図５ ApacheとMySQLのサービス開始後
「XAMPP Control Panel」のMySQLの[Admin]をクリックして，phpMyAdminを起動し，ログイン用のテーブルと，生徒の学習結果を記録するテーブルを作成します。
図６ phpMyAdmin の初期画面
(1) 文字コードの設定
一般設定のサーバ接続の照合順序を図７のように，sjis_janpanese_ciに設定します。
図７ 文字コードの設定後
(2) データベースの作成
タブの[データベース]を選択して，データベースの操作画面（図８）を表示します。
[データベースを作成する]のテキストボックスに「sample」と入力（今回はデータベース名を「sample」とする）して，[作成]をクリックします。
図８ データベース用画面
(3) ログインテーブルの作成
データベース「sample」を選択すると，図９の画面が表示されます。
図９ データベース「sample」の初期画面
タブの[SQL]をクリックしてSQLの入力画面を表示します。
図10のようにソースを入力します。
ソースにある"user"はログインユーザ登録用のテーブル名（何でもよい），"name"，"pass"はそれぞれIDとパスワードを記録するフィールド名（何でもよい）になります。
入力が完了したら，[実行]をクリックするとログインユーザ登録用のテーブルが作成されます。その際，必ず入力画面の上に「データベースsample上でクエリを実行する」となっていることを確認してください。
今回作成したソースはこちらからダウンロードできます。
図10 テーブル「user」を作成するためのSQL
図11 SQLが実行された画面
(4) 学習結果テーブルの作成
再びSQLの入力画面を表示します。
図12のようにソースを入力します。
ソースにある"kekka"はテーブル名（適宜），"name"はログインユーザ登録用のテーブルで設定したフィールド名と同じフィールド名にします。
"mon1"，"mon2"は生徒の解答を記録するフィールド名（適宜）で，今回は２問作成するので二つ用意します。
"maru"，"batu"は正答数，誤答数を記録するフィールド名（適宜）です。
入力が完了したら，[実行]をクリックすると学習結果を記録するテーブルが作成されます。
今回作成したソースはこちらからダウンロードできます。
図12 テーブル「kekka」を作成するためのSQL
図13 SQLが実行された画面
(5) ログインIDとパスワードの登録
再びSQLの入力画面を表示します。
図14のようにソースを入力します
今回は３件のIDを発行します。 1A01はログインID，abcdeはパスワードになります。
入力が完了したら，[実行]をクリックするとログインユーザ登録用のテーブルに生徒のログインIDとパスワードが記録されます。
タブの[表示]を選択すると，テーブルに記録されたデータを確認することができます（図15）。
今回作成したソースはこちらからダウンロードできます。
図14 生徒のログインIDとパスワードを記録するためのSQL
図15 記録されたデータが表示される画面
ログインするためのページを作成します。
既にソースが作成してあるのでこちらからダウンロードしてください。
ダウンロードしたファイルをエディタなどで開き，変数$host，$name，$pass，$dbにそれぞれ，サーバの名前，MySQLにログインするためのユーザ名，パスワード，４(2)で作成したデータベース名を設定します。
なお，ソース中の"test2.php"はこの後作成する「学習ページ」のファイルを指定しています。
以上，ソースを書き替えた後，拡張子を.phpに変更してからtest1.phpで保存すれば完成します。
作成したページは，C:\xampp\htdocsにフォルダ（今回は「free」）を作成して，freeのフォルダ内に保存します。
ブラウザを起動し，URLの欄に
http://localhost/free/test1.php
と入力してEnterキーを押すと，図16のようなページが表示されます。
図16 ログインするためのページ
動画を見て問題を解くためのページを作成します。
既にソースが作成してあるのでこちらからダウンロードしてください。
ダウンロードしたファイルをエディタなどで開きます。ソース中の"test.avi"は，動画ファイルです。視聴させたい動画ファイルの名前に置き換え，動画ファイルはC:\xampp\htdocs\freeのフォルダ内におきます。
※テスト用の動画ファイルが必要な場合，こちらからダウンロードしてください。。
"test3.php"はこの後作成する「解答後ページ」のファイルを指定しています。
また，例題１，例題２及び選択肢１～４は，それぞれ問題文と選択肢に書き替えます。
以上，ソースを書き替えた後，拡張子を.phpに変更してからtest2.phpで保存すれば完成します。
作成したページは，ログインページと同様に，C:\xampp\htdocs\freeのフォルダ内に保存します。
ブラウザを起動し，URLの欄に
http://localhost/free/test2.php
と入力してEnterキーを押すと，図17のようなページが表示されます。
図17 学習ページ
解答後ページの作成をします。
既にソースが作成してあるのでこちらからダウンロードしてください。
ダウンロードしたファイルをエディタなどで開きます。サーバの名前，MySQLにログインするためのユーザ名とパスワードなどを設定してから，拡張子を.phpに変更してtest3.phpで保存すれば完成します。
作成したページは，ログインページと同様に，C:\xampp\htdocs\freeのフォルダ内に保存します。
ブラウザを起動し，URLの欄に
http://localhost/free/test3.php
と入力してEnterキーを押すと，図18のようなページが表示されます。
図18 解答後ページ
以上で一通りの設定が完了するので，test1.phpのログインページでログインIDとパスワードを入力して，動作確認をしてください。
実習室などのイントラネット内での公開方法について紹介します。
(1) バーチャルホストの設定
C:\xampp\apache\conf\extraフォルダ内にあるhttpd-vhosts.confファイルをエディタなどで開きます。
以下のソースを最後に追加します。
| バーチャルホスト設定のためのソース |
| NameVirtualHost *:80 <VirtualHost *:80> DocumentRoot "C:/xampp/htdocs/free/" ServerName free </VirtualHost> |
続いてC:\Windows\System32\drivers\etcフォルダ内にあるhostsファイルをエディタなどで開きます。
以下のソースを最後に追加します。ipv6の::がある場合は削除してください。
| バーチャルホスト設定のためのソース |
| 127.0.0.1 free |
(2) クライアントの設定
クライアント側も設定が必要になります。クライアント側のC:\Windows\System32\drivers\etcフォルダ内にあるhostsファイルをエディタなどで開き，以下のソースを最後に追加します。ipv6の::がある場合は削除してください。
| バーチャルホスト設定のためのソース |
| サーバのIPアドレス free |
以上の設定を完了させてからクライアント側でブラウザを起動し，URLの欄に
http://free/test1.php
と入力してEnterキーを押すと，ログインページを表示させることができます。
学習状況を確認するためのページを作成します。
既にソースが作成してあるのでこちらからダウンロードしてください。
ダウンロードしたファイルをエディタなどで開き，test4.phpの名前で保存すれば完成します。
作成したページは，ログインページと同様に，C:\xampp\htdocs\freeのフォルダ内に保存します。
ブラウザを起動し，URLの欄に
http://localhost/free/test4.php
と入力してEnterキーを押すと，学習結果は図19のように表示されます。
図19 学習状況確認ページ
今回紹介したのは，簡易なeラーニングシステムの構築法です。
今回紹介した方法を基礎にして，更に工夫をすることで使いやすいシステムにすることが可能です。例えば，問題を記録するデータベースを作成し，データベースから必要に応じて問題を取り出すことができる学習ページなどの作成が考えられます。生徒の学習状況確認ページのデータを利用して，学習到達度を分析し授業に生かすことも可能です。また，授業の動画を１年間にわたって撮影し記録することで，本格的なeラーニングのシステムを構築することも可能です。
生徒にとって，eラーニングは従来の学習方法と異なり，自分のペースで学習ができ，また習熟度に応じての学習が可能となるというメリットがあります。また教員にとっては，業務の効率化，成績管理の容易さなどのメリットが考えられます。反面，デメリットとして生徒の疑問にその場での解決が難しいこと，導入に当たって教員の準備に手間がかかること，生徒の学習状況がデータからしか読み取れないことなどがあります。通常の授業とeラーニングシステムを上手に併用し，より効率的・効果的な学習ができるよう研究を進めていきたいと思います。
apache friends - xampp （http://sourceforge.jp/projects/xampp/）
コードジン（http://codezine.jp/）
TeraPad（http://www5f.biglobe.ne.jp/~t-susumu/library/tpad.html）
PHPプログラミングの教科書 西沢 直木
Microsoft，Windowsは，Microsoft Corprationの米国及び各国における商標または登録商標です。
その他，本コンテンツに掲載されているすべてのブランド名と製品名，商標及び登録商標はそれぞれの帰属者の所有物です。本コンテンツでは©，®，TM などは明記してありません。