BLOGSpeee開発陣による技術情報発信ブログです。エンジニアのDuenoです。今回はWebComponentsの話です。WebComponentsとはWebコンテンツに含まれる様々なパーツを、コンポーネントとして定義し、再利用可能な形で公開する為のものです。GoogleChromeではWebComponentとして実装されています。定義されたWebComponentは、そのタグを記述するだけで利用できます。Webページとコンポーネントが不本意に干渉し合う事を防いでいます。テストB</mark-down>と記述すると、<mark-down>タグ内のテキストがマークダウンテキストとして処理され、のように描画されます。画像の遅延読み込みWebComponentsは、既存のタグを拡張することも出来ます。https://github.com/1000ch/lazyload-image/このコンポーネントは、対象のimgタグ要素が画面に表示された時に初めて画像のロードを行うというものです。いう記述によってデフォルトのimgタグと使い分けが可能です。WebComponentsの4要素WebComponentsはShadowDOMを含む以下4つのWeb標準で構成されています。Elementsは、HTMLElementそのものを拡張し、独自の要素を定義する仕組みのことです。XComponent});↓<x-component></x-component>独自に定義したタグに対して、機能を持たせることが出来ます。ちなみに、ES6のclass構文を使ってHTMLElementをextendする形でCustomElementが定義できるようになるかも。抽象化というが概念が存在しませんでした。Tree(ShadowTree)を用いて、DOMのカプセル化を実現したものです。id='shadow-button'>送信<button>';と記述するとhtmlElement下にShadowRootが生成され、ShadowRoot下に送信ボタンが生成されます。送信ボタンはShadowTreeに属している為、document.getElementById('shadow-button')のように選択することが出来ません。Templateshtmlテンプレートを定義する為のHTMLElement(タグ)の事です。</div></template>と記述する事が出来るようになります。スクリプトは実行されず、画像のロード等も行われる事はありません。ドキュメントにも存在しないものとして扱われ、タグ内の要素を複製する事で初めて有効になります。Importslinkタグを用いて、JavaScriptやCSS等のリソースをhtmlとしてまとめて記載し、インポートすることが出来るようになります。href="component.html">の行でcomponent.htmlが展開され、index.htmlではscript1.js,script2.js,script3.jsがロードされます。この時、component.html内の要素はDocumentTree内に展開される為、document.querySelector('script')等の記述で選択する事が出来ます。この記事では外部サイトに埋め込む想定のパーツを、WebComponentsを用いて実装しました。endmonth='5'></monthly-table>と記述しておくとのようなテーブルが表示されます。'draw'イベントで再描画が可能とします。データは、今回コンポーネント内に直書きするものとします。MonthlyTable});</script>今回は例としてのわかりやすさを重視してシンプルなものにしましたが、グラフの描画なども実装可能です。ちなみに、GoogleChartsをWebComponentsとして実装したものがありました。data='sample.csv'><google-chart>の記述だけでグラフを表示させる事ができます。<monthly-table>に期間を投げるための<daterange-picker>を作る仕様daterange-pickerはテキストボックスを2つ持ち、それぞれ開始月と終了月を入力することが出来ます。endmonth='2'></daterange-picker>というようにカスタム要素の属性が更新されます。pickerと言いながら今回は数値を入力するだけのものになります。<monthly-table>、<daterange-picker>に加え更新ボタンを設置します。MonthlyReport});</script>これで完成です。href="monthly-report.html"><monthly-report></monthly-report>と記述すると埋め込まれるはずです。め込みコンテンツを操作できる。iframe要素のソースが別ドメインだった場合、クロスドメイン制約に抵触するため、iframe要素内のコンテンツを操作することは出来ません。埋め込んだカスタム要素そのものはDocumentTree内の要素としてフルアクセス可能なので、ここに予めEventを定義しておく事で、限定的に要素内コンテンツを操作することが可能です。非対応ブラウザが多いWebComponentsは現在も標準化に向けて協議が行われています。そのため、対応ブラウザも決して多くはありません。src="~~/webcomponents.js"></script>と記述しておくことで非対応ブラウザでもWebComponentを動作させることが出来ます。比較的少ないコード量で記述することが出来ます。