はじめに
はじめまして、モーコと申します。
Live2D Cubism SDK for Web（以下、Cubism SDK）が Node.js で動作することを知り、「Next.js のプロジェクト上で直接表示できるのでは？」と思い、実際に試してみました。
通常、Cubism SDK を使用する際は、TypeScript でコーディングを行い、ビルドして生成された JavaScript ファイルを HTML から読み込むのが一般的です。しかし、Cubism SDK 自体が TypeScript で書かれているため、Next.js のプロジェクト内で直接活用できるのではないかと考えました。
本記事では、その実装方法について紹介します。
サンプル
本記事では、以下のリポジトリに作成したサンプルをベースに進めていきます。
README に記載した内容と一部重複しますが、リポジトリをクローンした後、以下の手順を実行することで公式のサンプルデモを Next.js 上で表示できます。
準備
-
Cubism SDK のダウンロード
Live2D公式サイトから Cubism SDK for Web をダウンロードしてください。
※ 本サンプルは [2025/02/18] Cubism 5 SDK for Web R3 で動作確認しています。 -
ファイルのコピー
ダウンロードしたファイルを解凍し、以下のようにプロジェクト内へコピーします。
- CubismSdkForWeb-5-r.3/Samples/Resources/*
→ live2d-on-nextjs/public/live2d/Resources/ へコピー - CubismSdkForWeb-5-r.3/Core/live2dcubismcore.min.js
→ live2d-on-nextjs/public/live2d/ へコピー - CubismSdkForWeb-5-r.3/Core/live2dcubismcore.d.ts
→ live2d-on-nextjs/src/lib/live2d/core/ へコピー - CubismSdkForWeb-5-r.3/Framework/src/*
→ live2d-on-nextjs/src/lib/live2d/framework/ へコピー - CubismSdkForWeb-5-r.3/Samples/TypeScript/Demo/src/*
→ live2d-on-nextjs/src/lib/live2d/demo/ へコピー ※1
※1 lappdefine.ts および lappdelegate.ts は上書きしないでください
ビルド
以下のコマンドを実行し、必要なパッケージをインストール＆ビルドします。
cd livd2d-on-nextjs
npm i
npm run build
起動
ローカルサーバーを起動し、デモを確認します。
npm run dev
ブラウザで http://localhost:3000/live2d にアクセスすると、Live2D のモデルを表示するデモアプリが起動します。
構成
本プロジェクトのディレクトリ構成と、それぞれの役割について説明します。
public/live2d/live2dcubismcore.min.js
Live2D Cubism SDK の公式 Core の JavaScript ファイルです。
public/live2d/Resources
Live2D の モデルデータ（テクスチャ・モーション・設定ファイルなど）が格納されるディレクトリです。
src/app/layout.tsx
Next.js のレイアウトファイルです。
- TypeScript では
live2dcubismcore.d.tsをインターフェースとして使用し、実際の処理はlive2dcubismcore.min.jsによって実行されます -
live2dcubismcore.min.jsを<head>内の<script>タグ で読み込むことで、Next.js のクライアント環境で利用できるようにしています
src/app/live2d
/live2d ルートへの ルーティングを行います。
src/components/live2d/live2dView.tsx
Live2d の表示用コンポーネントです。
canvas タグを用意し、Live2d の描画を行います。
LAppDelegate の初期化処理、実行処理、解放処理などのメソッドを実行する役割も担います。
src/lid/live2d
Live2D Cubism SDK for Web の 公式ソースコード をベースに配置するディレクトリです。
- framework → 公式のソースコードそのまま
- core → 公式のソースコードそのまま
- demo → 公式のサンプルをカスタマイズ
特に demo 内の以下 2 つのファイルはプロジェクトに合わせて修正を加えています。
- lappdefine.ts
実行環境に合わせて変数の値を調整しています。 - lappdelegate.ts
もともとはdocument.createElement("canvas")でキャンバスを生成していましたが、live2dView.tsx内で設置したcanvasを使用するように修正しました。
これらの構成をもとに、Next.js 上で Live2D を動作させる環境を構築しています。
おわりに
以上、Next.js 上で Live2D Cubism SDK for Web を動かす方法 をご紹介しました。
公式の Cubism SDK は基本的に HTML + JavaScript で動作する前提になっていますが、本記事のように Next.js + TypeScript 環境 に組み込むことで、よりモダンな Web アプリケーションでも活用できるようになります。
本記事が Live2D を Next.js で扱いたい方 の参考になれば幸いです。
ぜひ、リポジトリをクローンして動かしてみてください！
ご質問やフィードバックがあれば、ぜひコメントで教えてください！
最後までお読みいただき、ありがとうございました！