More Related Content Similar to PHPとフロントのイイ関係・動くスタイルガイドをつくろう (20) More from Yusuke Kawabata (9) PHPとフロントのイイ関係・動くスタイルガイドをつくろう4. 自己紹介
• 川畑 雄補 @ku_suke
• 株式会社サイバーエージェント所属
• Webコンサルタント
• 顧客のシステム構築中
• アプリ本書いてます
16. A Living Style Guide.
“Living style guides help front-
end developers transform front-
end code bases into well-
described pattern libraries with
the minimum of effort.”
http://www.smashingmagazine.com/2015/04/13/an-in-depth-overview-of-living-style-guide-tools/
24. Style Guide Boilerplate
• PHP製のスタイル
ガイドジェネレータ
• といってもPHPは
70行程度なので
とってもシンプル
• お使いのアプリに
すぐ移植可能
http://bjankord.github.io/Style-Guide-Boilerplate/
35. 例えば Yii 2 で作ってみる
• マニュアルにあるHelloWorldWidgetを、
ベースに作ってみる
• 構成
– assets/OshiraseAsset.php
– components/OshiraseWidget.php
– components/view/oshirase.php
– views/style-guide/oshirase.php
36. 例えば Yii 2 で作ってみる
• assets/OshiraseAsset.php
CSS
jQuery
37. 例えば Yii 2 で作ってみる
• component/view/oshirase.php
asset
40. A Living StyleGuide
• スタイルガイドは、生きたドキュメント。
• 本番で使っているコードがそのまま書かれて
いるから、ブレにくい・漏れにくい
• PHPで今どきのフレームワークを使うと、
動的パーツもスタイルガイドに含められる
• PHPで動くスタイルガイドを作ろう!!