PolymerでbaserCMSのアンテナサイトを作りました
ちょうどGoogle I/Oが開催されているのでいいタイミングかと思いまして。 Web ComponentsのPolyfillライブラリおよびフレームワークとしてGoogleが提供しているPolymerを使ってbaserCMS関連記事を書いているサイトからRSSを引っ張ってくる簡単なサンプルを作ってみたよ、という記事です。
Web Componentsとは
Web ComponentsはフロントエンドのWeb開発に革命を起こす技術として期待されています。 詳しい説明は他の解説記事に譲るとして、ものすごく簡単に概要を書くと 開発者が独自のタグのテンプレートと動作を定義して、再利用できる部品（＝Component）を作るための仕組みです。
今までグローバルな１つの空間に書くしかなかったCSSやJSやHTMLを、 コンポーネント内に閉じ込めカプセル化できる、というところが見逃せないポイントです。
- レイアウトを直すためにCSSを修正したら違うところが崩れた
- JSのライブラリやjQueryプラグインが競合を起こしてバグが出た
などといった問題に悩まされる機会がぐっと減るはずです。
Polyfill
Web Componentsのブラウザによるサポートはまだ実験段階ですが、GoogleやMozzilaがWeb Componentsをサポートしないブラウザ上でも動作させるためのPolyfillライブラリを提供しています。
Model Driven View
Polymerを使う上でもう一つ気になっていたのはModel Driven Viewです。
私もjQueryで急いでUIのコーディングをするときはついついやってしまいがちですが、ビュー（DOM）の状態を元にしてコードを書いていったせいで裏側のデータとビューとの整合性が取れなくなっていって困るという経験があると思います。
これを解決するのが、データバインディングです。データ（モデルないしビューモデル）の変更が自動的にビューに反映され、逆にビューでUI操作をすると結果がデータに反映されます。AngularJSやKnockout.js、Ember.jsなどのJavaScriptのMV*系フレームワークでも取り入れられています。 Polymerではこのデータバインディングの仕組みがModel Driven Viewと呼ばれています。
試してみる
Polymerフレームワークでは多くのコンポーネントとデモが用意されています。
※Material Design用のPaper Elements
Google I/Oの初日に発表のあったMaterial DesignをPolymerによって実装したコンポーネントもすでに用意されています。
コンポーネントを読み込む
デモページのソースを見るとわかりますが、コンポーネントを読み込む側のHTML上では
- platform.jsを読み込み
- コンポーネントを読み込み
- カスタム要素を利用する
という形でコンポーネントを利用します。
カスタム要素を作る
カスタム要素は下記のように１つのHTMLファイルで定義します。
<link rel="import" href="/components/polymer/polymer.html">
<polymer-element name="proto-element">
<template>
<span>I'm <b>proto-element</b>. Check out my prototype.</span>
</template>
<script>
Polymer('proto-element', {
ready: function() {
//...
}
});
</script>
</polymer-element>
- polymerコンポーネントと他のコンポーネントをインポート
- JavaScriptによってカスタム要素が持つモデルとライフサイクルイベントを定義
- HTMLを少し拡張した書式（テンプレートエンジンによくある感じののひげ{{}}を使います）でテンプレートとデータバインディングを定義
-
CSSでテンプレートのスタイルを定義
完成したものがこちらになります
PolymerのコンポーネントにGoogleのJSAPIが用意されていたので、複数のRSSの読み込みを行うカスタム要素を作り、サイトを作成しました。
もちろん新しめのブラウザでないと動きません！
以前から各所のbaserCMSの記事や情報をまとめて見たいなあと思っていたのでネタに使いました。 （ここまで記事のタイトルに入れたbaserCMSに触れていませんでしたね。これがタイトル詐欺か……）
<section id="main">
<h1>baserCMS公式の情報</h1>
<feed-list>
<feed-item src="http://basercms.net/news/index.rss" title="baserCMSニュース" num="5"></feed-item>
<feed-item src="http://barket.jp/rss/product.php" title="baserマーケット" num="5"></feed-item>
<feed-item src="http://magazine.barket.jp/article/index.rss" title="baserマガジン" num="5"></feed-item>
<feed-item src="https://groups.google.com/group/basercms/feed/rss_v2_0_topics.xml" title="baserCMSユーザー会（Googleグループ）" num="5"></feed-item>
<feed-item src="http://basercms.net/develop/index.rss" title="baserCMS開発ブログ" num="5"></feed-item>
<feed-item src="http://project.e-catchup.jp/projects/basercms/activity.atom" title="baserCMSコア開発" num="5"></feed-item>
</feed-list>
</section><!-- /#main -->
コンポーネントを使った側のHTMLコードの一部抜粋です。すっきり書けるので楽でいいですね。
なお、多くのサイトでbaserCMSのカテゴリ別RSSが存在しなかったため（かくいう当サイトもですが）、RSSをJSで読み込んでからカテゴリやタイトルで関連記事かどうかを判定する仕様になっています。 決め打ちで書いたので再利用できるかどうかは怪しいですね。
サーバーサイドは何も書いていないのでキャッシュはGoogle様任せです。
読込も遅いことがありますが悪しからず……
Model Driven Viewは？
RSSを読み込む機能だけだと双方向データバインディングの威力が実感できなかったので 右上にフィード一覧のレイアウトを変更するトグルボタンを付けてみました。 トグルボタンはpolymer-ui-toggle-buttonを利用しています。
記事求ム
思い付きでアンテナサイトにしてみたのはいいもののまだ記事の量が足りない感じがプンプンします。 他にbaserCMSの記事をバリバリ書いてらっしゃるサイト様があればぜひRSSのURLを教えてください。
