どうしたらいいの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

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

  関連記事

【Wordpress】Wordpressの本体をダウンロードする方法
【WordPress】WordPressの本体をダウンロードする方法

ここではWordpress本体をダウンロードする方法を紹介しています。 &nbs …

【Wordpress開発環境】開発環境構築で必要なXamppの設定
【WordPress開発環境】開発環境構築で必要なXamppの設定

WordPressでテーマやプラグインの開発を進めるには、自分のパソコン上で開発 …

【Wordpress】HTML・CSS・JavaScriptを縮小するプラグイン Autoptimize
【WordPress】HTML・CSS・JavaScriptを縮小するプラグイン Autoptimize

WordPressでブログを運営していて、ブログの表示速度を高速化させるために、 …

クイックタグを入力補助するボタンをエディタに追加するか-1
【Quick Adsense】エディタに追加されるクイックタグのボタン設定

WordPressのブログ運営でQuick Adsenseを使って広告掲載を行っ …

【Wordpress】おすすめテーマのカスタマイズ方法
【WordPress】おすすめテーマのカスタマイズ方法

WordPressでは、デザインも秀逸で派手な物やシンプルな物、機能的に優れてい …

【Quick Adsense】最後の段落の前に広告を自動挿入する!Quick Adsenseの設定
【Quick Adsense】最後の段落の前に広告を自動挿入する!Quick Adsenseの設定

WordPressでブログを運営している人の中には「最後の段落の前に広告を自動挿 …

【Wordpress】ブログの定型文を簡単挿入! TinyMCE Templates
【WordPress】ブログの定型文を簡単挿入! TinyMCE Templates

WordPressでブログ記事を投稿していると、いつも使っている言い回しや、定型 …

【Wordpress】プログラムコードをブログで紹介する方法 使いやすくてキレイ!
【WordPress】プログラムコードをブログで紹介する方法 使いやすくてキレイ!

運営するブログによってはプログラムのソースコードを表示して紹介したい場合がありま …

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

WordPressでプラグインを自作開発していると、Wordpressの管理画面 …

【TinyMCE Templates】TinyMCE Templatesで出来る便利なカスタマイズ
【TinyMCE Templates】TinyMCE Templatesで出来る便利なカスタマイズ

ブログの定型文や決まり文句、JavaScript等々、様々なものをテンプレートと …