どうしたらいいのNAVI

どうしたらいいの?にお答えするサイト

【WordPress開発環境】Eclipseで開発をスムーズにするオススメの設定

      2015/11/07


WordPressの開発環境として統合開発環境のEclipseを利用している人も多い事でしょう。

 
Wordpressをローカル環境で動作できる環境を構築して、Eclipseにプロジェクトとして読み込ませるだけでデフォルトの状態でもWordpressに関連するテーマやプラグインの開発を進める事もできます。

 
しかし、開発をスムーズにする上ではEclipseの機能を十分に活用した方が更に開発作業をスムーズに進める事が出来ます。
Wordpress開発環境で、開発をスムーズにする上でやっておいた方が良いEclipseのオススメの設定について簡単でわかりやすく詳しく紹介しているのでチェックしていってくださいね。

 

 
【Wordpress開発環境】Eclipseで開発をスムーズにするオススメの設定
 

 

WordPress開発環境のEclipseで開発をスムーズにするオススメの設定

WordPress開発環境としてEclipseを使っていると、デフォルトのままでもWordpressの管理画面のエディタや、テキストエディタだけで開発を進めるのと比較するとかなり開発作業が効率化されます。

 
しかし、Eclipseのデフォルトの状態では開発作業のパフォーマンスを発揮できないシーンがあったり、デバッグの設定が出来ていない状態ですので、これらの設定を行った開発作業を十分スムーズに行えるようにしていきたいですよね。

 
開発環境であるEclipseで行うべきオススメの設定は次の通りです。

  • Eclipseが起動するブラウザの変更
  • WordPressデバッグ環境の設定

 
Eclipeが起動するブラウザの変更によって、自分が普段使っているブラウザを指定する事で、開発作業をスムーズに進める事が出来ます。
また、Wordpressデバッグ環境の設定を行う事で、テーマやプラグインのデバッグを行い、プログラムが正しく動作しているか検証・テスト出来るように設定します。

 
では、それぞれの設定について具体的に見ていきましょう
 

 

 

Eclipseが起動するブラウザの変更

【Eclipse】Eclipseで起動するブラウザを変更する設定
Eclipseで起動するブラウザを変更する設定では、EclipseでWeb画面を表示した時に起動されるブラウザをEclipseデフォルトの内部ブラウザから、パソコンにインストールされている別のブラウザに切り替える設定をします。

 
EclipseにはEclipseが用意した独自ブラウザが用意されていて、デフォルトでその内部ブラウザが設定されています。

 
ブラウザでの検証を自分が普段使っているブラウザで確認したい人や、テストの為に他の外部ブラウザに切り替えたい人は、Eclipseが用意している内部ブラウザではなく、外部ブラウザであるパソコンにインストールされているブラウザを指定する必要があります。

 
ここでは次のバージョンのEclipseを使ってブラウザを変更する設定を行っていきます。

  • Eclipse 4.5 Mars Pleiades All in One

 
Eclipseで起動するブラウザを変更する設定の手順は次の通りです。この設定ではEclipseの設定項目を使ってブラウザの設定をしていくので、予めEclipseは起動しておきましょう。

  • Eclipse設定画面を開く
  • Webブラウザーの設定項目を選択する
  • 利用するWebブラウザーの設定を行う

 
Eclipse設定画面を開く
EclipseのWebブラウザーの設定を行う為、まずはWebブラウザーの設定画面を開きましょう。
設定画面はメニューから「ウィンドウ」->「設定」を選択するとEclipseの設定画面を開く事が出来ます。

 
Webブラウザーの設定項目を選択する
Eclipseの設定画面を開く事が出来たら、実際にWebブラウザーの設定項目を選択しましょう。
Webブラウザーの設定項目は、設定一覧の中から「一般」->「Webブラウザー」を選択する事で開く事が出来ます。

 
利用するWebブラウザーの設定を行う
EclipseのWebブラウザーの設定を開く事が出来たら、実際に利用するWebブラウザーの設定を行っていきましょう。
デフォルトでは「内部Webブラウザーを使用」で「デフォルトのシステムWebブラウザー」を使う設定になっています。

 
自分のパソコンに用意されているブラウザーを設定するには「外部Webブラウザーを使用」を選択し、外部Webブラウザーの一覧から利用したいWebブラウザーを選択して、「適用」もしくは「OK」ボタンを押す事で設定を変更することが出来ます。

 
「デフォルトのシステムWebブラウザー」を選択している場合は、いつも利用しているブラウザーをEclipseが呼び出してくれます。

 
他に起動したいブラウザーを個別に使用したい場合は、そのブラウザーを個別に選択する事で起動ブラウザーを選択する事が出来ます。
起動したいブラウザーが一覧に存在しない場合は「新規」ボタンを押してブラウザーを新規に追加する必要があります。

 
Eclipseのデフォルトブラウザーを変更する設定については「【Eclipse】Eclipseで起動するブラウザを変更する設定」で簡単でわかりやすく詳しく紹介しているのでチェックしていってくださいね。

 

 

 

WordPressデバッグ環境の設定

【Eclipse】PHPのデバッグツールXdebugの設定と使い方
EclipseでPHPのデバッグを行うXdebugとは、Eclipseで使える高機能なPHPのデバッグツールの一つで、PHPのデバッグでおなじみの「var_dump」を見やすくしてくれたり、ボトムネックになっている処理を見つけたり、ステップ実行できたりします。

 
すでにXdebugをつかえるようになっている次のバージョンのEclipseを使って、Xdebugの設定と使い方を見ていきます。

  • Eclipse 4.5 Mars Pleiades All in One

 
Xdebugのデバッグの設定では次の設定を行う事でPHPアプリケーションのデバッグを行う事が出来ます。

  • デバッグの構成 設定画面を開く
  • PHP Webアプリケーションの新規構成
  • デバッグするサーバーの設定
  • デバッガーの設定
  • 共通設定
  • 名前を変更して適用しよう

 
Xdebugのデバッグ設定を行うにはEclipseのデバッグ構成設定画面を開き、PHP Webアプリケーションの新規構成画面を開く必要があります。
PHP Webアプリケーションの新規構成画面からデバッグするサーバー・デバッガー・共通設定を行う事でPHPアプリケーションをデバッグできるようになります。

 
PHPアプリケーションをデバッグできるようにするため、デバッグの構成の設定画面を開きましょう。
デバッグの構成の設定画面はEclipseのメニューの「実行」->「デバッグの構成」から開く事が出来ます。
デバッグの構成 設定画面を開く-1

 
デバッグの構成の設定画面を開く事が出来たら、次にPHP Webアプリケーションの新規構成を作成しましょう。
PHPアプリケーションを新規構成するには、設定の一覧から「PHP Webアプリケーション」を選択した状態で、左上にあるテキストマーク(新規の起動構成)をクリックする事で作成する事が出来ます。
PHP Webアプリケーションの新規構成-1

 
PHP Webアプリケーションとして新規起動構成を追加したら、具体的にデバッグする新規構成の内容を設定していきます。
デバッグするサーバの設定は、PHP Webアプリケーションの新規構成画面の「サーバー」タブを選択すると設定する事が出来ます。
デバッグするサーバの設定では次の設定を行います。

  • サーバの選択
  • ファイル
  • URL

 
サーバの選択では、「Default PHP Web Server」のままで良いでしょう。
ファイルはPHPのindex.phpファイルを選択します。
URLは自動生成のままで良いでしょう。

 
Wordpressの開発環境をローカルで開発したのであれば設定は次のようになります。ここではワークスペースは「Xamppのhtdocs」とし、「dousitaraiino」というプロジェクトに対してデバッグを構成するという仮定で設定します。

  • サーバの選択 : Default PHP Web Server
  • ファイル : /dousitaraiino/index.php
  • URL : 自動生成のチェックボックスにチェック

デバッグするサーバーの設定-1

 
共通設定は共通設定タブを開く事で設定画面を開けます。
共通設定他部も複数の設定項目がありますが、基本的に「お気に入りのメニューに表示」の設定項目を設定するだけで良いでしょう。

 
お気に入りのメニューに表示の「デバッグ」にチェックを入れればOKです。他の設定項目は一旦デフォルトのままで大丈夫です。
共通設定

 
デバッガーの設定の最後に、今回作成したデバッグの構成に名前をわかりやすいようにつけましょう。
デバッグの構成の名前はデバッグ構成ウィンドウの上部にある「名前」の欄で変更する事が出来ます。

 
また、これまでに設定した内容も反映する為、ウィンドウの「適用」ボタンを押して、デバッグの構成を保存しましょう。
名前を変更して適用しよう

 
今回構成したデバッグを実行してみましょう。
デバッグを実行するにはEclipseのメニューからデバッグのアイコン(虫のアイコン)の右にある「▼」をクリックしてリスト内から、新たに構成したデバッグを呼び出します。
今回追加した構成は「どうしたらいいのNAVI(ローカル) デバッグ」なので、選択して実行します。
デバッグ実行する-1

 
すると、デバッグ実行でブラウザが起動します。デバッグ実行する前にPHPファイルにブレークポイントを貼っておけばそのブレークポイントを通過するタイミングで処理をステップ実行する事もできます。
デバッグ実行する-2

 
EclipseのPHPのデバッグツールXdebugの設定と使い方については「【Eclipse】PHPのデバッグツールXdebugの設定と使い方」で簡単でわかりやすく詳しく紹介しているのでチェックしていってくださいね。

 

 

 

 

スポンサーリンク


WordPress開発環境のEclipseで開発をスムーズにするオススメの設定 まとめ

WordPress開発環境としてEclipseを使っていると、デフォルトのままでもWordpressの管理画面のエディタや、テキストエディタだけで開発を進めるのと比較するとかなり開発作業が効率化されます。

 
しかし、Eclipseのデフォルトの状態では開発作業のパフォーマンスを発揮できないシーンがあったり、デバッグの設定が出来ていない状態ですので、これらの設定を行った開発作業を十分スムーズに行えるようにしていきたいですよね。

 
開発環境であるEclipseで行うべきオススメの設定は次の通りです。

  • Eclipseが起動するブラウザの変更
  • WordPressデバッグ環境の設定

 
Eclipeが起動するブラウザの変更によって、自分が普段使っているブラウザを指定する事で、開発作業をスムーズに進める事が出来ます。
また、Wordpressデバッグ環境の設定を行う事で、テーマやプラグインのデバッグを行い、プログラムが正しく動作しているか検証・テスト出来るように設定します。

 

【Eclipse】Eclipseで起動するブラウザを変更する設定
Eclipseで起動するブラウザを変更する設定では、EclipseでWeb画面を表示した時に起動されるブラウザをEclipseデフォルトの内部ブラウザから、パソコンにインストールされている別のブラウザに切り替える設定をします。

 
EclipseにはEclipseが用意した独自ブラウザが用意されていて、デフォルトでその内部ブラウザが設定されています。

 
ブラウザでの検証を自分が普段使っているブラウザで確認したい人や、テストの為に他の外部ブラウザに切り替えたい人は、Eclipseが用意している内部ブラウザではなく、外部ブラウザであるパソコンにインストールされているブラウザを指定する必要があります。

 
ここでは次のバージョンのEclipseを使ってブラウザを変更する設定を行っていきます。

  • Eclipse 4.5 Mars Pleiades All in One

 
Eclipseで起動するブラウザを変更する設定の手順は次の通りです。この設定ではEclipseの設定項目を使ってブラウザの設定をしていくので、予めEclipseは起動しておきましょう。

  • Eclipse設定画面を開く
  • Webブラウザーの設定項目を選択する
  • 利用するWebブラウザーの設定を行う

 

【Eclipse】PHPのデバッグツールXdebugの設定と使い方
EclipseでPHPのデバッグを行うXdebugとは、Eclipseで使える高機能なPHPのデバッグツールの一つで、PHPのデバッグでおなじみの「var_dump」を見やすくしてくれたり、ボトムネックになっている処理を見つけたり、ステップ実行できたりします。

 
すでにXdebugをつかえるようになっている次のバージョンのEclipseを使って、Xdebugの設定と使い方を見ていきます。

  • Eclipse 4.5 Mars Pleiades All in One

 
Xdebugのデバッグの設定では次の設定を行う事でPHPアプリケーションのデバッグを行う事が出来ます。

  • デバッグの構成 設定画面を開く
  • PHP Webアプリケーションの新規構成
  • デバッグするサーバーの設定
  • デバッガーの設定
  • 共通設定
  • 名前を変更して適用しよう

 

 
最後までお読みいただきありがとうございました。

スポンサーリンク





 - Eclipse, Wordpress , ,

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

【Head Cleaner】ヘッダーのJavaScriptをフッタに移動させる設定!
【Head Cleaner】ヘッダーのJavaScriptをフッタに移動させる設定!

WordPressでブログを運営している人でHead Cleanerを使ってブロ …

【W3 Total Cache】レスポンシブテーマでPCとスマホの広告位置が一緒に!? 原因と対処方法
【W3 Total Cache】レスポンシブテーマでPCとスマホの広告位置が一緒に!? 原因と対処方法

W3 Total Cacheを入れてWordpressのブログを高速表示させよう …

【W3 Total Cache】データベースキャッシュ(Database Cache)を設定しよう!
【W3 Total Cache】データベースキャッシュ(Database Cache)を設定しよう!

キャッシュ系プラグインとしてW3 Total Cacheを利用している人はデータ …

【Autoptimize】Autoptimizeのお勧めの設定 コツコツとパフォーマンス改善
【Autoptimize】Autoptimizeのお勧めの設定 コツコツとパフォーマンス改善

WordPressでブログを運営している人の中にはAutoptimize使ってブ …

【TinyMCE Templates】ショートコードで定型文を一括変更!
【TinyMCE Templates】ショートコードで定型文を一括変更!

WordPressでブログを運営している人で「TinyMCE Templates …

【Stinger5】Stinger5のカスタマイズ方法のまとめ特集
【Stinger5】Stinger5のカスタマイズ方法のまとめ特集

WordPressでブログを運営し、Stinger5を使っていると自分好みにカス …

【Stinger5】Stinger5のサイドバーの新規記事一覧を消す方法
【Stinger5】Stinger5のサイドバーの新規記事一覧を消す方法

WordPressでブログを運営している人で、Stinger5を利用している人も …

【Quick Adsense】好きな段落の後に広告を挿入するQuick Adsenseの設定
【Quick Adsense】好きな段落の後に広告を挿入するQuick Adsenseの設定

広告を掲載していると「自分はリード文を書くのに3段落と決めているから、その段落の …

【Wordpress】プラグインを整理しなければならない理由 ユーザと自分の為に
【WordPress】プラグインを整理しなければならない理由 ユーザと自分の為に

WordPressのプラグインはとても便利ですよね。 このブログでもWordpr …

【Wordpressプラグイン自作】管理画面の任意画面のヘッダー作成時に処理を実行する方法
【WordPressプラグイン自作】管理画面の任意画面のヘッダー作成時に処理を実行する方法

WordPressのプラグインを自作していて、Wordpressの管理画面の任意 …