Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
やらいや!
Web Components
WP-D Fes #03 LightningTalk
はじめに
• 技術的な話はゼロです
• ただWebComponentsをプッシュするだけです
• 細けぇこたいいんだよ!
あんた誰?
• 岡本秀高(ヒデ)

• 京都生まれ京都育ち

• PHPエンジニア

• Code for Shiga/Biwako

• WordCamp Kansai 2015

• http://wp-kyoto.net/
京都来たなら
一度はおいで
• カフェトラベラーズハイ

• このスライドを作ったお店

• 阪急河原町駅徒歩5分
What’s 「やらいや!」
• 鳥取の方言で「やろうや!」
• 和太鼓でお世話になった人から聞いた言葉。
• 語感がすごく気に入っている。
• →「山内利一 YARAIYA」で検索やらいや!
使ってますか?
WebComponents
今、WebComponentsが熱い!
(俺調べ)
WebComponentsとは?
• 「オレ専用HTMLタグ」が作れるスゴいヤツ
• CSSやJSまでタグの中に組み込めちゃう便利なヤツ
• Google/Mozilla謹製HTMLタグまであるヤバいヤツ
こんなに便利なWebComponents
• オリジナルのHTMLタグを作って要素を使いまわせる
• 「コンポーネント内だけのCSS」が作れる
• 「HTMLタグ単位」で外部ライブラリを利用できる
便利なGoogle謹製
フレームワーク
Polymer 0.5
• Material Design対応

• Flexboxにも対応

• その他色んなPolyfil実装
こんなの作りました http://bit.ly/1w7WUxg
意外と高い?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
• St...
集めよう、お気に入りコンポーネント
• importするだけで、オリジナルHTMLタグが利用可能!
• GitHubなどに山ほど公開されている
• 自分で作ったものの公開ももちろんOK!
集めよう、
お気に入りコンポーネント
• Polymer Paper Elements 

 https://www.polymer-project.org/docs/
elements/paper-elements.html

• Googl...
WordPressとも相性バツグン
WordPressとも相性バツグン
WP-API+WebComponentsで
簡単SPA
相性抜群の「WP-API」
• WordPressのデータをREST APIで取得
• Ajax処理するWebComponentを読み込んで、
• オリジナルHTMLタグに放り込むだけ。
• NoPHPでWordPressサイトが作れちゃう!
やらいや!WebComponents
Upcoming SlideShare
Loading in …5
×

やらいや!WebComponents wp-dfes03 LT

6,870 views

Published on

wp-dfes03 LTスライド。

Published in: Technology
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1lite.top/rHT5R ◀ ◀ ◀ ◀
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

やらいや!WebComponents wp-dfes03 LT

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

×