Live2D モデルをブラウザでどこからでも見られるようにしたい！

目次

はじめに
前提条件
手順概要
さいごに

はじめに

どうも、駆け出しのぴよぴよエンジニアです。
本記事では、Live2D SDK for Web を使用して、作成した Live2D モデルを、AWS の S3 にデプロイしてブラウザで表示させる手順について説明します。将来的にはコミケで売り子アプリのようなものを作って公開できたらいいなと考えています。

前提条件

AWS アカウント
CubismSdkForWeb-5-r.1
基本的な Web 開発環境（VScode, Node, npm）

手順概要

Live2D SDK for Web をダウンロード
サンプルモデルを組み込んでビルド
AWS S3 バケットを作成
ビルド生成物を S3 にアップロード
ブラウザでモデル表示の確認

1. Live2D SDK for Web をダウンロード

以下の公式サイトから Cubism SDK for Web をダウンロードします。

余談ですが、CubismSdkForWeb-5 ではビルドツールが webpack から Vite に変わりましたね。ビルド時間がかなり短縮された気がします。

2. サンプルモデルを組み込んでビルド

ビルドの前にローカル環境のブラウザで表示できるか確認してみましょう。
Live2D 公式の Github リポジトリにもありますが、CubismSdkForWeb に同梱されている README にサンプルデモの動作確認方法が書いてあります。

cd ./CubismSdkForWeb-5-r.1/Samples/TypeScript/Demo
npm install
npm start

上記で起動すると、http://localhost:5000/
で Demo アプリにアクセスできるようになります。

マウスカーソルで視線追従も可能です。リップシンクを活用して、口の動きに合わせて声を出すこともできます。活用の幅が非常に高いです。

次はこの Demo アプリのビルドを行いましょう。以下のコマンドを実行します。

npm run build:prod

すると、以下の画像のように Demo ディレクトリ直下に dist ディレクトリが作成されてその中に Demo アプリを動かすためのリソースがまとめられました。この dist の中身を AWS の S3 へアップロードします。

3. AWS S3 バケットを作成

AWS S3 の静的ホスティングを利用して、Demo アプリにブラウザからアクセスできるようにします。
まずは、以下の公式ドキュメントに従って、S3 バケットを作成して静的ウェブサイトホスティング機能を有効にします。

https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/HostingWebsiteOnS3Setup.html

注意点としては、S3 バケットの名前は全世界で一意でなければいけないため、example.com のような既に使われているような名前は使えないことです。

4. ビルド生成物を S3 にアップロード

先ほど作成したビルド生成物である dist 直下のファイルを全て S3 へアップロードします。

そして、プロパティタブに存在する静的ウェブサイトホスティング用の URL にアクセスすると

Web サイトとして、どこからでもアクセス可能となります。

Chrome であれば、ブラウザの項目の「保存と共有」から「QR コードを作成」を選択するとそのサイトの URL を QR コードで読み取れるようになります。

QR コードをスマホで読み取ると...

スマホでも Live2D モデルがブラウザで触れるようになります。

さいごに

以上が、Live2D SDK for Web を使用して Live2D モデルを AWS S3 にデプロイしてブラウザで表示するための手順でした。AWS S3 を利用することで、簡単に Live2D モデルをオンラインで公開できます。ぜひ、試してみてください。
次回は自作モデルを組み込む方法をご紹介したいと思います。