これは何か – これは何ではないか?
JML (JSON-Inspired Markup Language) は、JSON構造とDSLに着想を得た革新的なマークアップ言語で、Ascoos OS と現代のウェブのために設計されました。
その目的は、従来のHTMLに対する軽量で安全、使いやすい代替手段を提供することであり、AI互換性、分散化(Web5)、最小限の構文に重点を置いています。
要約
これは
これはではない
JML vs HTML – 2026年比較
| 特徴 | JML | HTML5 |
|---|---|---|
| サイズ (Hello World ミニファイ済) | 64 文字 | 108 文字 |
| meta + viewport 含む | 177 文字 | 212 文字 |
| 平均削減率 | 16–40% | – |
| ボイラープレート | なし | DOCTYPE, head, body... |
| XSS セキュリティ | 安全 (AST) | 開発者次第 |
| 実行可能ロジック (マクロ) | 対応 | 非対応 |
| 暗号化 | 対応 (WIC) | 非対応 |
| ブラウザネイティブ | 不可 (拡張機能) | 対応 |
AST – JML の心臓部
JML は単なるマークアップではありません。ネイティブ AST を持つ DSL です – 2030年のマークアップが今日ここに。
セマンティックマクロ、変換、デバッグ、XSSなしのセキュリティを実現します。
AST構造の例 – 検証、マクロ、安全なレンダリングを可能にします
JML を今すぐ試す
html {
head {
meta:charset('UTF-8')
link:rel('stylesheet'),href('https://cdn.ascoos.com/bootlib/css/bootlib.min.css')
}
body:class('dark-theme') {
h1{`JML へようこそ!`}
p{`Ascoos OS の軽量マークアップ.`}
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.ascoos.com/bootlib/css/bootlib.min.css">
</head>
<body class="dark-theme">
<h1>JML へようこそ!</h1>
<p>Ascoos OS の軽量マークアップ.</p>
</body>
</html>
JML (左) はまったく同じ HTML (右) を生成します – 17%少ない文字数で。
JML Studio と生成された補助コード
TAG html
TAG head
TAG meta CHARSET 'UTF-8'
TAG link REL 'stylesheet' HREF 'https://cdn.ascoos.com/bootlib/css/bootlib.min.css'
TAG body CLASS 'dark-theme'
TAG h1
TEXT 'JML へようこそ!'
TAG p
TEXT 'Ascoos OS の軽量マークアップ.'
{
"type": "group",
"name": null,
"value": null,
"attributes": [],
"children": [
{
"type": "tag",
"name": "html",
"value": null,
"attributes": [],
"children": [
{
"type": "tag",
"name": "head",
"value": null,
"attributes": [],
"children": [
{
"type": "tag",
"name": "meta",
"value": null,
"attributes": [
{
"type": "attribute",
"name": "charset",
"value": "UTF-8",
"attributes": [],
"children": []
}
],
"children": []
},
{
"type": "tag",
"name": "link",
"value": null,
"attributes": [
{
"type": "attribute",
"name": "rel",
"value": "stylesheet",
"attributes": [],
"children": []
},
{
"type": "attribute",
"name": "href",
"value": "https://cdn.ascoos.com/bootlib/css/bootlib.min.css",
"attributes": [],
"children": []
}
],
"children": []
}
]
},
{
"type": "tag",
"name": "body",
"value": null,
"attributes": [
{
"type": "attribute",
"name": "class",
"value": "dark-theme",
"attributes": [],
"children": []
}
],
"children": [
{
"type": "tag",
"name": "h1",
"value": null,
"attributes": [],
"children": [
{
"type": "content",
"name": null,
"value": "JML へようこそ!",
"attributes": [],
"children": []
}
]
},
{
"type": "tag",
"name": "p",
"value": null,
"attributes": [],
"children": [
{
"type": "content",
"name": null,
"value": "Ascoos OS の軽量マークアップ.",
"attributes": [],
"children": []
}
]
}
]
}
]
}
]
}
生成された両方の形式、DSL (左) と AST (右) は WebAI 用に構造化されています。
サーバーサイドレンダリング
<?php
/**
* @ASCOOS-NAME : Ascoos OS
* @ASCOOS-VERSION : 26.0.0
* @ASCOOS-SUPPORT : support@ascoos.com
* @ASCOOS-BUGS : https://issues.ascoos.com
*
* @CASE-STUDY : jml_to_html_renderer.php
* @fileNo : ASCOOS-OS-CASESTUDY-SEC00268
*
* @desc Parses JML syntax into HTML using THTML, generates full page from nested structure.
*
* @since PHP 8.2.0
*/
declare(strict_types=1);
use ASCOOS\OS\Kernel\HTML\THTML;
use ASCOOS\OS\Kernel\Files\TFilesHandler;
$properties = [
'output' => './generated_page.html'
];
try {
$html = new THTML();
$files = new TFilesHandler();
// JML as string.
$jmlString = <<<'JML'
html:lang('en') {
head {
meta:charset('UTF-8')
meta:name('viewport'),content('width=device-width, initial-scale=1.0')
title {`Advanced Sample Page`}
style {
`.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f4f4f4;
}
.header {
text-align: center;
color: #333;
padding: 10px;
border-bottom: 2px solid #000;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
font-weight: bold;
}
.form-group input, .form-group select {
width: 100%;
padding: 8px;
margin-top: 5px;
}`
}
script {
`function validateForm() {
let name = document.getElementById("name").value;
let email = document.getElementById("email").value;
if (name === "" || email === "") {
alert("Please fill out all fields!");
return false;
}
return true;
}`
}
}
body {
div:class('container') {
div:class('header') {
h1 {`Welcome to Ascoos OS Demo`}
p {`This is a complex demo with nested elements and interactivity.`}
}
div:class('content') {
h2 {`User Registration`}
form:onsubmit('return validateForm()'),method('POST'),action('/submit') {
div:class('form-group') {
label:for('name') {`Name:`}
input:type('text'),id('name'),name('name'),required('')
}
div:class('form-group') {
label:for('email') {`Email:`}
input:type('email'),id('email'),name('email'),required('')
}
div:class('form-group') {
label:for('country') {`Country:`}
select:id('country'),name('country') {
option:value('us') {`United States`}
option:value('gr') {`Greece`}
option:value('de') {`Germany`}
}
}
button:type('submit') {`Submit`}
}
br
div:class('footer') {
p {`© 2025 Ascoos OS. All rights reserved.`}
br
a:href('https://ascoos.com') {`Visit our site`}
}
}
}
}
}
JML;
$fullHtml = $html->fromJMLString($jmlString);
$output = '' . $fullHtml;
$files->writeToFileWithCheck($output, $properties['output']);
echo "JML Parsed! Generated HTML:\n";
echo $output . "\n";
echo "Saved to: " . $properties['output'] . "\n";
$html->Free();
$files->Free();
} catch (Exception $e) {
echo "Error: " . $e->getMessage() . "\n";
}
?>
PHP レンダラーにより、動的サイト向けにボイラープレートなしで即座に HTML を生成します。
Ascoos JML Renderer – ブラウザ拡張
この軽量拡張機能をインストールして、任意のウェブページを JML 対応に変換:依存関係ゼロのクライアントサイドレンダリング!
完全な JML ドキュメント
<script type="text/jml"> を完全な HTML ドキュメントとしてレンダリングします。
インライン JML ブロック
既存の HTML 内に <jml> ... </jml> を埋め込みます。
空タグとネストのサポート
br, hr, img, input + ネストされたブロック、属性、マルチラインテキスト。
純粋な JS – 依存関係なし
任意のページ (ローカル/リモート) で動作、Manifest V3 対応。
拡張機能は軽量 (26 KB)、データ収集なし、即時動作 – JML をセットアップなしで試したい開発者に最適です。
ロードマップ
よくある質問
JML は既存のブラウザと互換性がありますか?
はい、レンダラーを通じてクリーンな HTML5 を生成します。ブラウザの変更は不要です。
JML はスクリプトとスタイルをどのように扱いますか?
インラインスクリプト/スタイルと外部リンクをサポートし、セキュリティのためのネイティブエスケープを備えています。
React などのフレームワークで使用できますか?
はい、JML → JSX 変換またはカスタムコンポーネントへの直接パースで可能です。