Eclipse PDT + XAMPP で WordPress の開発環境をつくる (3)

Eclipse PDT プロジェクトへの既存ファイルの取り込み

インストールした Eclipse PDT に「Eclipse PDT + XAMPP で WordPress の開発環境をつくる (1)」でインストールした WordPress ファイルをプロジェクトとして取り込んでみます。

Eclipse ではファイルの集合をプロジェクトとして扱い、複数のプロジェクトを管理することができます。 ここでは、先にインストールした WordPress をそのプロジェクトのひとつとして管理対象に加える操作を行います。(たとえば異なるバージョンの WordPress を各プロジェクトとして管理できます)

ファイルメニューから、新規-> PHP Project を選択します。

プロジェクト名を wordpress-27x に、Content 欄のラジオボタンを「Create project from exsisting source」とし、以下の WordPress をインストールしたディレクトリを指定します。

   1: C:\Develop\xampp-win32-1.7.0\htdocs\wordpress-27x

この操作で、既存の PHP ファイルをプロジェクト管理下とすることができ、またファイルの修正も直接そのディレクトリに対して行われます。 このディレクトリは Apache からも閲覧していますので、Eclipse PDT からの修正をブラウザからのアクセスに反映させることができます。

設定できたら終了ボタンを押下します。

image

左ツリーに、インストールした WordPress が展開されます。 また .php ファイルクリックでエディタが立ち上がり .php ファイルの修正が行えることが確認できます。

image

テキストエディタは一般的なそれの操作とほとんど変わりません。

たとえば、wp-content/themes/default 配下のデフォルトテーマなどを修正し、ブラウザで以下の URL にアクセスして画面が更新されるのを確認してみましょう。

Eclipse PDT のプロジェクトと、Apache からみえるドキュメントが一致していることが分かります。

Eclipse PDT の機能

ここからは通常のテキストエディタにない統合環境特有の編集機能をみていきます。 難しい操作はありませんので、ぜひ手になじませてください。

リアルタイムエラー申告

Eclipse PDT は編集中の PHP/HTML/JavaScript 等の構文をリアルタイムに監視し、それにエラーがあれば Problems ビュー(画面下部)に申告してくれます。

image

標準状態ではプロジェクト全体のエラー申告が表示され、少々使いづらいためフィルターを設定して、編集中のファイルだけにしぼると良いでしょう。

Problems ビュー の右に配置されたドロップダウンから選択上の警告を選択します。

image

また同じドロップダウンの「内容の構成」からチェックするエラーも選択することができます。(重大度にエラーと警告が含まれることを確認してください)

image

タイプ部分で表示するエラーを選択できます。 HTML の監視に関しては、PHP からの include によるファイルをまたぐタグ整合までは監視できませんのでチェックをはずしたほうが良いかもしれません。(WordPress プロジェクトでエラーが多く申告されるのはこのためです)

では実際にテーマファイルを修正してエラー申告の確認をしてみましょう。 たとえば以下のファイルを修正してみます。

   1: wp-content/themes/default/single.php

このファイルで以下の部分でタグを表示している箇所があります。

   1: <?php the_tags( '<p>' . __('Tags:', 'kubrick') . ' ', ', ', '</p>'); ?>

少々複雑です。 開始タグ指定 <p> へスタイルを適応しようと過って引数に HTML のシングルコーテーションを入れてしまったとします。

   1: <?php the_tags( '<p style='hoge'>' . __('Tags:', 'kubrick') . ' ', ', ', '</p>'); ?>

Eclipse PDT はこの修正直後に以下のように画面で警告を発生します。

image

一般的には修正後ブラウザ閲覧を行い そこに表示されたPHP エラーの表示をみて気がつく問題ですが、統合環境を用いると未然にこのようなケアレスミスをみつけることができます。

入力補完機能

Eclipse PDT はエディタ上の編集位置を認識し、PHP や JavaScript の関数や HTML のタグなどを補完入力することができます。 たとえば、テーマファイル修正でテンプレートタグ(PHP の関数)を入力するには以下の操作で行うと便利でしょう。

まず入力エリアが <?php ?> の間であることを確認します。 この場所では Eclipse PDT は PHP の関数について補完を試みます。 たとえば、WordPress には the_ ではじまるテンプレートタグがたくさんあります。

テキストエディタ上で、the_ まで入力して CTRL + SPACE キー操作(補完指示)を行います。

image

このようにプロジェクトに存在する関数を一覧表示し、カーソルキーで選択可能な状態になります。 また、PHP の関数が PHPDoc 形式でかかれている場合は、それをホバー表示し関数に対する引数が分かるようになります。(現在 WordPress の多くの関数は PHPDoc 化されています)

テーマ作成時のテンプレートタグの入力や、プラグイン作成時の関数入力で大きな力を発揮してくれる機能です。 テキスト入力位置によって適切に、HTML タグ補完、JavaScript 補完などモードが切り替わりますので、このことを少し意識して使うと便利です。

関数定義位置へのジャンプ

Eclipse PDT では関数上や requre ファイル位置でで F3 キーを押下することで、その関数の定義位置に直接ジャンプすることができます。 テンプレートタグの動作を知るときや、プログラムの動作を追う場合に有効です。

たとえば、テーマファイル中の wp_link_pages テンプレートタグの上で F3 キーを押下してみます。

image

このように、関数定義位置にファイルをまたいでカーソルがとびます。

image

テンプレートタグは、引数の先頭位置にデフォルト値などが書いてあることが多くありますので、これを参考に引数を組み立てることができます。

ALT + ← を押下すると元の位置に戻ります。

image

テーマ作成だけでなく、プラグイン作成や解析時にも非常に有効な機能です。

PHP 組込み関数支援

PHP には数多くの組込み関数があり、その名称や引数指定を覚えるのはなかなか大変です。 Eclipse PDT には組込み関数利用を支援するためにいくつかの機能があります。

Eclipse PDT 2.0 ではプロジェクトに組込み関数の PHPDoc が自動で組み込まれます。

image

このことにより、先に記述した入力補完機能とその説明ホバーが組込み関数でも使うことができます。

mb_ と入力し、マルチバイト系の関数を一覧してみました。

image

また入力後の組込み関数に対して、SHIFT + F2 を押下することで PHP のマニュアルをひくことができます。

image

PHP Function ビュー(ウインドウ->ビューの表示から選択)では組込み関数などが一覧でき、それらをフィルターで絞ることもでき、さらに右クリックからマニュアルがひらけます。

image

組込み関数に関する全ての操作を統合環境上で行えるので、効率よくソースを構築していくことができるでしょう。

ローカルヒストリー

ファイル編集中に最終保存よりも過去の修正の方が良かったといった場合があります。 Eclipse は保存するごとに自動的に履歴をとる機能が動作していますので、これを使えば作業中容易にファイルを以前の状態に戻すことができます。

該当ファイルを右クリックし、比較からローカルヒストリーを選択します。

image

保存日付が表示されるので、 過去のものをダブルクリックしてみます。

image

現在のものと、過去のものの差分が表示されます。

image

ここで内容をクリップボードにコピーしたり、右上のアイコンから現在のファイルへのマージなどが行うことができます。 また過去日付を右クリックし「コンテンツを取得」とすることで現在のものにそのまま上書きすることもできます。

この機能により、安心してソースのリファクタリングをかけることができます。 分からなくなったら元に戻せばよいだけです。(残念ながら変数リネームなどのリファクタリングはまだできないようです)

以上がまずは知っておくと便利な、主にテキスト編集系の Eclipse PDT の機能です。 他にもいろいろ技が隠されていますので必要に応じて身につけていくといいでしょう。

Eclipse PDT による PHP のデバッグ

Eclipse PDT と XAMPP に入っている xdebug モジュールを利用すると、実行中のプログラムを任意の位置で停止させ、ソースコードとあわせて1行ずつ動作させるステップ実行や、変数の値の監視や書き換えが行えるウォッチなどのいわゆるデバッグ機能を使うことができるようになります。

プラグイン作成や、WordPress の動作に不具合があった場合、原因を突き止めるのが非常に楽になりますので、そういった作業をされる方は設定するとよいでしょう。

Apache への xdebug モジュールの組み込み

まず XAMPP の Apache に xdebug モジュールの組み込みを行います。 Windows 版の XAMPP の場合、現在 xdebug 2.0.3 モジュールが添付されていますが Windows Vista の場合、Apache が落ちる問題があります。

[2008-12-30] — Xdebug 2.0.4

Fixed crash on Vista where memory was freed with routines from a different standard-C library than it was allocated with. (Patch by Eric Promislow ericp@activestate.com).

もし該当する場合は、XDebug サイトから Windows 版の 2.0.4 以降のモジュールをダウンロードしてします。(ここではこの XDebug 2.0.4 で動作させる手順を書きます。ただし、2.0.4 でも Vista の場合まだ落ちるかもしれません)

XAMPP 1.7.0 の場合は、PHP Version 5.2.8 であるため、5.2 用の XDebug モジュールをダウンロードします。

Xdebug: Downloads

5.2 VC6

ダウンロードしてきた php_xdebug-2.0.4-5.2.8.dll を以下のディレクトリに格納します。

   1: C:\Develop\xampp-win32-1.7.0\php\ext

以下の php.ini ファイルを修正します。 Zend と XDebug エントリをそれぞれ修正し、XDebug 側を有効にします。

   1: [Zend]
   2: ;zend_extension_ts = "C:\Develop\xampp-win32-1.7.0\php\zendOptimizer\lib\ZendExtensionManager.dll"
   3: ;zend_extension_manager.optimizer_ts = "C:\Develop\xampp-win32-1.7.0\php\zendOptimizer\lib\Optimizer"
   4: ;zend_optimizer.enable_loader = 0
   5: ;zend_optimizer.optimization_level=15
   6: ;zend_optimizer.license_path =
   7: ; Local Variables:
   8: ; tab-width: 4
   9: ; End:
  10:  
  11: [XDebug]
  12: ;; Only Zend OR (!) XDebug
  13: zend_extension_ts="C:\Develop\xampp-win32-1.7.0\php\ext\php_xdebug-2.0.4-5.2.8.dll"
  14: xdebug.remote_enable=true
  15: xdebug.remote_host=127.0.0.1
  16: xdebug.remote_port=9000
  17: xdebug.remote_handler=dbgp
  18: ;xdebug.profiler_enable=1
  19: ;xdebug.profiler_output_dir="C:\Develop\xampp-win32-1.7.0\tmp"

ファイルを保存し、Apache の再起動を行い以下の URL にアクセスします。

phpinfo 画面で xdebug のロードを確認します。

eclipse04

eclipse05

Zend のモジュールとしてリードされていることと、remote.debug が true になっていればうまく設定できています。

XDebug は、WordPress で使われる mod_rewrite 時でもうまくデバッグできます。

Eclipse PDT のデバッグ設定

次に Eclipse PDT でデバッグを行う設定をします。

ウインドウ->設定から PHP の debug 欄を開き、PHP Debugger に XDebug を設定します。 また、Break at First Line のチェックをハズします。

image

次に、実行メニューからデバッグの構成を開き、PHP Web Page に以下の設定をし、適応を押下し閉じます。

image

次にプログラムを一時停止したい位置にブレイクポイントを設定します。 たとえば、テーマファイルの以下の位置に設定してみます。

   1: wp-content/themes/default/index.php

止めたい行の左をクリックするとブレイク行マークが出ます。(実行->ブレイクポイントの切り替えでも可能)

image

ウインドウ->ビューの表示、その他から、デバッグビューを表示させておきます。

image

再度、実行->デバッグの構成を開き、先ほどの構成を選択しデバッグボタンを押下します。

image

ブラウザが起動し、Eclipse に制御が返ります。 とりあえず、同じパースペクティブでかまいませんのでいいえボタンを押下します。

image

ブラウザの表示が停止し、Eclipse で先ほど設定した位置でプログラム動作がとまっているのが分かります。

image

この状態で、ウインドウ->ビューの表示から、変数ビューを選択します。

image

現在の変数の設定値が表示できます。

image 

ソースコードの表示を移し、F5 キー(ステップイン)を押下していくと、1行ずつ次々にコードが実行されていきます。 関数などを読み飛ばしたいときは、F6(ステップオーバー)を押下します。 また、デバッグ実行中にブレイクを設定し、F8(再開)でそこまでとばすことも可能です。

とりあえず、F8 を押して後続を再開させると処理が終了し、ブラウザに表示が現れることでしょう。

再度デバッグする場合は先ほど起動したブラウザをそのままつかえば、またブレイク行で停止することができます。 プラグインの管理画面等のデバッグも、そのままの操作で管理画面にログインすればブレイク可能です。

作業中長時間のコーディングなどを行う場合にデバッガを終了させたい場合は、デバッグビューから停止を選択します。 また、再開したい場合は右クリックで再起動を選択します。

image

以上でデバッガの設定は終了です。

WordPress 実行中におかしなところを発見した場合は、該当の箇所にブレイクを張ってアクセスし、変数ウォッチやステップ実行を行うことで比較的簡単に原因を探ることができるでしょう。