Save 37% off PRO during our Black Friday Sale! »

Web Creation With Polymer

78f5efc1e98c71e473cc7827de1c5db4?s=47 takanorip
February 06, 2018

Web Creation With Polymer

78f5efc1e98c71e473cc7827de1c5db4?s=128

takanorip

February 06, 2018
Tweet

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