コンテンツにスキップ

Polymer

出典: フリー百科事典『ウィキペディア(Wikipedia)』
Polymer
Polymer Project logo
開発元 Google[1]とコントリビューターたち[2]
初版 2015年5月29日 (9年前) (2015-05-29)[3]
最新版
3.0.2, 2.5.0, 1.11.3 / 2018年5月9日 (6年前) (2018-05-09)[5], 2018年2月13日 (6年前) (2018-02-13)[6]
最新評価版
3.0[4] / 2018年1月18日 (6年前) (2018-01-18)
リポジトリ ウィキデータを編集
プログラミング
言語
JavaScriptHTML
種別 JavaScriptライブラリ
ライセンス 3-Clause BSD[7]
公式サイト www.polymer-project.org
テンプレートを表示

Polymer(ポリマー)は、polymer Web Componentsを使用してウェブアプリケーションを作成するためのオープンソースJavaScriptライブラリである。ライブラリは、Googleの開発者とコントリビューターたちによって、GitHub上で開発が行われている。また、GoogleのMaterial Designを利用したモダンなデザイン原則が、独立したプロジェクトとして実装されている。

Polymerは、Googleの多数のサービスとウェブサイトで利用されている。Polymerを利用しているものとしては、新デザインのYouTubeYouTube Gaming新デザインの[8]Google EarthGoogle I/Oのウェブサイト、Google Play Music新デザインのGoogleサイトウェブ版のAlloが挙げられる[9]

その他の有名なユーザーには、NetflixElectronics ArtsINGCoca-ColaMcDonald'sBBVAIBMGeneral Electricがいる。

歴史

[編集]

Polymerのパブリックな開発は、2013年11月14日のPromises Polyfillのリリースとともに始まった。その後、Polymerの開発は、Material Designを元にしたビジュアルスタイルガイドラインをカバーするウェブデザインライブラリ、データバインディングの機能、そして、"Core"と"Paper"と呼ばれるWebコンポーネントライブラリへと少しずつ成長していった。

Coreコンポーネントは、もともと多数のウェブサイトに必要とされる汎用的な機能を包括することを意図して作られたものであった。一方、Paperコンポーネントは、よりMaterial Designのコンセプトに特化したコンポーネントを提供するために作られた。主要なマイルストーンがバージョン0.5のリリースで達成されたため、このバージョンが、アーリーアダプターのユーザーがプロジェクトに利用可能な最初のバージョンであるとされた[10]

Googleは、バージョン0.5以降もPolymerの設計の改良を継続的に行い、特に、多くの開発者が指摘したパフォーマンスの問題を改善していった。2015年のPolymer1.0のリリースにより、問題の多くが解決され、このバージョンをもって、ライブラリ最初の「production ready」なバージョンであるとされた[11]。 バージョン1.0では、Polymerのパフォーマンスは大幅に向上し、ロードタイムは最大7倍高速化した[12]。また、バージョン1.0からは、GoogleはPolymerプロジェクトの要素を明確に分かれた2つのコンポーネントに分離し、エレメントカタログとWebコンポーネントの糖衣化を行う(webcomponents-sugaring)ライブラリに分けた。

2015年9月14-15日、GoogleはアムステルダムPolymer Summitを開催した。

2016年10月17-18日、GoogleはロンドンPolymer Summitを開催した。

2017年8月22-23日、GoogleはコペンハーゲンPolymer Summitを開催した。

2018年5月2日、Polymerチームは、今後、Polymerの双方向バインディングとテンプレートシステムの開発は終了し、LitElement[13](もともとPolymerに含まれている[14])および1方向バインディングのみにフォーカスしてゆくことになる、という方針を発表した[15]

機能

[編集]

Polymerは、バニラなWebコンポーネントに対して、数多くの機能を提供している。

  • カスタムエレメントを簡単な方法で作成する機能
  • 1方向及び双方向のデータバインディングの機能
  • 計算済み(computed)プロパティ
  • 条件付きあるいは繰り返しテンプレート
  • ジェスチャーイベント

用途

[編集]

Polymerは、構造的な設計プロセスに特別な注意が払われており、相互運用性が高い「レゴブロック」構造として活用することができるため、市場で大きな注目を集めつつある[16][いつ?]

カスタムエレメント

[編集]

カスタムエレメントは、ESモジュールとクラスを使用して作成することができる。カスタムエレメントの定義には、CSSスタイル、HTMLテンプレートエレメントの内部にローカルに展開されるDOM、エレメントのプロパティ、ライフサイクル・コールバック、そして、JavaScriptのメソッドが含まれる。

import {PolymerElement, html} from '@polymer/polymer/polymer-element.js'

class HelloElement extends PolymerElement {
  
static get template() { return html`
    <style>
      /* Local DOM CSS style */
    </style>
    <!-- Local DOM -->
    Hello {{name}}!    
`; }
  
static get is() { return 'hello-element'; }
static get properties() {
   return {
      name: {
        type: String
       }
      /* Element properties */
   }
}
/* Custom methods */
}
window.customElements.define(HelloElement.is, HelloElement);

上記のように定義したエレメントは、HTMLコード内で次のように使用することができる。

<hello-element name="World"></hello-element>

関連項目

[編集]

参考文献

[編集]
  1. ^ AUTHORS.txt” (英語). 18 August 2017閲覧。
  2. ^ CONTRIBUTORS.txt” (英語). 18 August 2017閲覧。
  3. ^ 1.0” (英語). Polymer Project. 18 August 2017閲覧。
  4. ^ Polymer 3.0: New year, new preview” (英語). Polymer Project. 19 March 2018閲覧。
  5. ^ Releases · Polymer/polymer” (英語). GitHub. 19 March 2018閲覧。
  6. ^ Releases · Polymer/polymer” (英語). GitHub. 5 May 2018閲覧。
  7. ^ polymer/LICENSE.txt at master” (英語). GitHub. 24 April 2017閲覧。
  8. ^ Bidelman (2017年4月18日). “Mission accomplished: has been componentized. New @googleearth is built w/ #WebComponents using @polymer.pic.twitter.com/h76ztfynYy”. @ebidel. 2017年7月8日閲覧。
  9. ^ Who's using Polymer?”. GitHub. 4 June 2016閲覧。
  10. ^ Polymer gives us a closer look at Google's Material Design UI”. Android Authority. 2018年12月9日閲覧。
  11. ^ Steven Max Patterson (29 May 2015). “Google’s Polymer 1.0 brings reuse and better branding to Web development”. CIO. 2018年12月9日閲覧。
  12. ^ Welcome - Polymer 1.0”. 2015年8月14日時点のオリジナルよりアーカイブ。2018年12月9日閲覧。
  13. ^ Roadmap update, part 1: 3.0 and beyond”. 2018年12月9日閲覧。
  14. ^ “Justin Fagnani on Twitter” (英語). Twitter. https://twitter.com/justinfagnani/status/994358200538349568 2018年5月14日閲覧。 
  15. ^ Roadmap update, part 2: FAQ - Polymer Project” (英語). www.polymer-project.org. 2018年5月14日閲覧。
  16. ^ Allie Coyne (13 August 2015). “Inside ING Direct's new lego block app architecture”. iTnews. 2018年12月9日閲覧。

外部リンク

[編集]