やらいや！WebComponents 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」で検索やらいや！
- 8. WebComponentsとは？ • 「オレ専用HTMLタグ」が作れるスゴいヤツ • CSSやJSまでタグの中に組み込めちゃう便利なヤツ • Google/Mozilla謹製HTMLタグまであるヤバいヤツ
- 9. こんなに便利なWebComponents • オリジナルのHTMLタグを作って要素を使いまわせる • 「コンポーネント内だけのCSS」が作れる • 「HTMLタグ単位」で外部ライブラリを利用できる
- 11. Polymer 0.5 • Material Design対応 • Flexboxにも対応 • その他色んなPolyfil実装
- 14. JavaScriptの壁 • templateタグを呼び出すためにJavaScriptが必要 • jQueryではなくNativeJS • jQuery慣れしていると、かなり取っ付きにくい
- 15. ブラウザサポートの壁 • ブラウザによって対応範囲が異なる • フルで使えるのはChromeとOperaのみ • Firefoxは一部非対応
- 17. 言葉の壁 • 重要そうな奴は大体英語 • Polyfilのドキュメントなんて余計に英語 • Google翻訳との地道な戦い
- 18. だけどもやっぱり 便利やねん！
- 20. とにかくコーディングが楽なんです！ • 「あの案件で作ったあの要素」を使いまわし可能 • jQueryプラグインよりも簡単に要素を追加できる • CSSの依存関係ガン無視OK！
- 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/
- 28. 相性抜群の「WP-API」 • WordPressのデータをREST APIで取得 • Ajax処理するWebComponentを読み込んで、 • オリジナルHTMLタグに放り込むだけ。 • NoPHPでWordPressサイトが作れちゃう！