初めてのXAMPP – ドキュメントルートの場所と基本的な環境整備

この記事では「初めてのXAMPP～ドキュメントルートの場所と基本的な環境整備」と題して、XAMPPをインストールしたばかりの方が、XAMPP上で基本的な制作・開発の一歩を踏み出すことができるためのガイドをしていきたいと思います。

そのため、この記事内容の前提は「XAMPPをインストールしたばかり」であること、つまり、なにも設定をいじっていない状態であることです。

“http://localhost”を表示してみる

XAMPPコントロールパネルを起動し、「Apache」と「MySQL」を起動します。

ブラウザを起動して「http://localhost」にアクセスしてみましょう。次のような画面が表示されました。

この画面は、XAMPPのダッシュボード画面です。ここで注目して欲しいのは、ブラウザのアドレス欄に表示されているURLです。先ほど「http://localhost」にアクセスしたのに、現在のURLは「http://localhost/dashboard/」になっています。「http://localhost」から「http://localhost/dashboard/」に自動的に遷移したわけですが、この仕組みは、後で確認します。

PHPの情報を表示してみる

XAMPPのダッシュボード画面の最上部にあるメニューから「PHPInfo」をクリックします。

すると、「http://localhost/dashboard/phpinfo.php」というURLが開き、次のような画面が表示されました。

この画面は、よく「PHP Info」と呼ばれる、PHPの情報画面です。一番上に表示されているバージョン情報をはじめ、動作中のPHPに関する様々な情報が表示されています。ちょっと見づらいですが、画面右端のスクロールバーの状態を見ていただくと、この画面はとても長い画面であることが分かると思います。

PHPの情報画面は、制作・開発をしていて、動作中のPHPのバージョンを確認したい時や、PHP本体で何かエラーが発生した場合などに利用したりします（PHPが読み込んでいるモジュールの状態を確認したりとか）。

「phpMyAdmin」を表示してみる

次に「phpMyAdmin」を表示してみましょう。「phpMyAdmin」は「MySQL」のデータベースを画面で管理できる便利なツールです。

XAMPPのダッシュボード画面の最上部にあるメニューから「phpMyAdmin」をクリックします。

「phpMyAdmin」が起動しました。

「データベースサーバ」の「サーバーの種類」に「MariaDB」と表示されており、実際にXAMPPに搭載されているデータベースは「MariaDB」であることが確認できます。

XAMPPのドキュメントルートを確認してみる

ここから少しXAMPPの中に潜っていきます。まずはXAMPPのドキュメントルートの中身を見てみましょう。

XAMPPの標準のドキュメントルート（何も設定を変更していない場合のドキュメントルート）は「C:¥xampp¥htdocs」です。

ブラウザから「http://localhost」でアクセスすると、「C:¥xampp¥htdocs」の中にある「index.html」または「index.php」がブラウザに出力されます。XAMPPの場合は、上のスクリーンショットのように「index.html」は存在しておらず「index.php」がブラウザに出力されます。

XAMPP標準のドキュメントルートは上記のとおり「C:¥xampp¥htdocs」ですが、これは設定で変更ができます。また「index.html」と「index.php」が両方とも存在した場合に、どちらを優先して出力するか、といった設定もできます。ただし、制作・開発の現場では「index.html」と「index.php」の両方が存在するような事態はあまりないし、歓迎されません。

自動遷移した理由

この記事の最初の方で「http://localhost」にアクセスしたら「http://localhost/dashboard/」に自動遷移した、ということがありました。

ブラウザに最初に出力されるのは「C:¥xampp¥htdocs¥index.php」のハズです。ということは、「index.php」に自動遷移するような仕掛けがしてあるのではないでしょうか。「C:¥xampp¥htdocs¥index.php」をテキスト・エディタで開いて確認してみましょう。

<?php
	if (!empty($_SERVER['HTTPS']) && ('on' == $_SERVER['HTTPS'])) {
		$uri = 'https://';
	} else {
		$uri = 'http://';
	}
	$uri .= $_SERVER['HTTP_HOST'];
	header('Location: '.$uri.'/dashboard/');
	exit;
?>
Something is wrong with the XAMPP installation :-(

上のコードは「C:¥xampp¥htdocs¥index.php」の全てです。とても短いコードです。このコードでは、以下の処理を行っています。

■PHPが動作している場合
・「https」でのアクセスが有効なら「https://localhost/dashboard/」にリダイレクト(自動遷移)する。
・「https」でのアクセスが無効なら「http://localhost/dashboard/」にリダイレクト(自動遷移)する。

■PHPが動作していない場合
『Something is wrong with the XAMPP installation :-(』というエラーメッセージを表示する。

今回の例ではPHPは動作していて「https」でのアクセスは無効だから、「http://localhost/dashboard/」に自動遷移した、というわけです。

その結果「C:¥xampp¥htdocs¥dashboard¥index.html」が、ブラウザに表示されることになったわけです。

一番シンプルな制作・開発環境

XAMPPのドキュメントルートは「C:¥xampp¥htdocs」ですから、この下でウェブ・サイトの制作なり、システムの開発をするのが、一番シンプルで面倒が無い方法です。

しかし、「C:¥xampp¥htdocs」下で制作・開発を行うとしても、現在そのフォルダの下には初期インストールされた複数のフォルダが居座っていて、これらは邪魔です。

ここは、シンプルに「htdocs」をリネームして退避し、新しく空の「htdocs」フォルダを作ることにしたいと思います。

新しく作成した「htdocs」フォルダには、現在ファイルは何も入っていません。ブラウザで「http://localhost」にアクセスしてみると、次のスクリーンショットのような画面が表示されました。

フォルダが空の状態のときに、このような画面が表示されるのは、インターネットに公開されているウェブ・サイトでは絶対にあってはならない状態ですが（ウェブ・サーバーの設定をちゃんとやる）、これはパソコン上の制作・開発環境ですから、OKとします。

なお、この状態でも「phpMyAdmin」の利用は可能です。ブラウザで「http://localhost/phpmyadmin/」にアクセスすれば、「phpMyAdmin」の画面が表示されます。

ドキュメントルートが空の状態なのに、なぜ「http://localhost/phpmyadmin/」にアクセスすると、「phpMyAdmin」が表示されるのでしょうか？
その理由は「Apache」の設定ファイルに、そのような設定がしてあるからなのですが、その解説をこの記事でするのは、ちょっと複雑になるので、割愛します。

これで、とりあえずXAMPPを使った制作・開発の一歩を踏み出せる環境を作ることができました。

この記事では、XAMPPデフォルトのドキュメントルートを使って制作・開発環境を整えましたが、オススメなのは、ドキュメントルートのフォルダを変更したり、バーチャルホストを使用する方法です。

あわせて読みたい

XAMPPのドキュメントルートを変更してみよう

あわせて読みたい

XAMPPでバーチャルホスト – 複数のドキュメントルートで複数サイトの管理を楽にする