script data

Edit New

スクリプトデータブロック (HTML)

[29] script 要素は、JavaScript のために使う以外に、 スクリプトから参照するなどの目的で任意の (文書の一部として直接レンダリングされるべきではない) データを埋め込むことができます。これをデータブロック (data block) といいます。

構文

識別

[30] type 属性にデータの MIME型を指定します。

[13] <script type> を参照。

内容

[26] script 要素の内容に任意のテキストを含めることができます。

[27] ただし script 要素の終了タグとみなされる文字列は、 HTML構文では終了タグと解釈されてしまうので、含めることができません。

[28] なおHTML構文では script 要素の内容としてタグや注釈や文字参照は書けず、 そのままの文字データと解釈されます。

応用

[31] 同じ Webページのスクリプトが処理に使うデータとして利用するのが想定された利用方法です。

[32] schema.org の JSON-LD データの埋め込みのように、 特定の利用者エージェントのみが利用するデータの埋め込みに流用されている場合もあります。

一覧

[6] スクリプトデータブロックとしての利用例がある MIME型は、 >>5 で「script_data_block」フラグがついています。

明文規定

[11] 次の MIME型には、埋め込みに関する明文規定があります。

曖昧規定

[16] 次の MIME型には、埋め込みに関する曖昧な規定があります。

その他

[39] その他用いられているもの:

関連

[25] JavaScript で使う HTML 素片を埋め込みたい時は、 template 要素を使う方が便利です。

歴史

[36] XML in HTML Meeting Report, , https://www.w3.org/TR/NOTE-xh#script-hack

[37] XML Data Islands, InetSDK, , https://web.archive.org/web/20001025170632/http://msdn.microsoft.com/xml/xmlguide/dataIslandhowto.asp

[33] 以前から稀にこうした使い方がなされていましたが、 HTML5 で正式な script 要素の用法の1つとなりました。

[34] HTML5 以前にはXMLデータアイランドを使ったり、 CSS で非表示にした通常のHTML要素を使ったりすることもありました。

[35] template 要素導入前は、 雛形記述にも使われていました。 現在はスクリプトデータブロックは雛形記述にはあまり使われなくなっています。

メモ

[9] 年賀状のサルを12年前と比べてみたら...デザイナーは同じ人、ヒツジでも話題に ( 版) http://www.huffingtonpost.jp/2015/12/30/new-years-card-monkey-2004-and-2016_n_8893298.html
	<!-- Parsely tracking params start -->
	<script type="application/ld+json">
				{
					"@context": "http://schema.org",
					"@type": "NewsArticle",
					"headline": "年賀状のサルを12年前と比べてみたら...デザイナーは同じ人、ヒツジでも話題に",

[10] Add <script type="module"> and module resolution/fetching/evaluation · whatwg/html@cd1a9fb ( 版) https://github.com/whatwg/html/commit/cd1a9fb1e83f7d0bc30be8b34ecdaf444a0b19a4

[21] 記事の作成 - インスタント記事 ( ()) https://developers.facebook.com/docs/instant-articles/guides/articlecreate

<!-- A map within your article -->

<figure class="op-map">

<script type="application/json" class="op-geotag">

{

"type": "Feature",

"geometry":

{

"type": "Point",

"coordinates": [ [23.166667, 89.216667], [23.166667, 89.216667] ]

},

"properties":

{

"title": "Jessore, Bangladesh",

"radius": 750000,

"pivot": true,

"style": "satellite",

}

}

</script>

</figure>

[23] Vue.js, https://vuejs.org/v2/api/#template

If the string starts with # it will be used as a querySelector and use the selected element’s innerHTML as the template string. This allows the use of the common <script type="x-template"> trick to include templates.

[24] Components — Vue.js ( ()) https://vuejs.org/v2/guide/components.html#X-Templates

Another way to define templates is inside of a script element with the type text/x-template, then referencing the template by an id.

[38] Protovis - How-To: Get Started (, ) https://mbostock.github.io/protovis/docs/start.html

<script type="text/javascript+protovis">

Updated: