★お知らせ(2023/12/27)
いつもLive2D公式コミュニティをご利用いただき誠にありがとうございます。
本コミュニティは2023年12月27日 11:00をもって閉鎖いたしました。
今後の運営はすべて新Live2D公式クリエイターズフォーラムに移行します。
閉鎖に伴い、以下機能は利用不可となります。
・アカウントの新規作成
・トピック投稿、返信
たくさんのご利用誠にありがとうございました。

新Live2D公式クリエイターズフォーラムは以下バナーよりご利用いただけます。
Live2D公式クリエイターズフォーラム

なお、本コミュニティに投稿されたトピックはすべて残りますが、今後削除する可能性がございますので予めご了承ください。
閉鎖に関するお問い合わせにつきましてはLive2D公式クリエイターズフォーラムへご連絡ください。

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

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

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

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

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

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

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

コメント

  • @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/
  • @y_a_s_(Dev Staff) さん

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

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

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

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

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

    この度はご回答いただきありがとうございました!
コメントするにはサインインまたは登録して下さい。