これまで私はオシャレ~な開発環境を使ってこなかったので、昨今の閉塞感を打破すべく新しいもの・流行ものに手を出してみたいと思います。
そこで目を付けたのが、開発の現場で広く使われているっぽい『eclipse』という統合開発環境(IDE)です。
膨大なファイルをプロジェクト単位で管理しやすくしたり、
コーディング中のちょっとしたタイプミスを知らせてくれたり、
よく使うパターンをキーワードに割り当てておいて必要な時に置換したり、
デバッグをかけて実行中のエラー原因を特定したりと、、
こういったプログラミング支援をしてくれるのが、統合開発環境という感じですかね。。
つまりプログラミング開発向けに作られた支援システムなので、使いこなせた日にゃあ、そりゃあーた、開発効率アゲアゲ↑ですYO!
膨大なファイル管理ならCMSでもできますが、プログラミングの部分までは支援してくれません。
超便利なエディタならタイプミス検出やパターンを置換するくらいはできますが、プログラムのデバッグと連携まではできないでSHOW。
そこでそこでeclipseの出番というわけですな
eclipseは元々IBMがJava用にJava言語で作り始めたものらしいですが、より広く使ってもらえるようにオープンソース化したことでいろいろな企業が協力して今に至る感じらしいです。
なので今ではプラグインを足すだけでJava以外にもC++やPython, Ruby, PHPなどでも使えるオシャレ番長的な開発環境というわけです。
PHP用だけでもいくつかプラグインはあるようで、その中でも広く使われているであろうPDT (PHP Development Tools)というものを使ってみようと思うのdaaaaa
インストールは簡単で、Eclipse + PDTの組み合わせが日本語化されてパッケージになった「Pleiades」というものが利用できるようになっています。(感謝)
この中にはxamppが丸ごと含まれているのでPHPやMySQLまで丸々入っています。
それとJavaで作られたソフトを動かすためのJREもちゃんと入っています。
なので全部丸々入っているファイルは容量が352MBもありました。
これだけでPHP開発環境が一式揃うわけですから、何から何まで揃ってる鍋のお取り寄せセットといった感じでしょうか。
eclipseの日本語化であるPleiadesを配布しているサイト
へ行き、新しそうなやつを選びます。
現在のところ以下の "Helios" というものがいちばん新しいリリースコード名なのでこれを選んでダウンロードのページに進みます。
Eclipse3.6 Helios Pleiades All in One |
ダウンロードページで「Full All in One(JREあり)」ラインと「PHP」ラインの交差するところにある「Download」を押してpleiades-e3.6-php-jre_20101025.zip(352MB)をダウンロードしましたよん。
このファイルをCドライブ直下で解凍します。
するとpleiades-e3.6-php-jre_20101025というディレクトリが出来るので、コンパクトなディレクトリ名(pleiadesなど)に変えておきます。
ディレクトリ配置
+- pleiades/
+- .metadata.default/
+- eclipse/
+- xampp/
xamppディレクトリをC直下に移動させておきます。
+- pleiades/
| +- .metadata.default/
| +- eclipse/
+- xampp/
これでインストールは完了です。
解凍しただけで特にレジストリをイジるとかしていない為、ディレクトリを削除するだけでアンインストールできるので容量さえあれば手軽に試すことができると思います。
まずWeb開発を行うにあたって、先にApacheを起動させておきます。
■ Apache起動
C:/xampp/xampp-control.exe実行でコンパネを起動し、Apacheの「Start」ボタンを押してApache起動完了です。
xamppのコントロールパネル
コンパネは[Exit]を押して完全に閉じてもいいですが、右上のX印を押してタスクバーに入れておけばいつでもコンパネを左クリックで表示できて便利。
(C:/xampp/xampp-start.exe実行で一気に起動させることもできます。このときはApacheとMySQLが起動します。)
■ eclipse起動
次にeclipse本体を起動させるために
C:/pleiades/eclipse/eclipse.exeを実行します。
eclipse(Pleiades All in One)の起動ロゴ
最初にeclipseを起動させた時にはワークスペースを聞いてくるのでドキュメントルートである「C:/xampp/htdocs」を指定しておきます。
このワークスペース内に今後プロジェクトを作っていくことになります。
eclipseの外観(PHPのパースペクティブ)
■ パースペクティブとビュー
「ビュー」と呼ばれる小窓に分かれた構成になっています。
それぞれのビューにはタブがあって複数の表示を切り替えられるようになっているものもあります。
このビュー構成(レイアウト)は「パースペクティブ」と呼ばれていて、PHP開発用のプラグインであるPDTの場合はデフォルトの「PHP」とデバッグ用の「PHPデバッグ」という2つのパースペクティブが用意されています。
作業内容に合った最良のパースペクティブがそれぞれ(PHP以外にもC++やJavaなど)にプラグインごとに用意された作りになっているので、バースペクティブを選んで目的の画面に切り替えていく形になります。
■ エクスプローラとエディタ
左サイドに「エクスプローラ」があり、ここに階層構造で表示されるプロジェクトおよびファイルを指定して中央にある「エディタ」を切り替えて編集していく形になっています。
■ ツールバーの各種ボタン
始めは何も無いので「新規」ボタンからプロジェクトを作成したり、各種ファイルを作成したりしていくことになります。
「デバッグ」するときは虫(バグ)のボタンから行います。
「実行」するときは実行ボタンを押します。
実行構成(後述します)が作られてない場合は「Web」として実行してブラウザ表示を行うか、「コマンド」として実行するかを聞いてきます。
■ 設定
「ウィンドウ」メニューの「設定(Preferences)」を選んで各種設定を行います。
まずはここの設定を最初に済ませる必要があります。(次項参照)
「ウィンドウ」メニューの「設定(Preferences)」を選ぶと設定画面が出現します。
画面左サイドが階層構造のメニューリストになっています。
eclipseの設定画面
メニューいちばん上の「一般(General)」を選んで全体的な設定を行い、その後で個別の設定を行います。
■「一般」の設定
「ワークスペース」画面のテキスト・ファイルのエンコードを、デフォルトMS932に設定します。
MS932というのは、マイクロソフト社がシフトJISを拡張した文字コード体系です。(cp932と多分同じ)
■「PHP」の設定
PHPの実行には2種類あって「コマンドベース」実行と「Webベース」実行に分かれています。
人それぞれの使い方がありますが、基本的にPHPはWebベースで実行させることになると思います。
○ Webベース部分の設定
「PHPサーバー」画面を表示させ、そこでドキュメントルートを設定できるようになっています。
ドキュメントルートを示すURLは「http://localhost」になると思います。これは始めから設定済みでした。
もし登録がなければ「新規」で登録します。
○ コマンドベース部分の設定
「PHP実行可能ファイル」画面を表示させ、リストに無ければ「追加」ボタンを押し「名前」を適当に付けます。
名前: | php |
実行可能ファイル・パス: | C:\xampp\php\php.exe |
PHP iniファイル: | C:\xampp\php\php.ini |
SAPI Type: | CLI |
PHP デバッガー: | XDebug |
Pleiades All in Oneパッケージでは C:\xampp\php\php.iniがあり、その中にXDebugの設定が済まされているので以下を書き足す必要はありませんでした。
xdebug.remote_enable = 1
以上が「Web」か「コマンド」かの設定です。
次はその他の設定です。
○ PHPエディタの設定
「エディター」「テンプレート」から「新規」ボタンで、テンプレートを登録していくことができます。
PHPを記述する上での定型のものをここに設定しておけば、エディターが便利になります。
例えば「新規」ボタンを押して、名前: | strict |
説明: | 厳密なやーつ |
パターン: | error_reporting(E_ALL); ini_set("display_errors", 1); |
上記のように登録しておけば、PHPエディタ使用中にstrictと打つと、パターンに設定したものに置き換えることができます。
○ PHPデバッグの設定
「デバッグ」のエンコード設定をUTF-8からMS932に変更する。(転送・出力両方)
■「Web」の設定
○ 文字コード周りの設定
「CSSファイル」でエンコード(どの文字コードで書かれているか)を設定できるので、「日本語,Shift_JIS」に設定する。
「HTMLファイル」も同様にエンコードを「日本語,Shift_JIS」に設定する。
この設定がエディタでの書き込み保存時の文字コードとして使われる。
また、HTMLファイルではテンプレートの${encoding}変数部分に反映される。
というテンプレートを使う場合に
に置き換わる。
○ テンプレートの登録と使い方
テンプレートは「Web」の「HTMLファイル」「エディター」「テンプレート」から登録できる。
登録済みのものは、ファイル作成時にファイル名を付けてから「次へ」ボタンで表示された画面から選択できるようになっている。
CSSファイルも同様にテンプレート登録と置き換えができる。
設定が終わればあとは慣れるまで使いまくります。
■ 最初にやるべき操作
最初はなにも無いので「新規」ボタンから「PHPプロジェクト」を選んでプロジェクト名を付けます。
このプロジェクト名と同じ名前のディレクトリがワークスペース内に作成されます。この中にファイルを作成していく形になります。
ファイル作成もこれまた「新規」ボタンから「PHPファイル」や「HTMLファイル」を選んでファイル名を付けて作成していきます。
ファイル名を付けた後に「次へ」ボタンを押すと、登録済みテンプレートを初期値としてファイル作成することもできます。
■ エディタで編集
プロジェクトを作りその中にファイルを作成できたら次はエクスプローラから編集したいファイルを選んで、中央にあるエディタで編集していくことになります。
ファイルを選んでは編集を繰り返していくのが主な作業になっていくでしょう。
編集中には「Ctrl + Space」で候補窓(コンテンツアシスト/コード補完)を出現させてそこから選択できる機能が使えます。(プロジェクト内ファイルのみ)
記述の凡ミス程度ならエディタがリアルタイムで行頭にX印を付けたり赤い波線など引いたりして知らせてくれます。
○ 保存と戻し
「Ctrl + Sキー」で編集中のファイルを保存できます。
「S」はSave(保存)のSですね。
逆に、元に戻したい場合には「Ctrl + Zキー」で戻すことができます。
「Z」は絶対戻すのZですね。
■ PHPの実行
「実行」ボタンを押すと実行を開始して結果が下段のビューに表示されます。
PHPファイルに対して「実行の構成」が未作成なら最初に「PHP Webページ」実行か「PHPスクリプト」実行かを聞いてきます。(構成の自動作成)
前もって手動で実行の構成を作成しておく場合には「実行」「実行の構成」を選んで実行構成画面を表示させてから、左欄の「PHP Webページ」を選択した状態で左上の「新規の起動構成」ボタンを押して構成を作成します。
作成した構成の「サーバー」タブにあるファイル欄に「/Project/foo.php」のように設定します。
実行構成画面から「PHPスクリプト」を選択した状態で構成を作成すれば、コマンドとして実行構成を作成することができる。両方で実行させたい場合は両方の構成を作るしかないかも。。
■ HTMLファイルの表示確認
HTMLファイルはプログラムではないので実行できないのは当然ですが、編集後に実際のWeb表示を確認することはできます。
エクスプローラのファイル名を右クリックして「アプリケーションから開く」「Webブラウザー」を選ぶとエディタ位置にブラウザ表示を確認することができます。
あとはエディタ上部のファイル名が表示されたタブでHTML編集に切り替えて修正してはWeb表示タブに切り替えてリフレッシュのアイコンを押すを繰り返して使っていく形になると思います。
■ デバッグ操作
PHPではエラー・警告は画面表示されるのでデバッグの必要なんて特にありませんが、せっかくの統合開発環境ということで一応デバッグのやり方も押さえておきます。
○ 前もってブレークポイントを付けておく
PHPエディタ行頭にある行番号をダブルクリックすると、その行に●印が付きブレークポイントを設定することができます。
再度ダブルクリックするとこれは解除できます。
○ デバッグ開始
上記のようにしてデバッグ実行途中で停止させたい行位置にブレークポイントを付けておいて、デバッグボタンを押して開始します。
その際にPHPデバッグのパースペクティブ(画面構成)に切り替えるかどうか聞いくるので「はい」を選びます。
PHPデバッグのパースペクティブ
デバッグが開始されるとブレークポイント位置で処理が停止しているので、デバッグビューにある「再開」ボタンでステップ実行を繰り返して最後に赤い「終了」ボタンを押してデバッグ処理を完了させます。
ステップ実行でブレークポイント間を順送りさせる時に、変数ビューにて変数の値を確認していくことでエラー原因を割り出してデバッグしていくことができると思います。
PHPデバッグのパースペクティブに切り替わっている状態なので、デバッグが終わればPHPのパースペクティブに戻します。
以上でとりあえずeclipseについての導入から簡単な操作までのまとめは終わり。
英語の解説なら探せばかなりあるようですが、日本語の解説はなかなか初心者のわたしには情報が集められなかったので半分ぐらいは勘で書いてますが、あとは使いながら覚えていくしかないですね。