HTML5のtemplateタグが超便利

※この記事は7年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。

どうも。
平均睡眠時間が3時間のみやびプリンです。

GW中にある本を購入しました。

●HTML5 Web標準APIバイブル

もうね、一目ぼれね。速攻で買ったよ。
どれも革新的情報ばかりですが、その中でも特にこれはいい！と思ったのが表記の新要素。

このtemplateタグ、
レンダリングや、SEO的には評価されないが、ソース的には存在させることができる、というものだ。

どういうことか説明していく。

例えば、
JavaScriptなどで、動的にメニューやらなんやらのDOMを追加する時、
従来だと下記手法が主流であると思う。

<div id="scriptWrapper" style="display: none;">
  <nav id="gNav">
    <ul>
      <li><a href="/">HOME</a></li>
      <li><a href="/about/">あぼーと</a></li>
    </ul>
  </nav>
</div>

要素にdisplay: none;を効かせて隠す方法だ。
特に問題ないのだが、こいつの弱点といえば、
ブラウザレンダリング時に、中の画像とかはロードされてしまうことと、
SEO上の評価の対象となってしまうことだ。
いくらGoogle的にはdisplay: noneを否定していないといえど（技術の否定をしないため）
ページに直接関係ない情報などまで評価対象となるのは、いささかやりずらいというもの。

そこでtemplateタグなのである。

上記を下記のように書き換える。

<template id="scriptWrapper">
  <nav id="gNav">
    <ul>
      <li><a href="/">HOME</a></li>
      <li><a href="/about/">あぼーと</a></li>
    </ul>
  </nav>
</template>

こうすれば、レンダリングされないばかりか、SEOの評価対象にもならない。

DOMツリーに挿入するには、下記のようなスクリプトを書く

var navTmp = document.getElementById('scriptWrapper').content;
var gNav = navTmp.getElementById('gNav');
document.getElementsByTagName('body').item(0).appendChild(gNav);

ネイティブなのはしゃーない。
jQueryでもできなくはないけど・・・。

とにかくこれを使えば動的なリッチコンテンツが非常に作りやすくなるのだ！

ただし、非常に残念なことに、IEはどのバージョンでもまったくサポートしていない。
Edgeが、ver13から対応してるようだ。
なので現状は業務に使えない・・・・なんてこたない

スマホがあるじゃないの、スマホが！

スマホはこういった最新技術を存分に使えるからほんといいね。

PCは、IEが完全に死ぬまで厳しいですが、
スマホで、ガンガン使っていきましょう。

僕もさっそく使う。