JavaScript から Web版 SDK を使う

最終更新： 2020年1月30日

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

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

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

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

既存のプロジェクトにパッケージを追加する

既存の JavaScript の webpack プロジェクトで、TypeScript をビルドするために ts-loader パッケージを追加します。

プロジェクト上で下記のコマンドを入力すると package.json にパッケージが追加されます。

npm install --save-dev ts-loader

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

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

まずは、TypeScript ファイルを webpack のビルド対象に追加するために下記を設定します。

module.exports = {
  ...
  resolve: {
    extensions: ['.ts', '.js']
  }
  ...
}

次に、webpack がビルド時に TypeScript を変換するために下記の設定を追加します。

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /.ts$/,
        exclude: /node_modules/,
        loader: 'ts-loader'
      }
    ]
  }
  ...
}

以上で webpack のビルドを正常に行うことができます。

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

var path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/dist/'
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /.ts$/,
        exclude: /node_modules/,
        loader: 'ts-loader'
      }
    ]
  }
}

JavaScript から Framework を使用する

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

使用したいモジュールを import して利用する場合以下のように記述します。

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();