Twitter（現X）のツイートにLive2Dモデルを埋め込んで表示する方法を解説します。
Cubism SDKの基本的な連携手順を把握できます。
TwitterツイートにLive2Dを埋め込む方法（公式チュートリアルの活用）
基本の流れはLive2D公式チュートリアルに準拠しています。
全体の流れを把握しやすいよう整理しているため、公式チュートリアルと照らし合わせながら進めてみてください。
本手順ではスクリプトのコーディングは不要ですが、Unityの基本操作が必要です。
Unityの操作経験がない場合は、入門書やチュートリアルで基本操作を確認しておくと作業がスムーズになります。
TwitterツイートにLive2Dを埋め込む方法： Live2Dでの作業
TwitterツイートにLive2Dを埋め込むための具体的な手順を解説します。
まずはLive2D Cubism Editor側の作業です。
「モデリング」＞「アートメッシュ」＞「当たり判定用アートメッシュを生成」から、キャラクター全体を囲む透明メッシュを配置します。
「モデリング」＞「テクスチャ」＞「テクスチャアトラスの編集」を開き、テクスチャを1024×1024pxの1枚に配置します。
※当たり判定用のアートメッシュもテクスチャアトラス内に配置してください。
モデルデータを書き出します。
Cubism 3系など過去バージョンのモデルデータを使用する場合は、以下の点を確認して更新しておきます。
・パラメータ形式を3系以降に更新
・ターゲットSDKを4.0に設定
・物理演算設定パネルを開いて最新状態に更新
「ファイル」＞「組み込み用ファイル書き出し」＞「moc3ファイル書き出し」を選択して書き出します。
この設定を行わないと、画面タップ時にアニメーション（Action）が再生されません。
- Cubism Viewerを起動
- 「モデル名.moc3」をドラッグ&ドロップ
- hitAreaのBodyを選択し、Hit Area名の項目に「Body」と入力
「ファイル」＞「書き出し」＞「モデル設定(model3.json)」を選択し、既存のファイルを上書き保存します。
- 待機アニメーション用の「Idle」
- タップ時に再生する「Action」のアニメーション
※アニメーションシーンのターゲット設定は「SDK（Unity）」に合わせておきます。
「animation」フォルダを作成し、該当フォルダ配下に書き出します。
「animation」フォルダ内に「Action.motion3.json」と「Idle.motion3.json」を配置します。
※model3.jsonと同階層に配置すると、Unityインポート時に「モデル名.fadeMotionList」が正しく生成されない原因になります。
必要に応じて表情モーションも書き出しておきます。
- Cubism Viewerを起動
- 「モデル名.moc3」をドラッグ&ドロップ
- 「ファイル」＞「追加」＞「表情」を選択し、表情名（例：「shy」）を入力
- 作成した表情を選択してパラメータの値を設定
- 「ファイル」＞「書き出し」＞「すべての表情モーション」を選択
- 「animation」フォルダに「shy.exp3.json」として書き出し
TwitterツイートにLive2Dを埋め込む方法：Unityでの作業
続いてUnityでの設定作業です。
Unity HubからUnity（2019.3系）をインストールします。
バージョン差異による不具合を防ぐため、公式チュートリアルに近いバージョンを使用します。
※Unityのモジュール「WebGL Build Support」もあらかじめインストールしてください。
Web用に出力（ビルド）する際に必要となります。
配布ページからSDKパッケージ（CubismSdkForUnity-x-x.x.unitypackage）をダウンロードしてインポートします。
SDKをインポートしたらUnityを再起動してください。
再起動を行わないと、アセット読み込み時にエラーが発生する場合があります。
Live2D > Cubism > OriginalWorkflow > Should Import As Original Workflowにチェックを入れます。
生成されたPrefab（青いアイコン）をHierarchyウィンドウへ配置し、再生ボタンを押して動作を確認します。
※ここでエラーが発生した場合は、書き出したLive2Dモデルデータ側の設定を見直してください。
※Consoleに出力されるエラーメッセージから該当箇所を特定できます（例：物理演算設定の不整合など）。
Live2DのPrefabを選択します。
「Cubism Fade Controller」コンポーネントを追加します。
「Cubism Fade Motion List」の項目に「モデル名.fadeMotionList」アセットを割り当てます。
※Live2Dアセット内に生成された「モデル名.fadeMotionList」を指定してください。
Live2DのPrefabを選択します。
「Cubism Look Controller」コンポーネントを追加します。
「Cubism Look Target」コンポーネントを追加します。
「Cubism Look Controller」のTarget項目にLive2DのPrefabを指定します。
視線追従させたいパラメータをすべて選択し、「Cubism Look Parameter」コンポーネントを追加します。
- ParamAngleX
- ParamAngleY
- ParamEyeBallX
- ParamEyeBallY
設定完了後に再生ボタンを押し、Gameビュー上でマウスクリックした方向に顔や視線が追従することを確認します。
Live2DのPrefabを選択します。
「Cubism Sample Controller」コンポーネントを追加します。
「Body Animation」に「Idle」モーションを割り当てます。
「Tap Body Motions」のSizeを「1」に設定し、「Action」モーションを割り当てます。
※複数登録した場合はランダムに再生されます。
再生中にキャラクターをタップ（クリック）すると、登録したモーション（Action）が再生されます。
Live2DのPrefabを選択します。
「Cubism Expression Controller」コンポーネントを追加します。
「Expression List」項目に「モデル名.expressionList」を割り当てます（※Viewer上で事前設定・書き出しが必要です）。
画面キャプチャ等から、ビルド解像度に合わせた512×512pxの画像「thumbnail.png」を作成して用意します。
プロジェクトをWebGL形式で書き出し（ビルド）します。
- 「Scenes In Build」にLive2Dを配置した対象シーンを登録
- Platform一覧から「WebGL」を選択し、「Switch Platform」を実行
Player Settingsを開き、以下の各項目を設定します。
- Width：512
- Height：512
- WebGL Template：Minimal
設定後、「Build」ボタンをクリックします。
出力先として「WebGL」フォルダを新規作成し、そのフォルダを選択して保存します。
ビルド完了時に生成されるファイル構成は以下の通りです。
出力先のWebGLフォルダ内に「index.html」が生成されます。
Twitterカード表示用のメタタグなどを補う必要があるため、以下のようにコードを追記します。
TwitterツイートにLive2Dを埋め込む方法：サーバー（Netlify）での作業
ビルドした成果物を公開するため、サーバー（Netlify）に配置します。
事前にNetlifyのアカウントを作成しておきます。
※静的サイトを無料でホスティングできるサービスです。
ログイン後、管理画面のデプロイエリアへ「WebGL」フォルダごとドラッグ&ドロップします。
アップロード完了後に自動デプロイが開始されるため、完了まで待機します。
TwitterツイートにLive2Dを埋め込む方法：Twitterでの作業
最後にTwitter（X）へ投稿して表示を確認します。
タイムライン上で意図通りカード表示されるかテストします。
Card Validator等の検証ツールにアクセスし、Netlifyで発行された公開URLを入力して検証します。
https://cards-dev.twitter.com/validator
検証で正常に表示されたら、ツイート本文にURLを記載して投稿します。
Live2Dでのモデル制作は、ほかにも書いています。
TwitterツイートにLive2Dを埋め込む方法まとめ
Unityの基本操作を把握していれば、一連の流れはスムーズに進められます。
Cubism SDKのコンポーネントが用意されているため、適切な設定を行えばWebGL出力からWeb展開まで対応可能です。
Unityの操作に慣れていない場合は、まずエディタの基本操作を習得してから挑戦することをおすすめします。
