Ashiras, inc. blog

若手による日々奮闘記

Polymer Japan Meetup #1に参加してきた

六本木にある森タワーGoogleさんにてPolymer Japan Meetupハンズオン初参加してきました。

ここではPolymerについて語りません。

(語れるスキルがなく語れないが本音ですが…)

ハンズオンで参加してきた内容です

開発環境

  • Node.js (v6.10 以上)
  • bower(v1.8 以上)

以下手順

https://docs.google.com/presentation/d/1FJVYVC-to03YcCkEJWQpVpru5WUdZ39RC83O6mFhBkU/edit#slide=id.g273b62e997_0_477

(ここで記載するよりそちらで見たほうがスムーズかな)

https://gist.github.com/jtakiguchi/4b7f4f0362ff01a4227c86c95b7f7401#-1

コピペした内容です。

無事にできました!!

f:id:sari423:20171113103943p:plain

Google Maps を使ってルート検索をするページでした。

実はこの画面、たったの 9個のコンポーネントで構成されているんです!

(これまたびっくり)

例えばこの検索するこの部分

f:id:sari423:20171114123858p:plain

<paper-card> webcomponents.org - Discuss & share web components

を使ってます。

このカードの中にもアイコンやフォームなどのコンポーネントも入ってます。

(<paper- input>や<paper-tabs>などなど)

コンポーネントの組み合わせだけでこのような素敵な画面がサクッと作れるのは効率も良いですね。

しかも、初心者の私もさくっと作れました!

その他詳細はこちらの資料にて記載されてます

https://polymer-japan.connpass.com/event/69080/

所感

初心者の自分でもわかりやすく、使いやすいツールだなと思いました。

WebComponents.org (https://www.webcomponents.org/ ) を見た時は感動しました。

UIデザイナーの自分としてはすぐにリッチな画面が出来上がるのはテンション上がるものです。

Web Components をちゃんと触ったことありませんが、とても便利でみんなが幸せになれると思いました!

Polymer

https://www.polymer-project.org/

Polymer japan 運営の方々ありがとうございました!

また機会ありましたらよろしくお願いします。