Live2dのモデルをホームページに表示させたいです

sui · 9月 2021

主題の件でご相談させていただきます。

普段はホームページ制作をしている者のなですが、お客様よりホームページリニューアルで「Live2D」のモデルを表示させたいというお話をいただいております。

調べてみたところJavaScript（TypeScript）で実装が可能なようですが、私自身Live2Dの導入や実装はやったことがありません。
他の方のブログや記事、公式のチュートリアルなどでテスト表示させようと色々やってみましたが、上手くできませんでした。

【現状について】
SDK for Webのチュートリアルを拝読し、「Webサンプルのビルド」までを行いサンプルを画面に表示させるところまではできました。
ですがWebサイト上に構築する方法が分からず、先へ進めずにいます。

【実現したいこと】
WordPressテーマ（SnowMonkey）にLive2Dを数カ所実装させることが目標です。

どなたか知っている方がいましたら、是非お力添えいただけますと幸いです。
何卒よろしくお願い申し上げます。

y_a_s_(Dev Staff) · 9月 2021

@sui さん

ご質問誠にありがとうございます。
Live2Dスタッフでございます。
いつも弊社製品をご愛顧くださり誠にありがとうございます。

・WordPressテーマ（SnowMonkey）にLive2Dのモデルを表示させることは可能でしょうか。

後述で掲載いたしますが、SnowMonkey上でのJavaScriptの実行で参考になる記事がSnowMonkey公式から案内されています。
これを使用しwebpackにバンドルしたSDK for Webをつなぎこむ方法が考えられますが、SnowMonkeyでの動作保証及び確認はしておりません。

・ホームページ制作におけるLive2Dモデルの実装方法についてのマニュアル等がございましたら、是非ご教示いただけると有り難いです。

下記のマニュアルが参考になるかと思います。

・JavaScript から Web版 SDK を使う
https://docs.live2d.com/cubism-sdk-tutorials/use-sdk-in-js/

・CubismWebFrameworkを直接利用する方法
https://docs.live2d.com/cubism-sdk-manual/use-framework-web/

・Cubism 4 SDK for Web でモデルを表示する
※公式ドキュメントではないですが、参考になるかと思います。
https://qiita.com/tatsuteb/items/2c00855968acd9f4b7df

SnowMonkey上でのJavaScriptの実行についてはこちらのマニュアルが参考になるかと思います。
・Snow Monkey のカスタマイズ
https://snow-monkey.2inc.org/2019/02/04/my-snow-monkey-plugin/

sui · 9月 2021

@y_a_s_(Dev Staff) さん

こちらお返事をいただきまして、誠にありがとうございます。

SnowMonkeyテーマでLive2Dのモデルを表示させる方法について、
webpackにバンドルしたSDK for Webをつなぎこむ方法がある旨承知いたしました。
こちら調べていただきありがとうございます...！

また、ホームページ制作におけるLive2Dモデルの実装方法についてのいくつかのURLもご紹介いただきありがとうございます！

①JavaScript から Web版 SDK を使う方法について
②Frameworkを利用する方法について
③モデルを表示する方法について
④SnowMonkeyでのJavaScriptの実行方法について

上記4点を確認し、実際に表示ができるよう試してみようと思います。
また行き詰まった際はご質問させていただきます。

この度はご回答いただきありがとうございました！

Live2dのモデルをホームページに表示させたいです

コメント