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. ありがとうございました！