やらいや！webcomponents wp-dfes03 lt
TRANSCRIPT
やらいや！ Web ComponentsWP-D Fes #03 LightningTalk
はじめに• 技術的な話はゼロです
• ただWebComponentsをプッシュするだけです
• 細けぇこたいいんだよ！
あんた誰？• 岡本秀高（ヒデ）
• 京都生まれ京都育ち
• PHPエンジニア
• Code for Shiga/Biwako
• WordCamp Kansai 2015
• http://wp-kyoto.net/
京都来たなら 一度はおいで• カフェトラベラーズハイ
• このスライドを作ったお店
• 阪急河原町駅徒歩５分
What’s 「やらいや！」
• 鳥取の方言で「やろうや！」
• 和太鼓でお世話になった人から聞いた言葉。
• 語感がすごく気に入っている。
• →「山内利一 YARAIYA」で検索やらいや！
使ってますか？ WebComponents
今、WebComponentsが熱い！ （俺調べ）
WebComponentsとは？
• 「オレ専用HTMLタグ」が作れるスゴいヤツ
• CSSやJSまでタグの中に組み込めちゃう便利なヤツ
• Google/Mozilla謹製HTMLタグまであるヤバいヤツ
こんなに便利なWebComponents
• オリジナルのHTMLタグを作って要素を使いまわせる
• 「コンポーネント内だけのCSS」が作れる
• 「HTMLタグ単位」で外部ライブラリを利用できる
便利なGoogle謹製 フレームワーク
Polymer 0.5
• Material Design対応
• Flexboxにも対応
• その他色んなPolyfil実装
意外と高い？WebComponentsの学習コスト
• JavaScriptの壁
• ブラウザサポートの壁
• 言語の壁
JavaScriptの壁
• templateタグを呼び出すためにJavaScriptが必要
• jQueryではなくNativeJS
• jQuery慣れしていると、かなり取っ付きにくい
ブラウザサポートの壁• ブラウザによって対応範囲が異なる
• フルで使えるのはChromeとOperaのみ
• Firefoxは一部非対応
死すべし InternetExploler
言葉の壁• 重要そうな奴は大体英語
• Polyfilのドキュメントなんて余計に英語
• Google翻訳との地道な戦い
だけどもやっぱり 便利やねん！
WebComponentsを使うメリット
「HTMLタグの使い回し」ができるから、 コーディングが最高に楽になる！
とにかくコーディングが楽なんです！• 「あの案件で作ったあの要素」を使いまわし可能
• jQueryプラグインよりも簡単に要素を追加できる
• CSSの依存関係ガン無視OK！
楽したいなら、WebComponents
もうちょっと前向きになれる WebComponentsにまつわる話
開拓され始めた日本語版
• 最近ついにPolymerの日本語チュートリアルができた
• Polymer Polytechnic Codelabs http://itshackademic.com/codelabs?locale=ja
• StackOverflow日本語版の登場
• HTML5Conferenceなどで注目度爆上げ中
→日本語技術記事が増えてくる・・・はず！
集めよう、お気に入りコンポーネント
• importするだけで、オリジナルHTMLタグが利用可能！
• GitHubなどに山ほど公開されている
• 自分で作ったものの公開ももちろんOK！
集めよう、 お気に入りコンポーネント
• 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/
WordPressとも相性バツグン
WordPressとも相性バツグン
WP-API+WebComponentsで
簡単SPA
相性抜群の「WP-API」
• WordPressのデータをREST APIで取得
• Ajax処理するWebComponentを読み込んで、
• オリジナルHTMLタグに放り込むだけ。
• NoPHPでWordPressサイトが作れちゃう！
やらいや！WebComponents