wp-dfes03 LTスライド。

1. やらいや！
Web Components
WP-D Fes #03 LightningTalk

2. はじめに
• 技術的な話はゼロです
• ただWebComponentsをプッシュするだけです
• 細けぇこたいいんだよ！

3. あんた誰？
• 岡本秀高（ヒデ）
• 京都生まれ京都育ち
• PHPエンジニア
• Code for Shiga/Biwako
• WordCamp Kansai 2015
• http://wp-kyoto.net/

4. 京都来たなら
一度はおいで
• カフェトラベラーズハイ
• このスライドを作ったお店
• 阪急河原町駅徒歩５分

5. What’s 「やらいや！」
• 鳥取の方言で「やろうや！」
• 和太鼓でお世話になった人から聞いた言葉。
• 語感がすごく気に入っている。
• →「山内利一 YARAIYA」で検索やらいや！

6. 使ってますか？
WebComponents

7. 今、WebComponentsが熱い！
（俺調べ）

8. WebComponentsとは？
• 「オレ専用HTMLタグ」が作れるスゴいヤツ
• CSSやJSまでタグの中に組み込めちゃう便利なヤツ
• Google/Mozilla謹製HTMLタグまであるヤバいヤツ

9. こんなに便利なWebComponents
• オリジナルのHTMLタグを作って要素を使いまわせる
• 「コンポーネント内だけのCSS」が作れる
• 「HTMLタグ単位」で外部ライブラリを利用できる

10. 便利なGoogle謹製
フレームワーク

11. Polymer 0.5
• Material Design対応
• Flexboxにも対応
• その他色んなPolyfil実装

12. こんなの作りました http://bit.ly/1w7WUxg

13. 意外と高い？WebComponentsの学習コスト
• JavaScriptの壁
• ブラウザサポートの壁
• 言語の壁

14. JavaScriptの壁
• templateタグを呼び出すためにJavaScriptが必要
• jQueryではなくNativeJS
• jQuery慣れしていると、かなり取っ付きにくい

15. ブラウザサポートの壁
• ブラウザによって対応範囲が異なる
• フルで使えるのはChromeとOperaのみ
• Firefoxは一部非対応

16. 死すべし
InternetExploler

17. 言葉の壁
• 重要そうな奴は大体英語
• Polyfilのドキュメントなんて余計に英語
• Google翻訳との地道な戦い

18. だけどもやっぱり
便利やねん！

19. WebComponentsを使うメリット
「HTMLタグの使い回し」ができるから、
コーディングが最高に楽になる！

20. とにかくコーディングが楽なんです！
• 「あの案件で作ったあの要素」を使いまわし可能
• jQueryプラグインよりも簡単に要素を追加できる
• CSSの依存関係ガン無視OK！

21. 楽したいなら、WebComponents

22. もうちょっと前向きになれる
WebComponentsにまつわる話

23. 開拓され始めた日本語版
• 最近ついにPolymerの日本語チュートリアルができた
• Polymer Polytechnic Codelabs
http://itshackademic.com/codelabs?locale=ja
• StackOverflow日本語版の登場
• HTML5Conferenceなどで注目度爆上げ中
→日本語技術記事が増えてくる・・・はず！

24. 集めよう、お気に入りコンポーネント
• importするだけで、オリジナルHTMLタグが利用可能！
• GitHubなどに山ほど公開されている
• 自分で作ったものの公開ももちろんOK！

25. 集めよう、
お気に入りコンポーネント
• Polymer Paper Elements
https://www.polymer-project.org/docs/
elements/paper-elements.html
• Google Web Components
http://googlewebcomponents.github.io/
• Custom Elements
http://customelements.io/

26. WordPressとも相性バツグン

27. WordPressとも相性バツグン
WP-API+WebComponentsで
簡単SPA

28. 相性抜群の「WP-API」
• WordPressのデータをREST APIで取得
• Ajax処理するWebComponentを読み込んで、
• オリジナルHTMLタグに放り込むだけ。
• NoPHPでWordPressサイトが作れちゃう！

29. やらいや！WebComponents