Polymer Designer でコンポーネントのマッシュアップ

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つのスライダーに、マップの latitudelongitudezoomの各パラメータをそれぞれ割り当てます。

スライダーを選択した状態の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にバインディングされていることを示します。




  
  

以上〜

独自または共通のコンポーネントたちを、もしかしたら自分以外の作業者がコーディングレスで組み合わせられる、とか夢がありますね。

とはいえ、このテのインターフェースビルダーのようなUIはアレとかソレとか前例があるわけですが、どこかイマイチだった経緯もあって夢のままに終わっています。コンポーネントのエコシステムとうまくマッチすれば、今度こそ乗り越えられる壁かもしれません。


Author

ahomuAyumu Sato

overflow, Inc.VPoE

東京資本で生きる名古屋の鳥類

Web 技術、組織開発、趣味など雑多なブログ。技術の話題は zenn にも分散して投稿しています。

Bio: aho.mu
X: @ahomu
Zenn: ahomu
GitHub: ahomu

Related

Latest

Archives

Tags

Search