PHPの開発環境を構築する(その2):Eclipseの基本操作

「Pleiades All in One」のPHPパッケージにてインストールしたEclipseに、新規プロジェクトを作成します。そしてPHPファイルを作成しデバッグするまでの、Eclipse+PDTの基本的な使い方をレポートします。

本稿は「PHPの開発環境を構築する(その1):「Pleiades All in One」のインストール」に記載した通りに設定しました、以下の環境を対象に記載しております。各ソフトウェアのバージョンが異なる場合は動作が異なると思いますのでご留意ください。

  • OS:Windows7 64bit
  • 環境:Pleiades All in One、Eclipse 4.3 Kepler、PHPパッケージ
    • Eclipse Platform Version: 4.3.0(C:\pleiades\eclipse\eclipse.exe)
    • ApacheFriends XAMPP Version 1.8.1(C:\pleiades\xampp)
      • Apache 2.4.3
      • MySQL 5.5.27 (Community Server)
      • PHP 5.4.7 (VC9 X86 32bit thread safe) + PEAR
      • phpMyAdmin 3.5.2.2
      • XAMPP Control Panel Version 3.1.0 by hackattack142

<2014年12月22日追記>

Pleiades All in One Eclipce 4.4 Lunaの場合、付属のPDT(ver.3.3.0)では、デバッグモードでのステップ実行の際に、実行行がエディタに反映されないという不具合がありました。ステップ実行をする場合は、以下のようにPDTのアップデートが必要です。

  • メニューより「ヘルプ>更新の確認」を選択する。
  • 「選択をすべて解除」をクリックしてチェックした後、「PHP開発ツール (PDT)」をチェック」。(2014年12月22日現在、最新はver.3.3.2)
  • 「次へ」をクリックし、以下ウィザードに従ってアップデートする。

</2014年12月22日追記>

はじめに

PHPの開発環境を構築する(その1)」からしばらくたってしまいましたが(その2)としてEclipse+PDTの基本操作をレポートします。

当初はミラーサイトをそのままプロジェクトにしてWordPressのテーマやプラグインの開発を始めようと思っていました。しかしその前に要求を管理するためのTracをインストールして、Tracの補助ツールが必要になりました。

そこでまず、Tracの補助ツールのプロジェクトを作成し、そこで新規開発を始めることにします。また「WordPressテーマ開発(準備編):サイトをローカルにミラーリングする」では「http://localhost」でローカルのミラーサイトが表示されるよう設定しましたが、本開発ではサブドメインの「http://trac.localhost」でプロジェクトのサイトが見えるように設定します。

本稿ではプロジェクト名や関連フォルダ、サイトをtracとしていますが、任意の名前での読み替えをお願いいたします。

Eclipseの起動

「C:\pleiades\eclipse\eclipse.exe」でEclipseを起動します。(ランチャー等に登録しておきます。)

ワークスペースの選択ダイアログ

しばらくしてワークスペースを聞かれます。私はskydriveのフォルダの中に作成した「c:\skydrive\workspace」を指定しました。ここはMicrosoft SkyDriveと同期しており、自動的にバックアップができる仕組みです。(以降のc:\skydrive\workspaceは各位の環境に読み替えてください。)

Eclipseの起動直後画面

起動直後はこんな画面です。

このあとEclipseの操作をしていきますが、不如意に各ペイン(画面上のパネル)やタブをドラックしてしまい、画面が変わってしまう場合があります。そのときは、メニューより「ウィンドウ>パースペクティブのリセット」を選択することで、画面をデフォルトに戻すことができます。

プロジェクト作成

まず最初に、プロジェクトを作成します。

プロジェクトの名前は’trac’として、その中に最初のファイルであるindex.phpを作成します。

新規プロジェクト

上部のメニューより、「ファイル>新規>PHPプロジェクト」を指定すると、新規PHPプロジェクトのダイアログが開きます。

新規PHPプロジェクトのダイアログ

プロジェクト名を「trac」とします。後はデフォルトのまま「完了」をクリックします。

PHPエクスプローラー

左側のPHPエクスプローラーにtracが表示されました。

ファイルの作成

次にtracの下にindex.phpを作成します。

PHPエクスプローラーの右クリックメニュー

PHPエクスプローラーからtracを右クリックし、メニューより「新規>PHPファイル」を選択します。すると新規PHPファイルのダイアログが開きます。

新規PHPファイルのダイアログ

「ファイル名」をindex.phpとし、「次へ」をクリックします。

新規PHPファイルのダイアログ

テンプレートに「New PHP file – HTML frameset」を選択して、「完了」をクリックします。

PHPエクスプローラーにindex.phpが表示されます。これをダブルクリックすると中央のペインにコードが表示され、編集できるようになります。

PHPエクスプローラーとコードビュー

ここでindex.phpを編集します。framesetはいらないので削除し、noframesの中のbody以下だけ残しました。Ctrl+Sで保存できます。

フォルダの作成

ここで、http://trac.localhostのドキュメントルートとなるpublic_htmlと、テストドライバを格納するtestの、2つのフォルダがあったほうが良いことに気づきます。

PHPエクスプローラーの右クリックメニュー

PHPエクスプローラーからtracを右クリックし、メニューより「新規>フォルダー」を選択します。すると新規PHPフォルダーのダイアログが開きます。

新規PHPフォルダーのダイアログ

「フォルダー名」にpublic_htmlと入力し、「完了」をクリックします。

するとPHPエクスプローラーにpublic_htmlというフォルダが表示されるようになります。同様にtestフォルダも作成します。

ファイルの移動

次にindex.phpをpublic_htmlに移動します。

PHPエクスプローラーの右クリックメニュー

PHPエクスプローラーでindex.phpを右クリックし、メニューより「リファクタリング>移動」をクリックします。すると「リソースを移動する」というダイアログが開きます。

「リソースを移動する」ダイアログ

宛先にpublic_htmlを選択し、「OK」をクリックします。ファイル名を変える場合もリファクタリングからになります。恐らくEclipseが依存関係を管理して、必要な個所を自動的に修正してくれるのでしょう。

以上でtrac/public_html/index.phpができました。

ローカルのWEBサーバーの設定

ここでEclipseを離れ、「http://trac.localhost/」がブラウザで表示されるように設定します。

「http://localhost/」で構わない方は、本章の設定は必要ありませんのでスキップしてください。

hostsの編集

trac.localhostのようなドメインがリクエストされた場合、Windowsはネームサーバーに聞きに行くのですが、ネームサーバーはもちろん知りませんので解決できません。そこでhostsという、ドメイン名を自己解決するファイルに、trac.localhostの情報を記述します。

Windows7の場合は、C:\Windows\System32\drivers\etcにhostsがあります。hostsをテキストエディタで開き、末尾に次の一行を追加します。

127.0.0.1    trac.localhost

(ワイルドカードは使えないみたいです。またlocalhostにこだわる必要もありませんね。)

(2015年3月15日追記:Windows8.1では、管理者権限でエディタを開かないとhostsが編集できませんでした。やり方は、エディタを立ち上げるところで、右クリックして「管理者として実行」です。プロセスが密かに立ち上がっているエディタの場合は、タスクマネージャでタスクを終了しないと行けないかもしれません。またファイルを開くダイアログにてhostsのディレクトリが開けない場合は、ファイル名にフルパスを書くと読み込めるかもしれません。「かも知れません」ばかりですが…。)

httpd.confの編集

XAMPPのコントロールパネルを起動します。Configからhttpd.confをテキストエディタで開き、ファイルの末尾に以下を追記します。

#	trac.localhostの設定
<virtualHost trac.localhost:80>
	ServerName trac.localhost
	DocumentRoot "C:/skydrive/workspace/trac/public_html"
</virtualHost>

<Directory "C:/skydrive/workspace/trac/public_html">
    Options Indexes FollowSymLinks Includes ExecCGI
    AllowOverride All
    Require all granted
</Directory>

そしてApatcheを再起動します。Apacheが無事起動したら、ブラウザから「http://trac.localhost」にアクセスして先ほど編集したindex.phpが表示されることを確認します。

実行環境の設定

Eclipseに戻り、実行環境を設定します。

WEBブラウザーの設定

メニューより「ウィンドウ>設定」を選択して、設定ダイアログを開きます。そして左側メニューより「一般>WEBブラウザー」を選択します。

設定ダイアログ:WEBブラウザーの設定

Eclipseから開くWEBブラウザを選択し「適用」をクリックします。

PHPサーバーの設定

続いて「http://trac.localhost」を設定していきます。「http:// localhost」を利用する方は必要ありませんので、本節はスキップしてください。

設定ダイアログの左側メニューより「PHP>PHPサーバー」を選択します。

設定ダイアログ:PHPサーバーの設定

右側の「新規」をクリックします。

「PHPサーバーの作成」ダイアログ

「名前」を「trac.localhost」、「ベースURL」を「http://trac.localhost」として「完了」をクリックします。

設定ダイアログ:PHPサーバーの設定

trac.localhostが追加されました。

実行構成の設定

設定ダイアログの「OK」をクリックして、ダイアログを閉じます。

続いてメニューより「実行>実行構成」を選択します。

実行構成ダイアログ

左側のツリーにて「PHP Web アプリケーション」をクリックして選択し、左上の(新規の起動構成)をクリックします。すると「PHP Web アプリケーション」の下に「新規構成」が作成され、選択された状態になります。

右側のペインにて設定をしていきます。

実行構成ダイアログの「サーバー」タブ

「名前」を「trac.localhost」とし、「PHPサーバー」にtrac.localhostを選択します。(locahostでよい方はそのまま。)

そしてファイルを「/trac/public_html/index.php」とします。「URL」は「自動生成」のチェックを外してから「/index.php」とし、「適用」をクリックします。

以上で実行環境の設定は終了です。「閉じる」をクリックしてダイアログを閉じます。

実行とデバッグ

では実際にプログラムを作成し、実行してみましょう。

簡単なプログラムの作成

index.phpを編集して以下のようにしました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<?php
	$message = "Hello World!";
	echo "<h1>$message</h1>";
?>
</body>
</html> 

実行

これを実行してみます。

Eclipseのツールバー

上部のツールバーより実行ボタンをクリックします。(複数の実行構成がある場合は、右の▼をクリックし、プルダウンメニューより目的の実行構成をクリックします。)

するとブラウザが立ち上がり、ページが表示されます。

私は開発用ブラウザにFirefoxを使っているのですが、気になるのは実行の度に新しいタブが開くことです。気が付くとタブがいっぱい表示されています。まあ気が向いたらウインドウを閉じればよいのですが、良い方法はないものでしょうか。

デバック

次にデバッグ実行をしてみます。

ブレークポイントの設定

まずブレークポイント(プログラムを停止させる場所)を設定します。

コードビュー

コードビューから10行の左端(行番号の左)をダブルクリックします。すると10行にブレークポイントが設定できます。ブレークポイントはブレークポイント アイコンで表されています。

余談ですが私の近辺では、ブレークポイントを設定することを「ブレークを張る」と言っていました。

デバッグ実行

Eclipseのツールバー

上部のツールバーよりデバッグ ボタンをクリックします。(複数の実行構成がある場合は、右の▼をクリックし、プルダウンメニューより目的の実行構成をクリックします。)

パースペクティブの切り替えの確認

するとパースペクティブの切り替えがアナウンスされますので、「はい」をクリックします。「常にこの設定を使用する」にチェックすると次回から聞かれなくなります。

デバッグ パースペクティブ

画面が切り替わります。

パースペクティブという語は、どうも画面のことのようです。今までコーディングに使っていた画面を「PHPパースペクティブ」、この画面を「デバッグ パースペクティブ」ということにします。ちなみにパースペクティブは上部ツールバーの右端に表示されているパースペクティブに関するツールバーをクリックして切り替えることができます。

ついでに用語の整理ですが、パースペクティブを分割するパネルをペイン、ペイン上部のタブによって表示切り替えができるウィジェットをビューと呼ぶことにします。

コードビュー

デバッグ パースペクティブ中段左のコードビューです。現在は、左端に矢印が表示されている8行で停止しています。

デバッグ・ツールの概説

デバッグには、上部ツールバーのうち、以下のあたりをよく使います。

デバッグに関するツールバー

基本的に使うボタンは以下の通りです。

アイコン 名前 説明
再開ボタン 再開 停止位置から実行を再開します。
中断ボタン 中断 デバック実行を途中終了します。
ステップ・イン ボタン ステップ・イン 停止位置より一行進みます。停止位置が関数やメソッドだった場合はその内部に進みます。
ステップ・オーバー ボタン ステップ・オーバー 停止位置より一行進みます。関数やメソッドの中には入りません。
ステップ・リターン ボタン ステップ・リターン 関数やメソッドの中から抜け、呼び出し元の次の行までジャンプします。

もし最初の行で停止したくない場合は、が設定ダイアログのデバッグ設定へのショートカットになっていますので、そこから設定できます。

変数ビューとブレークポイントビュー

では、設定ボタンをクリックして実行を再開します。

コードビュー

ブレークを張った10行で停止しました。コードビューの’$message’をポイントすると、中身がポップアップ表示されます。

左上のペインを見てみます。

変数ビュー

変数ビューにて、各変数の中身を見ることができます。

ブレークポイント ビュー

ブレークポイント ビューにて、ブレークポイントの有効/無効を切り替えたり、右クリックメニュー「条件の設定」より停止条件を設定することができます。

デバックの終了

再び再開ボタンをクリックして実行を再開します。するとプログラムを走り切って終了します。ブラウザにもページが表示されています。

ブレークポイントの削除は、ブレークポイントビュー、コードビューそれぞれにて行えます。ブレークポイントビューからは、ブレークポイントを右クリックして表示されるメニューより「除去」を選択します。コードビューからは、行番号の左のブレークポイント アイコンをダブルクリックします。

デバッグが終了したら、右上のPHPパースペクティブ ボタンをクリックしてPHPパースペクティブに戻ります。

以上で、コーディングとデバッグができることを確認しました。

まとめ

Eclipseにプロジェクトを新規作成しました。そして最初のPHPファイルを作成し、実行およびデバッグ実行してみました。

私はまだEclipseにはまだまだ習熟していません。しかし本稿に示した基本的な事項のみで開発は開始できます。

次回(その3)は、Eclipse+PDTをカスタマイズしてみたいと思います。

2 thoughts on “PHPの開発環境を構築する(その2):Eclipseの基本操作

  1. kj

    久々にeclipse見たらバージョン上がってて
    設定方法がいまいちわからなかったところ
    とてもわかりやすいサイトで助かりました。

    Reply

コメントを残す