Web系の駆け出しエンジニアでポートフォリオを他人と差別化したいみたいな方の参考になればと思って書いてます。最近だとフロントでLive2Dを使ったサイトもちょこちょこ見かけるので、パンチが足りないと思ったらトライしてみてください。TypeScriptを勉強している方は苦労なく実装できる内容だと思います。
…と、適当なことを書きました。どうも、椛田まやです。最近はAngularでSPA、Next.jsでSSGをしてみたりと本業からかけ離れた分野を趣味で勉強してます。メインはバックエンドとクラウドインフラです、まあ日陰者の保守運用担当ですから。Web系ってかっこいいですよね。
「えっ、あれってWebで動くの…?」
さて本題ですが、VTuberの配信などですっかり市民権を得たLive2Dって実はWebアプリ上で動かせるんですよね。ブラウザゲームがわかりやすいです、あの広告で有名な放置少女のブラウザ版もLive2Dを動かしています。
放置少女ほど美麗に動くLive2Dモデルではないですが、頑張って自作してWeb上で動かせるようにしたので色々頑張りました。完成したアプリはこちら。
（もしかして、Live2Dモデル作るところから…?）
モデル作るのやってみたんですが、超苦行なのであんまりおすすめしてないです。下手に自分で作ろうとせず、可能なら外注するのが良いです。サンプルに使えそうなものはLive2Dの公式サイトや後で紹介する私のGithubにあるんで、公式サービス・本番環境のWebサービス立ち上げ目的でないなら使ってみてはいかがでしょう。
ちなみにですが、Live2Dってサービスに使うなら利用にライセンス料かかるっぽいですよ。どんな感じでモデリングするんだろうって思った方は下記の動画参考にしてください。
動かすのに何が必要？
ざっくり下記３点。
- TypeScript推奨（JavaScriptでも書こうと思えばかけると思う）
- Cubism SDK for Web
- Live2Dモデル
逆に言うとそれ以外特に特別な技術はいらないです。簡単そうでしょ？超おすすめで動くと楽しい。AIチャットアプリとか作ったらおもしろそう、誰か私のために作ってください。
どうやって実装するの？
基本的にはLive2D公式が出しているSDKチュートリアルを読んで実装していけばOKです。サンプルをダウンロードしてビルドしたら動きます。フレームワークがTypeScriptベースで書かれているので、素直にTypeScriptで書けば楽です。JavaScriptからフレームワークをimportする方法もドキュメントに書かれているので、それでも出来るみたいです。
Node.jsとかはインストールできたけど、いろいろ環境準備したりとかするのめんどくさい方向けに、Githubにソースコードとモデルをまるっと公開しているので、どうぞ参考にしてください。npm installしてbuildかserveしたらすぐに動きます。ソースコードはそんなにキレイではないのであんまりまじまじ見ないでくださいな。
宣伝なんですが、動画見てくれると嬉しいです。
どういうところで困った？
- Live2Dのモデル読み込みが非同期なので、読み込み完了タイミングがつかめない。
- Angularでページ読み込み完了時にモーションさせたかったんですが、モデルの読み込みが完了しておらず、はちゃめちゃにエラー出てしまいました。あきらめて適当にウェイト処理いれました。
- 多分コールバックとかでローディング完了を検知出来るはずなので、実装ご存じの方教えてくれると嬉しいです。
- 複数の動きに対応させたい場合はCubismMotionManagerのインスタンスを複数用意する。
- 普段は呼吸のモーションを動かしつつ、別の動きのモーションを重ねたいと思ったが、単純なモーション切り替えだとうまくいかなかった。
- ここのページに書いてあるように、CubismMotionManagerのインスタンス複数用意して呼び出してあげるとよしなにそれっぽくやってくれる。
- Live2Dモデルをダウンロードしようと思えば出来てしまう。
- 商用サービスとかで運用してる人はどうしてるんでしょう？多分何か方法はあると思うんですが、難読化や軽い暗号化とか手を加える必要はありそうです。
- いいアイデアあったら教えてくださいな。
最後に
なんかサービス作りたいなーと思いながら日々の業務に埋没してましたが、やっぱり作ってみたらめためた楽しいですね。Live2Dを活かしたサイトってあんまりピンとこないですが、なんか出来たらいいなと思ってます。「こういうのあったらいいな…」ってご意見あれば、Twitterで教えてくだされ。ほなまたお会いしましょう。
