【Eclipse編】FuelPHP+ACCON：開発の準備（プロジェクトの作成とリモートデバッグの設定）

Eclipseから[ACCON](https://lh3.googleusercontent.com/7TYwL6tSmaG7XkVFbgWKkWbvuxxaRAIIrxtb856sAKOHJGdoLn4=w452-h302-no)を使用して開発を行うためのプロジェクト作成とリモートデバッグ方法を説明します。

# 1.PHPプロジェクトの作成方法

### 1.1. Eclipseの起動
![起動](https://lh3.googleusercontent.com/7TYwL6tSmaG7XkVFbgWKkWbvuxxaRAIIrxtb856sAKOHJGdoLn4=w452-h302-no)

任意のワークスペースを選択してEclipseを起動します。

### 1.2.新規プロジェクトの作成
![プロジェクトの新規作成](https://lh3.googleusercontent.com/bB8tyh1hOgR38CAq17uxSlo8kN1Rgh9fhdUkRDKobViV1G4uhhI=w1301-h926-no)

メニューの[ファイル]→[新規]→[PHPプロジェクト]を選択します。

【PHPプロジェクト作成情報】
![PHPプロジェクト作成情報](https://lh3.googleusercontent.com/jRk9_mFAuVLoUsoFPt90bAdVklPEwNqxSV1OJH4R5NxeMzjCFbQ=w572-h639-no)

* プロジェクト名：任意のものでOK
* 内容：既存ロケーションにプロジェクトを作成
 * Windowsの場合  
/c/Users/[ユーザID]/develop/data-volume/workspace/project
 * OS Xの場合  
/Users/[ユーザID]/develop/data-volume/workspace:/develop/workspace/project
* PHPバージョン：5.5
* JavaScriptのサポート：On

上の情報を入力後、完了ボタンを押すとプロジェクトの作成は完了です。

![作成完了](https://lh3.googleusercontent.com/EgbOEkTg1lbMzJzmw5QhW77G9OMZGJQmsWFas0vXReTi4_DgFio=w1302-h925-no)

# 2.リモートデバッグの設定

## 2.1.PHPサーバーの作成

### 2.1.2.PHPサーバーの設定

コンテナ上のサーバーをリモートデバッグするためにPHPサーバーの設定を行います。

![PHPサーバーの設定](https://lh3.googleusercontent.com/L5SXhnfQ1ILk7ga1B3zIGZohjDx0PmAuna15chg9BTWld7MRcVQ=w1143-h774-no)

［ウィンドウ］→［設定］を実行して設定画面を開く。

![](https://lh3.googleusercontent.com/rL1bIHHV6F_AEGQ7PBtC_XQEGTLFHfvs-SmCzwcPiqRyqLywRVY=w958-h565-no)

設定画面の左ペインの［PHP］→［サーバー］を選択し、右の［新規］ボタンを押す。

![](https://lh3.googleusercontent.com/qOKEgZMkeVtIaRsqmb0gQChu3fvloxQo0bJ2UdlNOY0TXEvZQ6E=w525-h494-no)

コンテナのWEBサーバーを新しいPHPサーバーとして登録します。

* サーバー・タブ
 * 名前：project-server-01
 * ベースURL:https://192.168.99.100
 * Local Web Root：

#### 2.1.2.1.ベースURLの確認方法

![Kitematicを実行](https://lh3.googleusercontent.com/rwuT0olD_tySTkinyoGEJsAUFVU9qC09QsnMbJb_zP5WCKC5m0I=w800-h600-no)

Kitematicを実行して、「project-server-01」を起動（停止していた場合は［START］ボタンを押す）
起動後、左ペインの［WEB PREVIEW］をクリックしてブラウザでサンプルアプリケーションにアクセスします。

![ベースURL](https://lh3.googleusercontent.com/r_FtI9B3ol_ZZqY0UaBG8g-YkHdiA7CIJvk2PtSI4v-L4AJHOYc=w1050-h742-no)
起動したブラウザに表示されているURLが「ベースURL」です。

### 2.1.3.Xdebugの設定

![デバッガー・タブ](https://lh3.googleusercontent.com/aK1ORonS2N-8__bKbV9KS8ZvzJPO3MYS_oMmv2rRk5Sv0Mwbwa0=w525-h494-no)

［デバッガー・タブ］を開き、デバッガーをXDebugを選択します。（ポートはデフォルトの9000）

### 2.1.4.パス・マッピングの設定

［パス・マッピング・タブ］を開き、サーバー上のパストローカルのパスを関連付けます。

![パス・マッピング](https://lh3.googleusercontent.com/gwmAmfxyxAI8JJa4n9YnwCG0qOjlYcXGCAOHYPCxUA_0rOxyNps=w963-h501-no)

［追加］ボタンを押して下の2つのパスを設定します。

* fuelphpのパスを設定
  * サーバー上のパス  
/develop/workspace/project/fuel
  * ワークスペースのパス  
/MyProject/fuel
* wwwの公開パスを設定
 * サーバー上のパス  
/develop/workspace/project/public
 * ワークスペースのパス  
/MyProject/public

### 2.1.5.PHPサーバーのデフォルト設定 

![PHPサーバーのデフォルト](https://lh3.googleusercontent.com/NRVGAIDS4lwsxH1w2jzd7Vp3VZiZeLWh6zQsnD6ItTh_8ZR4on8=w958-h565-no)

追加されたPHPサーバー「project-server-01」を選択して［デフォルトの設定］ボタンを押します

![完了](https://lh3.googleusercontent.com/NQ9HsOXrvUXk5NKSG6U1zHgBNH31SF1lTT_ibN0dH4uQDYD9GOQ=w958-h565-no)

［完了］を押してPHPサーバーの作成を完了します。

## 2.2.リモートデバッグ

### 2.2.1.リモートデバッグの設定

![デバッグの構成](https://lh3.googleusercontent.com/sVPVu0WBivszjDkrNXR3yVtga6SfE9cxlNGVhp7kmvbhkHOvzJE=w1143-h774-no)

[実行]→[デバッグの構成]を実行します。

![新規作成](https://lh3.googleusercontent.com/2R6jJKEHJ3O0ZH3HewwDKby7XQ9B2DXJvFch-j4kxis2VE-hf80=w891-h700-no)

左ペインの「PHP Web アプリケーション」をクリックし［新規］を実行します。


#### 2.2.1.1.サーバー・タブの設定

![デバッグの設定](https://lh3.googleusercontent.com/I6-lMX7l9wqT29MgZzOF05wzQ9AEj_WrRKUYg4fi1APwqfls1Fs=w893-h702-no)

* 名前：DEBUG_project-server-01（任意の名前でOK）
* PHPサーバー：先ほど作成した「project-server-01」を選択します。
* ファイル：/MyProject/public/index.php
* URL
 * 自動生成：チェックボックスをOff
 * URLの右のテキストボックス：/

#### 2.2.1.2.デバッガー・タブの設定

![ブレークポイント](https://lh3.googleusercontent.com/bkRisbKVUWVpCu5yp-NJi0_SgSKcNMLZ6PpqaWVJ9KWlito0baw=w893-h702-no)
 
ブレークポイント：［最初の行でブレーク］をOffに設定します。

［適用］ボタンを押した後、[閉じる]ボタンを押して「デバッグの構成」を閉じます。

### 2.2.2.リモートデバッグの実行

![サンプルアプリケーション](https://lh3.googleusercontent.com/ILQXNb2tm2lho5Msu_KoObFvDGPKITpr2e-LNEAOY0W92VVJego=w1144-h928-no)

サンプルアプリケーションのトップ画面である［/MyProject/fuel/app/classes/controller/welcome.php］を開き、47行目のindexファンクション内の最初にブレークポイントを設定します。（画面の矢印の箇所をダブルクリックするとブレークポイントが設定されます）

![デバッグの構成](https://lh3.googleusercontent.com/OHAfFVyuSj42-CrVzWWXeb5hS_tueUAn89wuZ9cVCsxLp2PVdyw=w963-h665-no)

 もう一度、デバッグの構成を開き「DEBUG_project-server-01」を選択後、右下の［デバッグ］ボタンを押しデバッグを開始します。

![セキュリティの警告](https://lh3.googleusercontent.com/CeiVGJyp2E1PqOmi-38gI5Ge3Ms3Sna_QRQmJYYXVWunfPy5h1M=w457-h357-no)

セキュリティの警告が出ますが開発環境ですので［はい］を押して続行します。

![ブレーク](https://lh3.googleusercontent.com/BLI_58S-4ZdvKXScAzX1RMj6RxSU-9BA4uYeiv5mUNBeCbDYYsI=w1144-h928-no)

リモートデバッグが開始され、先ほど設定したブレークポイントで、実行が一時停止します。

#### 2.2.2.1.リモートデバッグが開始されない場合

ファイアウォールの設定によりコンテナで実行されているXDebugのポートに接続できない場合があります。

![timeout](https://lh3.googleusercontent.com/AhAxdtIrNOetmSo2ZAcZmed9SbHiA94aukIzdf3T3mDypHBlTso=w1302-h925-no)

リモートデバッグ開始後、タイムアアウトが発生するケース。

![DEBUG SESSION](https://lh3.googleusercontent.com/fnQypsvdfK53_SFOJfnVLhtoQQcO4HrC6WKWyXH_T1JnlXRu1co=w1302-h925-no)

リモートデバッグのセッションが接続できないケース。

その場合、ファイアウォールの設定を変更する必要があります。

Windowsの場合、［コントロールパネル］→［システムとセキュリティ］→［Windows ファイアウォール］から詳細設定を開きます。

![ファイアウォール](https://lh3.googleusercontent.com/IcC4PsMpQ_po7LPbB9DwRKjCT1uArhmJxOyySAWN54tbmYNeLUI=w1061-h791-no)

［受信の規則］からEclipseでブロックされているものをダブルクリックで開きます。

![Eclipseブロック](https://lh3.googleusercontent.com/mLJyWIVQ_k2MdpcBVoBSRiLXEiReNzgxQmckeZ1odUr7Dau4E8s=w449-h562-no)

［プロトコルおよびサポート］タブを開きます。

![TCP](https://lh3.googleusercontent.com/BB9DUBsRkjq_sZH_iyYQ4xI5d2dIy4D5ORhJaFkQcFuQG344SIA=w449-h562-no)

プロトコルがTCPであることを確認しまし。

![接続の許可](https://lh3.googleusercontent.com/9_hO--Svm8id7QYEXVLgWVf2QmdgCqSxpGlO7jfV8zvriF2rAag=w449-h562-no)

接続を許可し［OK］ボタンを押して設定を反映します。  

これでコンテナのXDebugに接続できるようになります。

# 3.開発スタート

これでACCONを利用したWebアプリケーション開発の準備は整いました。  
当プロジェクトの内容を変更すれば、即座にコンテナで動いているアプリケーションに反映されます。また、/MyProject/fuel/app/logsには、アプリケーションのログが出力されます。