data block

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

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

目次

  1. 構文
    1. 識別
    2. 内容
  2. 応用
    1. 一覧
    2. 明文規定
    3. 曖昧規定
    4. その他
  3. 関連
  4. 歴史
  5. メモ

構文#

識別#

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

[13] <script type> を参照。

内容#

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

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

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

応用#

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

[32] schema.orgJSON-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">