WordPressテーマの作り方 » Mac OSX Lionに入れたWordPressをEclipsePDTでデバッグできるようにする

MacOS X Lion にEclipseをインストールし、WordPressのプロジェクトを閲覧/編集/デバッグする環境をつくってみました。備忘録として、作業手順をまとめて書いておきます。WordPressは使わない！という方も、ほとんど手順は同じです。

>>以前の投稿：Mac OSX LionにApache、MySQL、PHP、WordPressを入れる

[補足]

なお、PHPはMAMPを使わず、Macに元々入っているものを使って動作させています。とはいえ、MAMP環境を使っている方は多いと思うので、設定が異なる点ではちょこっとフォローを入れたいと思います。

また、Eclipse PHPユーザのためのAll in one packageも用意されているようですが、今回はまずEclipse本体をインストールして、それにPHP用のプラグインを追加する形で進めます。

それから、ここではEclipseの日本語化をしていません。日本語化パッチは
http://mergedoc.sourceforge.jp/
で手に入ります。Windowsの場合は、このサイトで日本語化したEclipseをいくつかのパッケージで配布しているようですが、mac版は無いようです（2012/8/2時点)。Eclipse無しでpleiades 本体をダウンロードした後、インストールしたEclipseに若干手を加える必要があるようです。詳細は「eclipse mac 日本語化」とかで検索すると沢山でてくると思うので、探してみてください。

手順概要

面倒ですが、そんなに難しくないです。

前準備（確認しておくこと）
Eclipse本体インストール
PDTプラグインインストール
XDebugの設定（php.iniの編集）
Eclipseの環境設定
1. PHP設定
2. サーバー設定
3. デバッガ設定
4. 文字エンコードの設定
プロジェクト作成
1. プロジェクト作成〜WordPressフォルダのインクルード
2. エラー警告の表示をカスタマイズ
3. デバッグ条件設定

1. 前準備

まず、自分の環境を確認します。ピンとこない項目だけ見て頂ければOKだと思います。

検証するサイトのアドレス
検証するサイトのドキュメントルート
PHPのバージョン
PHP実行ファイルへのパス
php.iniファイルへのパス
xdebug.soファイルへのパス

検証するサイトのアドレス

Eclipseを使って検証する対象とするサイトのURLを確認しておきます。

前回投稿記事に従って、Virtual Hostを使ってサイトを作った場合

“httpd-vhosts.conf”で設定した、アドレスです。前回投稿の例で言えば、

http://local-cat-lover.com

などのURLです。

パーソナルWebサイトを使う場合

デフォルトのまま使っている場合は、システム環境設定＞Web共有で確認できます。こんな感じのURLです↓

http://192.168.x.x/~user_directory

ローカル以外からのアクセスを禁止している場合は、↓で繋がると思いますす。

http://localhost/~user_directory

デフォルトWebサイトを使う場合

http://localhost/

MAMP環境を使う場合

デフォルトのまま使っている場合は、↓のURLだと思います。

http://localhost:8888

MAMPのスタートメニュー > 環境設定 > ポートで、Apacheのポートを80に変更している場合は、

http://localhost

という感じになります。

検証するサイトのドキュメントルート

ドキュメントルートを確認しておきます。

前回投稿記事に従って、Virtual Hostを使ってサイトを作った場合

“httpd-vhosts.conf”に書いたディレクトリです。前回投稿の例で言えば、

/Users/user_directory/WebSites/cat-lover/

などのURLです。

パーソナルWebサイトを使う場合

システム環境設定 > Web共有で、「パーソナルWebサイトフォルダを開く」を押すと、ドキュメントルートに飛べます。デフォルトでは↓のようなディレクトリです。

/Users/user_directory/Sites/

などのURLです。

デフォルトWebサイトを使う場合

システム環境設定 > Web共有で、「コンピュータのWebサイトフォルダを開く」を押すと、ドキュメントルートに飛べます。デフォルトでは↓のようなディレクトリです

/Library/WebServer/Documents

MAMP環境を使う場合

MAMPのスタートメニュー > 環境設定 > Apacheで確認できます。

PHPのバージョン

使用するPHPのバージョンを確認しておきます。

MacプリインストールのPHPを使っている場合

ドキュメントルート直下に、下記ファイルを置いて、サイトを表示します。

test.php

<?php phpinfo();

こんな感じで、ドキュメントルート/test.phpにアクセスしてください。

http://local-cat-lover.com/test.php

表示された画面一番上に書いてある、PHPのバージョンを確認してください。

私の環境では、5.3.10でした。

MAMP環境を使っている場合

MAMPスタートメニュー > 環境設定 > PHP で確認できます。↑と同じ方法でも出来ますけど・・・

PHP実行ファイルへのパス

PHPの実行ファイルが置いてある場所を確認しておきます。

MacプリインストールのPHPを使っている場合

Mac Lionでは、下記アドレスにあります。

/usr/bin/php

MAMP環境を使っている場合

下記アドレスにあると思うので、確認してください。php5.x.xには、先ほど確認したPHPのバージョン番号が入ります。

../MAMP/bin/php/php5.x.x/bin/php

php.iniファイルへのパス

PHP設定ファイルが置いてある場所を確認しておきます。

MacプリインストールのPHPを使っている場合

Mac Lionで、php.iniを作成したことがある場合は、下記アドレスにあります。

/etc/php.ini

無い場合は、下記ファイルをコピーして、/etc/php.iniを作成してください。

/etc/php.ini.default

MAMP環境を使っている場合

下記アドレスにあると思うので、確認してください。php5.x.xには、先ほど確認したPHPのバージョン番号が入ります。

../MAMP/bin/php/php5.x.x/conf/php.ini

xdebug.soファイルへのパス

MacプリインストールのPHPを使っている場合

XDebugは、EclipseでPHPプログラムをデバッグできるツールの１つです。私のMac Lion には下記アドレスに既にインストールされていました。

/usr/lib/php/extensions/no-debug-non-zts-20090626/xdebug.so

もしも同じアドレスに無い場合は、extensionsフォルダ周辺に無いかどうか調べてみてください。

MAMP環境を使っている場合

MAMPと一緒にインストールしたものを使います。/extensionsフォルダを開き、no-debug-non-zts…フォルダの下に、xdebug.soがあるかどうか確認し、xdebug.soへのフルパスをメモしておきます。

../MAMP/bin/php/php5.x.x/lib/php/extensions/no-debug-non-zts-2010xxxx/xdebug.so

MacプリインストールのPHPを使っていて、xdebugがインストールされていない場合【未確認】

macの場合、xdebugの本家サイトで配布されているソースコードからインストールする（このサイトに解説あり）か、またはxdebugをバイナリ配布しているサイト（→ここで配布しているxdebugがそのまま使えるとのウワサ）から入手することになります。私自身は試したことが無いので、上のリンク先等を参照し、トライしてみてください。

2. Eclipse本体をインストールする

Eclipse本家サイトのマニュアルに従って、まずはEclipse-Indigoをインストールします。Eclipseにはもっと上位バージョンのパッケージがありますが、今回はPHPを使う上で安定したEclipse-Indigoを使うことにします。

Eclipse – Indigoのサイトへ行く

まずは、下記URLへ移動する。移動したら、Downloadsメニューを開いてください。

http://www.eclipse.org/indigo/

パッケージを選択してダウンロードする

様々なパッケージがありますが、パッケージの違いは一緒にインストールされるプラグインの違いです。これらのプラグインは、必要に応じて後から追加できます。今回はEclipse Classic（記事執筆時 2012/8/2の最新は3.7.2）の、Cocoa 64bitをクリックして、ダウンロードします。

インストール＆初起動

ダウンロードが終了し、解凍して/eclipseフォルダが出来たら、/Applicationsの直下へ移動させます。

/Applications/eclipse

eclipseフォルダ直下にアプリ実行ファイル（青い丸のアイコン）があるので、起動します。

初めて起動したときに、JREをインストールするかどうか聞いてきた場合は、メッセージに従ってインストールしてください。Eclipseを使うためには、Javaでの開発をする・しないに関係なく、 JRE（Java Runtime Environment）が必要になるそうです。

最初は下記のような画面が出て、workspaceの保存場所を聞いて来ます。好きな場所を指定してください。デフォルトのままでもOKです。

このようなウィンドウが表示されたら、本体のインストールは完了です。

3. PDTプラグインインストール

Eclipseは、もともとJavaメインの統合開発環境です。Eclipse上でPHPを使うためには、そのためのプラグインをインストールする必要があります。プラグインインストールは、Eclipseのメニューから実行できます。

メニュー > Help > Install New Software…を開く

こんな画面が表示されます。

一番上にある、WordWith: のプルダウンを押すと、多分既に
Indigo – http://download.eclipse.org/releases/indigo
があると思いますので、それを選択。

見つからない場合は、Add…ボタンを押して

Name: Indigo（変えてもOK）
URL: http://download.eclipse.org/releases/indigo

を入力して、OKを押す。

暫く待つと、ロケーション http://download.eclipse.org/releases/indigo に登録された、ダウンロード可能なプラグイン一覧が、下のボックスに表示されます。

この中から、Programming Language > PHP Development Tools (PDT) SDK Feature を選択して、Nextボタンを押します。

メッセージ通りに進めると、ライセンス条項が表示されるので、”accept”を選択し、Finishを押します。すると、インストールが始まります。

インストール終了すると、eclipseをrestart（再起動）するかどうかを聞いてくるので、メッセージに従って再起動します。

以上で、PDTのインストールは終了です。

4. XDebugの設定をする（php.iniファイルの編集）

☆途中赤字で書かれた箇所は、この「準備」の項で確認した情報に、適宜置き換えてください。

Eclipse本家サイトのマニュアルにも書いてありますが、Eclipse-PDTで動くデバッガとして、ZendとXDebugがあります。今回はXDebugを使えるように設定していきます

php.iniファイルを開きます。

sudo vi /etc/php.ini

[xdebug]行を探して、下記のように編集します。[xdebug]の行が無ければphp.iniに下記を追記してください。
（>>設定はここから持ってきました）

zend_extension="/usr/lib/php/extensions/no-debug-non-zts-20090626/xdebug.so"
xdebug.profiler_output_dir="/tmp/xdebug/(好きなパス)"
xdebug.profiler_enable=On
xdebug.remote_enable=On
xdebug.remote_host="localhost"
xdebug.remote_port=9000
xdebug.remote_handler="dbgp"
xdebug.idekey=ECLIPSE_DBGP

zend_extensionの右辺は、最初に確認したxdebug.soへの絶対パスです。適宜書き換えてください。
xdebug.remote_enable=Onで、xdebugによるリモートサーバでバッグがONになります。

ファイルを上書き保存したら、一度apacheを再起動してください。

5. Eclipseの環境設定

☆途中赤字で書かれた箇所は、この「準備」の項で確認した情報に、適宜置き換えてください。

ここでは、EclipseでPHPに関する環境設定＋αを行います。

設定項目は３つあります。

PHPの設定：（PHP実行ファイルとiniファイルのパスを設定）
サーバーの設定：（ローカルサーバーのURLとドキュメントルートを設定）
デバッガの設定：（↑のPHP設定＆サーバーの設定、デバッガの選択をします）

＋αとして

エンコード設定

を行います。

まずは、Eclipseを立上げて、Eclipse > 環境設定を開きます。

PHPの設定

左側のメニューから、PHP > PHP Executables を開き、Addボタンを押します。

各項目は次のように設定します。

Name:（好きな名前でOKだが、PHPのバージョン名が分かりやすくていいと思う）

PHP5.3

Executable path:（php実行ファイルへのパス）

/usr/bin/php

PHP ini file:（php.iniファイルへのパス）

/private/etc/php.ini

SAPI Type: CLIを選択
PHP debugger: XDebugを選択

以上を入力したら、OKボタンを押します。

サーバーの設定

左側のメニューから、PHP > PHP Serversを開きます。

リストにある、Default PHP Web Serverを選択して、Editを押す。（または、Addを押して新規追加.）

Name:（好きな名前でOK）

Default PHP Web Server

Base URL:（サイトのURL） MAMP環境のデフォルト設定で使っている場合など、Apacheのポートが80以外の場合は、:ポート番号まで指定してください。

http://local-cat-lover.com

Local Web Root:（ドキュメントルート）

/Users/user_directory/WebSites/cat-lover

以上を入力したら、OKボタンを押します。

デバッガの設定

使用するデバッガについて設定します。左側のメニューから、PHP > Debugを開きます。

PHP Debugger: XDebugを選択
Server: １つ前の「Serverの設定」で作成したサーバー設定名を選択する。
PHP Executable: ２つ前の「PHPの設定」で作成したPHP設定名を選択する。
Encoding SettingがUTF-8であることを確認して（サイトをUTF-8でエンコードしている場合）、Applyを押す。

エンコードをUTF-8に変更する

EclipseのデフォルトのエンコードがUTF-8ではないので、変更しておきます。左側のメニューの General > Appearance > Content Typesを開きます。

右側上ウィンドウの”Text”を選択した状態で、一番下にあるDefault encordingにutf-8と入力して、Updateボタンを押します。

もし、他言語での開発も行う場合など、UTF-8がデフォルトだと困る場合は、Textのツリーを開くとファイル種類別にデフォルトのエンコードを選択できるので、適宜修正してください。

以上で、Eclipseの環境設定は終了です。

6. PHPプロジェクト作成

PHPプロジェクトを作成して、ドキュメントルートにインストールされたWordPressファイル全体をインクルードします。

プロジェクト新規作成

メニューバーの、File > New > Project… を開きます。

ツリーの中から、PHP Projectを選択して、Nextボタンを押します。

Project Name: 好きな名前
Contents: Create project at existing location (from existing source)を選択して、Browseボタンを押し、ドキュメントルートを選択します。
PHP Version: Use project specific settingsを選択して、“Use Default Settings”を選択します。（8/4修正）
Project Layout: Use project as source folder を選択します。
JavaScript Support: 今回はJavascriptは自分で組まない前提とし、チェックは外しておく

入力が終わったら、Next>Next>…Finish を押します。

補足1 Invalid project contents directory エラー発生したとき

“Invalid project contents directory”というエラーが出た場合は、WordPressがインストールされている、”ドキュメントルート全体”のパーミション設定を見直す必要があるかもしれません。

筆者の環境の場合、自分のログインアカウントに「読み/書き」権限があれば、Eclipse問題無く動作するようです。GUIで設定する場合は、ドキュメントルートを右クリックし、情報メニューで、自分のログインアカウントに「読み/書き」を追加、歯車マークを押して「内包している項目に適用…」を押すと、サブフォルダにも同じ設定が反映されます。

補足2 Perspectiveの変更

初めてPHPプロジェクトを作成した場合など、”Perspectiveを変更しますか？”というようなメッセージが出ることがあります。このPerspectiveとは、画面のレイアウトのようなもので、PHP開発用、デバッグ用…など、それぞれのプラグインや昨日毎にデフォルト設定が用意されています。特にこだわりが無い限り、”変更する”を選択します。

インクルードが終わったら、プロジェクトのツリーを展開してみてください。WordPressツリーが表示されたら、インクルード成功です。

エラーと警告表示をカスタマイズ

WordPressフォルダをインクルードすると、Problemsタブ（PHP-Perspectiveの場合は、画面下にある）にエラーや警告がわんさか表示されていると思います。
もしProblemsタブが見つからない場合は、メニューバーの、Windows > Show View > Problems で表示されます。

エラーの種類を確認すると、ほとんどがHTML Problemsとなっています。これらは、EclipseがWordPressのインクルードタグなどを解釈して正しいHTML構造を解釈してエラーを出してはいないことに起因します。

当面、テーマの編集がメインの用途ならば、HTML Problemsの警告は切ってしまうことをオススメします。エラーの出力制御は、２つの側面から行えます。

>>ここでも話題になっていました。Best Answerにある設定を以下で行います。

エラー出力対象を限定する

Problemsタブの右側の方にある、小さい逆三角形のアイコンを選択し、Show > Errors/Warnings on Selection を選択します。これによって、選択したファイルのみエラーを出力するように出来ます。

エラーの出力内容を限定する

Problemsタブの右側の方にある、小さい逆三角形のアイコンを選択し、Configure Contents…を選択します。

立ち上がったダイアログ左のリストでErrors/Warnings on Selectionを選択した状態で、右下のボックスから”HTML Problems”のチェックボックスを外します。また、Scopeで”On selected element and its childrenを選択します。

これで、デバッグしたいコードが入ったフォルダを選択して、そのフォルダに入った要素全体をエラー出力対象にすることができました。

デバッグ条件設定

デバッグ実行まで、あと少しです。メニューバーの Run > Debug Configurations…を開きます。

左メニューの、PHP Web Applicationをダブルクリックすると、新しいデバッグ条件を作成できます。

Server Debugger: XDebugを選択
PHP Server: 「Eclipseの環境設定 > Server設定」で作成したプロファイルを選択
Breakpoint: チェックしておくと、最初の行でブレークする。とりあえずチェックしたまま。後で必要に応じて外す。
File: /プロジェクト名/index.php に指定する。
URL: Auto Generateのチェックを外す。ここでは、検証したいURLを指定する。トップページなら、右側のボックスに、/ または /index.phpと入力する。（※例えば、http://localhost/aboutを表示する場合について検証したいなら、右側のボックスに”/about”と入力すればOK。

以上を入力したら、Debugボタンを押す。

Perspectiveの変更メッセージが出たら、Yesを押す。

/index.phpの最初の行でブレーク（処理が中断）したら、デバッガーが正常に動いています。

まずは、サイトが表示されるかどうかを確認したいので、上から二段目のメニューにある緑のボタン↓を処理が終了するまで、何回か押します。

下にある、Internal Web Browserに、あなたのWordPressトップページが表示されたら、成功です。Debugger- Perspectiveから、PHP-Perspectiveに戻したいときは、Window > Open Perspective > PHP を選択します。

以上で、Eclipseインストールからデバッガーの動作確認まで終了しました。大変お疲れさまでした！

手順概要

1. 前準備

検証するサイトのアドレス

検証するサイトのドキュメントルート

PHPのバージョン

test.php

PHP実行ファイルへのパス

php.iniファイルへのパス

xdebug.soファイルへのパス

2. Eclipse本体をインストールする

Eclipse – Indigoのサイトへ行く

パッケージを選択してダウンロードする

インストール＆初起動

3. PDTプラグインインストール

メニュー > Help > Install New Software…を開く

4. XDebugの設定をする（php.iniファイルの編集）

5. Eclipseの環境設定

PHPの設定

サーバーの設定

デバッガの設定

エンコードをUTF-8に変更する

6. PHPプロジェクト作成

プロジェクト新規作成

補足1 Invalid project contents directory エラー発生したとき

補足2 Perspectiveの変更

エラーと警告表示をカスタマイズ

デバッグ条件設定

「WordPress Tips」の記事