PHPとフロントのイイ関係・動くスタイルガイドをつくろう

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製などなど

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

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

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

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

24. Style Guide Boilerplate

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

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

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

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

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

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

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

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

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

34. 例えば Yii 2 で作ってみる • マニュアルにあるHelloWorldWidgetを、ベースに作ってみる • 構成 – assets/OshiraseAsset.php – components/OshiraseWidget.php – components/view/oshirase.php – views/style-guide/oshirase.php

35. 例えば Yii 2 で作ってみる • assets/OshiraseAsset.php CSS jQuery

36. 例えば Yii 2 で作ってみる • component/view/oshirase.php asset

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

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

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

PHPとフロントのイイ関係・動くスタイルガイドをつくろう

Yusuke Kawabata

Transcript