WordPressでサイトの運営を行うに当たり、配布されている無料のテーマで自分のやりたい事が出来なかったので、テーマを自作することにしました。そこで、Wordpressのテーマを自作する開発環境にXAMPPが利用できることが分かったので、ここではその XAMPPの設定方法 を備忘録としして記載しています。
開発環境
今回、開発環境を構築したOSと開発環境を構築するためにインストールしたアプリケーションは、以下の通りです。
- Windows 8.1 pro 32bit & 64bit および Windows 10 pro 32bit & 64bit
- Eclipse 4.4 Luna Pleiades All in One および Eclipse 4.5 Mars Pleiades All in One
- XAMPP v5.6.28
開発環境には、Windows 8.1 proの32bit版と64bit版をインストールしたPCを用い、その後、どちらのPCもWindows 10にアップグレードしました。
アップグレードした後でも問題なく利用できたので、OSのバージョンには特に拘らなくても良いかもしれません。
XAMPPの導入
XAMPPは、赤枠で囲んだ部分をクリックしてwindows版のインストーラーをダウンロードします。
XAMPPのインストールに関しては、他サイトで数多く紹介されているので、そちらを参考にしてください。
インストールより問題になるのは、恐らく XAMPPの導入手順だと思います。
その理由は、XAMPPのデータベースがMySQLからMariaDBに変わり、XAMPPの管理画面がかなり変わっているからです。
実際、XAMPPの導入について検索すると、以前の管理画面との違いに戸惑いました。
私は初心者なので、「まあ、こんなものか」と思いましたが、今まで使い慣れている人にはかなり迷惑な変更だと思います。
以前のXAMPPのバージョンにはsecurity設定があり、この設定を行うことで外部からの接続を防ぐようです。
ただ、ローカル環境でとりあえずWordpressを動かしてみたいという場合は、外部からの接続云々は考えなくても良いのではないかと思います。
XAMPPの設定方法
ApacheとMySQLの起動
スタートメニューからXAMPP Control Panel(v3.2.2)を実行すると、次のようなウィンドウが表示されます。
PHPの開発環境にはApacheとMySQLが必要なので、各モジュールの「Start」をクリックして実行してください。
ただ、最初に躓くのがApacheの実行だと思います。
私もこれにはかなり苦戦し、いくつかの設定を見直しました。
私の場合、以下の設定を見直すことで実行できるようになりました。
◆ Skypeのポート設定
Skypeがインストールされている場合、Apacheが使用するポートとSkypeが使用するポートが重なり、以下のようなエラーが出力される場合があります。
この場合、以下の手順で、Skypeのポート設定を見直す必要が出てきます。
- Skypeのメニューにある「ツール」→「設定」を選択します。
- 表示されたウィンドウにある「詳細」→「接続」を選択し、「追加の受信接続にポート80と443を使用」のチェックを外します。
 |
 |
| Skypeの設定 |
Skypeの接続設定 |
◆ IISの設定
IIS(インターネットインフォメーションサービス)が有効になっている場合も、Apacheが使用するポートとIISが使用するポートがかぶるので、IISを無効にする。
- [コントロール パネル] を開いて、[プログラムと機能] → [Windows の機能の有効化または無効化] の順に選択します。
- [インターネット インフォメーション サービス] を無効にします。
◆ ポートの設定
Apacheが使用するポートと他のアプリケーションが使用するポートが被る場合があります。
ポートが被っている場合、XAMPP Control Panelの下部に表示されるメッセージから他のアプリケーションが使用しているPIDを確認できます。
タスクマネージャーを起動し、詳細タブを選択して、実行されているアプリケーションを終了します。
XDebugの設定
XAMPP Control PanelでApacheとMySQLが実行できたら、次はXDebugの設定です。
XDebugの設定を行わないと、EclipseでPHPをデバッグすることが出来ません。
php.iniの編集
XDebugの設定は、XAMPP Control Panel にあるApacheの「Config」ボタンをクリックすると「PHP(php.ini)」というのがメニューにあるので、それをクリックします。
「PHP(php.ini)」をクリックするとメモ帳が起動し、php.iniの内容が表示されます。
デフォルトでは、php.ini内にXDebugの設定が記述されていません。
このため、まずXDebugを読み込んで動作させる設定を記述する必要があります。
記述する内容は以下の通りです。
[XDebug] zend_extension = "C:\xampp\php\ext\php_xdebug.dll" xdebug.profiler_append = 0 xdebug.profiler_enable = 0 xdebug.profiler_enable_trigger = 0 xdebug.profiler_output_dir = "C:\xampp\tmp" xdebug.profiler_output_name = "cachegrind.out.%t-%s" xdebug.remote_enable = 1 xdebug.remote_port = "9000" xdebug.remote_handler = "dbgp" xdebug.remote_host = "127.0.0.1" xdebug.remote_mode = "req" xdebug.trace_output_dir = "C:\xampp\tmp"
記述した内容は以下のサイトを参考にしました。
参考サイトでは、xdebug.remote_portが9002に設定されています。
しかし、EclipseでXDebugがデフォルトで利用するポートは「9000」なので、「9000」で問題が起きた場合はxdebug.remote_portの値を「9002」などの別のポートを指定すれば良いと思います。
もしEclipseでXDebugのポートを変更する場合、Eclipseのメニューバーにある「ウィンドウ」→「設定」で設定を開きます。
次に、左にあるツリーメニューから「PHP」→「デバッグ」→「Debuggers」を選択します。
右側に利用可能なPHPデバッガーが表示されるので、「XDebug」を選択し、「構成」をクリックします。
すると、XDebugを設定するウィンドウが表示されるので、そのウィンドウの「デバッグ・ポート」を変更します。
 |
 |
| Debuggersの選択 | XDebugのポート変更 |
ちなみに、php.iniに記述した設定の有効無効は、以下に示す例のように、「;」を追加あるいは削除することで設定できます。
| 無効の場合 |
;zend_extension = "C:\xampp\php\ext\php_xdebug.dll" |
| 有効の場合 |
zend_extension = "C:\xampp\php\ext\php_xdebug.dll" |
xdebug.profiler_enablの値を1から0に修正しました。
その理由は、以下の「デバッグによるXAMPPフォルダの肥大化」をご覧ください。
php_xdebug.dllのダウンロード
次に、XDebugを動作させるには、php_xdebug.dllが必要です。
このphp_debug.dllは、php.iniで指定したフォルダに含まれていないため、XDebugのサイトからダウンロードする必要があります。
とはいえ、XDebugのダウンロードのページを見てみると、大量のファイルがあり、どれを選択するべきか分からなくなります。
ですが、図の赤枠で囲った様に「custom installation instructions」というリンクがあります。
このリンク先のページでは、自分の環境にあったphp_xdebug.dllを教えてくれます。
方法は、まず「custom installation instructions」のリンク先に飛ぶと図の赤枠で示したようなテキストボックスがあるページが表示されます。
このテキストボックスに何を入力するかというと、phpinfo()の内容を貼り付けます。
phpinfo()の内容は、まずXAMPP Control PanelにあるApacheの「Admin」ボタンをクリックします。
ブラウザが起動し、XAMPPのトップページが表示されます。
そのトップページの右上の赤枠で示すように「PHPInfo」の文字があるので、その文字をクリックします。
そのときに表示されるページを以下の図のように「Ctrl+A」でページの内容全てを選択し、次に「Ctrl+C」でコピーします。
phpinfo()の全ての内容をコピーしたら、先ほどのテキストボックスがあるページに戻り、テキストボックス内にCtrl＋Vでコピーした内容を貼り付けます。
phpinfo()の内容をテキストボックスに貼り付けたら、赤枠で囲んだ「Analyse my phpinfo() output」をクリックします。
クリックした後に表示されるページでは、ダウンロードすべきphp_xdebug.dllとファイルの置き場所とファイルパスが表示されます。
このページでダウンロードしたphp_xdebug.dllを指定した場所に置き、先に編集したphp.iniのzend_extensionのファイルパスを修正します。
例えば、ダウンロードしたphp_xdebug.dllのファイル名が”php_xdebug-2.5.0-5.6-vc11.dll”の場合、パスは以下のようになります。
zend_extension = "C:\xampp\php\ext\php_xdebug-2.5.0-5.6-vc11.dll"
php.iniの修正・追加内容が反映されたかどうかはphpinfo()で確認することができます。
XDebugに問題がなければ、phpinfo()にXDebugの内容が表示されます。
EclipseでXDebugを実行
EclipseでXDebugを実行するには、まず最初にPHPのプロジェクトを作成する必要があります。
その前に、Eclipseを起動するとワークスペースの選択が表示されます。
今回は、XDebugの動作確認を行うだけなので、ワークスペースはデフォルト設定のままにしておきます。
ワークスペースの場所は、Eclipseがインストールされているフォルダ「pleiades」の中です。
Eclipseが起動すると、最初はJavaのパースペクティブが開かれているかもしれません。
このため、PHPのパースペクティブを開く必要があります。
パースペクティブを開く場合、Eclipseのウィンドウの右上にある「パースペクティブを開く」ボタンをクリックします。
そうすると、「パースペクティブを開く」ウィンドウが表示されるので、その中から「PHP」を選択して「OK」をクリックします。
 |
 |
PHPプロジェクトとファイルの作成
PHPのプロジェクトを作成する場合、「ファイル」→「新規」→「PHPプロジェクト」を選択します。
プロジェクト名は何でも良いのでので、仮に「test」とします。
プロジェクト名を設定すると、「内容」の赤枠で囲んだ「ディレクトリー」に表示されるパスに自動的にプロジェクト名が追加されます。
ここにプロジェクトのファイルが保存されます。
それ以外の設定は、今回、特に変更する必要はありません。
プロジェクト名を入力し終わったら、「完了」をクリックします。
プロジェクトの作成が完了すると、PHPエクスプローラーにプロジェクト名のフォルダが表示されます。
次に、「ファイル」→「新規」→「PHPファイル」を選択すると、「新規 PHP ファイル」ウィンドウが表示されます。
今回は、「test」フォルダを選択し、ファイル名を「sample.php」と指定します。
新規のPHPファイルのテンプレートには、「New PHP file – HTML frameset」と「New simple PHP file」の2種類があります。
デフォルトでは「New simple PHP file」が選択されるので、「完了」をクリックします。
PHPの動作を確認するため、PHPファイルを以下の内容をエディタに記述します。
<?php phpinfo(); ?>
デバッグの構成と実行
上記で作成した「sample.php」を試しにデバッグしてみます。
まず、以下の図に示すようにエディタに文字を記述すると左側に数字が表示されます。
さらに、数字の左側の空白部分をダブルクリックすると赤枠で示すように丸いマークが表示されます。
今回は、”phpinfo();”のところにブレークポイントを設定します。
次に、ツールバーにある虫のマークをクリックするとメニューが表示されるので、そのメニューにある「デバッグの構成」をクリックします。
 |
 |
|
ブレークポイントの設定 |
デバッグの構成 |
「デバッグの構成」をクリックすると、「デバッグ構成」ウィンドウが表示されます。
PHPのデバッグを構成する場合、表示されたウィンドウの左側にあるリストから「PHP Web アプリケーション」を選択します。
そして、左側のリストの上にある赤枠で示した「新規の起動構成」をクリックすると、右側の表示が変わります。
右側の表示が変わったら、「サーバー」タブを選択し、赤枠で示す「参照」をクリックします。
すると、「ファイルの選択」ウィンドウが表示されるので、「test」フォルダから「sample.php」を選択し、「OK」ボタンを押します。
 |
 |
|
構成の作成とサーバーの構成 |
ファイルの選択 |
「サーバー」タブでデバッグを行うファイルを選択してから、今度は「デバッガー」タブを選択し、デバッガーの構成を行います。
デフォルトでは、デバッガーの構成は<なし>になっています。
そこで、「構成」ボタンをクリックし、「サーバーの編集」ウィンドウを開きます。
「デバッガー」タブが選択されているので、「デバッガー」を<none>からXDebugに変更します。
php.iniの”xdebug.remote_port”が9000以外に設定されている場合、「ポート」の値も変更します。
デバッガーの構成を確認したら、完了をクリックし、「デバッグ構成」ウィンドウに戻ります。
 |
 |
| デバッガーの構成 | サーバーの編集 |
サーバーとデバッガーの構成が終了したら、「デバッグ」ボタンをクリックします。
すると、「パースペクティブ切り替えの確認」ウィンドウが表示されるので、「はい」をクリックします。
デバッグパースペクティブに切り替わると、Eclipseの表示が変更されます。
そして、XDebugが問題なく起動する場合、ブレークポイントを設置した”phpinfo();”で一時停止します。
また、デバッグを実行した後にエディタにもう一つのタブが追加されます。
「F8」を押してプログラムの実行を再開し、この新たに追加されたタブに表示を切り替えるとPHPの情報を確認します。
 |
 |
| ブレークポイントで一時停止 | PHPの情報表示 |
このようにブレークポイントでの一時停止とPHPの情報表示が問題なく実行されればデバッグの構成は終了です。
デバッグによるXAMPPフォルダの肥大化
EclipseでPHPのデバッグを行っていたところ、いつ頃からかハードディスクの容量に関する警告が表示されるようになりました。
しかし、このような警告が表示される以前に、ハードディスクの容量を圧迫するようなソフトウェアのインストールやファイル操作をした覚えはありませんでした。
そこで、何がハードディスクの容量を圧迫しているか、ハードディスクにあるフォルダの容量を確認することにしました。
すると、PHP開発環境を整えてから実際にデバッグを始めた短期間で、XAMPPフォルダの容量が肥大化していることに気付きました。
特に大きかったのはXAMPPフォルダ内にある”temp”フォルダでした。
“temp”フォルダには、大抵、何らかの一時的に保管されたファイルが残されるので、試しに中のファイルをすべて削除しました。
しかし、この操作がその後のデバッグに影響を与えることありませんでした。
そうは言っても、デバッグの度に”temp”フォルダの中身を毎回削除するのは非常に面倒です。
そこで、この問題を解決する方法を調べたところ、以下のサイトを見つけました。
このサイトでもXAMPPの”temp”フォルダの肥大化について書かれており、その解決方法も紹介されています。
方法は簡単で、この記事でも前述しているphp.iniの中身を変更するだけです。
変更箇所は、php.iniのxdebug.profiler_enableを以下のように0に設定します。
xdebug.profiler_enable = 0
上記で紹介したXDebugの設定では、この値を既に修正しているので、そのままコピペしても問題ありません。
最後に
WordPressのオリジナルテーマを作成するにあたり、PHPの開発環境が必要になったので、XAMPPとEclipseのインストールを行いました。
PHPの実行環境にXAMPP、開発環境にEclipseをそれぞれ利用しています。
事前準備として、XAMPPのphp.iniを編集し、XDebugを利用できるようにしました。
また、Eclipseでは、XDebugを利用するための設定を行い、PHPの環境を表示するサンプルプログラムを作成し、XDebugによるデバッグの動作確認を行いました。
デバッグの動作確認では、PHPの情報を表示する”phpinfo()”で一時停止するようにブレークポイントを設置し、ブレークポイントでの一時停止とPHPの情報表示を確認しました。
基本的には特に問題なく動作するのですが、何回か環境設定のやり直しをしているうちに動作しない問題が生じました。
具体的な問題としては、PHPの情報が「Page not found」で表示されなかったり、ブレークポイントで止まらないということが起こりました。
この原因は不明で、恐らく、EclipseとXAMPPとの通信が不安定になっているのではないかということが考えられます。
問題の解決方法として、今回紹介した方法では、ワークスペースがデフォルトになっていますが、XAMPPがCドライブ直下にインストールされている場合、ワークスペースの場所を”C:\xampp\htdocs“に変更すると上記のような問題が起こりませんでした。
なので、PHPの開発を行う場合、ワークスペースを常に”C:\xampp\htdocs“する方が良いのかもしれません。
当施設の利用者さんの中には、Wordpressによるサイト運営に興味を持つ人も出てきました。
もの作りの一環として、プログラムの開発環境の構築にチャレンジしてみるのも良いかもしれません。
とりあえず、何かを始める切っ掛けや何かしらの参考になれば良いと思います。
コメント