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

構文

識別

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

[13] <script type> を参照。

内容

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

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

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

応用

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

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

一覧

  • [5] data-web-defs/data/mime-types.json at master · manakai/data-web-defs ( 版) https://github.com/manakai/data-web-defs/blob/master/data/mime-types.json

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

明文規定

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

  • [12] application/its+xml
    • [1] Internationalization Tag Set (ITS) Version 2.0 ( ( 版)) http://www.w3.org/TR/its20/#html5-local-attributes
    • [7] Internationalization Tag Set (ITS) Version 2.0 ( ( 版)) http://www.w3.org/TR/its20/#provenance-records-in-html5-constraint
    • [8] Internationalization Tag Set (ITS) Version 2.0 ( ( 版)) http://www.w3.org/TR/its20/#loc-quality-issues-in-html5-constraint
  • [3] application/ld+json
    • [2] JSON-LD 1.0 ( ( 版)) http://www.w3.org/TR/json-ld/#h3_embedding-json-ld-in-html-documents
    • [4] ただし参考
  • [14] application/csvm+json
    • [15] Embedding Tabular Metadata in HTML ( 版) https://w3c.github.io/csvw/html-note/#embedding-metadata-in-a-script-element
  • [22] application/ld+json;profile="http://www.w3.org/ns/anno.jsonld"
  • text/x-safeframe

曖昧規定

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

  • [17] text/csv
    • [18] Embedding Tabular Metadata in HTML ( 版) https://w3c.github.io/csvw/html-note/#extracting-tabular-data-from-embedded-csv
    • [19] 処理方法を“他の場合と同様”と説明するだけで明確な規定なし (例示はある)
    • [20] そもそも CSV on the Web の処理の規定なので、 CSV 一般には適用できない (本来なら .../...+csv の独自の 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">