FANCOMI Ad-Tech Blog

株式会社ファンコミュニケーションズ nend・新規事業のエンジニア・技術ブログ

XAMPPとEclipseによる開発環境作成

初めまして、t_endoです。
今回は初心に戻って、ローカルPCに開発環境を作成したいと思います。

インストール

まずApacheとPHPをインストールするのですが、個別にインストールしても良いのですが、
XAMPPというソフトがApache、MySQL、PHP、Perlをインストールしてくれるので、
今回はXAMPPをインストールしていきます。

といっても、XAMPPのインストールはとても簡単で、こちらからソフトをダウンロードして、Nextを押していればインストール完了です。
XAMPP公式ページ
※今回使用するバージョンは1.8.3となっています。

xampp_install

インストールが完了すると、XAMPP Control Panelという物がインストールされているので、起動すると下記の様なコントロールパネルが起動します。

xampp

さっそく、Apacheを起動してみましょう。(ApacheのStartボタンを押すと起動します)
あれっ、一瞬起動したっぽいのですが、すぐに落ちてしまいました。
各種ステータスはコントロールパネルの下に色々表示されているので見てみると、

12:47:34  [Apache]   Status change detected: running
12:47:34  [Apache]  Status change detected: stopped
12:47:34  [Apache]  Error: Apache shutdown unexpectedly.
12:47:34  [Apache]  This may be due to a blocked port, missing dependencies, 
12:47:34  [Apache]  improper privileges, a crash, or a shutdown by another method.
12:47:34  [Apache]  Press the Logs button to view error logs and check
12:47:34  [Apache]  the Windows Event Viewer for more clues
12:47:34  [Apache]  If you need more help, copy and post this
12:47:34  [Apache]  entire log window on the forums

このようなエラーがでいました。
どうやら、Apacheで設定しているport(80、443)が既に使用されている為、起動できなかったみたいです。
どのソフトがどのportを使っているのかを調べる物もコントロールパネルに付いているので、さっそくチェックしてみます。
「Netstat」というボタンを押すとその時使用しているportとソフト一覧を表示してくれます。

port2

どうやら、Skypeが80、443portを使用しているみたいです。
そういえば、コントロールパネルを起動した時に下記の様なエラーがでてました。
※画像にも、一部入っていました…

12:58:05  [Apache]   Problem detected!
12:58:05  [Apache]  Port 80 in use by "C:\Program Files (x86)\Skype\Phone\Skype.exe" with PID 3308!
12:58:05  [Apache]  Apache WILL NOT start without the configured ports free!
12:58:05  [Apache]  You need to uninstall/disable/reconfigure the blocking application
12:58:05  [Apache]  or reconfigure Apache and the Control Panel to listen on a different port
12:58:05  [Apache]  Problem detected!
12:58:05  [Apache]  Port 443 in use by "C:\Program Files (x86)\Skype\Phone\Skype.exe" with PID 3308!
12:58:05  [Apache]  Apache WILL NOT start without the configured ports free!
12:58:05  [Apache]  You need to uninstall/disable/reconfigure the blocking application
12:58:05  [Apache]  or reconfigure Apache and the Control Panel to listen on a different port

Skypeのツール→設定→詳細→接続の「上記のポートに代わり、ポート80と443を使用」のチェックを外して、skypeを再起動します。

skype

再度コントロールパネルからApacheを起動してみます。
今度は無事起動しました。
「Admin」ボタンを押して、下記画面が表示されたら、インストール完了です。

xampp_page

設定

VirtualHostの設定をしていきます。
インストールしたフォルダ(今回インストールしたフォルダ「C:\xampp」)に「apache\conf\extra\httpd-vhosts.conf」というファイルを変更していきます。

##NameVirtualHost *:80

↓コメントを外します

NameVirtualHost *:80
##<VirtualHost *:80>
    ##ServerAdmin webmaster@dummy-host.example.com
    ##DocumentRoot "C:/xampp/htdocs/dummy-host.example.com"
    ##ServerName dummy-host.example.com
    ##ServerAlias www.dummy-host.example.com
    ##ErrorLog "logs/dummy-host.example.com-error.log"
    ##CustomLog "logs/dummy-host.example.com-access.log" common
##</VirtualHost>

↓コメントを外し、自分にあった設定に変更していきます

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "C:/xampp/htdocs/endotest"
    ServerName endo.localhost.net
    ServerAlias endo.localhost.net
    ErrorLog "logs/endo.localhost.net-error.log"
    CustomLog "logs/endo.localhost.net-access.log" common
</VirtualHost>
  • ServerAdmin:公開するわけではないので特に変更しません
  • DocumentRoot:ここのディレクトリがブラウザでアクセスした時にアクセスされるフォルダになります
  • ServerName:URLのホストになります
  • ServerAlias:URLのエイリアスになります
  • ErrorLog:エラーログの出力先になります
  • CustomLog:アクセスログの出力先になります

保存して、Apacheの再起動をします。

「ServerName」で設定したURLでアクセスができるように、Windowsの設定を変更します。
「C:\Windows\System32\drivers\etc\hosts」ファイルを編集していきます。
※Windows Vista以降このファイルを変更する場合は、 メモ帳等を右クリック→管理者として実行で起動したのち、ファイルを開かないと保存できません。

#    127.0.0.1       localhost

↓コメントアウトを外し、ServerNameで設定した物を追加

127.0.0.1       localhost endo.localhost.net

とりあえず、「DocumentRoot」で設定したフォルダへphpinfoでも置いておきます。
「C:\xampp\htdocs\endotest\index.php」

<?PHP
phpinfo();
?>

それでは、ブラウザで設定したURLへアクセスしてみます。

phpinfo

無事phpinfoの画面が表示されました。
以上で簡単なXAMPPの設定でした。

Eclipse

開発環境が完成したので、Eclipseをインストールしていきたいと思います。
といっても、こちらもダウンロードしてきて解凍してあげれば、インストール完了です。
私は英語がまったく駄目なので、日本語化した物を入れていきます。

自分で日本語化のプラグインを入れてもいいのですが、下記の場所に日本語化したEclipseが既にあるので、そちらを使用します。
Pleiades All in One ダウンロード
※今回使用するバージョンはEclipse 4.3.2 Kepler(PHP環境のみ、64bit、Standard Edition)となっています。

Eclipseを解凍して起動した時に、下記の様なエラーが出た場合は、JRE、JDKが入っていないので、下記URLからダウンロードしてインストールします。

eclipse_error

Java SE ダウンロード

Eclipseを起動するとワークスペースの選択という物が表示されますが、これは作業用のフォルダみたいなものでEclipseで作成したファイル等がここで選択した場所に作成されます。
ここをXAMPPで設定したDocumentRootに設定してもいいのですが、今回は別の所を選択し後で説明するプラグインでワークスペースからDocumentRootへコピーするようにします。

ワークスペース

文字コード等設定

「ウィンドウ」→「設定」
「一般」→「エディタ」→「テキスト・エディタ」
表示されるタブ幅:4
タブでスペースを挿入:チェック

tab

「一般」→「ワークスペース」
テキスト・ファイルのエンコード:その他「UTF-8」
新規テキスト・ファイルの行区切り文字:その他「Unix」

文字コード

プロキシーの設定

「ウィンドウ」→「設定」
「一般」→「ネットワーク接続」
アクティブ・プロバイダー:マニュアル選択
スキーマ:必要なスキーマへ、ホストとポートを設定して適用を押して設定完了です。

プロキシー設定

FileSyncプラグイン

ワークスペースからDocumentRootへ手作業でファイルをコピーしたり、httpd-vhosts.confを毎回編集するのは効率が悪いので、自動でコピーしてくれるプラグインをインストールします。

「ヘルプ」→「新規ソフトウェアのインストール」
「作業対象の追加ボタンを押す」
名前:FileSync(分かりやすい名前ならなんでも大丈夫です)
URL:http://andrei.gmxhome.de/eclipse/
OKを押すと、作業対象の所に登録した物が表示されるので、それを選択すると下の一覧画面にインストールできるソフト一覧が表示されます。
Eclipse 3.5 - 4.3 plugins→FileSyncを選択して「次へ」のボタンを押していきEclipseの再起動をします。

プラグインインストール

「ヘルプ」→「Eclipse プラットフォーム について」を押して下記画像の四角でかこってあるアイコンが表示されていればインストール完了です。

FileSync確認2

FileSync設定

FileSyncのテストをする前に、プロジェクトがないので作成します。
「ファイル」→「新規」→「PHPプロジェクト」
プロジェクト名を入力して、「完了」を押せとプロジェクトが作成されます。

プロジェクト作成

さらに、PHPファイルを作成します
先ほど作成したワークスペースを右クリックして、「新規」→「PHPファイル」
ファイル名を入力して、「完了」を押すとPHPファイルが作成されます。

PHP作成

PHPファイルが作成できましたら、ワークスペースを右クリックして、「プロパティー」→「ファイル同期化」を選択します。

  • プロジェクトの FileSync ビルダーを使用可能にするにチェックを入れます
  • 使用可能な同期化マッピングへ「フォルダーの追加」ボタンを押し、コピー元のフォルダを追加します
  • デフォルトのターゲット・フォルダーへコピー先のフォルダを選択します。(DocumentRootで設定した"C:/xampp/htdocs/endotest"を選択します)

FileSync設定

設定が終わりましたら、「OK」ボタンを押します。
一度設定したフォルダのファイルを全部コピーしたいので、ワークスペースを右クリックして、「強制ファイル同期化」を押してみましょう。
これで、先ほど作成したPHPファイルがDocumentRootへコピーされています。
さらに、「プロジェクト」→「自動的にビルド」のチェックが入っていると、PHPを編集して保存した時に自動的にコピーしてくれるようになります。

私が使用している、ローカルPCでの開発環境こんな感じになっています。
みなさんも、Eclipseを自分の使いやすいようにカスタマイズしてよいEclipseライフを楽しんでください。