/
975.txt
161 lines (123 loc) · 6.39 KB
/
975.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
[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]
* 関連
[25] [[JavaScript]] で使う [[HTML]] [[素片]]を埋め込みたい時は、
[CODE(HTMLe)@en[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)[
<!-- Parsely tracking params start -->
<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]
> <!-- 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>
]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]