HTML()

machbase-neo

TQL

HTML()

HTML() シンクは、テンプレート言語を使用して結果をHTML文書または要素として出力します。
クエリ結果に合わせて、HTMLの構造と表示を自由に構成できます。

構文: HTML(templates...) Since v8.0.53

templates：1つ以上のテンプレート文字列、または file(path) 参照です。各引数にテンプレート文字列を直接記述するか、file(path) で外部ファイルを読み込めます。テンプレートにはGoのHTMLテンプレート言語を使用します。詳しい構文は templateの文書を参照してください。
cache()：結果データをキャッシュします。詳細は結果データのキャッシュを参照してください。

テンプレート内では、現在のレコードのフィールド値や行番号にアクセスする値オブジェクトを使用できます。
HTMLテンプレートのコンテキストで使用できるフィールドとプロパティを以下に示します。

メソッド

{{ .Columns }}
{{ .Column <idx>}}
{{ .Values }}
{{ .Value <idx> }}
{{ .ValueHTMLAttr <idx> }}
{{ .ValueCSS <idx> }}
{{ .ValueJS <idx> }}
{{ .ValueURL <idx> }}
{{ .ValueString <idx> }}
{{ .V.<field> }}
{{ .Num }}

関数

`timeformat`

構文

{{ timeformat <format> <timezone> }}

使用例

1
2
3
4
5
6
7
SCRIPT({
    $.yield(new Date(), "Hello World");
})
HTML({
    <li>{{ $.Value 0 | timeformat "RFC3339" "UTC" }}
    <li>{{ $.Value 1 }}
})

<li>2025-05-29T08:32:33Z
<li>Hello World

`format`

使用例

1
2
3
4
5
6
7
SCRIPT({
    $.yield(3.1415, "Hello World");
})
HTML({
    <li>{{ $.Value 0 | format "%.2f" }}
    <li>{{ $.Value 1 | format "Say: %s?" }}
})

<li> 3.14
<li> Say: Hello World?

`param`

1
2
3
4
5
6
7
SCRIPT({
    $.yield(3.1415, "Hello World");
})
HTML({
    <li> {{ param "prefix" }} {{ $.Value 0 }}
    <li> {{ param "prefix" }} {{ $.Value 1 }}
})

?param=Line パラメーターを付けてTQLスクリプトを呼び出してください。

<li> Line 3.1415
<li> Line Hello World

`paramDefault`

1
2
3
4
5
6
7
SCRIPT({
    $.yield(3.1415, "Hello World");
})
HTML({
    <li> {{ paramDefault "prefix1" "Line1" }} {{ $.Value 0 }}
    <li> {{ paramDefault "prefix2" "Line2" }} {{ $.Value 1 }}
})

<li> Line1 3.1415
<li> Line2 Hello World

`toLower`

1
2
3
4
5
6
7
SCRIPT({
    $.yield(3.1415, "Hello World");
})
HTML({
    <li> {{ $.Value 0 | format "%.2f" }}
    <li> {{ $.Value 1 | toLower | format "Say: %s?" }}
})

<li> 3.14
<li> Say: hello world?

`toUpper`

1
2
3
4
5
6
7
SCRIPT({
    $.yield(3.1415, "Hello World");
})
HTML({
    <li> {{ $.Value 0 | format "%.2f" }}
    <li> {{ $.Value 1 | toUpper | format "Say: %s?" }}
})

<li> 3.14
<li> Say: HELLO WORLD?

使用例

.V は、フィールド名をキーとするマップオブジェクトです。

 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
SQL(`SELECT NAME, TIME, VALUE FROM EXAMPLE LIMIT 5`)
HTML({
  {{ if .IsFirst }}
    <html>
    <body>
      <h2>HTML Template Example</h2>
      <hr>
      <table>
      <tr>
        {{range .Columns}}
          <th>{{ . }}</th>
        {{end}}
      </tr>
  {{ end }}
      <tr>
        <td>{{ .V.NAME }}</td>
        <td>{{ .V.TIME | timeformat "RFC3339" "Asia/Seoul"}}</td>
        <td>{{ .V.VALUE }}</td>
      </tr>
  {{ if .IsLast }}
      </table>
      <hr>
        Total: {{ .Num }}
    </body>
    </html>
  {{ end }}
})

.Value は、現在のレコードのフィールドにインデックスでアクセスする関数です。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
FAKE( csv(`
10,The first line 
20,2nd line
30,Third line
40,4th line
50,The last is 5th
`))
HTML({
    {{ if .IsFirst }}
        <html>
        <body>
            <h2>HTML Template Example</h2>
            <hr>
    {{ end }}

    <li>{{ .Value 0 }} : {{ .Value 1 }}
    
    {{ if .IsLast }}
        <hr>
        Total: {{ .Num }}
        </body>
        </html>
    {{ end }}
})

.Values は、現在のレコードのすべてのフィールド値を格納する配列です。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
FAKE( csv(`
10,The first line 
20,2nd line
30,Third line
40,4th line
50,The last is 5th
`))
HTML({
    {{ if .IsFirst }}
        <html>
        <body>
            <h2>HTML Template Example</h2>
            <hr>
    {{ end }}

    <li>{{ (index .Values 0) }} : {{ (index .Values 1 ) }}
    
    {{ if .IsLast }}
        <hr>
        Total: {{ .Num }}
        </body>
        </html>
    {{ end }}
})

コンテキスト

テンプレートは、HTML、CSS、JavaScript、URIのコンテキストを認識します。
各パイプラインにエスケープ関数が自動で適用され、安全に描画されます。

たとえば、{{.Value 0}}、{{.Value 1}}、{{.Value 2}} は、それぞれのコンテキストに応じたエスケープ関数を適用する形式に変換されます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
SCRIPT({
    $.yield(
        `http://maven.org/`,
        `<img src="https://docs.machbase.com/images/java_logo_32.png">`,
        "Java")
    $.yield(
        `http://npmjs.com/`,
        `<img src="https://docs.machbase.com/images/js_logo_32.png">`,
        "JavaScript")
})
HTML({
    <li>
        <a href="{{.Value 0}}">
        {{.ValueHTML 1}}{{.Value 2}}
        </a>
    </li>
})

出力：

<li>
  <a href="http://maven.org/">
    <img src="https://docs.machbase.com/images/java_logo_32.png">Java
  </a>
</li>
<li>
  <a href="http://npmjs.com/">
    <img src="https://docs.machbase.com/images/js_logo_32.png">JavaScript
  </a>
</li>

{{.Value 0}} の値が O'Reilly: How are <i>you</i>? の場合、以下の例のように各コンテキストで表現されます。

1
2
3
4
5
6
7
SCRIPT({ $.yield(`O'Reilly: How are <i>you</i>?`) })
HTML({
  {{.Value 0}}
})

// 出力：
//  O&#39;Reilly: How are &lt;i&gt;you&lt;/i&gt;?

1
2
3
4
5
SCRIPT({ $.yield(`O'Reilly: How are <i>you</i>?`) })
HTML(`<a href="/path?p={{.ValueHTML 0}}">`)

// 出力：
//  <a href="/path?p=O%27Reilly%3a%20How%20are%20%3ci%3eyou%3c%2fi%3e%3f">

1
2
3
4
5
SCRIPT({ $.yield(`O'Reilly: How are <i>you</i>?`) })
HTML(`<a onx='f("{{.Value 0}}")'>`)

// 出力：
//  <a onx="f('O\u0027Reilly: How are \u003ci\u003eyou\u003c\/i\u003e?')">

SCRIPT({ $.yield(`Hello World?`, `function doMsg(msg){ console.log(msg); }`) })
HTML({
  <script>
  {{.ValueJS 1}}
  </script>
  <a onClick='doMsg("{{.Value 0}}")'>here</a>
})

// 出力：
// <script>
// function doMsg(msg){ console.log(msg); }
// </script>
// <a onClick='doMsg("Hello World?")'>here</a>

文字列以外の値もJavaScriptコンテキストで使用できます。
レコードがオブジェクトの場合、次のように出力されます。

1
2
3
4
5
6
SCRIPT({
    $.yield({A: "foo", B:"bar"})
})
HTML({
    <script>var pair = {{ .Value 0 }};</script>
})

出力結果は次のとおりです。

<script>var pair = {"A":"foo","B":"bar"};</script>

エスケープしない文字列

既定では、すべてのパイプラインが通常のテキスト文字列を生成するとみなし、適切なコンテキストに応じてエスケープ処理を自動的に追加します。

データが通常のテキストでない場合は、型を指定して重複したエスケープを防げます。
HTML、JS、URLなどの型は安全なコンテンツとして扱われ、エスケープの対象外になります。

次のテンプレートを実行すると：

1
2
3
4
5
6
SCRIPT({
    $.yield(`<b>World</b>`)
})
HTML({
    Hello, {{ .ValueHTML 0 }}!
})

結果は次のとおりです。

Hello, <b>World</b>!

自動エスケープを適用すると、次のように出力されます。

Hello, &lt;b&gt;World&lt;b&gt;!

最終更新日 9月 10, 2026

HTTP()SCRIPT()