Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

Web Components用ライブラリPolymerを使ったテーマ作成

a-blog cms Training Camp 2015 AutumnでPolymerを使ったサイト制作について発表させて頂きました。
今回は、その発表内容のフォローブログとなります。
以下のような順番で今回の発表で話しきれなかったことについてお話しします。

  1. Web Componentsについて
  2. Polymerについて
  3. SiteテーマでのPolymerの導入方法

Web Componentsについて

Web Componentsを使えば、次のようなコードで下の図のようにYoutubeを簡単に表示できます。
<google-youtube video-id="kJt3v7tQ6kc"></google-youtube>


このように別の場所で定義したHTML,CSS,JavaScriptをタグを使う事で呼び出す事が出来る技術がWeb Componentsです。さらにWeb ComponentsはShadow Domという外部からアクセスできないDomツリーを形成するので、CSSのスコープの衝突問題を解決できます。


Polymerについて

PolymerとはWebComponentsのラッパーライブラリで、WebComponentsを使いやすくしてくれるライブラリです。その他にもWebComponentsの標準機能ではない、テンプレート内で変数が使える機能や、ShimというCSSプロセッサーを使う事ができます。

独自のテンプレートエンジン

<div class="acms-summary-body">
    <p class="summaryTitle"><a href="{{item.url}}">{{item.title}}</a></p>
    <p>{{item.summary}}</p>
</div>

CSSプロセッサー Shim

<style>
      :host {
        padding: 4px;
        background-color: gray;
        /* apply a mixin */
        @apply(--my-toolbar-theme);
      }
      .title {
        @apply(--my-toolbar-title-theme);
      }
</style>

また、Polymerは公式で下記のようなエレメントをすでに用意してくれています。

Web Components公開サイト


  • Iron Elements: AjaxやFormまわりなど、Webサイトを制作する時の標準的な機能を提供
  • Paper Elements: マテリアルデザインを実現するためのUIを提供
  • Google Web Components: google-youtubeなどgoogleが提供するサービスのAPIを提供
  • Gold Elements: EC系の機能を提供
  • Neon Elements: アニメーション周りの機能を提供
  • Platinum Elements: Push Notificationやbluetoothなどネイティブな機能を提供
  • Molecule: 他のライブラリの機能を提供

また、このサイトに行くとnpmで公開されているWeb Componentsを検索してダウンロードすることが出来ます。
https://customelements.io/


SiteテーマでのPolymerの導入方法

以下のリンクより、PolymerをZipファイルでダウンロードします。
https://www.polymer-project.org/1.0/docs/start/getting-the-code.html


siteテーマの/include/head/link.htmlにて、Polymerを以下のように読み込みます。

<script src="/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="/components/polymer/polymer.html">

さらに下記のようなソースコードでShadow Domを有効にすることができます

<script>
    window.Polymer = window.Polymer || {};
    window.Polymer.dom = 'shadow';
</script>

カスタムエレメントのImport

先ほどご紹介したサイトからいくつかカスタムエレメントをダウンロードしたら、以下のようにそれらのコンポーネントをImportすることができます。

<link rel="import" href="/components/google-map/google-map.html">
<link rel="import" href="/components/google-youtube/google-youtube.html">
<link rel="import" href="/components/google-calendar/google-calendar.html">
<link rel="import" href="/components/github-card/github-card.html">
<link rel="import" href="/components/x-tweet/x-tweet.html">
<link rel="import" href="/components/polymer-slideshow/polymer-slideshow.html">

Layoutモジュールでコンポーネントを使用する

Layoutモジュールでコンポーネントを使用する事でさらにPolymerは効力を発揮します。
例えば、Bannerモジュールで使用したい場合は以下のようなソースコードのファイルを、/include/module/template/Banner/フォルダに設置してください。
今回のサンプルでは、polymer-slideshowというコンポーネントを使用しています。

<!-- BEGIN_MODULE Banner -->
<div>
<!--#include file="/admin/module/setting.html"-->
<polymer-slideshow height=230>
 	<!-- BEGIN banner:loop -->
	<!-- BEGIN banner#img -->
	<polymer-slide>
      <img src="%{ARCHIVES_DIR}{img}">
    </polymer-slide>
    <!-- END banner#img -->
	<!-- END banner:loop -->
</polymer-slideshow>
</div>
<!-- END_MODULE Banner -->

この時に、次のようにコンポーネント全体をdiv要素で囲み、<!--#include file="/admin/module/setting.html"-->を記述するようにしてください。こうすることによって、図のように、モジュールの設定をするための枠をつけることができます。


モジュールのカスタムフィールドの利用

また、モジュールIDのカスタムフィールドを利用するとWebコンポーネントを下のイメージのようにその場で操作しやすいです。モジュールIDのカスタムフィールドはVer.2.5.0より使用可能となりました。


/admin/module/field.htmlに設定を記述することができます。
この時に以下のように、モジュールによってテンプレートを分ける記述をしておくことをお勧めします。

<!--#include file="/admin/module/mid%{mid}.html"-->

以上が、サイトテーマでのPolymerの導入方法になります。a-blog cmsのモジュールの考え方がWeb Componentsの考え方と相性がいいですし、Web Componentsのimportもa-blog cmsのパスの解決機能によって楽に行えます。
みなさんも是非、a-blog cmsで、Web Componentsという未来の技術にチャレンジしてみてはいかがでしょうか?


Polymerを使ってYoutubeの動画を便利に表示するカスタムエレメントを作った

こんにちは。steelydylanです。今回はPolymerというWebComponentを扱うためのフレームワークを勉強したのでメモのためにブログを書きます。

Polymerとは


独自の要素を定義して、その要素にHTML、CSS、JavaScriptを内包させることができるWebComponentを簡単に扱えるフレームワークです。
たとえば、下のソースコードだけで

<youtube-element youtube-id="vhfYis6VuXY"></youtube-element>

このようにYoutubeをレスポンシブに表示させる部品を生成可能です。

実際に上のYoutubeを表示している部品も、Polymerを使っています。
要素の検証で、動画周りのソースコードを確認してみてください。

ソースコード

今回はyoutube-id属性にyoutubeのIDを代入するとその動画を表示する、レスポンシブなカスタムエレメントを勉強のために自作してみました。youtube-elementという要素名にしました。作成したコンポーネントのソースコードを公開します。

youtube-elementの使い方

polymer.htmlと、youtube-element.htmlをlink要素でimportします。

<link rel="import" href="../polymer.html">
<link rel="import" href="./youtube-element.html">

あとは、下記のソースのように、youtube-id属性に再生させたい動画のIDを入れるだけです。

<youtube-element youtube-id="D8_iafVEIZU"></youtube-element>

補足

PolymerはHTML importsという技術を使っているのですが、HTML importsは下の図のように、ChromeとOpera、一部のAndroid端末でしか対応していません。


対応していないブラウザで対応させる方法


上記のサイトよりZipファイルをダウンロードし、下記のコマンドを入力し、

npm install
gulp build

buildされたsrcフォルダ及びwebcomponents.jsを使用したいWebページに読み込んで頂くことで,HTML importsがサポートされていないブラウザでも使用できます。

使ってみた感想

未来を感じました。これから先の時代は、WebComponentをjQueryのライブラリのように公開しあう時代が来るかもしれません。jQueryのライブラリの中にはCSSありきの物も多いですが、WebComponentの場合はimportすると、必ず同じ動作、同じ見た目が保証されているというところがいいですね。
次回はPolymerの使い方について解説しようと思います。


堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド