Web5 と WebAI の次世代マークアップ

JSON と DSL に着想を得た、安全設計、AI と分散型ウェブに最適

ウェブが知的な存在として、ここから始まる。

これは何か – これは何ではないか?

JML (JSON-Inspired Markup Language) は、JSON構造とDSLに着想を得た革新的なマークアップ言語で、Ascoos OS と現代のウェブのために設計されました。

その目的は、従来のHTMLに対する軽量で安全、使いやすい代替手段を提供することであり、AI互換性、分散化(Web5)、最小限の構文に重点を置いています。

要約

これは

  • JSONインスパイアされたDSLマークアップ
  • 根本からASTベース
  • HTMLより16–40%小さい
  • ゼロトラスト & XSS安全
  • WebAI / エージェントに最適
  • 完全UTF-8ネイティブ
  • セマンティックマクロと拡張機能付き

これはではない

  • ネイティブブラウザマークアップ
  • テンプレートエンジン(Twig/Pug)
  • 単なるJSON代替
  • プログラミング言語

JML vs HTML – 2026年比較

特徴JMLHTML5
サイズ (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 を今すぐ試す

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 の軽量マークアップ.`}
  }
}
同等の HTML
<!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 と生成された補助コード

DSL (ドメイン特化言語)
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 の軽量マークアップ.'
AST (抽象構文木)
{
  "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 をセットアップなしで試したい開発者に最適です。

ロードマップ

2026:条件分岐、ループ、セマンティックマクロ v2
2027:Markdown/PDF へのエクスポート + セキュリティプロファイル
2028+:Ascoos AI による自動生成

よくある質問

JML は既存のブラウザと互換性がありますか?

はい、レンダラーを通じてクリーンな HTML5 を生成します。ブラウザの変更は不要です。

JML はスクリプトとスタイルをどのように扱いますか?

インラインスクリプト/スタイルと外部リンクをサポートし、セキュリティのためのネイティブエスケープを備えています。

React などのフレームワークで使用できますか?

はい、JML → JSX 変換またはカスタムコンポーネントへの直接パースで可能です。