JavaScript から Web版 SDK を使う

[最終更新日:2020/01/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 にパッケージが追加されます。

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

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

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

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

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

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

JavaScript から Framework を使用する

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

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

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

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

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

© 2010 - 2021 Live2D Inc.