クイックスタート

Augma は『劇場版 ソードアート・オンライン -オーディナル・スケール-』に登場する AR インターフェースの軽やかさを、再利用できる Web コンポーネントにしたものです。独立したデザイン基盤だけを使うことも、すぐに Vue でインターフェースを作り始めることもできます。

0.2 リリース準備中

このページは 0.2 の API を説明しています。npm での公開リリースが完了するまでは、リポジトリ内でビルドし、ローカルの tarball で検証してください。pnpm add augma では旧バージョンがインストールされる可能性があり、以下の新しい API はそのままでは使えません。

Vue コンポーネント

Vue 3.5 以降が必要です。

pnpm add augma

アプリのエントリーでスタイルを読み込みます：

import 'augma/style.css'

コンポーネントでは名前付きでインポートします：

<script setup lang="ts">
import { AgmButton, AgmPanel } from 'augma'
</script>

<template>
  <AgmPanel title="デバイスに接続">
    <AgmButton>接続を開始</AgmButton>
  </AgmPanel>
</template>

グローバル登録も、UnoCSS や Tailwind の設定も不要です。パッケージには TypeScript の型定義が含まれます。Vue コンポーネントが振る舞いを担い、複雑な操作のキーボードとフォーカスは Reka UI が支えます。

スタイルだけを使う

pnpm add @augma/core

// セマンティックな変数だけを読み込み、グローバルな要素のスタイルは変えません。
import '@augma/core/tokens.css'
// または、コンポーネントのスタイルを含む完全なエントリー。
import '@augma/core/style.css'

<button class="agm-button agm-button--primary" type="button">デバイスに接続</button>

CSS パッケージは Vue のランタイムに依存しません。複雑なコンポーネントの操作、セマンティクス、キーボード、フォーカス管理には、ネイティブ要素または対応する振る舞いのコンポーネントが必要です。

編集できるソース

shadcn-vue を初期化済みの Vue プロジェクトでは、Registry からコアコンポーネントをコピーできます。コピーしたコードはプロジェクト側で管理し、スタイルは引き続き @augma/core/style.css を参照します。

テーマ

既定はライトテーマです。ルート要素に class="dark" または data-agm-theme="dark" を付けるとダークテーマになります。オーバーレイは body にマウントされるため、テーマは局所的なコンテナではなく html または body に設定してください。

0.1 からの移行

0.2 では公開 API を作り直しました。AgmButton などの名前付きインポートを使い、スタイルのエントリーは augma/style.css です。以前の app.use(augma)、ワークスペース内部からのインポート、UnoCSS プリセットは公開インターフェースではなくなりました。

以前の Card のレイアウトには Panel を使えます。Clock とアプリメニューは組み合わせの例になりました。カメラと WebXR は /ar/ のデモアプリに残るため、コンポーネントをインストールしてもこれらの依存は読み込まれません。