Google Polymer - Webアプリケーションの構築方法がどう変わるか

グーグルはグーグルの写真と並んで、パフォーマンスの向上と効率性に向けて、ポリマーを一から作り直した。 PolymerをWeb用のSDK（ソフトウェア開発キット）として考えてください。 Webアプリケーション開発 Webコンポーネントと呼ばれる新しい標準を使用した方がはるかに高速.

Webコンポーネントにより、 当社のWebサイト用のカスタム要素とタグを作成する. この記事では、Google Polymerのカスタム要素がWebアプリケーションの開発にどのように役立つかを説明します。さらに、これらのカスタム要素をどのように機能させることができるかについてのデモもいくつか見ていきます。.

Webコンポーネントについて

Webコンポーネントがどのように機能するかを理解するための最良の方法は、次のような現在の標準的な要素を見ることです。 . 追加した場合 Webブラウザは、オーディオのURLソースとともに、再生と一時停止ボタン、タイムレール、および音量スライダを使用して、この要素をオーディオプレーヤーとしてレンダリングします。プレーヤコントロールがどのように構築されスタイル付けされているのか不思議?

UIコントロールプレーヤーは、その下にShadow Rootsとして隠されています。 シャドウDOM. Shadow DOMを表示するには、 Chrome DevTools >をクリックコグアイコン>を選択 ユーザーエージェントのシャドウDOMを表示する オプション.

次のスクリーンショットでは、のスタックを見つけることができます

そして UIプレーヤコントロールを秘密に構築する要素.

今日では、Webコンポーネントを使用して、独自の要素にも名前を付けることができます。私たちはのような要素を構築することができます, Twitterフィードを埋め込む、または（多分）チャートを埋め込む.

さらに、これらのカスタム要素には、2つの承認済みカスタム属性もあります。に関して要素、あなたはと呼ばれる属性を設定します ユーザー名 Twitterのユーザー名を指定するために使用されます.

ポリマーのカスタム要素

Polymerには、（ほぼ）あらゆるWebアプリケーションのニーズを説明する要素がたくさんあります。 Googleはこれらの要素をグループに分けています：鉄の要素、紙の要素、GoogleのWebコンポーネント、金の要素、ネオンの要素、プラチナの要素、そして分子.

鉄の元素

Iron Elementsは基本的な要素の集まりです。これらの基本的な要素は、私たちが通常使うものです。 Webページを構築する 入力、フォーム、画像など。違いは、Polymerがこれらの要素にいくつかの追加の権限を追加することです。.

このグループのすべての要素は 鉄- たとえば接頭辞 , 画像を表示するために使用されます。の要素には、通常の規則では適用できない追加の属性がいくつかあります。素子。たとえば、追加することができます 予圧, フェード, そして プレースホルダー 属性：

上記の例では、まず画像のプレースホルダーを表示し、次に実際の画像にフェードインします。 src それが完全にロードされているように, スムーズな画像読み込み効果を実行する.

紙の要素

の 紙の要素 材料設計要素のグループです。 Material Designは、WebとAndroidの両方のアプリケーションで、視覚的に一貫性のあるユーザーインターフェイスとユーザーエクスペリエンスをGoogleプラットフォーム間で提供するためのGoogleデザイン言語です。マテリアルデザインに特有の要素には、紙とフローティングアクションボタン（FAB）があります。.

紙

紙 Googleの比喩は コンテンツの基礎となる媒体. Polymerを使って紙を追加するには、素子。この要素は2つの属性を取ります。

標高 用紙を持ち上げるため、影を追加して標高を補強する
アニメ化 Paper elevationの変更に応じてアニメーションを適用します.

フローティングアクションボタン（FAB）

フローティングアクションボタン（FAB）はアイコンが付いた円形のボタンで、通常は目立つ色で画面に浮かんでいます。グーグルはこのボタンが頻繁にアクセスされる機能を持っていることを示唆している。これが一例です。

次のコードスニペットは、画像とFABを含む紙素材を追加します。.

結果は次のようになります。

私たちはと一緒に写真を持っています “心臓” その上に浮かぶボタン。写真のようにクリックして、ボタンをクリックすると、クリックを確認するための波及効果が表示されます.

ペーパーデモを見る

3. Google Webコンポーネント

Google Webコンポーネントは、いくつか例を挙げると、Google Maps、Youtube、Google FeedなどのGoogle APIおよびサービスに対応する特別な要素です。このグループの要素 ほんの数行先のGoogleサービスとやり取りする.

以下は、Googleマップを使用してGoogleマップを表示する例です。素子.

  これはGoogleplexです

上記のように、要素は 緯度 そして 経度 地図上の場所を指定します。巣作りもできますマーカーをクリックすると表示されるテキストと共にその場所の地図マーカーを表示する.

地図のデモを見る

YouTubeのビデオを見たいですか？あなたが使用することができます素子.

同様に、属性を通して出力をカスタマイズします.

YouTubeのデモを見る

4.ゴールドの要素

金の要素は 電子商取引アプリケーション専用に設計された要素. ここでは、すべてが装備されているクレジットカード、電子メール、電話、およびZIP入力を表示するための要素が見つかります。 フォーマット検証 正しいデータ入力とセキュリティを確保するため。これは、Visaクレジットカード入力を追加するための一例です。.

その他の要素

残りの要素には、アニメーションと特殊効果のためのNeon要素、オフライン通知とプッシュ通知のためのPlatinum要素、そして最後にMoleculesと、サードパーティライブラリのためのラッパーが含まれます。.

編集者注： これを書いている時点では、ネオン元素、プラチナ元素、分子はまだ利用できません.

統合ポリマー

あなたのWeb開発にPolymerを使いたいですか？インストールしてWebページに統合する方法は次のとおりです。ほとんどのポリマー要素は互いに依存しているため、ポリマーをインストールするための最良の方法はBowerを使用することです。.

Bowerは、プロジェクトの実行に必要なスクリプトやスタイルを簡単にインストールできるようにするプロジェクト依存関係マネージャです。 Bowerを使ってウェブライブラリを簡単にインストール、更新、削除する方法についての以前の投稿をチェックしてください。.

Polymerを統合するには、「ターミナル」を起動し、プロジェクトディレクトリを作成したと仮定します。それから走りなさい bower init プロジェクトの依存関係を記録するために使用されるbower.jsonファイルをプロジェクトに開始するコマンド。 bower.jsonを開き、以下の行を追加します。.

 "依存関係"："ポリマー"： "ポリマー/ポリマー＃^ 1.0.0"、 "google-web-components"： "Googleウェブコンポーネント/ google-web-components＃^ 1.0.0"、 "アイアン要素"： " PolymerElements / iron-elements＃^ 1.0.0 "、" paper-elements "：" PolymerElements / paper-elements＃^ 1.0.0 "、" gold-elements "：" PolymerElements / gold-elements＃^ 1.0.0 "

この設定では、各グループのすべての要素を使用することを想定しています。依存関係リストから必要のないものを削除することができます。依存関係が設定されたら、次のコマンドを実行してください。 バウワーインストール リストに依存関係をインストールするコマンド.

このプロセスはリポジトリから膨大な量のファイルを取得することを含むので時間がかかるかもしれません。完了したら、それらが保存されているはずです。 bower_components フォルダ.

Polymerコンポーネントを使用するHTMLファイルを開きます。ドキュメントヘッド内, WebComponents.jsをリンクする どれが ポリフィル まだWebコンポーネントをサポートしていないブラウザの場合 コンポーネントファイルをインポートする HTMLインポートを使用する.

これが一例です。

この設定は私達が使用することを可能にします , , 要素.

ショーケース

これは既にGoogle Polymerを使用しているWebアプリケーションの一部です。.

グーグル

Googleは、Google IO 2015のWebページでGoogle Polymerを使用しました。 Google Fiは、提携関係にある通信事業者およびベンダー向けのGoogleワイヤレスサービスです。とGoogleミュージック.

カスタム要素

CustomElementsは、Webコンポーネントで構築されたカスタム要素を見つけることができる拠点です。これは、Paper要素を使用してリストを格納および構築します。それはまたBowerとNPMを通してこれらの要素をインストールするための便利なルートを提供します。.

Chrome Dev Editor

驚くほどうまく機能するコード編集用のChromeアプリケーション。このアプリは、ユーザーインターフェイスのFABボタン、[用紙]メニュー、および[用紙]ダイアログエレメントを使用します。.

ポリマーデザイナー

ドラッグアンドドロップインターフェースを使用してポリマー要素を使用してWebアプリケーションを構築するためのツール.

デイリーストック予測

ポリマー要素だけで構築された証券取引所レポートおよび予測.

ポリマーメール

Gmail用のメールクライアントアプリ。悲しいことに、それは完全に機能していませんが、それは素晴らしく、流動的に見えます.

最終的な考え

Polymerには非常に広い範囲があり、そのAPIだけでなくすべてのカスタム要素に慣れるのにしばらく時間がかかるかもしれません。それにもかかわらず、Webコンポーネントとポリマーは確かに私たちがWebアプリケーションを構築する方法に影響を与えるでしょう。 Webコンポーネントの詳細を読んで、他のユーザーより先に進みましょう。.

デモを見る
ソースをダウンロード

役に立つ参考文献

Webコンポーネントの状態
カスタム要素の詳細な紹介
Google Polymerの公式ブログ