Movable Type と Web Components
この記事は Movable Type Advent Calendar 2017 の17日目の記事です。
先日、会社にて、事業部の先輩で、Polymer Japan の運営者でもある @sizuhiko さんより、Polymer のハンズオンを受ける機会があり、遅ればせながら Web Components に入門しました。
Polymer は Google が開発を主導しているライブラリで、Web Components のためのポリフィルでもあり、Web Components を簡単に扱えるようにする機能なども提供するライブラリです。
Web Components は、すでに使える次世代の Web 標準テクノロジーで、下記の4本柱からなるテクノロジーです。
- カスタムエレメント
- シャドウ DOM
- HTML インポート
- HTML テンプレート
私が下手な説明をするより、ググったり、@sizuhiko さんの下記のスライドなどをご参照いただいた方が良いと思います。
それで何ができるの？
Web Components を使うと HTML, CSS, JavaScript で作られた自己完結したコンポーネント（カスタマイズ箇所の定義も自由）を他者に提供したり、または提供されたものを自分のサイトで扱うことができるようになります。
例を見た方が早いと思うので、webcomponents.org を覗いてみてください。このサイトには共有された Web Components がたくさん掲載されていて、例えば Google Maps の機能を扱う Web Components は下記のように提供されています。
Google Maps の Web Components では google-map や google-map-marker といったカスタムタグと、緯度、経度などの専用の属性を指定することで任意のマップを描画できます。
例: 福井県庁の地図を描画する場合
gistba02fd28ccbf22b65f76ceffbe60f90f
他にも、Android 等の UI などで使用されている Material Design 用のコンポーネントが paper- というプレフィックス付きで提供されていたりするので、Material Design を採用する UI などは、CSS を使った煩わしいスタイリングをしなくても、Web Components の技術を使って専用のタグで宣言的に記述できます。
上記の例は汎用的なコンポーネントの例となりますが、自社用のコンポーネントを Web Components を使って構築するというユースケースも当然あり、YouTube の新 UI などはまさにそれに該当するのかなと思います。
YouTube の新 UI では、ブラウザの開発者ツール等で要素を調査すると、ytd- や yt- というプレフィックスの付いたカスタム要素で、UI が構築されていることが確認できます。
それと Movable Type と何が関係あるの？
MT の肝となる機能の一つに MT タグがあります。
MT で管理されているコンテンツは、MT タグを使って取得・加工・表示することができます。単にそれだけに留まらず、外部の API からデータを取得したり、HTML のプリプロセッサとして動くマクロのように HTML を置換したりなど、様々なことが MT タグを通して実現できるようになっています。PowerCMS のテンプレートタグリファレンスを見れば、プラグインで追加したあらゆる機能が、オリジナルの MT タグを定義することで活用できるようになることがわかります。
MT タグが CMS で管理しているコンテンツを扱うための一種のカスタムタグと考えると、Web Components との共通性が見いだせます。
また、MT で管理するコンテンツや機能を定義して、それらを取り出したり、加工するための MT タグを定義して、テンプレート上で HTML と MT タグを記述し、必要な表現を定義するというワークフローが、Web Components のワークフローのそれと類似しているので、MT を使ったサイト制作やウェブアプリケーション制作のワークフローと親和性が高いように思います。
例えば、MT で管理するコンテンツの内、静的に扱いたいコンポーネントは MT タグで定義して、動的に扱いたいコンポーネントは Web Components で定義するといった使い分けができそうです。
試しに下記のようなカスタム要素を作ってみました。Polymer を使うと、このくらいのものであれば、ロジックを書くことなく簡単に作れました。
bower install https://github.com/taiju/mt-entries-list-sample.git でインストールした後、下記のように HTML インポートして使います。
gistef21bb0771928287f15974c9660e31d8
mt-entries-list というカスタムタグにサイトの ID や、検索パラメータを属性に指定すると、DataAPI を通して動的に記事一覧のリンクを ul > li > a のリストとして描画することができます。
このサンプル自体に実用性はありませんが、これをベースにして、サイトやアプリケーション専用に作り込めば動的に描画できる最新記事一覧や関連記事一覧など、実用なコンポーネントも作れると思います。
まとめ
MT 7 ではコンテンツタイプという機能が追加されるので、何を、どこに、どのように管理するかを、自由に定義できるようになり、よりコンポーネント指向な情報設計ができるようになります。
MT 7 向けの新テーマである Jungfrau（ユングフラウ） を見ると、テーマでオリジナルのコンテンツタイプを提供することも可能なようなので、コンテンツタイプと一緒に、そのコンテンツタイプを取り扱うための Web Components もテーマに同梱するといったユースケースが想像できます。
例えばアンケートを管理するコンテンツタイプと、DataAPI を経由して、アンケートの描画・回答ができる Web Components をセットで提供すれば、アンケートアプリケーションコンポーネントの配布が、テーマの配布だけで実現できそうだなぁと勝手に想像しています。
単純なサイト制作ではなかなか活用の場がないのかもしれませんが、Web Components は将来当たり前に使う技術になると思われるので、MT でどのように活用できるか考えると、いいろいろ夢が広がりそうですね。
ほなの。
