Looking for polymer Answers? Try Ask4KnowledgeBase
Looking for polymer Keywords? Try Ask4Keywords

polymerポリマーの使い方


備考

Polymerプロジェクトは以下から構成されています。

  • Polymer library :Polymerは、Webコンポーネントを最大限に活用するのに役立つ軽量ライブラリです。 Webコンポーネントを使用すると、ブラウザの組み込み要素とシームレスに相互運用する再利用可能なカスタム要素を作成したり、アプリケーションを適切なサイズのコンポーネントに分割したりすることができます。
  • WebComponents Polyfill :WebComponents Polyfillは、W3C Webコンポーネントの仕様を満たすことを目的とした、将来的にターゲットを絞ったライブラリです。仕様を完全に実装しているブラウザでは、webcomponents.jsは必要ありません。しかし、ほとんどのブラウザではまだ仕様の一部が欠落しているため、かなりの時間依存関係になります。
  • Polymer App Toolbox :Polymer App Toolboxは、Webコンポーネント、Service Worker、HTTP / 2などの強力なWebプラットフォーム機能を利用して、最小のオーバーヘッドとペイロードで最先端のプログレッシブWebアプリケーションを構築し、提供するのに役立ちます。ツールボックスは、コンポーネントベースのアーキテクチャ、応答性の高いレイアウト、モジュラールーター、ローカリゼーションサポート、ローカルストレージとオフラインキャッシングのターンキーサポート、アンバンドルされたアプリケーションリソースの効率的な提供を提供します。これらの機能を個別に採用するか、それらを組み合わせてフル機能のプログレッシブWebアプリケーションを構築してください。 Polymerは、標準のWeb Components APIよりも少し砂糖を振りかけるので、結果を簡単に得ることができます。 Polymerライブラリはカスタム要素を作成するための一連の機能を提供します。これらの機能は、標準のDOM要素のように機能するカスタム要素を簡単かつ迅速に作成できるように設計されています。標準的なDOM要素と同様に、ポリマー要素は次のようになります。

バージョン

バージョン発売日
v2.0.0 2017-05-15
v1.7.0 2016-09-28
v1.6.1 2016-08-01
v1.6.0 2016年6月29日
v1.5.0 2016-05-31
v1.4.0 2016年5月18日
v1.0.0 2015-05-27

基本要素の構造

次の非常に基本的な要素my-elementsrc/my-element.html として保存されています

<link rel="import" href="bower_components/polymer/polymer.html">

<dom-module id="my-element">

  <template>
    <style>
      /* local styles go here */
      :host {
        display: block;
      }
    </style>
    <!-- local DOM goes here -->
    <content></content>
  </template>

  <script>
    Polymer({
      /* this is the element's prototype */
      is: 'my-element'
    });
  </script>

</dom-module>
 
  • <link> は、HTMLインポートを使用するPolymerライブラリが含まれています。
  • <dom-module> は要素のローカルDOMラッパーです(この場合はmy-element )。
  • <template> は実際のローカルDOM定義です。
  • <template> <style> 内の<style> は、この要素とそのローカルDOMにスコープされ、ドキュメント内の他の要素に影響を与えないスタイルを定義することを可能にします。
  • <content> は要素内に置かれたものを保持します。
  • :host 疑似クラスはカスタム要素( my-element )と一致します。
  • Polymer 呼び出しは要素を登録します。
  • is Propertyは要素の名前です( <dom-module>id に一致する必要があり <dom-module>

あなたはあなたのアプリでそれをインポートすることができます:

<link rel="import" href="src/my-element.html">
 

それをタグとして使う:

<my-element>Content</my-element>
 

こんにちは世界

この例では、 x-foo という名前のPolymer要素を作成します。このテンプレートは文字列プロパティ「message」にバインドされています。要素のHTMLはメイン文書にインポートされ、 <body><x-foo> タグを使用できます。

x-foo.html

<dom-module id="x-foo">
  <template>
    <span>{{message}}</span>
  </template>

  <script>
    Polymer({
      is: 'x-foo',
      properties : {
        message: {
          type: String,
          value: "Hello world!"
        }
      }
    });
  </script>
</dom-module>
 

index.html

<head>
  <!-- PolyGit used here as CDN for demo purposes only. In production,
       it's recommended to import Polymer and Web Components locally
       from Bower. -->
  <base href="https://polygit.org/polymer+1.6.0/components/">

  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">

  <link rel="import" href="x-foo.html">
</head>
<body>
  <x-foo></x-foo>
</body>
 

CodePenのデモを見る

あなたの最初のポリマーアプリをテンプレートからセットアップする

あなた自身の素晴らしいプログレッシブなWebアプリケーションをPolymerで作成しよう!

Polymerのインストールを開始する前に、次のものが必要です。

ポリマーコマンドラインインターフェイスのインストール

Polymer CLIは、Polymer Projectsに必要なすべてのツールを提供します。

npm install -g polymer-cli
 

アプリテンプレートからアプリを初期化する

polymer init を使用して、 アプリテンプレートからアプリを初期化します。

クールなテンプレートは--app-drawer-template です。それを使ってみましょう:

polymer init app-drawer-template
 

アプリを提供する

あなたの最初の素晴らしいポリマーアプリを提供するために必要な建物はありません。ちょうどそれをserve する:

polymer serve --open
 

これにより、 http://localhost:8080 デフォルトブラウザでアプリが開きます。

ポリマーカタログからの要素の使用

ポリマーは、あなたのアプリで使用するために構築された要素をたくさんプロデュースしています。

エレメントカタログでそれらをブラウズします。

paper-inputドキュメント )を含めることによって要素を使用するワークフローを説明します。

要素をダウンロードする

要素をダウンロードするには2つの方法があります:

バワー

便利な方法は、bower install コマンドを使用してコマンドラインを使用することです。

bower install --save PolymerElements/paper-input

注意: --save への依存関係として要素を追加bower.json のアプリの。

ZIPファイル

もう1つの方法は、ナビゲーションの[コレクションに追加]を使用して選択した要素(この場合はpaper-input )をコレクション(ポリマーカタログ)に追加し、右上の星アイコンを使用してコレクションをダウンロードすることです。

これにより、要素とそのすべての依存関係を含む.zipファイルが生成されます。その後、.zip / components内のbower_components フォルダをアプリのルートディレクトリにコピーできます。

あなたのアプリに要素をインポートする

インストールした要素をインポートするには、対応する.html ファイルをインポートします。

<link rel="import" href="bower_components/paper-input/paper-input.html">
 

要素を使用する

これで、インポートした文書の中にpaper-input を使用できるようになりました:

<paper-input></paper-input>