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

2015

9.1

icatch04

ローカルPC(windows)上でWordPressを動かすために、無料のフリーソフト「XAMPP」を用いて、テスト環境を構築する方法を解説します。

XAMPPとは

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

MAMPに関してはこちらの記事を参考にください。
MAMPを用いてテスト環境を構築する方法

XAMPPの設定方法

XAMPPを設定するには、以下の手順で行います。

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

インストール

まずは下記のサイトよりXAMPPをダウンロードしてください。

XAMPP公式サイト

XAMPPの公式ページに行くと以下の画面が表示されますので、Windows向け「XAMPP」を【Download】して下さい。

xampp

ダウンロードしたファイルをダブルクリックして下さい。

xampp

クリックすると「XAMPPのインストーラーファイル(.exe)」のダウンロードが開始されます。
ユーザーアカウント制御の確認は「はい」でインストールを進めてください。

xampp

64bit版のWindowsを使用している人は下図のようなダイアログが出現しますが、
内容としては、C:¥Program Files (x86)以外にインストールしてくださいということです。
問題はないので、Yesを押し、進めて下さい。

xampp

次もOKで問題ありません。

xampp

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

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

xampp

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

xampp

約1〜2分でインストールが完了します。
インストールが完了しましたら、「閉じる」をクリックします。

xampp

XAMPPのインストールが終了したら、動作を確認するために「Do you want to start the Control Panel now?」にチェックが入っていることを確認し、「Finish」をクリックします。

xampp

初期設定

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

xampp

【ApacheとMySQLの設定】
正常に起動するとApacheとMySQLの背景が淡青になって、StartボタンがStopボタンに変わります。
問題がなければ、正しく動いているか確認します。まずはWebサーバApacheのAdminボタンを選択して下さい。

xampp

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

【セキュリティの設定】

http://localhost/security/にアクセスします。
そうすると、
http://localhost/security/splash.phpにリダイレクトされて、言語選択画面が出ますが、
以前のバージョンではあった日本語のページがなくなっています。

ちなみに、ここの各言語のリンク先は、http://localhost/security/lang.php?[言語]になっています。
選択することでlang.phpが、後ろに付いている言語の文字列(jp、enなど)のみが書かれた、lang.tmpというファイルを作ります。
その後は、このファイルの有無で初期画面splash.phpかindex.phpを表示するか、またどの言語で表示するかを決めています。

そのため以下のURLにアクセスします。
http://localhost/security/lang.php?jp

これで、日本語が指定されます。
ただし、表示は文字化けとエラーの状態になります。

xampp

【文字化けとエラー対応】
文字化けの原因は、ファイルの文字コードがShiftJISになっているためです。
また、エラーの原因は、日本語の翻訳ファイルja.phpが存在しないためです。

では、対応していきます。
まずは、TeraPadや秀丸のようなテキストエディタを用意ください。
※Windowsの標準のエディタである「メモ帳」はBOM有りで保存されてしまうため、管理画面が真っ白になる可能性があります。

TeraPad

まずは以下のファイルを修正します。
C:\xampp\security\htdocs\lang\en.php
C:\xampp\security\htdocs\lang\jp.php

上記のファイルをTeraPadなどで開き、UTF8形式で保存します。
TeraPadを使用の場合は、「ファイル」→「文字/改行コード指定保存」から文字コードにUTF-8Nを選択して保存してください。

xampp
xampp

また、日本語のファイル(jp.php)を開くと、何故か各言語の記述が抜けていますので追加しておきましょう。

	$TEXT['navi-languages'] = "各国語";

以下の記述を追加してください。

	$TEXT['navi-languages'] = "各国語";
	$TEXT['navi-english'] = "英語";
	$TEXT['navi-german'] = "ドイツ語";
	$TEXT['navi-spanish'] = "スペイン語";
	$TEXT['navi-french'] = "フランス語";
	$TEXT['navi-italian'] = "イタリア語";
	$TEXT['navi-dutch'] = "オランダ語";
	$TEXT['navi-norwegian'] = "ノルウェー語 ";
	$TEXT['navi-polish'] = "ポーランド語";
	$TEXT['navi-portuguese'] = "ポルトガル語";
	$TEXT['navi-slovenian'] = "スロベニア語";
	$TEXT['navi-chinese'] = "中国語";
	$TEXT['navi-japanese'] = "日本語";

次にnavi.phpを修正します。

C:\xampp\security\htdocs\navi.php

44行目あたりに下記のような記述があると思います。

				<td align="right" class="navi">
					<a target=_parent class=n href="lang.php?de"><?php print $TEXT['navi-german']; ?></a><br>
					<a target=_parent class=n href="lang.php?en"><?php print $TEXT['navi-english']; ?></a><br>
					<a target=_parent class=n href="lang.php?es"><?php print $TEXT['navi-spanish']; ?></a><br>
					<a target=_parent class=n href="lang.php?fr"><?php print $TEXT['navi-french']; ?></a><br>
					<a target=_parent class=n href="lang.php?it"><?php print $TEXT['navi-italian']; ?></a><br>
					<a target=_parent class=n href="lang.php?nl"><?php print $TEXT['navi-dutch']; ?></a><br>
					<a target=_parent class=n href="lang.php?no"><?php print $TEXT['navi-norwegian']; ?></a><br>
					<a target=_parent class=n href="lang.php?pl"><?php print $TEXT['navi-polish']; ?></a><br>
					<a target=_parent class=n href="lang.php?pt"><?php print $TEXT['navi-portuguese']; ?></a><br>
					<a target=_parent class=n href="lang.php?sl"><?php print $TEXT['navi-slovenian']; ?></a><br>
					<a target=_parent class=n href="lang.php?zh"><?php print $TEXT['navi-chinese']; ?></a><p>

よく見ると、こちらにもJapaneseの記述がありません。
そこで下記のように追加しましょう。

				<td align="right" class="navi">
					<a target=_parent class=n href="lang.php?de"><?php print $TEXT['navi-german']; ?></a><br>
					<a target=_parent class=n href="lang.php?en"><?php print $TEXT['navi-english']; ?></a><br>
					<a target=_parent class=n href="lang.php?es"><?php print $TEXT['navi-spanish']; ?></a><br>
					<a target=_parent class=n href="lang.php?fr"><?php print $TEXT['navi-french']; ?></a><br>
					<a target=_parent class=n href="lang.php?it"><?php print $TEXT['navi-italian']; ?></a><br>
					<a target=_parent class=n href="lang.php?nl"><?php print $TEXT['navi-dutch']; ?></a><br>
					<a target=_parent class=n href="lang.php?no"><?php print $TEXT['navi-norwegian']; ?></a><br>
					<a target=_parent class=n href="lang.php?pl"><?php print $TEXT['navi-polish']; ?></a><br>
					<a target=_parent class=n href="lang.php?pt"><?php print $TEXT['navi-portuguese']; ?></a><br>
					<a target=_parent class=n href="lang.php?sl"><?php print $TEXT['navi-slovenian']; ?></a><br>
					<a target=_parent class=n href="lang.php?zh"><?php print $TEXT['navi-chinese']; ?></a><br>
					<a target=_parent class=n href="lang.php?jp"><?php print $TEXT['navi-japanese']; ?></a><p>

修正が終わりましたら、先ほどと同じようにUTF8形式で保存してください。

以上で文字化けとエラーが解消されたと思います。
※もしされていない場合は、ソースコードのミスか、UTF8形式で保存されていないかもしれません。

xampp

【MySQLの設定】
最後にhttp://localhost/security/xamppsecurity.phpにアクセスして、ユーザーとパスワードを設定します。

XAMPP の場合、データベースへのログイン情報は、ユーザー名は「root」とデフォルトで設定されていますが、パスワードだけは設定しなければなりません。

また、「http」と「cookie」のどちらかを選択できる項目があり、次の2通りからログイン方法を選択できます。
・http:ベーシック認証
・cookie:phpMyAdmin のログイン画面

どちらを選択しても問題ありませんが、ここでは、画面遷移が分かりやすいという意味で「cookie」を使用しました。

図の通り任意のパスワードを入力して、「パスワードを変更しました。」をクリックしてください。

以上でXAMPPの設定は終了です。続いてはローカル上にWordPressの設定を行います。

xampp

WordPressの設定

WordPressはデータベース上で動的にページを作り出すシステムのため、インストールは以下の手順で行います。

  1. データベースの作成
  2. WordPressのインストール

1. データベースの作成

XAMPPを起動して、管理画面にあるMySQLの「Start」と「Admin」をクリックし、管理ページを開きます。

次にログイン画面が表示されるので、先ほど設定したログイン情報を入力し、「実行」をクリックします。

xampp

phpMyAdminのメニューより、「データベース」をクリックします。データベースを作成する項目にあるフォームに任意のデータベース名(ここでは「wp_test」)を入力し、作成をクリックします。

mamp18

mamp22

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

mamp19

2. WordPressのインストール

まず、最新のWordPress日本語版のデータを以下よりダウンロードします。

ダウンロード

ダウンロードしたファイルはzip形式になっており、解凍すると「wordpress」というフォルダが現れます。フォルダの中身は下図のようになっています。

WordPress画面1

先ほど解凍した「wordpress」フォルダごと、XAMPPの「htdocs」に移動します。

xampp

アップロードしたURLにブラウザでアクセスします。

http://localhost/wordpress/

【インストールの実行】

上記のURLにアクセスすると「wp-config.phpファイルが存在しないようです。・・・」と表示され、「設定ファイルを作成する」をクリックすると以下の画面が表示されます。

WordPress画面2

さらに「さぁ始めましょう!」をクリックし、進みます

データベース情報の入力

WordPress画面3

MySQL設定で設定したデータベース情報を入力します。
・データベース名 → データベース名: wp_test(任意のもの)
・ユーザー名 → ユーザー名: root
・パスワード → パスワード:root
・データベースのホスト名 → サーバー名:localhost
・テーブル接頭辞 → 任意のもの(変更しなくて良い)


入力後「送信」をクリックします。

サイト情報の入力

「サイトのタイトル」「ユーザ名」「パスワード」を記入します。

WordPress画面4

「確定」すれば、晴れてWordPressのインストールが完了します。WordPressの管理画面URLをクリックして、初期設定に進みましょう。

WordPress画面5

以上が、Windows環境において、XAMPPを用い、ローカル上にWordPressを設置する方法でした。
多少手順は多いですが、手順通りにしていただければ簡単に設置可能かと思います。
作成途中のコンテンツを途中で公開したくない場合や、セキュリティ観点からもローカルでの構築をまずはおすすめします。

関連記事

デザインプラス採用サイト
Wordpress使い方大全集

過去アーカイブ