Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

var dumpを使わないWordPress開発フロー

7,495 views

Published on

WordCamp Tokyo 2015のショートセッションで発表した【var dumpを使わないWordPress開発フロー】のスライドです。This is my session at WordCamp Tokyo 2015.
How to WordPress development without using var_dump().

Published in: Software

var dumpを使わないWordPress開発フロー

  1. 1. var_dumpを使わないWordPress開発フロー エンジニア 田島 優也
  2. 2. 本日お話すること PHPを開発コア言語とするWebアプリケーション開発 において、var_dumpを使わずに開発を行うという意味 と手法についてお話します。
  3. 3. 田島 優也 プライム・ストラテジー株式会社 チーフエンジニア、第二グループリーダー システム開発はもちろん、ディレクション、セールスなど枠にとらわれることなく日々社内外の課題 解決に従事しています 講演実績:『必ず押さえておきたい今すぐできるセキュリティ対策』(WordCamp Tokyo 2014) 『案件で使えるプラグイン特集』(WordBench東京) など 執筆実績 : 『詳解WordPress』(株式会社オライリー・ジャパン) 『本格ビジネスサイトを作りながら学ぶ WordPressの教科書2 』 (SBクリエイティブ株式会社) 自己紹介 Twitter : @tajima_taso facebook: demontajima
  4. 4. PHPファイルを編集している時、 こんな経験ありませんか?
  5. 5. 変数$wp_queryの中身を知りたい (WordPressのグローバル変数)
  6. 6. single.php
  7. 7. single.php
  8. 8. うんざりするくらいの見づらさ…
  9. 9. var_dumpの嫌なところ ・変数の中身によっては著しく見た目を損ない、デバッグの 効率が悪い。 ・クライアントが確認できるような環境で作業している場合、 見た目が崩れていることによって、意図しないクレーム につながる。 ・見た目を崩したままデバッグしていると、フロント側 (JavaScript、CSSなど)で何か問題が起こっていることに 気づかない可能性がある。 ・Ajaxなど非同期の通信の場合、単純にvar_dumpするだけ ではデバッグできない。
  10. 10. 本来のvar_dumpの機能は? var_dump 変数に関する情報をダンプする この関数は、指定した式に関してその型や値を含む構造 化された情報を返します。配列の場合、その構造を表示す るために各値について再帰的に 探索されます。 下記『PHP マニュアル』より引用 http://php.net/manual/ja/function.var-dump.php
  11. 11. 変数に関する情報をダンプするという役割 情報がどういう状況で、どこに出力されるかは、var_dump から切り離すことが可能。 今回の場合は、アプリケーションの最終的な表 示領域をvar_dumpの出力先としていたことが 問題なのでそこについて検討する。
  12. 12. クライアント サーバーブラウザ コンテンツ デバッグ コンテンツ デバッグ こうなっているのを…
  13. 13. クライアント サーバーブラウザ コンテンツコンテンツ こうしたい ブラウザ以外 の何か
  14. 14. クライアント サーバーブラウザ コンテンツコンテンツ この赤枠内は閉じられていて、 いかなる影響も受けないようにしたい ブラウザ以外 の何か
  15. 15. var_dumpの問題点(と思っていたもの)の整理 問題点 ・クライアント確認の効率を悪くする。 ・フロント側の開発効率を悪くする。 ・バックエンド側のデバッグ効率が良いとは言えない。 ・デバッグできないケースがある。などなど… 色々な問題があるが、 それらの問題を全て解決するには ブラウザではない何かに var_dumpの結果を出力すれば良いだけ。
  16. 16. var_dumpの出力先を変更する。 コマンドラインベースでOSを操作したことがある方には馴染 み深いリダイレクト(ファイルディスクリプタの上書き)のような処理を PHPスクリプトで実装する。 cat test.txt > new_test.txt # new_text.txtに結果が出力される。 #ブラウザではなくファイルに書き込まれるイメージ。 cat test.txt # 端末の画面に結果が出力される。 #ブラウザに表示されるイメージ
  17. 17. デバッグのフロー ・ var_dumpで出力されるデフォルトの出力バッファへの書き込みを抑 制する。 ・出力バッファ領域を新たに確保して、そこに出力をためておく。 ・ためておいた内容をログファイルに書き出す。 ・ファイルの更新を監視させ、ファイルに書き込まれるたびに端 末上に追記情報を流しつづけることによって、デバッグしたい 情報をリアルタイムで確認。
  18. 18. 具体的な実装とフロー ・ var_dumpで出力されるデフォルトの出力バッファへの書き込みを抑制する。 ・出力バッファ領域を新たに確保して、そこに出力をためておく。 ob_start(); var_dump( $dump ); $out = ob_get_contents(); ob_end_clean(); ・ファイルの更新を監視させ、端末上に結果を流しつづける。 tail –f /var/log/test/log ・ためておいた出力結果をファイルに書き出す。 file_put_contents( ‘/var/tmp/test.log’, $out, FILE_APPEND | LOCK_EX );
  19. 19. WordPressでの実装方法 ・ var_dumpで出力されるデフォルトの出力バッファへの書き込みを抑制する。 ・出力バッファ領域を新たに確保して、そこに出力をためておく。 ob_start(); var_dump( $dump ); $out = ob_get_contents(); ob_end_clean(); ・ためておいた出力結果をファイルに書き出す。 file_put_contents( ‘/var/tmp/test.log’, $out, FILE_APPEND | LOCK_EX ); 関数化した上記の処理を記述したphpファイルを mu-pluginsフォルダへ置く。
  20. 20. WordPressでの実装方法 ・ためておいた出力結果をファイルに書き出す。 file_put_contents( ‘/var/tmp/test.log’, $out, FILE_APPEND | LOCK_EX ); CUIを使っている場合は、touch /var/tmp/test.log ; chmod 666 /var/tmp/test.log などの操作をしてファイルを作成しておき、Webサーバからも書き込める状態にして おく。GUIの場合は書き込めるテキストファイルを作成しておき同じくWebサーバから 書き込める状態にしておく。 ※ただし、PHPをCLIとして使っている場合は実行しているユーザーが書き込めること ができれば良い。
  21. 21. WordPressでの実装方法 ・ファイルの更新を監視させ、端末上に結果を流しつづける。 tail –f /var/tmp/test.log 端末エミュレータを起動し、下記のコマンドを入力する。(必要に応じてバックグラウン ドで)
  22. 22. single.php
  23. 23. ブラウザリロード時変化なし
  24. 24. ターミナルなどの画面に、 情報がリアルタイムで更新され続ける。 もちろん、あとからテキストファイルを開い て、ゆっくり確認することも可能。
  25. 25. console_log関数の詳細 https://github.com/yuya-tajima/console_log 今回使用したconsole_log関数は単純にvar_dumpをテキスト ファイルに出力するだけでなく、色々な追加情報を表示する ような実装になっています。 まだまだ開発中ですが、下記のリポジトリで定期的に改修し ているので、改善案、要望案などございましたらご連絡頂け ると嬉しいです。
  26. 26. まとめ ・プログラミング言語のビルトイン関数は必要最低限の機 能が多く、それぞれの状況に応じて変更したいという ケースがあるので、独自にラッパー関数をつくるか、ライ ブラリで提供しているラッパー関数を使って開発効率を あげる。 ・新たな問題に直面した時は、既存のソリューションを組み 合わせて新たなソリューションを創りだせないか考えて みる。
  27. 27. ご清聴ありがとうございました!

×