最近事あるごとにWebComponents、というかPolymerの宣伝をしているわけですが、またLTでプッシュしてきました。

当日のスライド

[感想？]

補足

Yeomanで立ち上げるための一式

HTMLのインポートをわかりやすくする

Yeoman Polymerを使ってみて面白かったのは、インポートするHTMLファイルを書くためのHTMLファイルを作っていることです。

結構Elementを入れているHTMLファイル毎に必要なElementをインポートさせることが多かったのですが、まとめておいたほうが「何をインポートしているか」を一発で確認できて便利です。

index.html

本体では「elements.html」をインポートするだけです。
[html]
<script src="../bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="elements/sample/elements.html">
[/html]

element.html

そして入れるHTMLファイルはelements.htmlに入れます。
[html]
<link rel="import" href="../../bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../../bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="../../bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="../../bower_components/core-icons/core-icons.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/core-menu/core-menu.html">
<link rel="import" href="../../bower_components/core-item/core-item.html">
<link rel="import" href="../../bower_components/core-ajax/core-ajax.html">

<!– Add Custom Components –>
<link rel="import" href="../../bower_components/google-map/google-map.html">
<link rel="import" href="../../bower_components/google-map/google-map-directions.html">
<link rel="import" href="../../bower_components/geo-location/geo-location.html">

<!– Add your elements here –>
<link rel="import" href="od-menulist.html">
<link rel="import" href="od-detail.html">
[/html]

Polymerにデフォルトで入っているもの、外部から拾ってきたもの、自作したものをそれぞれブロック別に書いておくとまた便利です。

関西でPolymerとかWebComponentsに興味がある方はこちら

というわけで勉強会企画した時にお知らせが来てくれたり資料が見れたりするコミュニティを作ってみました。

さっき立ち上げたコミュニティですが、人数が集まろうが集まらまいが勉強会的なイベントを京都か滋賀でやりたいと思っています。