PHP Conference kansai 2015 発表資料（公開用）です。

1. PHPとフロントのイイ関係
動くスタイルガイドを作ろう
（公開用）
川畑 雄補 @ku_suke

2. 目次
• 自己紹介
• フロントの最近の動向おさらい
• 動くスタイルガイドを作ろう

3. 自己紹介

4. 自己紹介
• 川畑 雄補 @ku_suke
• 株式会社サイバーエージェント所属
• Webコンサルタント
• 顧客のシステム構築中
• アプリ本書いてます

5. フロントの最近の動向おさらい

6. 2000年～
覚えるべき技術
• HTMLタグ
• CSS一部
• Flash
• spacer.gif

7. 現在
• SEO/セマンティック
• マルチデバイス
• AltJS/AltCSS
• JSフレームワーク
• 構造化CSS
• パフォーマンス
• タスク自動化

8. 複雑化・多様化・分業化
Design &
Coding
Webデザイナー
Design
Coding
System
Marketing
Webデザイナー
フロントエンジニア
サーバエンジニア マーケター

9. 今回はここの話
Design &
Coding
Webデザイナー
Design
Coding
System
Marketing
Webデザイナー
フロントエンジニア
サーバエンジニア マーケター
フロントエンジニア
サーバエンジニア

10. 動くスタイルガイドを作ろう

11. スタイルガイドって何？
• エンジニアにわかり易い例（Bootstrap）

12. スタイルガイドって何？
• 神レベル（Lonely Planet）
http://rizzo.lonelyplanet.com/styleguide/design-elements/colours

13. スタイルガイドとは
• 特に大規模なサイトで、複数のデザイナーが
手がけてもデザインに一貫性を持たすための
指針です。
• さらにフロントコードもコンポーネント化する
ことにより、デベロッパーのコード均一化にも
貢献します。
• 俺から言わせればコピペ見本。

14. UIデザインの一貫性
いますぐ申し込み！
Apply Now!

15. フロントコードの統一
<div class=“button”>
<a class=“button-inner”>
<i class=“alert”>
--- VS ---
<a class=“btn btn-alert”>

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/

17. 要は、わざわざ作るんじゃなく
自動生成で動くようにメンテ
しようということ。
-英語のスライドを使うとそれっぽく見える

18. スタイルガイドを作るツール
• KSS
• StyleDocco
• Kalei
などなど

19. スタイルガイドを作るツール
• KSS ・・・ Ruby製 or node移植版
• StyleDocco ・ node製
• Kalei ・・・ Javascript製
などなど

21. スタイルガイドを作ろう
PHPで

22. スタイルガイドの作り方
• CSSのコメント欄にドキュメントを書いて
各種ジェネレータでHTMLを生成する方法
– phpDocumentorとかJavaDocみたいな
• 基本的なパーツHTMLを用意しておき、
CSSを含むテンプレートを生成する方法

23. スタイルガイドの作り方
• CSSのコメント欄にドキュメントを書いて
各種ジェネレータでHTMLを生成する方法
– phpDocumentorとかJavaDocみたいな
• 基本的なパーツHTMLを用意しておき、
CSSを含むテンプレートを生成する方法

24. Style Guide Boilerplate
• PHP製のスタイル
ガイドジェネレータ
• といってもPHPは
70行程度なので
とってもシンプル
• お使いのアプリに
すぐ移植可能
http://bjankord.github.io/Style-Guide-Boilerplate/

25. Style Guide Boilerplate

26. ※ただし静的コンテンツのみ
PHPなら動的コンテンツも・・・？

27. 動くスタイルガイドを作ろう
PHPで

28. 動的コンテンツに対応してみる
stristr($file,'.html')||stristr($file,'.php)
^^^^^^^^^^^^
preg_replace("/.(html|php)$/i", "", $file);
^ ^^^^
→ファイル名判定と正規表現に.phpを加えるだけ

29. 動的コンテンツに対応してみる
できた。

30. でも、実務コードはもっと複雑

31. 実務コードはもっと複雑
たとえば、
お知らせ
モジュール

32. 保守性もパフォーマンスも。
←たとえば、CSSはここ
(head内)に記述したいけど
・
・
・
・
・
←HTMLはここに記述したい

33. 動的コンポーネントを含むガイド
• 各フレームワークで、Widget的な機能を使え
ば、CSSリソースなどのhead差し込みが実現
• もちろんスタイルガイドを表示する度DBに
接続してちゃんと本番データをもってくる。
• PC/SPの切り替えなども本番と同じロジック
で実装できる。

34. 例えばYii 2で作ってみる
Yii 化

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

38. 出来た。
実行結果
コード

39. CSSとかJSのInjectionもOK！
CSSは上
jQueryは下

40. A Living StyleGuide
• スタイルガイドは、生きたドキュメント。
• 本番で使っているコードがそのまま書かれて
いるから、ブレにくい・漏れにくい
• PHPで今どきのフレームワークを使うと、
動的パーツもスタイルガイドに含められる
• PHPで動くスタイルガイドを作ろう！！