Engineer as a Lifestyle @tenkoma

What We Find Changes Who We Become -- Peter Morville著『アンビエント・ファインダビリティ 』

PhpStormと連携する必要最小限のDocker環境を作る

PhpStormネタをまとめるときに、Docker環境の設定の話は分離しておきたいと思ったので独立した記事にする。

はじめに

Docker を利用すると、Dockerfileやdocker-compose.ymlを使って、PHPアプリ開発環境の設定を手軽にチームで共有できるため、プロジェクトのコードをgit cloneしたあとにすぐ起動できる環境を用意するのに適している。 またPhpStormは、Dockerを使って用意したPHPアプリ開発環境と連携できる機能がある。 そこで、PhpStormの連携機能や、PHPコード自体を手軽に試せるよう、シンプルなPHP CLI環境とXdebugデバッグできるWebサーバ環境について説明する。

目次

PhpStormと連携するCLI環境を用意する

f:id:tenkoma:20190324015022p:plain
php:7.3-alpine でPHPスクリプトを実行する

標準で組み込まれていない拡張が不要であれば、Dockerfile や docker-compose.yml をつくる必要はない。

設定方法

f:id:tenkoma:20190323180544p:plain
DockerでPHP実行環境を用意する

  1. Preferences を開く
  2. 左メニューでPHPを選ぶ
  3. CLI Interpreter 右側の 「...」 を選ぶ
  4. CLI Interpreterダイアログで 「+」 を選び、「From Docker, Vagrant, VM, Remote... 」を選ぶ
  5. Configure Remote PHP Interpreterダイアログで、「Docker」を選び、Image name に php:7.3-alpine と入力
  6. OK を3回選びPreferencesを閉じる(Dockerイメージのダウンロードとコンテナ起動が行われる)

設定後、最初の画像のように実行するのは Docker のコマンドで言えば

docker run -it -v `pwd`:/opt/project php:7.3-alpine php /opt/project/phpinfo.php

が近そう。

Xdebugでデバッグできる最低限のWebサーバを用意する

f:id:tenkoma:20190324021419p:plain
XdebugデバッグできるWebサーバを含むDocker環境

PHP (Docker Official Images) にはXdebugがインストールされていないので、 Dockerfile で、カスタマイズしたコンテナをつくる。(なるべく Unofficial なイメージは避けたい) また、ホストディレクトリをコンテナにマウントする設定を docker-compose.yml に書く。(必須ではないが、PhpStormの設定をするときにPath Mappingを自動的に読み込んでくれるので)

設定方法

まずプロジェクトフォルダに以下の Dockerfile, docker-compose.yml, php.ini を保存する

Dockerfile

FROM php:7.3-apache

RUN apt-get update \
  && pecl install xdebug \
  && docker-php-ext-enable xdebug

docker-compose.yml

version: "3.7"
services:
  web:
    build: ./
    volumes:
      - ./:/var/www/html:cached
      - ./php.ini:/usr/local/etc/php/php.ini:cached
    working_dir: /var/www/html
    ports:
      - "8000:80"

php.ini

[xdebug]
zend_extension=/usr/local/lib/php/extensions/no-debug-non-zts-20160303/xdebug.so
xdebug.remote_enable = On
xdebug.remote_autostart = On
xdebug.remote_host = host.docker.internal

設定確認用に phpinfo.php をつくっておく。

phpinfo.php

<?php
phpinfo();

2行目の行番号右をクリックしてブレークポイントを追加しておく。(赤い丸🔴が表示される)

Terminal を開いて、プロジェクトフォルダに移動し、 docker-compose up -d と実行すると、Webサーバのコンテナが起動する。 次にPhpStorm右上の「Start Listening for PHP Debug Connections」をクリックする。

f:id:tenkoma:20190323194352p:plain
Start Listening for PHP Debug Connectionsというボタン

🚫のようなアイコンが無くなった状態で http://localhost:8000/phpinfo.php にアクセスすると以下のようなウインドウが開くので、「Accept」を選ぶ。

f:id:tenkoma:20190324022237p:plain
Incoming Connection From Xdebugウインドウ

先ほど作ったブレークポイントの行背景が青くなったら設定成功。以下のように実行中のグローバル変数が見られるようになっているはず。

f:id:tenkoma:20190324021419p:plain
XdebugデバッグできるWebサーバを含むDocker環境

Webアプリケーションだし、DBサーバも欲しいとき

Laradock を使ってみるのがよさそう。

環境構築の理解を深めるためにtenkoma/cakephp3-app-skeletonをつくってみた。説明は省略。

目次

PhpStorm でコードを理解する (経緯をたどる編)

PhpStorm でコードを理解する (コードを読む・構造を知る編)の続き。

経緯をたどる

コードを理解するために、コードが変更された経緯を理解するのが有効なこともある。そんなときに使える機能をまとめる。

Git連携

Git連携のLog機能・History機能(ファイル・ディレクトリの変更履歴)も便利だが、経緯をたどるために便利なのがAnnotate機能。

Annotate機能(git blameと同等)

  • ショートカットキー未設定・エディタの右端の行番号を右クリックして「Annotate」を選択

コード行ごとに最終変更日時・変更者が確認できる機能。「バグを埋めだ犯人捜し」に使うわけじゃないよ!

f:id:tenkoma:20190321175735p:plain
Git Annotate機能

日付・変更者名をクリックすると、同じコミットで変更したファイル一覧が表示できる

f:id:tenkoma:20190321180600p:plain
Annotate → Paths Affected in Revision

Annotateで表示される各行は右クリックするとコミット・リビジョンに関連付いたいくつかの操作ができるようになっている。

f:id:tenkoma:20190321185323p:plain
Annotate 右クリック

  • Show Diff: その行が最後に変更されたときのファイル変更(Diff)を表示
  • Annotate Revision: その行が最後の変更されたときのファイルを表示
  • Annotate Previous Revision: その行が最後の変更される直前のファイルを表示

GitHub連携

「Find in Pull Request」プラグイン

GitHub.com / GitHub Enterprise を上流リポジトリで使い、プルリクエストを使った開発をしているなら、コード変更の経緯を知るのにこのプラグインが便利。

エディタ行で右クリックして「Find Pull Request」を選択

f:id:tenkoma:20190321183119p:plain
Find Pull Request機能

getAlias() が変更されたプルリクエストのfiles 3.4 Remove more deprecated function calls by antograssiot · Pull Request #10009 · cakephp/cakephpにジャンプした。

目次

次はコードを実行する編

PhpStorm でコードを理解する (コードを読む・構造を知る編)

プログラムコードを書くとき、多くの時間を「コードを理解する」ことに費やしていると思う。

PHPコードを読み書きするのに、なぜPhpStormを使っているのか考えたとき、デバッガやバージョン管理が統合されていることも理由としてあるが、コードを理解しやすくするために多くの機能が備わっていることも理由の一つだった。

「PHPコードを理解する」という視点でPhpStorm の便利な機能をまとめてみると面白そうだなぁ、と思ったのでまとめてみる。 (PHPコードの文法をある程度理解している方向け)

分類

雑多に説明するより、とりあえず分類してみるとわかりすくなると思ったので4つに分ける。

コードを読む・構造を知る

コードを理解するのに最も基本的で必須なのがコードを読むこと。 また全体像を大雑把に把握するためにプログラムの構造を知ることも必要になってくる。 そのための機能を紹介する。

コードジャンプ

  • Mac:Command+B, Win: Ctrl+B
  • Command または Ctrl を押しながらシンボル(クラス名・メソッド名…)をクリック

大きく2つの機能がある

  • クラスやメソッドを利用してる箇所から定義元にジャンプする機能
  • 定義元から、利用する箇所を一覧・ジャンプする機能

f:id:tenkoma:20190317194745p:plain
定義元から利用箇所にジャンプする

コードが1ファイルで完結しないとき(チーム開発だと自然とそうなると思う)、読み込んでいるコードを理解したくなることはよくある。 サードパーティーライブラリのコードを理解したくなることもよくある。 そんなときコードジャンプを多用しながら構造を理解する。ジャンプ前のコードに戻るときは Mac:Command+[, Win: Ctrl+Alt+←

Quick Definition

Mac:Option+Space, Win: Shift+Ctrl+I

f:id:tenkoma:20190413213136p:plain
Quick Definition

メソッド呼び出し先のファイルに移動する前にコードをちょっとだけ確認したいとき使える

File Structure (ポップアップ) / Structure パネル

File Structure (ポップアップ): Mac:Command+F12, Win: Ctrl+F12

f:id:tenkoma:20190413204916p:plain:w300
File Structure (ポップアップ)

Structure パネル: Mac:Command+7, Win: Alt+7

f:id:tenkoma:20190317193032p:plain:w300
PhpStorm Structure パネル

クラスやインターフェイスのプロパティ・メソッドを一覧できる。 どんなメソッドを持っているのか把握するのに使う。 継承したメソッドを表示することもできる。 移動するときに一時的に表示したいなら、File Structure (ポップアップ), 常時表示させたいならStructure パネルで。

クラス・メソッドを開く(ナビゲート機能)

クラス・メソッド名は分かってるけど、ファイルツリーから辿るのは面倒くさい。

  • クラス: Mac:Command+O, Win: Ctrl+N
  • シンボル(クラス・メソッド・プロパティ): Mac:Command+Alt+O, Win: Shift+Ctrl+Alt+N

f:id:tenkoma:20190317201228p:plain
シンボルを開く(ナビゲート機能)

クラスやメソッドにアクセスしたいとき、覚えておくと全文検索(Find in Path)より楽になる。

クラス階層を表示(Show Diagram)

Mac:Command+Alt+Shift+U, Win: Shift+Ctrl+Alt+U

f:id:tenkoma:20190317202018p:plain
Show Diagram機能

あまり使ったことは無い。クラス階層が深いとき、全体像を理解するのに使えるかも。メソッド・プロパティを表示することもできる。

呼び出し階層を表示 (Call Hierarchy)

Mac:Ctrl+Opt+H, Win: Ctrl+Alt+H

f:id:tenkoma:20190413210842p:plain:w300
Hierarchy: callers (呼び出し元)

f:id:tenkoma:20190413210923p:plain:w300
Hierarchy: callees (呼び出し先)

メソッドの呼び出し元、呼び出し先をツリー表示して、たどれる機能

次は「経緯をたどる」編

目次

LEDデスクスタンド

パナソニック LEDデスクスタンド クランプタイプ ダークグレー SQ-LC516-K

パナソニック LEDデスクスタンド クランプタイプ ダークグレー SQ-LC516-K

引っ越して、机で本が読みにくい環境になってしまったので買った。 スイッチが根元にあって遠いけど、たいして気にならないので満足。

USB切り替え器

買った。

FOSTEX ボリュームコントローラー ハイレゾ対応 PC100USB-HR2をMacBook ProとNintendo Switch で共有するために買ったけど、キーボードもSwitchで使えるようになって便利になった。

PHPカンファレンス仙台2019で「PhpStormとPHPUnitを連携してユニットテスト作成を楽にする」を再発表しました

2019年1月26日(土)に開催されたPHPカンファレンス仙台2019に参加してきました。

一般参加の予定でしたが、2日前に登壇キャンセルで代打を募集されていたので、応募して話せることになりました。

内容は2018年12月にPHP勉強会で話したものと同じで、時間に合わせて説明をゆっくりにしたり、わかりにくそうなところに説明を追加したりしました。

ただ直前にいそいで修正したので、説明につまったところがあったかなー、とは思います。 また、テスト時にデバッグするところでブレークしなくて、説明した機能を見せることができませんでした。 セッション後に調査したところ、 Test Frameworksの設定で説明した、Localという設定を削除してなかったのが原因だったようで、削除したらちゃんとブレークしました。

次なにか発表するときは動画にしようかと思います。

PHPカンファレンス仙台、とても楽しかったです!ありがとうございました。

(発表の最後の準備で睡眠時間が確保できず、懇親会の後すぐホテルの部屋に戻ってしまったのが心残り…)

2018年に買った物まとめ

満足度高い順で。

27インチ 4Kモニタ, USB-Cで給電可能

外部モニタをずっと使って無くて2003年に買ったEIZO L465しか家に無かったので買った。 ベゼル1cm以下、USB Type-CでMBP 15インチを給電できる。 Nintendo Switch もHDMI接続で使ってる。 すごく作業しやすくなった。 不満があるとすれば

  • USB Type-Aポートが2つだけど4つは欲しかった
  • MBP とNintendo Switchを切り替えることがよくある。入力が5つあるが3つは使ってないので、入力切り替えで、使わないポートには切り替わらないようにできたらいいのにと思った。

くらい。

オカムラ オフィスチェア コンテッサ(メッシュ)+ウレタンキャスター

オカムラ オプションパーツ ウレタンキャスター (5個セット) G93107X

オカムラ オプションパーツ ウレタンキャスター (5個セット) G93107X

こしをだいじに。 オフィスでアーロンチェアを使ってるけど、背もたれを傾けて固定できたほうが便利だと思ったのでこちらを選択。 長時間座って作業できます。不満なし。 2月に買ったときは ¥175,050 だったが、¥9,000ほど値上がりしてた。

ドライヤー

パナソニック ヘアドライヤー ナノケア ピンクゴールド EH-NA99-PN

パナソニック ヘアドライヤー ナノケア ピンクゴールド EH-NA99-PN

ドライヤーで髪を乾かす習慣がなかったけど、ちゃんと乾かすようになった。 ドライヤーは風量が大事ですね。

電動歯ブラシ

Amazon プライムデーで購入。 歯の裏側を磨くのがすごく楽になった。

NAS + HDD4つ

WD HDD 内蔵ハードディスク 3.5インチ 2TB WD Red NAS用 WD20EFRX SATA3.0 5400rpm 3年保証

WD HDD 内蔵ハードディスク 3.5インチ 2TB WD Red NAS用 WD20EFRX SATA3.0 5400rpm 3年保証

Time Capsule で毎回バックアップ失敗するようになったので、渋々NASを検討して、これを購入。 コントロールパネルにブラウザでアクセスできて、何ができるのかわかりやすかった。 バックアップにしか使ってないけど、用途がふえたら、HDDの容量を増やしていくかも。

加湿器

引っ越す前から使っていたパナソニックの加湿器(FE-KLG03)だと、フルパワーでも加湿量不足を感じたので購入。 5リットル入るので、平日だと1日はもつ。 常に静音モードでつかってます。

Kindle Oasis

Kindle Oasis、電子書籍リーダー、防水機能搭載、Wi-Fi、8GB

Kindle Oasis、電子書籍リーダー、防水機能搭載、Wi-Fi、8GB

画面切り替えが速い。薄い。 せっかく買ったけど、あんまり使ってない。マンガを読みたいときだけは使う。