【Mac各機種への対応状況について】
現在、Cubism EditorはApple M1チップ搭載機種には対応しておりません。
詳細は 動作環境 をご参照ください。
関連するお問い合わせへの対応はこの文章をもって代えさせていただきます。
また、Cubism SDKは現在公開中の製品全てにおいてApple M1チップ搭載機種及びmacOS 11.0 Big Surには対応しておりません。
Cubism 製品のマニュアル・チュートリアルはこちら
 
Cubism Editorマニュアル    Cubism Editorチュートリアル    Cubism SDKマニュアル    Cubism SDKチュートリアル

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点を確認し、実際に表示ができるよう試してみようと思います。
    また行き詰まった際はご質問させていただきます。

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