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 のビルド対象に追加するために下記を設定します。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let common: UserConfig = {
...
resolve: {
extensions: ['.ts', '.js']
}
...
}
let common: UserConfig = { ... resolve: { extensions: ['.ts', '.js'] } ... }
let common: UserConfig = {
  ...
  resolve: {
    extensions: ['.ts', '.js']
  }
  ...
}

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

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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;
});
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; });
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がある任意の場所に変更してください。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import { Live2DCubismFramework } from "../../../../Framework/live2dcubismframework";
Live2DCubismFramework.CubismFramework.CubismFramework.startup();
import { Live2DCubismFramework } from "../../../../Framework/live2dcubismframework"; Live2DCubismFramework.CubismFramework.CubismFramework.startup();
import { Live2DCubismFramework } from "../../../../Framework/live2dcubismframework";

Live2DCubismFramework.CubismFramework.CubismFramework.startup();

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

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

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import { Live2DCubismFramework as live2dcubismframework } from '../../../../Framework/live2dcubismframework';
import CubismFramework = live2dcubismframework.CubismFramework;
CubismFramework.startup();
import { Live2DCubismFramework as live2dcubismframework } from '../../../../Framework/live2dcubismframework'; import CubismFramework = live2dcubismframework.CubismFramework; CubismFramework.startup();
import { Live2DCubismFramework as live2dcubismframework } from '../../../../Framework/live2dcubismframework';
import CubismFramework = live2dcubismframework.CubismFramework;

CubismFramework.startup();
この記事はお役に立ちましたか?
はいいいえ
この記事に関するご意見・
ご要望をお聞かせください。