Index
Summary
Visual Studio Code で、CakePHP3 + PHP7 の開発環境を構築したので、手順を残しておきます。OSは、Windows10 を前提としています。
使用した資材一覧
Visual Studio Code
PHP用のエディタ・統合開発環境をチームで統一するために、
以下の候補から、Visual Studio Code を選定しました。
- Eclipse (+PHP プラグイン)
- PHP Storm
- Atom
- Visual Studio Code（以降、VS Code）
Eclipse は重いので、他を試して駄目そうなときの最終候補として後回しにしました。
PHP Storm は商用のため、これも後回しに。
Atom と VS Code は、どちらも Electron ベースのエディタで、機能的にみてほぼ同等ですが、以下の点で、VS Code が優っていると感じました。
- 軽い
- Git 操作など、ユーザインタフェースがより簡単
PHP開発を行うには幾つか拡張機能が必要となりますが、デバッグやコーディング規約チェックなど、必要なものは一通り揃っており、実際に数画面ほど開発してみて、VS Code で十分に開発できると判断しました。
以下からダウンロードし、インストールします。
https://www.microsoft.com/ja-jp/dev/products/code-vs.aspx
VS Code を起動してみましょう。バージョンによって、ロケールの設定が揺らぐことがあるので、メニューなどが日本語表示されていない（日本語で表示させたい）場合、F1キーなどでコマンドパレットを開き、Configure Language を選択します。すると、locale.json が開くので、以下の様に設定します。
{
"locale": "ja"
}
これで、日本語化されます。
Source Han Code JP
PHPと関係ないですが、ソースコードが見易いフォントとして、Source Han Code JP を導入しています。
以下サイトの画面を下にスクロールしていき、Download the fonts の「Latest release」リンクから開いた画面で、zipファイルをダウンロードします。
https://github.com/adobe-fonts/source-han-code-jp
zipファイルを展開し、OTFフォルダ内のフォントファイル（*.otf）をインストールします。インストールは、フォントファイルをすべて選択し、右クリック⇒インストール、です。
次に、VS Code を起動し、ファイル(F)⇒基本設定(P)⇒設定(S)で、settings.json を開きます。「よく使用するもの」の中に、”editor.fontFamily” があるので、鉛筆マークをクリック（編集）します。すると、右ペイン（規定の設定を上書きするファイル）に初期設定がコピーされるので、以下に示す様に、「源ノ角ゴシック Code JP」（Source Han Code JP の日本語名）を追記します。
settings.json（上書き）
{
"editor.fontFamily": "源ノ角ゴシック Code JP, Consolas, 'Courier New', monospace"
}
XAMPP
XAMPP（ザンプ）は、PHPの実行環境を手軽に構築することができる、Apacheディストリビューションです。
- X : クロスプラットフォーム（Windows, Linux, OS X で動作）
- A : Apache
- M : MySQL ⇒ MariaDB
- P : PHP
- P : Perl
以下のサイトから、Windows向けの PHP7.1.1 版をダウンロードします。
https://www.apachefriends.org/jp/download.html
ダウンロードしたインストーラを起動し、ウィザードに従いインストールします。基本的に、「Next >」ボタンを押していくだけでＯＫです。
チームで開発する場合、インストール先を揃えておいた方が良いでしょう。
本記事では、デフォルトの「C:\xampp」にインストールした前提で、話を進めます。
これで、PHP7.1.1 のインストールは完了なのですが、CakePHP3 をインストールするためには、国際化用拡張モジュール（intl）を有効にしてあげる必要があります。
C:\xampp\phpフォルダの、php.ini を編集します。
セミコロンでコメントアウトされている場合、削除して有効化します。
php.ini
extension=php_intl.dll
次に、C:\xampp\apache\confフォルダの、httpd.conf を開き、mod_rewrite を使用する設定となっているかどうか確認します。CakePHP3 では、mod_rewrite が推奨されている為、使用する様にします。
シャープでコメントアウトされている場合、削除して有効化します。
httpd.conf
LoadModule rewrite_module modules/mod_rewrite.so
Composer
CakePHP3の公式インストール手順は、Composer を使用することになっていますので、以下サイトから Composer のインストーラをダウンロードします。
https://getcomposer.org/
ダウンロードした Composer-Setup.exe を起動し、ウィザードに従ってインストールします。基本的に、「Next>」ボタンを押していくだけでＯＫです。
ただし、php.exe の在り処を自動認識できなかった場合は、手動で設定してあげる必要があります。
php.exe は、C:\xampp\phpフォルダにあります。
CakePHP
CakePHPをインストールするために、まず、CakePHPプロジェクト格納用のフォルダを作成します。
本記事では、C:\apps にプロジェクトを格納するものとします。
上記は、CakePHPの組み込みウェブサーバを使って動作確認を行うことを想定しています。
XAMPP環境で Apache を使って動作確認する場合は、
C:\xampp\htdocs に、CakePHPプロジェクトを格納する必要があります。
コマンドプロンプトを開き、C:\appsフォルダに移動し、以下のコマンドを叩きます。
C:\apps> composer create-project
注） myapp 部分は、実際のアプリケーション名に置き換えてください。
これで、CakePHP のインストールが実行されます。
バージョン情報は、コマンドプロンプトでプロジェクトフォルダに移動後、以下のコマンドで確認できます。
C:\apps\myapp> bin\cake --version
3.4.5
プロジェクトを Visual Studio Code で開く
VS Code を起動し、Windowsエクスプローラーから C:\apps\myapp をドラッグ＆ドロップすることで、CakePHPプロジェクトを開くことができます。勿論、ファイル(F) ⇒ フォルダを開く(Ctrl+K Ctrl+O) からプロジェクトフォルダを選択して開く方法などもあります。
一度、VS Code を終了し、再度起動すると、最後に開いていたプロジェクトが表示されます。VS Code は、一度に複数のプロジェクトを表示することは出来ないので、ファイル(F) ⇒最近使用した項目を開く(R) などから、プロジェクトを選択して表示を切り替えます。
以下に、CakePHP3 の主要なプロジェクト・フォルダ構成を示します。
| フォルダ |
概要 |
| bin |
Cakeのコンソールコマンドなど実行ファイルが格納されています。 |
| config |
Cakeの設定ファイルを格納します。 |
| logs |
ログファイルが出力されます。 |
| src |
作成するPHPプログラムを格納します。 |
| tests |
テストコードを格納します。 |
| vendor |
ライブラリが格納されます。編集不可なので注意 |
| webroot |
ドキュメントルートです。HTML, CSSなどを格納します |
詳細は、CakePHP公式サイトの Cookbook が参考になります。
https://cakephp.org/
Visual Studio Code 初期設定
これから、VS Code を使ってファイル作成・編集を行っていくので、事前に最低限必要な初期設定を行っておきます。
VS Code を起動し、ファイル(F)⇒基本設定(P)⇒設定(S)で、settings.json を開きます。左ペインに規定の設定が、右ペインに規定の設定を上書きする内容が表示されることは、既に記述した通りです。
左ペインのカテゴリ「ファイル」の中にある、files.eol, files.trimTrailingWhitespace, files.insertFinalNewline の設定を上書きしてください。以下に、編集後の上書きファイルを示します。
settings.json（上書き）
{
"editor.fontFamily": "源ノ角ゴシック Code JP, Consolas, 'Courier New', monospace",
"files.eol": "\n",
"files.trimTrailingWhitespace": true,
"files.insertFinalNewline": true
}
- files.eol
- 改行文字を、”\n” に設定します。PHP開発は、Windows, Linux, OS X の混在環境で開発されることも多いため、Linux, OS X の改行文字である “\n” に合わせておけば、git などでクロスプラットフォーム間でファイルのやり取りをする際に、改行文字に起因する問題を未然に防ぐことができます。
- files.trimTrailingWhitespace
- 末尾の空白は不要なので、トリミングする様にしておきます。
- files.insertFinalNewline
- PHP公式のコーディング規約で、ファイル末尾に改行文字のみの行が必要となっているので、true にしておきます。
XDebug
VS Code で PHP をデバッグするためには、XDebug が必要です。
https://xdebug.org
上記サイトの「download」リンクから、最新版をダウンロードします。
執筆時点での最新バージョンは、2.5.3 です。
PHP7.1.1用のモジュールは４種類あり、環境に合ったものをダウンロードする必要があります。
- PHP 7.1 VC14 (64 bit)
- PHP 7.1 VC14 (32 bit)
- PHP 7.1 VC14 TS (64 bit) : 64bit, Thread Safe 版
- PHP 7.1 VC14 TS (32 bit) : 32bit, Thread Safe 版
本記事では、XAMPP の 32bit版でインストールした PHP を、CakePHP組み込みウェブサーバ、および Apache で動作させるため、32bitのスレッドセーフ版を使用します。
IIS(FastCGI)など、スレッドセーフである必要がないウェブサーバで動作させる場合は、TS のついていない版を使ってください。
ダウンロードした dll を、PHP の機能拡張フォルダ C:\xampp\php\ext に配置します。機能拡張フォルダは、php.ini の extension_dir="C:\xampp\php\ext" で設定されています。
C:\xampp\php\php.ini に、XDebug を有効にする設定を追記します。
php.ini
zend_extension = php_xdebug-2.5.3-7.1-vc14.dll
xdebug.remote_enable = on
xdebug.remote_autostart = on
注）XDebugのバージョンによって、dll のファイル名は異なります。
ここまでで、XDebug が PHP に組み込まれます。
正しく組み込まれたことを確認するために、
C:\apps\myapp\webroot フォルダに、phpinfo.php という名前でファイルを作成してみましょう。
VS Code を起動し、エクスプローラーの webroot フォルダを右クリック ⇒ 新しいファイル ⇒ ファイル名を “phpinfo.php” としてください。中身は、以下の通りとします。
phpinfo.php
<?php
phpinfo();
コマンドプロンプトで、CakePHP組み込みウェブサーバを起動し、
C:\apps\myapp> bin\cake server
...
built-in server is running in http://localhost:8765/
You can exit with `CTRL-C`
ブラウザで、http://localhost:8765/phpinfo.php を表示してみましょう。
PHPの各種情報が表形式で表示され、（下の方に）xdebug 関連の情報が載っていればＯＫです。xdebug.remote_enable と xdebug.remote_autostart が、On になっていることが見て取れると思います。
拡張機能：PHP Debug
XDebug を VS Code で使用するために、拡張機能：PHP Debug をインストールします。
手順は、以下の通り。
- ビューバー（左端に縦に並んでいるアイコン群）で「拡張機能(Ctrl+Shift+X)」アイコンをクリックし、拡張機能ビューを開く。
- 「Marketplace で拡張機能を検索する」テキストボックスで、”php debug” を検索。
- 検索結果リストから PHP Debug の「インストール」ボタンをクリック。
- インストールが完了すると「再度読み込む」ボタンが表示されるので、クリックし、PHP Debug をアクティブ化。
次に、launch.json を作成し、デバック構成を定義します。
手順は、以下の通り。
- ビューバーで「デバッグ(Ctrl+Shift+D)」アイコンをクリックし、デバッグビューを開く。
- 歯車アイコンをクリック。
- リストが表示されるので、「PHP」を選択。
これで、launch.json が C:\myapp.vscode フォルダに作成され、エディタに内容が表示された状態になります。
launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Listen for XDebug",
"type": "php",
"request": "launch",
"port": 9000
},
{
"name": "Launch currently open script",
"type": "php",
"request": "launch",
"program": "${file}",
"cwd": "${fileDirname}",
"port": 9000
}
]
}
上記で、特に変更する箇所はないので、内容を確認できたらファイルを閉じてしまって大丈夫です。
デバッグの実行
では、実際にデバッグしてみましょう。先ほど作成した phpinfo.php にブレイクポイントを置いて、ステップ実行できることを確認します。手順は、以下の通り。
- デバッグビューを表示。
- LineNoの左側余白部分をクリックし、ブレイクポイントを設置。
- Listen for XDebug を選択し、緑の▶ボタンをクリック。
- ブラウザで、http://localhost:8765/phpinfo.php を開く。ブレイクポイントで処理が停止するので、ステップオーバーやステップインなどでデバッグ。
これで、PHPのデバッグが出来る様になりました。
PHP IntelliSense
コード補完・整形ツールをインストールします。
これは、機能拡張ビューで PHP IntelliSense を探してインストールすればＯＫです。
組み込みの PHP 言語候補機能は、無効にしておきましょう。
settings.json
"php.suggest.basic": false
phpcs
コーディング規約チェックツールをインストールします。
コマンドプロンプトで C:\apps\myapp に移動し、以下コマンドを実行します。
> composer require
> composer require
> vendor/bin/phpcs
VS Code を起動し、機能拡張ビューで phpcs を探してインストールします。その後、ソースコードを表示すると、以下の様に、赤い波線でコーディング規約違反を教えてくれる様になります。カーソルをあてると、規約違反の内容が表示されます。
上記は、”Missing file doc comment” 、つまり、ファイルの PHPDoc を記述しないのは規約違反だと、叱られている訳ですね。そこで、PHPDoc を簡単に記述してみます。
すると・・・
さらに、色々と叱られてしまいます。
５種類のタグが必須だと言われているので、タグを追記します。
その後、タグの順番や記述内容など、細かく叱られるので、１つ１つ潰していきます。
規約違反は、赤の波線。ワーニングは、緑の波線が表示されます。
赤の波線は、原則、すべて解消します。