live2d-web ドキュメント

JavaScript

React に依存しない基本 API を使います。

作成・読み込み・破棄

JavaScript API は1つの Canvas とモデルを管理します。モデルを操作する前に読み込みの完了を待ち、画面から外すときは必ず dispose() を呼んでください。

import { createLive2D } from 'live2d-web'
 
const character = await createLive2D({
  container: document.querySelector('#avatar'),
  coreUrl: '/live2dcubismcore.min.js',
  src: '/models/model.model3.json',
})
 
await character.motion('TapBody', 0)
 
// When the host view is removed:
character.dispose()

Canvas のアクセシビリティ

Canvas を支援技術に公開する必要がある場合だけ意味を指定します。オプションを省略すると、従来のマークアップを維持します。

const character = await createLive2D({
  accessibility: {
    label: '動く案内キャラクター',
    fallbackText: '案内キャラクターのイラスト',
  },
  container: document.querySelector('#avatar'),
  src: '/models/model.model3.json',
})

情報を伝えないモデルには { mode: 'decorative' } を使います。タップやモーションはキーボードで操作できる通常の DOM ボタンやコントロールでも提供してください。ランタイムは Canvas に tabIndex や role="application" を自動追加しません。

画面のライフサイクルに合わせる

インスタンスはコンテナーを所有する画面で保持します。非表示タブで描画が不要なら一時停止し、画面を外すときに破棄します。dispose() は複数回呼んでも安全です。

const onVisibility = () => document.hidden ? character.pause() : character.resume()
document.addEventListener('visibilitychange', onVisibility)
window.addEventListener('pagehide', () => {
  document.removeEventListener('visibilitychange', onVisibility)
  character.dispose()
}, { once: true })

通常の DOM で操作と再試行を用意

モーション、表情、再試行は Canvas 外のボタンで提供します。準備前は無効にし、失敗時は Live2DError.code を表示して、Core、アセット、WebGL の原因を修正してから再作成します。