XAMPPをを使ってパソコン内にテスト環境を設置する方法

2022年6月16日2022年6月17日

ローカルPC（windows）上でWordPressを動かすために、無料のフリーソフト「XAMPP」を使ってテスト環境を構築していきます。
Macでも使えますがMAMPPや最近だとlocal by flywheelを使う方が増えていますよね。

私の場合は、最終的に開発環境のディレクトリなどを変更したいためXAMPPを使っています。
今回はローカル環境のバージョンが古くなってきたため、新しいものを設置し直していきたいと思います。

XAMPPとは

XAMPP（ザンプ）は、WindowsにApache、MySQL、PHPの環境をインストールすることができるアプリケーションです。
XAMPPの名前は、Apache HTTP サーバー（Webサーバー）、MySQL（データベース）、PHP, Perl, の頭文字と様々なOSに対応するというクロスプラットフォームのXをつなげたものです。
Macには、XAMPPと似たApache、MySQL、PHPが使えるMAMP（マンプ）というアプリケーションもあります。

XAMPPの設定方法

XAMPPをインストールする
XAMPPの初期設定を行う
1. ApacheとMySQLの設定
2. セキュリティの設定
3. 文字化けとエラー対応
4. MySQLの設定

それでは始めていきましょう！

1）XAMPPをインストールする

STEP

XAMPPをダウンロードする

まずは、公式サイトからXAMPPをダウンロードしていきます。

XAMPP Installers and Downloads for Apache Friends

XAMPP公式サイト XAMPP is an easy to install Apache distribution containing MariaDB, PHP and Perl.

XAMPPの公式ページに行くとこの画面が表示されます。
Windows向け「XAMPP」を押してダウンロードします。

STEP

XAMPPをインストールする

ダウンロードしたファイルをダブルクリックして下さい。
クリックすると「XAMPPのインストーラーファイル(.exe)」のダウンロードが自動で開始されます。

ユーザーアカウント制御の確認は「はい」を選択してインストールを進めてください。

64bit版のWindowsを使用している人はこのようなダイアログが出現しますが、Yesで問題ありません。

内容としては「ウイルスソフトを使用しているようなので、インストールが遅くなったり支障をきたす場合があります。」という内容が書かれています。

こちらもOKで問題ありません。

内容としては「ユーザーアカウント制御（UAC）が有効になっているため一部の機能が制限される可能性があります。C:¥Program Files (x86)にインストールするかUACを解除してください。」というものです。

STEP

XAMPPをインストール、セットアップする

Nextを押して、進めます。

インストールするデータの内容をここで選択できます。選択できたら「Next」をクリックします。

次に、XAMPPをインストールしたい先のフォルダを選択します。初期設定はC:¥xamppです。
問題なければ、「Next」をクリックします。
変更する場合は、フォルダマークをクリックしてお好きなフォルダを選択します。

私の場合はCドライブが圧迫されないように、空き容量の多いDドライブを選択しています。

言語を選択します。

English（英語）
Deutsch（ドイツ語）

このふたつから選ぶことができます。

「BitNami for XAMPP」について表示されます。
これはXAMPPのインストールとは関係ないので、チェックを外してから「Next」をクリックし、インストールを続行しましょう。

インストールが始まります。

XAMPPのインストールが終了したら、この画面になります。
動作を確認するために「Do you want to start the Control Panel now?（今すぐコントロールパネルを起動しますか？）」にチェックが入っていることを確認し、「Finish」をクリックします。

2）XAMPPの初期設定を行う

STEP

XAMPPを起動します

「XAMPP」を起動します。
画像はデフォルトのまま全てインストールした状態のものです。

STEP

ApacheとMySQLの設定

正常に起動するとApacheとMySQLの背景が淡青緑のような色になって、StartボタンがStopボタンに変わります。
問題がなければ、正しく動いているか確認します。

まずはWebサーバApacheのAdminボタンを選択して下さい。

正常に動いている場合は、ブラウザが起動し、http://localhost/dashboard/のページが表示されます。

STEP

セキュリティの設定
MySQLのrootユーザーのパスワードを変更する

Shellを使用したパスワード変更という方法もあるのですが、こちらは初心者向けではないため今回はphpMyAdminを使ったパスワード変更手順をご紹介します。

[XAMPP Control Panel]にあるMySQLの[Admin]ボタンをクリックします。

クリックすると、phpMyAdminが起動します。

起動したら、上部のボタン一覧の中にある、ユーザアカウントをクリックします。

ユーザーの一覧から、ユーザー名列の値が「root」、ホスト名列の値が「localhost」となっている行の[特権を編集]をクリックします。

phpMyAdminのChange passwordをクリックします。

パスワードを変更する欄の、パスワード入力ボックスに新しく設定するパスワード、再入力ボックスに同じパスワードを入力して実行をクリックします。

config.inc.php内にパスワードを記載する

C:/xampp/phpMyAdmin/config.inc.php

$cfg['Servers'][$i]['password'] = '設定したパスワード文字列';

開発環境を別のフォルダで行いたい場合

通常、XAMPPを使った開発の場合はインストールしたフォルダ内に作成される下記のフォルダの中がそれにあたります。

C:\xampp\htdocs

ただ、同ドライブ内だと容量的に使い勝手が良くなかったり、Dropboxなどのクラウド内で開発しておきたい場合などはドキュメントルートを変更することができます。

例）ドキュメントルート(DocumentRoot)をDドライブに変更

一度、ApacheとMySQLを停止（Stop）する
/apache/conf/httpd.conf　をメモ帳などで開く
その中の、下記の2箇所を変更して保存
1. DocumentRoot “C:/xampp/htdocs”
2. <Directory “C:/xampp/htdocs”>
保存したら、再度ApacheとMySQLを起動（Start）

変更前
DocumentRoot "D:/xampp/htdocs"
<Directory "D:/xampp/htdocs">

変更後
DocumentRoot "D:/Client"
<Directory "D:/Client">

変更して保存が完了したら、ドキュメントルートに指定したフォルダ内に下記のphpファイルを設置して接続を確認します。

※実行するときの注意点として、ドキュメントルート変更設定前からXAMPP Control PanelのApacheなどを起動していた場合、XAMPP Control Panelの再起動が必要です。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello PHP!</title>
</head>
<body>
<?php
    print 'Hello PHP!';
?>
</body>
</html>

http://localhost/hello.php

こんた

上記に接続して、「Hello PHP!」と表示されれば成功です！
お疲れ様でした！

URLをコピーしました！

新規集客をやめても、
売上が安定するホームページを作るには？

ホームページを作ったのに、
集客に役立たずランニングコストだけが発生……
こんなケースが続発しています！

制作実績2500件以上、成果を出し続けてきたエンジニアが
「集客できるホームページ」を提案します。

集客できるホームページの秘策を知る

この記事を書いた人

今田紋奈

埼玉県川口市で、自営業や起業家のホームページ制作を行っいます。
Web制作会社に7年務めたのち独立。Web制作歴12年、2500件以上のサイト制作に携わり、WordPressサイトを得意とし「作って終わり」にしない、結果が出るサイトであることを大切にしてます。「10人いれば10通りの最適なサイトがある」という信念のもと、型にハマったサイトづくりではなく、マーケティングから考えた、その人のビジネスにとって一番最適なサイトをご提案。技術面で不安のあるWebデザイナーのシステム面のサポートも行っております。