Edit

Page

Page title:

Page body:

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

* 構文

** 識別

[30] [CODE(HTMLa)@en[type][<script type>]] [[属性]]にデータの [[MIME型]]を指定します。

[13] [CODE(HTML)@en[[[<script type>]]]] を参照。

** 内容

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

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

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

* 応用

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

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

** 一覧

[REFS[
- [5] [CITE[data-web-defs/data/mime-types.json at master · manakai/data-web-defs]] ([TIME[2014-06-04 09:34:08 +09:00]] 版) <https://github.com/manakai/data-web-defs/blob/master/data/mime-types.json>
]REFS]

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

** 明文規定

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

[REFS[
- [12] [CODE(MIME)@en[[[application/its+xml]]]]
-- [1] [CITE@en-US[Internationalization Tag Set (ITS) Version 2.0]]
( ([TIME[2013-10-27 19:39:43 +09:00]] 版))
<http://www.w3.org/TR/its20/#html5-local-attributes>
-- [7] [CITE@en-US[Internationalization Tag Set (ITS) Version 2.0]]
( ([TIME[2013-10-27 19:39:43 +09:00]] 版))
<http://www.w3.org/TR/its20/#provenance-records-in-html5-constraint>
-- [8] [CITE@en-US[Internationalization Tag Set (ITS) Version 2.0]]
( ([TIME[2013-10-27 19:39:43 +09:00]] 版))
<http://www.w3.org/TR/its20/#loc-quality-issues-in-html5-constraint>
- [3] [CODE(MIME)@en[[[application/ld+json]]]]
-- [2] [CITE@en[JSON-LD 1.0]]
( ([TIME[2014-01-13 11:01:00 +09:00]] 版))
<http://www.w3.org/TR/json-ld/#h3_embedding-json-ld-in-html-documents>
-- [4] ただし[[参考]]
- [14] [CODE(MIME)@en[[[application/csvm+json]]]]
-- [15] [CITE@en[Embedding Tabular Metadata in HTML]] ([TIME[2016-02-26 00:45:18 +09:00]] 版) <https://w3c.github.io/csvw/html-note/#embedding-metadata-in-a-script-element>
- [22] [CODE(MIME)@en[application/ld+json;profile="http://www.w3.org/ns/anno.jsonld"]]
- [CODE(MIME)@en[text/x-safeframe]]
]REFS]

** 曖昧規定

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

[REFS[
- [17] [CODE(MIME)@en[[[text/csv]]]]
-- [18] [CITE@en[Embedding Tabular Metadata in HTML]] ([TIME[2016-02-26 00:45:18 +09:00]] 版) <https://w3c.github.io/csvw/html-note/#extracting-tabular-data-from-embedded-csv>
-- [19] 処理方法を“他の場合と同様”と説明するだけで明確な規定なし (例示はある)
-- [20] そもそも [[CSV on the Web]] の処理の規定なので、 [[CSV]] 一般には適用できない
(本来なら [CODE[.../...+csv]] の独自の [[MIME型]]を使うべきもの)
]REFS]

** その他

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

- [CODE[text/turtle]]
- [CODE[model/x3d+xml]]
- [CODE[text/mustache]]

* 関連

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

* 歴史

[36] 
[CITE[XML in HTML Meeting Report]], [TIME[2017-10-02T11:00:11.000Z]], [TIME[2024-08-17T05:10:51.502Z]] <https://www.w3.org/TR/NOTE-xh#script-hack>

[37] [CITE@EN-US[XML Data Islands]], [[InetSDK]], [TIME[2024-08-17T05:12:03.000Z]], [TIME[2000-10-25T17:14:54.975Z]] <https://web.archive.org/web/20001025170632/http://msdn.microsoft.com/xml/xmlguide/dataIslandhowto.asp>

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

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

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

* メモ

[FIG(quote)[
[FIGCAPTION[
[9] [CITE@ja[年賀状のサルを12年前と比べてみたら...デザイナーは同じ人、ヒツジでも話題に]]
([TIME[2015-12-31 14:20:24 +09:00]] 版)
<http://www.huffingtonpost.jp/2015/12/30/new-years-card-monkey-2004-and-2016_n_8893298.html>
]FIGCAPTION]

> 
[PRE(HTML code)[
	
	<script type="application/ld+json">
				{
					"@context": "http://schema.org",
					"@type": "NewsArticle",
					"headline": "年賀状のサルを12年前と比べてみたら...デザイナーは同じ人、ヒツジでも話題に",
]PRE]
]FIG]

[10] [CITE@en[Add <script type="module"> and module resolution/fetching/evaluation · whatwg/html@cd1a9fb]]
([TIME[2016-01-21 22:16:36 +09:00]] 版)
<https://github.com/whatwg/html/commit/cd1a9fb1e83f7d0bc30be8b34ecdaf444a0b19a4>

[FIG(quote)[
[FIGCAPTION[
[21] [CITE@ja[記事の作成 - インスタント記事]]
( ([TIME[2016-05-11 14:44:49 +09:00]]))
<https://developers.facebook.com/docs/instant-articles/guides/articlecreate>
]FIGCAPTION]

>     
>     <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>

]FIG]

[FIG(quote)[
[FIGCAPTION[
[23] [CITE@en[Vue.js]],
[TIME[2017-03-14 13:31:49 +09:00]]
<https://vuejs.org/v2/api/#template>
]FIGCAPTION]

> 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.

]FIG]

[FIG(quote)[
[FIGCAPTION[
[24] [CITE@en[Components — Vue.js]]
( ([TIME[2017-03-14 13:31:49 +09:00]]))
<https://vuejs.org/v2/guide/components.html#X-Templates>
]FIGCAPTION]

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

]FIG]

[FIG(quote)[
[FIGCAPTION[
[38] [CITE[Protovis - How-To: Get Started]]
([TIME[2016-11-27T16:08:01.000Z]], [TIME[2024-08-27T12:19:49.394Z]])
<https://mbostock.github.io/protovis/docs/start.html>
]FIGCAPTION]

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

]FIG]

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)