プロフィールページにある僕の分身は既にご覧頂けたでしょうか
これはLive2D Cubism SDK for Web（以下WebSDKと表記）を使ってLive2Dモデルを表示しています
この記事ではそのWebSDKを使ってブラウザにモデルを表示するまでの方法をご紹介します
入門編ではありますが、初心者向けではありませんのでご注意ください・・・！
完成サンプル： https://astie-dog.github.io/live2d-for-web-example/
対象
- Live2DモデルをWebサイトで動かしたい人
- Node.jsがインストールされていてnpmが使える人
- Gitを使ってクローンができる人
WebSDKの難しいところ
WebSDKはTypeScriptでのみ配布されています
そのためJavaScriptとして使いたい場合は事前にビルドする必要があるのはもちろんのこと
TypeScriptで使う場合もそのままimportして使うのではなく一度ビルドして使いましょう！（これ大事）
なぜビルドが必要か
このSDKはwebpackなどを通してコンパイルすることを推奨とした構造になっています
またTypeScriptはstrictモードで書かれていないためstrictな環境下では型不整合のエラーが複数出てしまいビルドできません
そのため一度ビルドをして出力されたものを使っていきます
導入敷居がやや高くハマりどころも多く、少々難易度が高いSDKということもあり情報も少ないです
既に公式のサンプルコードをダウンロードしてコードを見た方もいるかと思いますが
なかなか複雑なため諦めてしまうことも多いと思います
今回はそんな環境構築やら面倒なものはすべて済ませたコードを使ってとりあえず動かすところまでやっていきたいと思います
準備
下記リポジトリをCloneしてください
https://github.com/astie-dog/live2d-for-web-example
SDKを入れるところはすべて済ませてあります
規約は下記URLにありますのでご一読ください
https://www.live2d.com/download/cubism-sdk/download-web/
※ 執筆当時 Cubism 4 SDK for Web R1
動かしてみる
必要なパッケージをダウンロードします
npm install
完了したら
npm start
で開発サーバーを起動します。 localhost:8080 にブラウザでアクセスすると完成サンプルと同じ状態になります
モデルを差し替える
modelフォルダ以下にCubismEditor4で出力したmoc3を含むファイルを配置します
（moc3, model3.json, physics.jsonとテクスチャが必要です）
index.tsのモデルファイルを参照している部分を自分のモデルのものに置き換えます
const MODEL_FILES = {
moc3: './model/Hiyori/hiyori.moc3',
model3: './model/Hiyori/hiyori.model3.json',
physics3: './model/Hiyori/hiyori.physics3.json',
textures: [
'./model/Hiyori/hiyori.2048/texture_00.png',
'./model/Hiyori/hiyori.2048/texture_01.png'
]
}https://github.com/astie-dog/live2d-for-web-example/blob/main/src/index.ts#L7-L15
この状態で改めてnpm startをするとモデルが差し替わっていると思います
モデルの位置がズレていたり小さいとき
index.tsに以下のように設定が書いてある箇所があります
{
autoBlink: true,
x: 0,
y: 1,
scale: 1
}https://github.com/astie-dog/live2d-for-web-example/blob/main/src/index.ts#L31-L35
autoBlink： 自動まばたき
x： 横の位置
y： 縦の位置
scale： 全体の大きさ
これらの設定を変更して最適な位置と大きさに調整してください
完成版の出力
一通り調整ができたら次のコマンドを実行します
npm run build
distフォルダが作成されて中に完成されたhtmlやjsなどが入っています
このフォルダの中身を自身のWebサーバーなどにアップしたら公開できます
公開するときの注意
この実装で作られたものは少し知識のある人であればモデルのデータをダウンロードすることが可能です
ダウンロードされたくない場合は基本的にインターネット上にモデルデータをアップしないようにしましょう！
※ 抜き出せても勝手に使うのは駄目です
※ 抜き出せる人はやらない & やり方を教えないようにしましょう！！
次回
今回は動かせるところまでを駆け足でやりましたので、次回はもう少し実装の中身を説明していきたいと思います
※ いろんなところでコードを参考にして積み上げてきたので、参考にした先がわからなくなってしまいました・・・
