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

アイキャッチ-PC操作

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

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

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

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

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

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

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

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

XAMPPの使い方

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

導入前の確認事項

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

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

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

節税サラリーマンのPC環境

 

OS:Windows 10(64bit版OS)

 

XAMPP:7.2.0(PHP 7.2.0)

 

ブラウザ:Chrome(バージョン: 63.0.3239.132(Official Build)(64 ビット))

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の公式ページに行くと以下の画面が表示されます。

XAMPP-公式サイト-ダウンロードリンク

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

XAMPP-公式サイト-ダウンロード実施後

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

XAMPP-ダウンロードファイルを実行

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

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

XAMPP-インストール時の注意事項

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

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

XAMPP-インストール時のアラート

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

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

XAMPP-セットアップウィザード

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

XAMPP-セットアップウィザード-セレクトコンポーネンツ

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

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

インストール先フォルダの指定

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

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

XAMPP-bitnamiの確認

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

XAMPP-インストール準備完了

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

XAMPP-setup中

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

XAMPP-setup終了

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

初期設定

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

XAMPP-言語選択

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

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

XAMPP-コントロールパネル初期画面

XAMPPの起動方法と終了方法

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

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

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

起動方法

[スタートメニュー]から、[すべてのプログラム]→[XAMPP ]→[XAMPP Control Panel]を選択するだけで、「XAMPP コントロールパネル(XAMPP Control Panel)」が立ち上がります。

終了方法

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

コントロールパネル-Apache起動

必ずサービスの「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もデーターベースサービスです。

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

XAMPP-コントロールパネル-Apache-SQL起動確認

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

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

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

_XAMPP-コントロールパネル-Apache起動確認

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

※1の補足

節税サラリーマンの環境では、httpsで起動しました。WEBの記事を参照したところ、httpで起動している方も多くいるようです。

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

XAMPP-コントロールパネル-MySQL起動確認

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

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

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

①Shellを起動

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

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

XAMPP-コントロールパネル-MySQL-SHELL起動

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

XAMPP-コントロールパネル-MySQL-コマンドライン起動

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

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

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

XAMPP-コントロールパネル-MySQL-コマンドラインmysql

②MariaDB(MySQL)にログイン

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

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

XAMPP-コントロールパネル-MySQL-コマンドラインMariaDB

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

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

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

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

XAMPP-コントロールパネル-MySQL-コマンドライン-パスワード設定済

④Shellを終了

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

XAMPP-コントロールパネル-MySQL-コマンドライン-quit

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

phpMyAdminの認証設定

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

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

XAMPP-コントロールパネル-MySQL-admin実行

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

XAMPP-コントロールパネル-MySQL-エラー

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

XAMPP-コントロールパネル-MySQL起動確認

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

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

コントロールパネル-Apache起動

必ず「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有りになりますのでご注意ください。

※ 2の補足

BOMとは「Byte Order Mark」の略で、データの先頭に置かれる数バイトのデータことです。 現在主流で使われている文字コード(Unicode)が一般的になる前、日本(Shift-JIS)、ヨーロッパ(ISO-8859)、アメリカ(ASCII)それぞれで、別の文字コードがメインで使われていたことから、「このプログラムは「Unicode」で書かれていますよ」ということを、明確にわかるようにするため、このデータが追加されました。

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

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

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

XAMPP-configファイルの場所

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

※編集前にファイルのバックアップを取ることをお薦めいたします。やり方は、ファイルをデスクトップなどにドラッグ&ドロップすればokです。

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

XAMPP-configファイル編集対象

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

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

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

XAMPP-configファイル編集

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

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

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

XAMPP-コントロールパネル-Apache-SQL起動確認

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

XAMPP-コントロールパネル-MySQL-admin実行

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

XAMPP-phpMyAdminのログイン認証

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

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

XAMPP-phpMyAdminのログイン認証_パスワード

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

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

XAMPP-phpMyAdminの起動を確認

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

WordPressの設定

WordPressのインストール

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

  1. データベースの作成
  2. WordPressのインストール
  3. WordPressの初期設定
  4. WordPressのログイン確認
[/list] 以降の項目で、細かく手順をご説明します。

①データベースの作成

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

XAMPP-configファイル編集後_SQL_admin実行

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

XAMPP-phpMyAdminのログイン認証_パスワード

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

XAMPP-phpMyAdminの起動を確認

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

XAMPP-SQL-データベース

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

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

XAMPP-SQL-データベース作成

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

XAMPP-SQL-データベース作成-確認

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

②WordPressのインストール

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

XAMPP-wordpress-ダウンロード

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

XAMPP-wordpress-ファイル構成

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

※XAMPPのインストール先が、「C:\xampp」の場合です。

XAMPP-wordpress-ファイルコピー先

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

XAMPP-wordpress-設定開始

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

③WordPressの初期設定

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

XAMPP-wordpress-設定情報

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

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

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

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

XAMPP-wordpress-設定完了

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

XAMPP-wordpress-設定情報

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

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

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

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

XAMPP-wordpress-インストール終了

④WordPressのログイン確認

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

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

XAMPP-wordpress-ログイン完了

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

XAMPP-wordpress-サイト表示

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

XAMPP-wordpress-サイト表示-結果

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

まとめ

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

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

2 Comments

名乗るほどのものではありません

有用なページを作ってくださり感謝しております

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

という部分に全角文字「‘」が入っていました。
コピペで実行してみたところエラーが出たので、指摘いたします。

節税サラリーマン

ご指摘ありがとうございます。早速修正いたしました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です