Polymer Designer でコンポーネントのマッシュアップ
Posted: Updated:
Polymer Designer
Google I/O に合わせたpolymer-project.orgの刷新ついでなのか、挙動の怪しかったDesignerが改善していたのでちょっと触ってみた。
Polymer Designerは、Polymerで作られたコンポーネントを、ブラウザ内のGUIでマッシュアップして新たなコンポーネントを作成することができます。
今度こそ、こういうWeb Componentsなノリで、デザイン&開発のワークフローが変わったら良いなという期待を込めて。コンポーネントを積み木する感じのアプリケーション開発。
0. サンプルで作るモノ
スライダーのUIで、Google Mapsのいわゆる、lat, lng, zoom の3パラメータを操作できるようにします。(Google Maps本体のナビゲーションで操作できることではあるんですが、そこは気にしない)
- Google Maps 本体
- Latitude スライダー
- Longitude スライダー
- Zoom スライダー
ここでは、各スライダーとマップがそれぞれ独立したコンポーネントとして働きます。4つのPolymer Componentを内包した、コンポーネントをDesigner上で新たに作る感じ。
1. コンポーネントをキャンバスに放り込む
右下のコンポーネントメニュー(PALETTE or TREE)から、以下のコンポーネントをキャンバスに放り込みます。
- Components > Google Map
- Paper > Slider * 3
放り込んだら、マップのコンポーネントを選択して、右のPROPERTIESから mapType
を好きなタイプにします。
2. スライダーのvalueを、マップのパラメータに割り当てる
3つのスライダーに、マップの latitude
・longitude
・zoom
の各パラメータをそれぞれ割り当てます。
スライダーを選択した状態のPROPERTIESで、valueの右にあるアイコンを選択するとテキストボックスが、セレクトボックス+テキストボックスに変化します。
それぞれ、右のセレクトボックスで google_maps
を選択して、左のテキストボックスに latitude
などのパラメータ名をそれぞれ選択します。
あとスライダーのminとmaxを、latは-90~90、lngは-180~180、zoomは適当にイイカンジにしておくと良いです
3. 完成
コードを表示したり、プレビューで実際に操作したり、Gistに保存したりできます。
仕上がり図
は、前出のスクリーンショットから変化がないので省略しますが、プレビューでスライダーを操作してみて、地図が移動すれば成功です。
スライダーのvalueと、マップのパラメータが連動しています。このようにコンポーネント間が作用しあうことで機能するのが、Polymerに限らずWeb Componentsベース開発の基本になります。
生成コード
実際にコードPolymer Elementのコードが生成されます。{{ $.google_map.latitude }}
のあたりで、バインディングが行われているのが分かります。
$
以下は、Polymerが id のついている要素の参照を自動で収集してくれます。よって、value="{{$.google_map.latitude}}"
であれば、id="google_map"
の latitude
プロパティがvalueにバインディングされていることを示します。
<link rel="import" href="../paper-slider/paper-slider.html"> <link rel="import" href="../google-map/google-map.html"> <polymer-element name="my-element"> <template> <style> :host { position: absolute; width: 100%; height: 100%; box-sizing: border-box; } /* スタイル中略 */ </style> <paper-slider immediatevalue="-28" value="{{ $.google_map.latitude }}" min="-90" max="90" id="paper_slider"></paper-slider> <paper-slider immediatevalue="-58" value="{{ $.google_map.longitude }}" min="-180" max="180" id="paper_slider1"></paper-slider> <paper-slider immediatevalue="14" value="{{ $.google_map.zoom }}" max="30" id="paper_slider2"></paper-slider> <google-map latitude="-28" longitude="-58" zoom="14" id="google_map"></google-map> </template> <script> Polymer('my-element', { }); </script> </polymer-element>
以上〜
独自または共通のコンポーネントたちを、もしかしたら自分以外の作業者がコーディングレスで組み合わせられる、とか夢がありますね。
とはいえ、このテのインターフェースビルダーのようなUIはアレとかソレとか前例があるわけですが、どこかイマイチだった経緯もあって夢のままに終わっています。コンポーネントのエコシステムとうまくマッチすれば、今度こそ乗り越えられる壁かもしれません。