JavaScriptからWeb版SDKを使う

[最終更新日:2019/01/18]

このページではCubismWebSamplesのFrameworkをTypeScriptではなくJavaScriptのみで使用する為の手順を紹介します。

 

既存のJavaScriptのプロジェクトに必要な物を取得する

既存のJavaScriptプロジェクトに組み込む場合、CubismWebSampleから以下をプロジェクトにコピーします。

  • Coreフォルダ
  • Frameworkフォルダ
  • sample.webpack.config.js
  • Sample/TypeScript/Demo内のtsconfig.json

 

webpackの設定を変更

JavaScriptで使用するために、sample.webpack.config.jsの設定を変更します。
エントリーポイントを任意のJavaScriptファイルに変更します。

 

出力に関する設定に任意のファイル名、フォルダ名を指定します。

 

ビルド対象に.jsファイルを追加します。

 

ビルド対象に含める拡張子に.jsを追加します。

 

これでwebpackに関する設定は終わりました。

すべての設定を盛り込むとsample.webpack.config.js以下の状態になります。

 

 

tsconfig.jsonの設定を変更

JavaScriptをコンパイルする為に、tsconfig.jsonに"allowJs": trueを追加します。

 

.jsを追加したことで、出力後のファイルも含まれる為、除外する必要があります。
tsconfig.jsonに除外するディレクトリを指定します。

 

ビルドについての設定は完了しました。
ビルド手順についてはTypeScriptと同様になりますので、「Webサンプルのビルド」を参照してください。

すべての修正をいれるとtsconfig.jsonは以下のようになります。

 

 

JavaScriptからフレームワークを使用する

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

使用したいモジュールをimportする。

 

importしたモジュールを使用する。

 

 

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

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

 

さらに内部モジュールを別の名前で定義したい場合、下記を追記します。

 

リネームしたモジュールを使用する。

Copyright © 2018 Live2D Inc.