2020年にUnity 2019.3系とCubism 4 SDKで作ったWebGLを、Twitterのカード内に表示した記録です。現在のXで同じように操作できることは確認できていません。新規公開では、まずブラウザーで動くWebページを作成し、そのURLを共有する方法として検討してください。
Live2D公式記事の2024年追記にはカード利用についての同社の見解がありますが、X社による承認ではないと明記されています。現在のカード規約と実際の表示可否は別途確認が必要です。公開するモデル・画像の権利を確認し、秘密のモデルや編集用データを公開フォルダに含めないでください。
TwitterツイートにLive2Dを埋め込む方法（公式チュートリアルの活用）
以下はLive2D公式の「Cubism 4 SDK for Unity お試しガイド」（2020年公開）を参照した旧手順です。画像・メニュー・コンポーネント名も当時の版に基づきます。
全体の流れを把握しやすいよう整理しているため、公式チュートリアルと照らし合わせながら進めてみてください。
当時のSDKサンプルを使う範囲ではC#の追加実装は不要ですが、Unityの基本操作とHTMLのメタ情報編集が必要です。現行SDKで同じ設定が通用するとは限りません。
Unityの操作経験がない場合は、入門書やチュートリアルで基本操作を確認しておくと作業がスムーズになります。
TwitterツイートにLive2Dを埋め込む方法： Live2Dでの作業
TwitterツイートにLive2Dを埋め込むための具体的な手順を解説します。
まずはLive2D Cubism Editor側の作業です。
「モデリング」＞「アートメッシュ」＞「当たり判定用アートメッシュを生成」から、キャラクター全体を囲む透明メッシュを配置します。
「モデリング」＞「テクスチャ」＞「テクスチャアトラスの編集」を開き、この作例ではテクスチャを1024×1024pxの1枚に配置しました。すべてのモデルで必須の寸法・枚数ではありません。
※当たり判定用のアートメッシュもテクスチャアトラス内に配置してください。
モデルデータを書き出します。
Cubism 3系など過去バージョンのモデルデータを使用する場合は、以下の点を確認して更新しておきます。
・パラメータ形式を3系以降に更新
・旧作例ではターゲットSDKを4.0に設定。新規制作では使用するCubism SDKが対応する書き出し形式を確認
・物理演算設定パネルを開いて最新状態に更新
「ファイル」＞「組み込み用ファイル書き出し」＞「moc3ファイル書き出し」を選択して書き出します。
この設定を行わないと、画面タップ時にアニメーション（Action）が再生されません。
- Cubism Viewerを起動
- 既存の参照設定を保つため「モデル名.model3.json」を開く（編集前に一式をバックアップ）
- hitAreaのBodyを選択し、Hit Area名の項目に「Body」と入力
「ファイル」＞「書き出し」＞「モデル設定(model3.json)」を選択し、既存のファイルを上書き保存します。
- 待機アニメーション用の「Idle」
- タップ時に再生する「Action」のアニメーション
※アニメーションシーンのターゲット設定は「SDK（Unity）」に合わせておきます。
「animation」フォルダを作成し、該当フォルダ配下に書き出します。
「animation」フォルダ内に「Action.motion3.json」と「Idle.motion3.json」を配置します。
この作例ではanimationフォルダへ分けています。fadeMotionListが生成されない場合は、フォルダ名だけで判断せず、モデル設定のモーション参照とOriginal Workflowの取り込み設定、Consoleのエラーを確認してください。
必要に応じて表情モーションも書き出しておきます。
- Cubism Viewerを起動
- 既存の参照設定を保つため「モデル名.model3.json」を開く（編集前に一式をバックアップ）
- 「ファイル」＞「追加」＞「表情」を選択し、表情名（例：「shy」）を入力
- 作成した表情を選択してパラメータの値を設定
- 「ファイル」＞「書き出し」＞「すべての表情モーション」を選択
- 「animation」フォルダに「shy.exp3.json」として書き出し
TwitterツイートにLive2Dを埋め込む方法：Unityでの作業
続いてUnityでの設定作業です。
当時の公式例はUnity 2019.3.1f1とCubismSdkForUnity-4-r.1を使用しています。以下はその旧環境の記録です。
新規制作では使用するSDKが正式対応するUnityを選びます。最新SDKと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ウィンドウへ配置し、再生ボタンを押して動作を確認します。
表示を確認したら、再生ボタンをもう一度押して再生モードを終了してから、以下のコンポーネント設定へ進んでください。
Unity 2019.3の公式マニュアルのとおり、再生モード中にシーンへ加えた変更は、再生を終了すると元に戻ります。
以下で「Live2DのPrefabを選択」とある箇所では、Project内の元アセットではなく、Hierarchy内に配置したモデルを選択します。
※エラーはモデルだけでなく、SDK・Unityの組み合わせや読み込み設定でも起こります。Consoleの最初のエラーから確認してください。
※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を指定します。
続いてHierarchy内のモデルを展開し、その下のParametersを開いて、次に挙げるパラメータIDのオブジェクトを選択します。
当時の公式設定手順では、WindowsはCtrl、macOSはCmdを押しながらクリックして複数選択し、それぞれにCubism Look Parameterを追加します。
視線追従させたいパラメータをすべて選択し、「Cubism Look Parameter」コンポーネントを追加します。
- ParamAngleX
- ParamAngleY
- ParamEyeBallX
- ParamEyeBallY
設定完了後に再生ボタンを押し、Gameビュー上でマウスクリックした方向に顔や視線が追従することを確認します。
Live2DのPrefabを選択します。
「Cubism Sample Controller」コンポーネントを追加します。
「Body Animation」に、Idle.motion3.jsonからUnityへ取り込まれたAnimation Clipを割り当てます。
「Tap Body Motions」のSizeを「1」に設定し、ActionのAnimation Clipを割り当てます。元のJSONファイルを直接指定する項目ではありません。
※複数登録した場合はランダムに再生されます。
再生中にキャラクターをタップ（クリック）すると、登録したモーション（Action）が再生されます。
Live2DのPrefabを選択します。
「Cubism Expression Controller」コンポーネントを追加します。
「Expression List」項目に「モデル名.expressionList」を割り当てます（※Viewer上で事前設定・書き出しが必要です）。
画面キャプチャ等から、ビルド解像度に合わせた512×512pxの画像「thumbnail.png」を作成して用意します。
プロジェクトをWebGL形式で書き出し（ビルド）します。
再生モードが終了していることを確認し、「File」→「Save」で設定済みのシーンを保存してから、Build Settingsを開きます。
「Scenes In Build」に複数のシーンがある場合は、今回のモデルを配置したシーンを先頭の番号0に置くか、不要なシーンのチェックを外します。
- 「Scenes In Build」にLive2Dを配置した対象シーンを登録
- Platform一覧から「WebGL」を選択し、「Switch Platform」を実行
Player Settingsを開き、以下の各項目を設定します。
- Width：512
- Height：512
- WebGL Template：Minimal
公式ガイドには2024年4月に「Decompression Fallback」を有効にする補足が追加されています。ホスト側の圧縮配信設定と合わせて確認し、設定後にBuildします。
出力先として「WebGL」フォルダを新規作成し、そのフォルダを選択して保存します。
ビルド完了時に生成されるファイル構成は以下の通りです。
出力先のWebGLフォルダ内に「index.html」が生成されます。
以下の埋め込みコードは旧作例です。twitter:playerとtwitter:imageには自分の公開先のHTTPS URLを指定し、画像とWebGL本体をそれぞれ直接開けることを確認します。公開URLが決まった後にHTMLを修正した場合は、再デプロイが必要です。現行Unityの生成HTMLを古いUnityLoaderのコードで置き換えないでください。
TwitterツイートにLive2Dを埋め込む方法：サーバー（Netlify）での作業
ビルドした成果物を公開するため、サーバー（Netlify）に配置します。
事前にNetlifyのアカウントを作成しておきます。
無料枠のあるホスティングサービスです。現在の料金・利用枠は契約時期とプランで異なり、無制限の無料公開を保証するものではありません。
ログイン後、管理画面のデプロイエリアへ「WebGL」フォルダごとドラッグ&ドロップします。
アップロード完了後に自動デプロイが開始されるため、完了まで待機します。
TwitterツイートにLive2Dを埋め込む方法：Twitterでの作業
最後にTwitter（X）へ投稿して表示を確認します。
タイムライン上で意図通りカード表示されるかテストします。
以下は当時利用したCard Validatorのリンクです。現在のプレビュー機能は未確認です。まず公開URLをブラウザーで開き、モデルの描画と操作、開発者ツールの読み込みエラーを確認してください。カード用メタ情報の取得とX上の実際の表示は別に確認します。
https://cards-dev.twitter.com/validator
公開ページを確認したうえでURLを投稿します。リンク先で動くことと、投稿内で操作できることは別です。以下の埋め込みは2020年当時の投稿で、現在の動作保証ではありません。
Live2Dでのモデル制作は、ほかにも書いています。
TwitterツイートにLive2Dを埋め込む方法まとめ
WebGLのページ公開までと、Xのカード内での表示・操作は分けて確認してください。旧Unityや旧カードの画面どおりに進むことは保証できません。
Cubism SDKのコンポーネントが用意されているため、適切な設定を行えばWebGL出力からWeb展開まで対応可能です。
Unityの操作に慣れていない場合は、まずエディタの基本操作を習得してから挑戦することをおすすめします。
よくある質問：ツイートにLive2Dを埋め込む方法
この記事は、何をする方法ですか？ 全体の流れは？
2020年のUnity・Cubism 4 SDKでWebGLを作り、当時のTwitterカードへ表示した記録です。モデル準備、Unity設定、Web公開、カード設定の順で進めました。現在のX内での操作は未確認です。
プログラミングは必要ですか？ 何を用意しますか？
旧サンプルの範囲ではC#の追加実装は不要ですが、Unity操作とHTML編集は必要です。元記事の組み合わせはUnity 2019.3.1f1とCubism SDK 4-r.1です。新規制作ではSDKの対応Unityを確認してください。
Live2D Cubism Editor側では、何を準備しますか？
組み込み用モデル、テクスチャ、物理演算、待機・アクションのモーションを用意します。1024pxの1枚アトラスは作例の設定です。Viewerで既存データを編集する前に一式をバックアップします。
Unityでは、どんな設定をしますか？
Original Workflowを有効にしてモデル一式を取り込み、Prefabと各種リストを設定します。Body AnimationとTap Body Motionsへ渡すのは取り込み後のAnimation Clipです。詳細は当時のSDKに依存します。
Unityで再生したときにエラーが出たら？
Consoleの最初のエラーを確認し、モデル参照、モーション、SDKとUnityの対応関係を切り分けます。既存コンポーネントを重複追加していないかも確認してください。
公開と、ツイートでの表示は、どうしますか？
WebGLを公開し、URLを直接開いて描画・操作を確認します。カード用URLを変更したら再デプロイします。Netlifyの無料枠には上限があり、Xのカード表示は公開ページの動作とは別の確認事項です。
今も、この手順で動きますか？
現行環境では未検証です。Live2D公式は2024年に補足していますが、そのカード利用の見解はX社の承認ではないと記しています。現在の規約と表示条件を確認し、必要ならWebページへのリンク共有として利用してください。
