ViteプロジェクトのJavaScript から SDK for Web を使う

最終更新： 2024年3月26日

このページではCubism 5 SDK for Web の Framework を Vite プロジェクトの JavaScript から使用するための手順を紹介します。

既存の JavaScript の Vite プロジェクトに必要なファイルを追加する

Cubism 5 SDK for Web から以下のディレクトリをプロジェクトにコピーします。

• Coreフォルダ
• Frameworkフォルダ

既存のプロジェクトの Vite の設定を変更する

既存の JavaScript の Vite プロジェクトで Framework のビルドが行えるようにいくつか追加の設定を行います。

ViteはデフォルトでTypeScriptのトランスパイルをサポートしておりますので、TypeScript ファイルを Vite のビルド対象に追加するために下記を設定します。

let common: UserConfig = {
  ...
  resolve: {
    extensions: ['.ts', '.js']
  }
  ...
}

以上で Vite のビルドを正常に行うことができます。
ただし、Vite の仕様によりビルドの際、型チェックはございません。

下記に vite.config.mts のサンプルを掲載します。

import { defineConfig, UserConfig, ConfigEnv } from 'vite';
import path from 'path';

export default defineConfig((env: ConfigEnv): UserConfig => {
  let common: UserConfig = {
    server: {
      port: 5000,
    },
    root: './',
    base: '/',
    publicDir: './public',
    resolve: {
      extensions: ['.ts', '.js'],
      alias: {
        '@framework': path.resolve(__dirname, '../../../Framework/src'),
      }
    },
    build: {
      target: 'modules',
      assetsDir: 'assets',
      outDir: './dist',
      sourcemap: env.mode == 'development' ? true : false,
    },
  };
  return common;
});

JavaScript から Framework を使用する

JavaScript から TypeScript のフレームワークを使用する方法になります。

使用したいモジュールを import して利用する場合以下のように記述します。
importするモジュールのパスはlive2dcubismframeworkがある任意の場所に変更してください。

import { Live2DCubismFramework } from "../../../../Framework/live2dcubismframework";

Live2DCubismFramework.CubismFramework.CubismFramework.startup();

フレームワーク内クラスのインポート

フレームワークは名前空間 Live2DCubismFramework でラッピングされているため、複数 import すると重複してしまいます。
重複を解決するには import 時に違う名前を指定する必要があり、import 時の名前空間の後に as [任意の名前] を指定することで解決できます。

さらに、import [任意の名前] = モジュール名 と記述することで、内部モジュールを別の名前で定義することができます。

import { Live2DCubismFramework as live2dcubismframework } from '../../../../Framework/live2dcubismframework';
import CubismFramework = live2dcubismframework.CubismFramework;

CubismFramework.startup();