2017年5月3日水曜日

Visual Studio Code で CakePHP3開発環境を構築する

Index

Summary

Visual Studio Code で、CakePHP3 + PHP7 の開発環境を構築したので、手順を残しておきます。OSは、Windows10 を前提としています。

使用した資材一覧

資材 バージョン 補足
Windows10 Home 1703 OS
Visual Studio Code 1.12.1 エディタ
Source Han Code JP 2.000 プログラミング用フォント
XAMPP PHP 7.1.1 Apache+MySQL+PHP
Composer 1.4.1 PHPの依存管理ツール
CakePHP 3.4 MVCフレームワーク
XDebug 2.5.3 PHPデバッグツール
PHP Debug 1.10.0 VS Code 拡張機能
PHP IntelliSense 1.2.1 コード補完・整形
phpcs 0.7.0 コーディング規約チェック

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 --prefer-dist cakephp/app myapp

注） 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 をインストールします。
手順は、以下の通り。

  1. ビューバー（左端に縦に並んでいるアイコン群）で「拡張機能(Ctrl+Shift+X)」アイコンをクリックし、拡張機能ビューを開く。
  2. 「Marketplace で拡張機能を検索する」テキストボックスで、”php debug” を検索。
  3. 検索結果リストから PHP Debug の「インストール」ボタンをクリック。
  4. インストールが完了すると「再度読み込む」ボタンが表示されるので、クリックし、PHP Debug をアクティブ化。

enter image description here

次に、launch.json を作成し、デバック構成を定義します。
手順は、以下の通り。

  1. ビューバーで「デバッグ(Ctrl+Shift+D)」アイコンをクリックし、デバッグビューを開く。
  2. 歯車アイコンをクリック。
  3. リストが表示されるので、「PHP」を選択。

enter image description here

これで、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 にブレイクポイントを置いて、ステップ実行できることを確認します。手順は、以下の通り。

  1. デバッグビューを表示。
  2. LineNoの左側余白部分をクリックし、ブレイクポイントを設置。
  3. Listen for XDebug を選択し、緑の▶ボタンをクリック。
  4. ブラウザで、http://localhost:8765/phpinfo.php を開く。ブレイクポイントで処理が停止するので、ステップオーバーやステップインなどでデバッグ。

enter image description here

これで、PHPのデバッグが出来る様になりました。

PHP IntelliSense

コード補完・整形ツールをインストールします。
これは、機能拡張ビューで PHP IntelliSense を探してインストールすればＯＫです。

組み込みの PHP 言語候補機能は、無効にしておきましょう。

settings.json
"php.suggest.basic": false

phpcs

コーディング規約チェックツールをインストールします。

コマンドプロンプトで C:\apps\myapp に移動し、以下コマンドを実行します。

> composer require --dev squizlabs/php_codesniffer
> composer require --dev "cakephp/cakephp-codesniffer=3.*"
> vendor/bin/phpcs --config-set installed_paths vendor\cakephp\cakephp-codesniffer

VS Code を起動し、機能拡張ビューで phpcs を探してインストールします。その後、ソースコードを表示すると、以下の様に、赤い波線でコーディング規約違反を教えてくれる様になります。カーソルをあてると、規約違反の内容が表示されます。

enter image description here

上記は、”Missing file doc comment” 、つまり、ファイルの PHPDoc を記述しないのは規約違反だと、叱られている訳ですね。そこで、PHPDoc を簡単に記述してみます。

すると・・・

enter image description here

さらに、色々と叱られてしまいます。
５種類のタグが必須だと言われているので、タグを追記します。
その後、タグの順番や記述内容など、細かく叱られるので、１つ１つ潰していきます。

規約違反は、赤の波線。ワーニングは、緑の波線が表示されます。
赤の波線は、原則、すべて解消します。

時刻:
ラベル: , , ,

1 件のコメント:

登録: コメントの投稿 (Atom)