【2018年版】XAMPP（ザンプ）を用いてテスト環境を構築する手順

こんにちは、節税サラリーマンです。

今回、WordPressテーマを変更することに決めました。

が、その前に、新しいテーマに変更した後も、サイトの表示が崩れてしまうなどの問題がないことを事前に確認する必要があります。

そこで、ローカルPC上にWordPressのテスト環境を構築して、新しいテーマに変更した場合に問題がないか？

問題があれば（確実に問題は発生すると思います）修正した上で、新テーマへの変更を行いたいと思い、無料のフリーソフト「XAMPP（ザンプ）」を導入しました。

この記事作成にあたり、こちらを参考にしました。

XAMPPを用いてテスト環境を構築する方法

XAMPPをインストールしてみよう！

XAMPPの使い方

XAMPPを使ってローカル環境にWordPressをインストールする方法

導入前の確認事項

導入前にいくつかのWebサイトを確認し、自分なりの手順を決めて、その通りに実施しても、いくつかてこずってしまう場面がありました。

これは、インストールするPCのプラットフォーム（OS）に依存する問題と、「XAMPP」のバージョンによる差異が理由だと思います。

よって、節税サラリーマンのPC環境とインストールした「XAMPP」のバージョンを、事前にご案内いたします。組み合わせが同じであれば、問題なくインストールできると思います。

XAMPP（ザンプ）とは

XAMPP は最も人気のある PHP 開発環境です

XAMPP は、完全に無償で MariaDB、PHP、および Perl を含んだ、簡単にインストールできる Apache ディストリビューションです。XAMPP オープン ソース パッケージは、インストールと利用が非常に簡単できるよう設定されています。

XAMPP は、完全に無償で MariaDB、PHP、および Perl を含んだ、簡単にインストールできる Apache ディストリビューションです。XAMPP オープン ソース パッケージは、インストールと利用が非常に簡単できるよう設定されています。

引用元：XAMPP Apache + MariaDB + PHP + Perl

XAMPPの綴りは、異なるプラットフォーム（Windows、Mac、Linuxなど）で動かすことができるプログラムを意味する言葉「クロスプラットフォーム」のX、Apache HTTP サーバ（Webサーバ）、MySQL（データベース）、PHP, Perl, の頭文字をつなげたものです。

Webアプリケーションを開発するには、これらのツールをひとつずつインストールする必要があり、Webサーバを構築したことがない節税サラリーマンのような初心者の手に負えるものではありません。

XAMPPのインストール

インストール

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

公式サイトはこちら

XAMPPの公式ページに行くと以下の画面が表示されます。

赤い枠で囲った、Windows向け「XAMPP」をダウンロードして下さい。ダウンロード開始すると以下のような画面が表示されます。

素晴らしい！次にダウンロードしたファイル（exe）をダブルクリックして実行します。

Windows10で実行すると、ユーザーアカウント制御の確認（キャプチャできず）が出ますので、「はい」を選んでインストールを進めてください。

64bit版のWindowsを使用している人は下図のようなダイアログが出現します。

問題はありませんので、Yesを押し、インストール進めて下さい。

その後、下記の警告（Warning）画面が出ますが、こちらも気合（？）でYesを押します。

表示されている注意事項は、「64bit版のWindowsの場合、C:¥Program Files (x86)以外に、インストールする必要がある」という内容です。

その後、セットアップウィザードが立ち上がります。

Nextをクリックしてセットアップを開始します。

インストールするコンポーネントを選ぶ画面になりますので、すべての項目にチェックが入っていることを確認してNextを押します。

すると、下記の画面が出ます。

先ほどの注意事項「64bit版のWindowsの場合、C:¥Program Files (x86)以外に、インストールする必要がある」を思い出していただき、適切なフォルダ（節税サラリーマンはデフォルト、Cドライブ直下を指定しました）を選択して、Nextを押します。

「BitNami for XAMPP」について表示されます。

XAMPPのインストールとは関係ないので、チェックを外し、「Next」をクリックすることをお薦めいたします。

Ready for Installが表示され、インストール準備が終わりました。Nextを押し、インストールを開始します。

インストール（セットアップ）開始しました。終了までだいたい3分程度かかりました。

ボックスにチェックが入っていることを確認し、Finishを押してインストール終了です。

初期設定

予想外の言語選択（英語orドイツ語）ダイアログが立ち上がります。

ドイツ語はかけらも分からないため、英語を選んでsaveを押します。

「XAMPP」が起動し、コントロールパネルが表示されます。

XAMPPの起動方法と終了方法

すべての設定が問題なく進めばよいのですが、初めてではちょっと難しいと思います。

設定につまずいてしまって、設定が完了する前にPCを終了する場合があると思いますので、起動方法、終了方法に関して簡単に説明します。

※特に終了時の手順は重要です。

起動方法

終了方法

下記の画像を参照いただき、

必ずサービスの「Stop」ボタンを押して、サービスの停止をして、そのあとに「Quit」ボタンで終了するようにしてください。

サービスの停止行わず、いきなり「Quit」ボタンで終了や、ウィンドウのバツ（×）マークを押して、コントロールパネルを閉じてしまうと、一見ソフトは終了して見えていますが、サービスは起動したままとなります。

この場合、後ほどご説明するセキュリティ設定を行っていないと、悪意のあるプログラムなどから攻撃される可能性がありますので、特に注意していただければと思います。

セキュリティの設定

※ここで節税サラリーマンは大きく躓きました。

XXAMPの仕様変更

2015年7月23日のアップデート(v5.6.11)で、データーベースが「MySQL」から「MariaDB」に変更され、「XAMPP」セキュリティを設定する「XAMPPセキュリティ」のページはなくなっています。

「MariaDB」は「MySQL」から派生したデーターベースですので、MySQLと同じように利用できます。「MySQL」と表示された場合、これは「MariaDB」の事だと読み替えていただければと思います。

ですので、ブログ記事で”「http://localhost/security/」にアクセス”のような記載がありましたら古い情報ですので、ご注意ください。

セキュリティ対策が必要な最低限の事項

①ネットワーク経由で外部からアクセスさせないために、MariaDBの管理者パスワードを設定する

②ブラウザでデーターベースを管理する”PhpMyAdmin”が、ネットワーク経由でもアクセス可能なため、管理者パスワードを設定する

セキュリティ設定

「Apache」と「MySQL（実際はMariaDB）」の起動と確認します。

上記の、XAMPPの起動方法と終了方法を参照し、「XAMPP コントロールパネル(XAMPP Control Panel)」を起動します。

「Apache」と「MySQL（実際はMariaDB）」のStartボタンを押して、「Apache」と「MySQL（実際はMariaDB）」を起動します。ちなみにMySQLもMariaDBもデーターベースサービスです。

正常に起動すると、下記のような画面になります

「Apache」と「MySQL」の背景色が黄緑になり、「Start」ボタンが「Stop」ボタンへ変化します。Apache、MySQLの横にある「PID(s)」と「Port(s)」の項目に、それぞれ番号が振られていれば正常にサービスが起動しています。

念のため、それぞれのadminボタンを押します。コントロールパネル上では起動状態ですが、正しく動いているか確認します。

ApacheのAdminボタンを押すと、ブラウザが立ち上がり「Welcome to AMPP for Windows 7.2.0」のページが表示されます。具体的には以下のような画面です。

ブラウザが自動的に立ち上がりhttps://localhost/dashboard/（※1）が表示されれば、正常に動いています。

MySQLのAdminボタンを押した場合、「phpMyAdmin」が表示されます。具体的には以下のような画面です。

この2つのページが表示されればWebサービスと、データーベースサービスが共に正常に動いています。

MariaDB(MySQL)のパスワードを設定

「XAMPP」のデータベース「MariaDB(MySQL)」のログイン情報は、ユーザ名はは「root」がデフォルトで設定されていますが、パスワードは未設定ですので、そのパスワードを設定していきます。

①Shellを起動

「MariaDB(MySQL)」管理ユーザ(root)パスワードが設定されていないので、コマンドモードでパスワードの設定を行います。

MariaDB(MySQL)のサービスを起動させたまま、「XAMPP コントロールパネル」右側のメニューから、「Shell」ボタンをクリックします。少々わかりづらい説明のため、下記の画像もご参照ください。

「Sell」ボタンをクリックすると、下記の画面が表示されます。

「Shell」は、一行ずつコマンドを入力することで、ファイルのコピー、フォルダーの変更など色々な事ができるツールです。

IT系の技術者や、ベテランPCユーザはDOSなのでおなじみの画面ですね。白抜きのエリアは、PCのユーザ名などが表示されます。

次は、「MariaDB（MySQL）」のコマンドを使って、ユーザーのパスワード変更を行います。「#」の横に、「cd mysql\bin」と入力して、「Enter」を押すと下記のような画面が表示されます。

②MariaDB(MySQL)にログイン

ちなみにコマンドを入力する行にある記号「#」は「プロンプト」と呼びます。先ほどご紹介のDOSのご利用経験があれば、「>」の方が、おなじみかも知れません。

先ほどと同様に、「#」の横に、「mysql -u root」と入力して、「Enter」を押すと下記のような画面が表示されます。

この画面が表示されれば、「MariaDB(MySQL)」にログインできています。

③rootユーザのパスワードを設定

MariaDB［(MySQL)］>の右に、「set password=password(自分のパスワード);」と入力し、「Enter」を押すと下記のような画面が表示されます。

※”自分のパスワード”は、任意の文字列を設定ください。

④Shellを終了

現在、「MariaDB(MySQL)」にrootユーザでログインしている状態です。接続を終了するコマンド「quit」を入力して「Enter」キーを押します。

先ほどと同じく「c:\xampp\mysql\bin」に戻ってきました。終了させるコマンド「exit」を入力して「Enter」キーを押すとウィンドウが閉じます。

phpMyAdminの認証設定

先ほどの項目「MariaDB(MySQL)の管理者用IDとパスワードを設定」で、rootユーザのパスワードを設定しました。

次は、「XAMPP コントロールパネル」を開いて、”MySQL”の「Admin」ボタンをクリックしてphpMyAdminにログインできるか確認してみます。

すると、前回とは違い、エラーメッセージが出ます。

前回は下記のような画面だったと思います。

phpMyAdminは、ログイン情報を設定ファイルから読み込む仕様になっていますので、このファイルの設定を変更してあげる必要があります。設定前に、「XAMPP コントロールパネル」を終了させる必要があります。

下記の画像を参照いただき、

必ず「Apache」と「MariaDB(MySQL)」の「Stop」ボタンを押して、サービスの停止をして、そのあとに「Quit」ボタンで終了するようにしてください。

phpMyAdminの設定ファイル(config.inc.php)を編集

まずは状況と目的を整理します

状況

現在、rootユーザのパスワードを設定したことで、「XAMPP コントロールパネル」で、MariaDB(MySQL)を起動することは出来ますが、現在、rootユーザのパスワードを設定したことで、Adminボタンを押すとエラーになってしまいます。

目的

このエラーを回避するため、phpMyAdminの設定ファイル「config.inc.php」を書き換えて、ログインの認証方法を変更します。

認証方法はいくつかあるのですが、今回は、phpMyAdminを開く時に、ログイン認証される設定に変更します。

①使用するテキストエディタの確認

ファイルを編集する際には、テキストエディタ（節税サラリーマンは”秀丸”を使っています）で開いて、編集、保存するのですが、この時、Windowsに標準でついているエディタ「メモ帳」は「BOM有り」で保存されてしまうため、使用しないでください。

このBOMが有ることで、正しいコードと認識できない場合もあります。今回の設定ファイルの変更では、BOMなし（※2）で保存しませんと正しく設定変更ができません。

「メモ帳しかない」という方には、無料ツールのTeraPadをオススメします。

ご注意点としては、ファイルを保存する際は、「UTF-8N」の文字コードで保存する点ですね。「UTF-8N」はBOMなしですが、「UTF-8」はBOM有りになりますのでご注意ください。

②phpMyAdminの設定ファイル「config.inc.php」の編集

節税サラリーマンは、「XAMPP」を「C:\xampp」にインストールしていますので、設定ファイルは「C:\xampp\phpMyAdmin\config.inc.php」にあります。

このファイルを”秀丸”や”TeraPad”で開きます。

ファイルを開いたら、「/* Authentication type and info */」を探します。

この赤枠で囲った項目を変更します。

20行目の”config”は、”cookie”に

22行目の”root”は削除します。

③設定ファイルの変更反映を確認

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

「Apache」と「MySQL（実際はMariaDB）」のStartボタンを押して、「Apache」と「MySQL（実際はMariaDB）」を起動します。

“MySQL”の「Admin」ボタンをクリックしてphpMyAdminにログインできるか確認してみます。

すると、前々回、前回とは違い、ログイン画面が出ます。

設定ファイルは間違いなく修正したのに、ログインの認証画面が表示されずエラーになるという場合は、余計なキャッシュが残っているのかもしれません。そんな時には、ブラウザの履歴やキャッシュの削除をしてみて下さい。

phpMyAdminの認証画面で、設定したパスワードを使ってログインする

ユーザ名には「root」を、パスワードには先ほど設定したパスワードを入力して実行ボタンをクリックして下さい。

「phpMyAdmin」の管理画面が表示されます。

長くなりましたが、パスワードの設定及びphpMyAdminのログイン認証の設定が完了しました。これで、必要最低限のセキュリティは確保できたことになります。

WordPressの設定

WordPressのインストール

WordPressのインストールは以下の手順で行います。

1. データベースの作成
2. WordPressのインストール
3. WordPressの初期設定
4. WordPressのログイン確認

①データベースの作成

「XAMPP コントロールパネル」を起動して、MySQLの「Start」を押し、正常に起動していることを確認します。

「Admin」をクリックし、管理ページを開き、ユーザ名”root”と、パスワードを入力します。

ログインが正常に終了すると、下記のような画面が開きます。

管理画面左上にある、データベースタブを開きます。

タブを開くと、下記の画面が表示されますので、「データベースを作成する」の項目に、任意のデータベース名を入れ、作成ボタンをクリックします。

節税サラリーマンは「wp_test_01」としました。

データベース「wp_test_01」を作成しました。というメッセージが表示されデータベースが追加されていれば完了です。

ログイン直後の画面に戻ると、データベース「wp_test_01」が作成されていることを確認できます。

②WordPressのインストール

まず、WordPressの公式サイトより、最新のWordPress日本語版をダウンロードします。

ZIP形式でダウンロードされますので、デスクトップなどで解凍します。内容を確認すると、下記のようなファイル構成になっています。

これらのファイルを、「C:\xampp\htdocs（※）」にコピーします。コピーする際には、解凍したフォルダ「wordpress」丸ごとコピーする点は注意が必要です。

コピーが完了しましたら、WordPressのトップページにアクセスします。アドレスは、「http://localhost/wordpress/」です。

このような画面が表示されれば、インストール完了です。

③WordPressの初期設定

先ほど画面から、「さあ、始めましょう！」をクリックします。次に下記のような画面が表示されますので、必要事項を入力します。

データベース名には、先ほど作成したデータベース名を入力します。

節税サラリーマンの場合、「wp_test_01」となります。

ユーザー名は、MariaDB(MySQL)のパスワード設定で出てきた「root」を入力します。

パスワードも同様に、MariaDB(MySQL)で設定したパスワードを入力します。

入力が終わりましたら、送信ボタンをクリックします。その後、下記の画面が表示されますので必要事項を埋めていきます。

サイト名：ブログサイト名を入力

ユーザー名：WordPress　管理画面ログイン名を入力
（節税サラリーマンは「root」としました。）

メールアドレス：サイト管理者のメールアドレスを入力

入力が完了したら「WordPress をインストール」をクリックすると、下記の画面に切り替わり、インストールが完了しました。

④WordPressのログイン確認

先ほどの画面の左下、ログインをクリックすると、WordPressのログイン画面が表示されます。

先ほど入力した、ユーザー名、パスワードを入力して、ログインボタンをクリックします。

正常にログインできますと、こちらの画面が表示されます。

上部にあるナビゲーションの一番左、「[ブログサイト名（節税サラリーマンの場合は「テストサイト」）]にマウスを乗せると「サイトを表示」のメニューが表示されますので、そちらをクリックします。

このような表示が出れば、WrodPressの設定は完了です。

まとめ

いかがだったでしょうか？

手順は細かいですが、ひとつひとつこなしていただくことで、XAMPPの導入は問題なく実施できると思います。