Win＋Atom＋XAMPPでデバック環境を構築したよ！

些細なきっかけで、統合開発環境ATOMを利用してPHP開発を出来るようにしなければならなくなった。
私にとっては新しい開発環境であったため、ワクワクして環境構築してましたが、デバック環境を作るのに、大変悩んだので、忘備録として残しておきます。
この環境構築はバージョンってのがとても重要です。

■前提

XAMPPについて
私は開発環境ごとに、バージョンごとにXAMPPを切り替えて活用しています。
Atom用XAMPPとして、今回は初期インストール場所「C:\xampp」ではなく、意図的に「D:\Atom\xampp」にインストールしています。
もし、このブログを参考にされる方で、xamppを初期インストール場所のCドライブ直下「c:\xampp」にインストールしている方は、この記事上に記載されている「D:\Atom\xampp」という記述全てを「c:\xampp」に読み替えて参考にしてください。

■環境

Windows 10 Pro(64bit)
XAMPP Version 7.2.9
※zend_extension = D:\Atom\xampp\php\ext\php_xdebug-2.6.1-7.2-vc15.dll
Atom 1.31.1 x64

■Atom Install Packages

atom-ide-ui 0.13.0
ide-php 0.7.15
atom-debug-ui 1.0.4
php-debug 0.3.5

■ブラウザ拡張

Chrome拡張機能: Xdebug helper
Firefox Add-on: Xdebug Helper for Firefox

■環境構築方法

1. XAMPP(https://www.apachefriends.org/index.html)から、インストーラ” xampp-win32-7.2.9-0-VC15-installer.exe”をダウンロードしてインストールする。
  
  ※注意：AtomのPackages「ide-php」はPHP7.0以上でなければ動かないため、PHPバージョンが7.0以上のXAMPPをインストールする事。
  なお、今回は以下ディレクトリにXAMPPをインストールする。
```
D:\Atom\xampp
```
2. Atom(https://atom.io/)から、インストーラ” AtomSetup-x64.exe”をダウンロードしてインストールする。
3. AtomにPHPデバックに必要なPackagesをインストールする。
  
  Atomを起動し、File->Settings->Installを選択し、以下のファイル名を入力してインストールする。
  - atom-ide-ui 0.13.0　※AtomをIDE（統合開発環境）に変更するもの。
  - ide-php 0.7.15　※AtomでPHP開発するために必要なもの。PHP7以上でなければならない。
  - atom-debug-ui 1.0.4　※Atomでデバックさせるのに必要なもの。
  - php-debug 0.3.5　※PHPのステップ実行デバックさせるために必要なもの。atom-debug-uiがないと動かない。
4. File->Settings->Packages->ide-phpのSettingsボタンをクリックして、以下の設定値を更新する。
```
PHP Path = D:\Atom\xampp\php\php.exe
```
5. File->Settings->Packages-> php-debugのSettingsボタンをクリックして、以下の設定値を更新する。
```
Path Mappings= [{"remotePath":"D:/Atom/xampp/htdocs","localPath":"D:/Atom/xampp/htdocs"}]
```
6. XDEBUGの環境を構築に必要なDLLをダウンロードする。
  1. フォルダ「D:\Atom\xampp\php」をカレントディレクリとして、コマンドプロンプトを開く。
  2. コマンド「php -i > phpinfo.txt」を実行する。
  3. ファイル「D:\Atom\xampp\php\phpinfo.txt」を開き、コピーする。
  4. Webサイト「https://xdebug.org/wizard.php」にアクセスして、テキストエリアに先程コピーした文字列を張り付ける。
  5. 「Analyse my phpinfo() output」ボタンをクリックする。
  6. 指示に従いファイルをダウンロードして指定の場所に格納する。
    ※私の環境の場合、php_xdebug-2.6.1-7.2-vc15.dllが対象でした。
7. php.iniを更新する。
  
  “D:\Atom\xampp\php\php.ini”を開き、Xdebugを利用してデバックできるように設定する。
```
[xdebug]
zend_extension = D:\Atom\xampp\php\ext\php_xdebug-2.6.1-7.2-vc15.dll
xdebug.remote_enable=1
xdebug.remote_host=localhost
xdebug.remote_connect_back=0    # Not safe for production servers
xdebug.remote_port=9000
xdebug.remote_handler=dbgp
xdebug.remote_mode=req
xdebug.remote_autostart=false
xdebug.idekey=xdebug-atom    # atomのIDEKEYを指定する。※バージョンによって名称が変わるため、php-debugのSettingに記載された指示にしたがって更新する。
xdebug.remote_log=D:\Atom\xdebug.log
```
8. Apacheを起動(再起動)する。
  
  xampp-control.exeからApacheをStartする。
9. Atomを起動(再起動)する。
10. ブラウザの環境をXDEBUGでデバックできるよう拡張する。
  
  【Chromeを使う場合】
  1. Chromeを開き、拡張機能「Xdebug helper」を追加する。
  2. 虫マークを右クリック→オプションを選択する。
  3. IDE Keyにて「Other」を選択し、「xdebug-atom」を入力、「Save」をクリックする。
  【Firefoxを使う場合】
  1. Firefoxを開き、拡張機能「Xdebug Helper for Firefox」を追加する。
  2. ブラウザメニューから、アドオンを選択する。
  3. 「Xdebug helper」の「設定」ボタンをクリックする。
  4. IDE Keyにて「Other」を選択し、「xdebug-atom」を入力、「Save」をクリックする。
11. デバック用ソースコードを作成する。
  
  例）D:\Atom\xampp\htdocs\atomphpdebug\index.php
12. ソースコード上の左側をマウスでクリックしてブレークポイントをつける。
13. AtomのPHP Debugをクリック
14. ブラウザを起動し、アドレスに「http://localhost/atomphpdebug/」と入力する。
15. ステップ実行できるよう虫マークをクリックして、デバックを有効にする。
16. 改めてブラウザのアドレスバーに「http://localhost/atomphpdebug/」を再表示する。
  
  すると、Atomが点滅してデバック実行できるようになっています。
  ContexのLoaclをクリックしたりするとその時のローカル変数の値などが分かります。
17. 以上です。

■所感

今回の環境構築は、辛かった。ずっと悩んでしまった。
公式サイトを見て指示の通りにしてもうまくいかない。
皆簡単に設定しているのに、なぜ私の環境だけできないのだ…という悩みが激しい状況でした。
特に、どこのWebページをみても、環境構築をするにあたってメニュー(Packages -> php-debug->Toggle Breakpoint)を操作しているのだけれど、私にはそのメニューがどこにも存在しない。辛いのはphp-debug開発者サイトの解説ページにもこのメニューの存在が記載されているのです。（更新忘れているのかな？）
おそらく、以前のバージョンには存在していたメニューなんだと思っています。ただ、このメニューが存在しないという事が、何か動かない重要な問題じゃないのか？？？と思い非常に悩みました。

また、PHPのビルドインサーバーの起動（コマンドプロンプト上で以下コードを実行）が必要と書いている人も入ましたが、今回の件には、全然関係なかったです。
php -S localhost:9000 -t ( デバックしたいファイルのあるパス )

存在しないメニューを復活させる方法やビルドインサーバーの起動など色々試してみましたが、最終的に全然関係なかったです。
バージョンの違いによって設定方法が違うことが分かったが、それに対して、どうすればいいのかが全然わからなかった。
なんだかんだphp.iniの設定値やphp-debugの設定情報を変更して試してました。
結論として、以下の設定がどこのサイトにも記載されていないけど、デバック実行の為に重要な情報っぽいです。

Path Mappings= [{"remotePath":"D:/Atom/xampp/htdocs","localPath":"D:/Atom/xampp/htdocs"}]

しかし、これは分からないですよ。。。また環境構築しようとしても絶対に忘れると思う。
だから、忘備録として残しました。
今回は良い勉強になったと思います。同じような環境の人は是非参考にしてみてください。

以上、ではでは！

IMPRICH CREATE

Win＋Atom＋XAMPPでデバック環境を構築したよ！

■前提