Horic Design

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

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の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド