CDN

@neongate-ai/orbz/standalone は、パッケージマネージャーやバンドラーを使わないページ向けの自己完結型 ES モジュールです。副作用として <orb-z> を登録し、/browser と同じネイティブ API を提供します。

これらの URL は公開済みの 1.0.2 に固定し、将来の latest タグによる予期しない契約変更を防ぎます。

jsDelivr


<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@neongate-ai/orbz@1.0.2/dist/standalone/orbz.js"
></script>

unpkg


<script
  type="module"
  src="https://unpkg.com/@neongate-ai/orbz@1.0.2/dist/standalone/orbz.js"
></script>

パッケージマニフェストの unpkg と jsdelivr メタデータも同じファイルを参照します。上記の明示的な URL により、成果物とバージョンが明確になります。

完全なページ例

index.html


<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Orbz voice assistant</title>
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@neongate-ai/orbz@1.0.2/dist/standalone/orbz.js"
    ></script>
  </head>
  <body>
    <main>
      <div role="status" aria-live="polite">
        <orb-z
          state="idle"
          size="300px"
          speed="1"
          reduced-motion="system"
          elevated
        ></orb-z>
        <p id="assistant-status">Assistant is idle</p>
      </div>
 
      <button id="listen" type="button">Listen</button>
    </main>
 
    <script type="module">
      await customElements.whenDefined("orb-z");
 
      const orb = document.querySelector("orb-z");
      const status = document.querySelector("#assistant-status");
      const listen = document.querySelector("#listen");
 
      listen?.addEventListener("click", () => {
        if (orb) orb.state = "listening";
        if (status) status.textContent = "Assistant is listening";
      });
    </script>
  </body>
</html>

モジュールの読み込み完了後、ブラウザーは既存のタグをアップグレードします。customElements.whenDefined("orb-z") の待機が必要なのは、プロパティやメソッドを直ちに使う場合だけです。

バージョンを固定する

本番環境では正確なバージョンを指定します。


@neongate-ai/orbz@1.0.2

バージョンなしの URL や変動する latest タグは避けます。固定すればデプロイ間の契約と外観が安定します。変更履歴を読んでから意図的に更新してください。

npm を選ぶ場合

CDN 版は独立ページ、埋め込み、試作、ブラウザー依存を自ら管理するマイクロフロントエンド向けです。依存関係の重複排除、設定の型検査、依存グラフ全体の固定が必要なら npm を選びます。