Web Creation With Polymer

Transcript

1. Web CREation WIth Polymer Takanori Oki Polymer Japan Cafe
2. 自己紹介 • 大木尊紀（オオキタカノリ） / @takanorip • 株式会社スマートドライブ • フロントエンドエンジニア • React、Vue.js、Polymer、ウェブ制作全般 • Polymer Japan 翻訳チーム • 「イヌでもわかるWeb Components」
 Boothにて販売中！
3. 技術書典4当選しました！！
4. Polymerで始めるWeb制作
5. Webサイト制作における課題 • 環境構築がめんどくさい • グローバルなHTML/CSS • HTML/CSSを共通化したい
6. PolymerでWeb制作をするメリット • 環境構築をほとんどしなくて良い • HTML/CSSがscoped • コンポーネント指向なマークアップができる • custom CSS propertiesや
 custom CSS mixinsを使うことができる
7. これらのことを Web標準技術で実現するのが Polymer
8. 実際に作ってみる（ダイジェスト）
9. 環境構築
10. polymer-cliを使う 以上！
11. 今回は polymer-2-starter-kit というテンプレートを使用
12. $npm install -g polymer-cli $polymer init ? Which starter template would you like to use? polymer-2-element - A simple Polymer 2.0 element template polymer-2-application - A simple Polymer 2.0 application › polymer-2-starter-kit - A Polymer 2.x starter application template, with navigation and "PRPL patter n" loading shop - The "Shop" Progressive Web App demo $polymer serve info: Files in this directory are available under the following URLs applications: http://127.0.0.1:8081 reusable components: http://127.0.0.1:8081/components/polymer- starter-kit/
13. ├── README.md ├── bower.json ├── bower_components ├── images ├── index.html ├── manifest.json ├── package.json ├── polymer.json ├── service-worker.js ├── src │ ├── my-app.html │ ├── my-icons.html │ ├── my-view1.html │ ├── my-view2.html │ ├── my-view3.html │ ├── my-view404.html │ └── shared-styles.html ├── sw-precache-config.js └── test
14. カスタムエレメント作成
15. <link rel="import" href=“../bower_components/polymer/polymer-element.html"> <link rel="import" href=“./component/sample-button.html"> <dom-module id="sample-view1"> <template> <style> :host { display: block; } </style> <div class="sample"> <h1 class=“sample-titke”>Hello Polymer</h1> <sample-button></sample-button> </div> </template> <script> class SampleView1 extends Polymer.Element { static get is() { return 'sample-view1'; } } window.customElements.define(SampleView1.is, SampleView1); </script> </dom-module>
16. polymer-element • Custom Elementを定義するためのコンポーネント • Polymerではこのpolymer-elementΛ֦ுͯ͠ɺ
 ಠࣗͷΤϨϝϯτΛఆٛ͢Δ
17. <link rel="import" href=“../bower_components/polymer/polymer-element.html">
18. Shadow DOM • PolymerのエレメントでShadow DOMを定義するには <dom-module>と<template>を使う • <dom-module>はShadow DOM全体（HTML/CSS/JS） をラップする • <template>にはShadow DOMのHTML部分を記述する
19. <dom-module id="sample-view1"> <template> <div class="sample"> <h1 class=“sample-titke”>Hello Polymer</h1> <sample-button></sample-button> </div> </template> </dom-module>
20. Shadow DOMとCSS • CSSは<template>タグの中の<style>タグ中に記述 • <template>の中に書かれたCSSは<template>に
 書かれているHTMLにしか適用されない、”scoped”な CSSになる • :hostは、定義しているカスタムエレメントと一致する
21. <dom-module id="sample-view1"> <template> <style> :host { display: block; } </style> <div class="sample"> <h1 class=“sample-titke”>Hello Polymer</h1> <sample-button></sample-button> </div> </template> </dom-module>
22. Shadow DOMを登録 • 定義したエレメントのタグをブラウザに認識させる
 ためには、エレメントを登録する必要がある • Polymer.Elementを拡張してエレメントを登録する • is()で返す値とdom-moduleのidはしないといけない • PolymerではES2015+の書き方をするので注意が必要
23. <dom-module id="sample-view1"> <script> class SampleView1 extends Polymer.Element { static get is() { return 'sample-view1'; } } window.customElements.define(SampleView1.is, SampleView1); </script> </dom-module>
24. <link rel="import" href=“../bower_components/polymer/polymer-element.html"> <dom-module id="sample-view1"> <template> <style> :host { display: block; } </style> <div class="sample"> <h1 class=“sample-titke”>Hello Polymer</h1> </div> </template> <script> class SampleView1 extends Polymer.Element { static get is() { return 'sample-view1'; } } window.customElements.define(SampleView1.is, SampleView1); </script> </dom-module>
25. カスタムエレメントを使う
26. HTML imports • <link rel="import" href=“hogehoge">でHTMLを HTMLの中にインポートする • （HTML modulesに置き換わる予定…）
27. <link rel="import" href=“../bower_components/polymer/polymer-element.html"> <link rel="import" href=“./component/sample-button.html"> <dom-module id="sample-view1"> <template> <style> :host { display: block; } </style> <div class="sample"> <h1 class=“sample-titke”>Hello Polymer</h1> <sample-button></sample-button> </div> </template> <script> class SampleView1 extends Polymer.Element { static get is() { return 'sample-view1'; } } window.customElements.define(SampleView1.is, SampleView1); </script> </dom-module>
28. データバインディング
29. Data Binding • ReactやVueのpropsのようなもの • 外部からエレメントに値を渡すことができる仕組み • <button>[[buttonText]]</button>
30. <sample-button button-text="PUSH"></sample-button>
31. <template> <style> :host { display: block; } </style> <button>[[buttonText]]</button> </template>
32. <script> class SampleButton extends Polymer.Element { static get is() { return "sample-button"; } static get properties() { return { buttonText: { type: String } } } constructor() { super(); } } customElements.define(SampleButton.is, SampleButton); </script>
33. イベントリスナー
34. <button on-click="count">[[num]]</button>
35. class SampleButton extends Polymer.Element { static get is() { return 'sample-button'; } static get properties() { return { num: { type: Number, notify: true, reflectToAttribute: true, value: 1 }, } } count() { this.num++; } } window.customElements.define(SampleButton.is, SampleButton);
36. Event Listener • 普通のJSと少し書き方が異なるので注意 • notify • 値が変更されるとイベントを発火させる • reflectToAttribute • 値の変更を反映する • value • 初期値
37. 子要素を使う
38. slot • カスタムエレメントの子要素を取得するには
 <slot>エレメントを使う • <slot>は、子ノードのレンダリング先を示す
 プレースホルダと考えることができる
39. <header> <h1><slot></slot></h1> <button>Menu</button> </header> <my-header>Shadow DOM</my-header>
40. 複雑なCSS編
41. CSS variables • PolymerではCustom CSS property implementationを 使うことができる • CSSの中で変数を使うことができる • var(--my-custom-property, defaultValue)
42. body { --sample-color1: #1E88E5; --sample-color2: #333333; } :host { display: block; background-color: var(--sample-color1, currentcolor); }
43. Custom property mixins • Sassのmixinのようなもの • 変数の中に複数のプロパティを持つことができる
44. html { --my-custom-mixin: { color: white; background-color: blue; } } :host { @apply --my-custom-mixin; }
45. ルーティングの設定
46. ルーティングの設定 • app-location、app-route、iron-pagesの3つの
 エレメントを使う • 一番親のエレメントでルーティングの設定をする
47. sample-app.html sample-view2.html sample-view1.html sample-view3.html ルーティングすると コンポーネントが切り替わる sample-header.html ルーティングとか ヘッダー/フッターとか
48. <app-location route="{{route}}" url-space-regex="^[[rootPath]]"> </app-location> <app-route route="{{route}}" pattern="[[rootPath]]:page" data="{{routeData}}" tail="{{subroute}}"> </app-route> <sample-layout> <sample-header slot="header" /> <iron-pages selected="[[page]]" attr-for-selected="name" fallback-selection="view404" role="main"> <sample-view1 name="view1"></sample-view1> <sample-view2 name="view2"></sample-view2> <sample-view3 name="view3"></sample-view3> <sample-view404 name="view404"></sample-view404> </iron-pages> <sample-footer slot="footer" /> </sample-layout>
49. 番外編：PWA • PWA(Progressive Web Apps)の略 • iOS 11.3のSafari 11.1からService Workerに対応！ • オフライン対応やPush通知などネイティブアプリに近 い挙動を実現する技術の総称 • Service Worker • Push Notification • ネイティブアプリに近いUI
50. polymer-2-starter-kitには PWAを実現するための機能が 備わっている
51. 使い方
52. polymer build --add-service-worker
53. このコマンドを叩くと service-worker.js sw-precache-config.js が生成される
54. index.html
55. if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('service-worker.js', { scope: Polymer.rootPath, }); }); }
56. sw-precache-config.js
57. module.exports = { staticFileGlobs: [ '/index.html', '/manifest.json', '/bower_components/webcomponentsjs/webcomponents-lite.js', '/images/*' ], navigateFallback: '/index.html', navigateFallbackWhitelist: [/^(?!.*\.html$|\/data\/).*/] }
58. Polymerの課題
59. 課題 • 配信されているコンポーネントが少ない • 今後に期待 / 自分で作って公開する • Sassなどを簡単に使うことができない • Gulpなど使う必要がある / ディレクトリ構成が複雑 • bower • Polymer3.0に期待
60. ありがとうございました！