views4GCPのストレージサービスについてまとめてみた。Exp:49212雑食エンジニア/にわかSF者TweetShareHatena注意この記事は2015年12月16日に更新されたもので、内容が古い可能性がありますのでご注意ください。Componentsをはじめよう次世代のWebを先取りするPolymerWebサイトの制作に関して、UIの部品化というのは非常に重要なテーマです。一度、自分や他人が作ったUIを再利用することができると、効率性や保守性の観点で大きなメリットがあるからです。UIの作成や再利用を、より簡略化することを目的として、Googleが開発したJavascriptライブラリです。componentsを基礎としていることです。components自体もGoogleが最初に提唱したことから始まり、現在、W3Cで仕様策定が進められているものです。Componentsをサポートしているブラウザは、まだほとんどありません。Componentsを利用できるPolyfillライブラリ(※)であるということです。Componentsよりもさらに使いやすいインターフェースやさらなる機能を提供する提供してくれます。Polyfillとは、古いブラウザで対応していない機能があったときに、そのブラウザで対応している既存技術を組み合わせて、同等のものを提供することを指します。Componentsに入門しようという趣旨で、初心者向けに、Polymerのメリットの紹介し、サンプルコードを通じてPolymerの基本を解説していきます。比較的重要だけれども、紹介できなかったトピックについて、簡単に補足します登場するサンプルコードは単純ではありますが、延長線上に実践的に使えるコンポーネントを想像できるようなものにしたつもりです。Componentsとは、HTMLやCSSにスコープが存在しないことなどに起因する、WEB構成要素の部品化、再利用化に関する問題を解決するために提唱された次世代のWEB標準仕様です。JavaScriptをカプセル化、コンポーネント化を実現します(※)。Components自体もかなり大きなトピックなのですが、ここでは、詳しくは解説しません。日本語のサイトでは、下記のサイトが詳しいので参照してください。Componentsの4つの技術要素のほとんどが、まだ仕様策定中というステータスであり(※)、全てに対応しているブラウザは少ないです。現状のところ、ChromeやChromiumベースのOperaくらいでしょう。Importsを実装することに否定的なようです。ステータスはW3C公式ページで確認できます。Componentsにはない様々な機能を提供し、開発者がより良い部品を作成するのを手助けしてくれます。Polymerを用いる主なメリットは、以下のようなものです。Importsの全てに対応しているブラウザは少ないです。Componentsを使うことができます(※)。ComponentsのPolyfillライブラリを利用しています。簡潔な構文、強力な機能Polymerはカスタム要素を定義する、より簡潔な構文を提供してくれます。Componentsにはない機能を持っており、開発者を強力にサポートしてくれます。これらの点については、後でもう少し詳しく解説します。DOMと名付けられたより軽量で高速な実装を用いています。エミュレートではないため、少し注意が必要です。この点については、本記事の最後で少しだけ補足します。Polymerを使ってみるPolymerをインストールするPolymerの公式サイトではBower(※)を使ってインストールすることを推奨しています。Bowerをインストールしていない場合は、Bower公式サイトを参照し、インストールしてください。Bowerのインストールができたら、プロジェクトフォルダを作成し、そのフォルダ直下で以下のコマンドを実行してください。フロントエンド用のパッケージマネージャ、JavaでいうMavenやGradleのようなものです。initすると、対話的にいくつかの質問が表示されます。ここでは、とりあえずエンターキーだけを押してデフォルトのままにしましょう。すべての質問に答えると、bower.jsonが作成されます。次に、以下のコマンドを実行すると、Polymerを使うのに必要なファイル一式がダウンロードされます。Polymer/polymer#^1.1.0カスタム要素を定義したHTMLを作成するPolymerのインストールが終わったら、カスタム要素を作成しましょう。カスタム要素の定義はHTMLファイルに記述します。以下のような内容のmy-element.htmlを作成してください。これは<template>内に書かれたDOMをそのまま表示するだけの単純なカスタム要素です。要素名はmy-elementとしました。Componentsの決まり事により、カスタム要素の名前は必ずひとつ以上の’-’(ハイフン)を含まなければいけません。</script></dom-module>カスタム要素をインポートし、使用するHTMLを作成する次に、カスタム要素を読み込んで使用するHTMLを作成しましょう。Componentsのpolyfillライブラリ)と先ほど作成したmy-element.htmlを読み込んでいます。Componentsをより使いやすくするために作られたと述べました。ここで一度、この点について、確認しましょう。Polymerの大きな特徴の一つは、カスタム要素を宣言的に定義できることです。Componentsによるカスタム要素の定義は命令的で、やや煩雑です。Componentsで書いた場合と比べてみます。Componentの方は、プログラムを書いているという印象が強いかと思います。Polymerを使った場合の方が、だいぶシンプルに感じられるでしょう。Polymerのいろいろな機能を試すさて、ここまでの例では、単純すぎて、Polymerを使ってどのようなことができるのか、あまり見えてこないかもしれません。ここからは、サンプルコードを少しずつ発展させていくかたちで、Polymerのいくつかの機能を紹介します。スタイルを指定する<dom-module>内でstyleを指定すると、<template>内に書かれたDOMにだけ、スタイルが適用されます。カスタム要素を定義するstyle-example.htmlと、それを使用するstyle-demo.htmlをそれぞれ以下のような内容で作成してみましょう。ブラウザで表示すると、このような見た目になります。<button>Button</button></body></html>style-example.htmlの中に書いたスタイルは<style-example>にだけ反映され、その次の<button>には反映されていません。このように、styleの適用範囲が制限されるため、カスタム要素はカプセル化された部品として扱いやすくなります。content要素を使う前の例ではmy-buttonに表示する文字は固定でしたが、<content>要素を使うことで、カスタム要素を呼び出す側から<template>内にテキストやDOMを挿入することができます。以下の例では、content-demo.html側でボタンの中に表示するテキストを指定しています。eventが用意されており、それらはPCのようなマウスを利用するデバイスでも、スマホやタブレットのようなタッチデバイスでもきちんとイベントが発生するようになっています。clickのかわりにtapを使うことが推奨されています。イベントリスナーをセットアップするには、要素を宣言する際に、イベント名とイベントハンドラー名のマッピングを記述したlistnersオブジェクトを指定します。イベント名をnodeId.eventNameのように指定することで、特定の要素に対してのイベントだけを指定することもできます。以下は、ボタンをクリック/タップした場合に、アラートダイアログを表示させる例です。});</script></dom-module>プロパティを宣言するpropertiesオブジェクトを指定することで、任意のプロパティを宣言することができます。プロパティの値はマークアップで指定することができます。以下の例では、カスタム要素を宣言しているproperties-example.htmlの中で、messageというプロパティを宣言し、デフォルト値を’Hello’にしていますが、properties-demo.htmlでmessageの値を’Hi’としています。したがって、ボタンをクリックすると’Hi’と書かれたアラートダイアログが表示されます。Me!</properties-example></body></html>データバインディングを使うPolymerはデータバインディング機能を提供しており、カスタム要素のプロパティを画面表示に反映させたり、UIからの入力をプロパティに反映させることができます。以下は、双方向のデータバインディングの例で、テキストボックスのvalueの値をmessageプロパティに反映させ、また、messageプロパティが変更された際に、テキストボックスのvalueの値を変更します。したがって、alertを呼び出すタイミングでは、messageの値はテキストフィールドに入力された文字列と同じですが、その後、messageの値を’Hello’に変更しているので、テキストフィールドに表示される値もHelloに戻ります。class="crayon-selected">双方向データバインディングを行うためにはいくつかポイントがあります。ひとつ目は、プロパティ宣言時にnotify:trueを指定することです。false)、Javascriptでプロパティの値を変更した時に、テキストボックスのvalueの値は変更されません。ふたつ目は、value=”{{message::input}}”という記法です。対象プロパティ=”{{カスタム要素のプロパティ::イベント}}”となり、今回の例では、「inputイベントが生じたら、messageにvalueの値をセットする」ことを指定しています。Catalogで公開しています。Designを実装した様々なコンポーネントが含まれています。DOMという仕組みがあります。DOMを実装しているブラウザは少ないです。したがって、クロスプラットフォームで動作するために、ブラウザ間の実装の差を埋める必要があるのですが、完全なPolyfillの実現には、コードの肥大化、実行速度などの課題があります。DOMと呼ばれる代替機能を用意しています。APIを利用しなければならないなどの注意が必要です。DOM”を参照してください。ComponentsをはじめようWebにおけるUIのコンポーネント化が標準化されるということは非常に大きなインパクトがあります。Componentsに寄せられる期待は大きいと思います。Componentsを利用することができます。Catalogで公開されているコンポーネントを使ってみることは簡単にできます。Componentsをはじめてみてはどうでしょうか。