# SDK for Webを使用し個人HPにモデルを表示させる方法

**URL:** <https://creatorsforum.live2d.com/t/topic/2259>\
**Category:** 制作の質問やTips紹介\
**Tags:** 使い方\
**Created:** [2024 年 1 月 18 日午後 4:23 UTC](https://creatorsforum.live2d.com/t/topic/2259 "2024-01-18T16:23:48Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![かやの](https://avatars.discourse-cdn.com/v4/letter/%E3%81%8B/d78d45/32.png) [@かやの](https://creatorsforum.live2d.com/u/%E3%81%8B%E3%82%84%E3%81%AE)\
**Post date:** [2024 年 1 月 18 日午後 4:23 UTC](https://creatorsforum.live2d.com/t/topic/2259/1 "2024-01-18T16:23:48Z")

</div>

はじめまして！

Cubism SDK for Webを使って自作モデルを個人HP上に載せてみたいと思い、公式のワークショップ動画を見ながら、ローカルサーバー上では自作モデルを表示させるところまではできました。

しかし、私はHTMLやプログラミングなどのエンジニアとしての知識が全くないので、そもそも個人HPに表示させるためにどんなフォルダーやファイルが必要なのか、準備したファイルやコードをどうのように個人HPに反映させるのか…など基礎的なこともわからず困っています。  
(いくつかCubism SDK for Webを使用してみたという記事も見ましたが初心者向けの内容ではなかったので理解できませんでした…。)

お手数をおかけしますが表題の通り、SDK for Webを使用し個人HPにモデルを表示させる方法を教えて頂けると助かります。  
その他、エンジニアの知識0の初心者向けの記事やマニュアルなどあれば教えて頂きたいです。  
よろしくお願いします。

---

<div class="post-metadata">

**Author:** ![obs](https://avatars.discourse-cdn.com/v4/letter/o/c67d28/32.png) [@obs](https://creatorsforum.live2d.com/u/obs)\
**Post date:** [2024 年 1 月 27 日午後 3:56 UTC](https://creatorsforum.live2d.com/t/topic/2259/2 "2024-01-27T15:56:36Z")

</div>

こんにちは。  
正直コーディングの知識がないところからSDKを使うのは結構ハードルが高いです…  
私もWebはからっきしなのですが、まずHTMLの知識から始まりJavaScript(TypeScript) + Node.jsというフレームワークの知識を得る必要があります。  
また、私は個人HPを作ったことがないのですが、ちょっと調べた感じだと使用するツール（WordPressとか）でも差異がありそうです。

一応SDK for Webのサンプルの動作の仕組みとしては、Node.jsでサーバーを立ち上げ、index.htmlを表示しているだけ（index.htmlの中でサンプルを動かすためのスクリプトを動かしている？）と思うので、個人HPのhtmlの中にindex.htmlと同じスクリプトを動かす記述を含めて、node.jsのビルドを行えば動くのではないかと思うのですが、、、

もしWordpressを使っているならば、こういうプラグインもあるみたいですね。

> **[Live2DWebCanvas | 導入実績 | 株式会社Live2D](https://www.live2d.jp/showcase/live2dwebcanvas/)**

HTMLやCSS, Node.jsなどの知識をもし得たいのであればProgateという学習サイトがおすすめです。  
あまり力になれず申し訳ないですが、以上参考になれば幸いです！

---

<div class="post-metadata">

**Author:** ![かやの](https://avatars.discourse-cdn.com/v4/letter/%E3%81%8B/d78d45/32.png) [@かやの](https://creatorsforum.live2d.com/u/%E3%81%8B%E3%82%84%E3%81%AE)\
**Post date:** [2024 年 1 月 28 日午前 5:35 UTC](https://creatorsforum.live2d.com/t/topic/2259/3 "2024-01-28T05:35:28Z")

</div>

返信ありがとうございます！

やはり0からやるのは厳しいですよね…。  
特に凝った仕様にしたいわけではなく、ただの白背景のページにモデルを表示させるだけでよく。  
動画として公開するのでなく閲覧しているユーザーの手で実際にモデルを動かしてほしいだけでして。

ちなみにこちらはコーディングやNode.jsなどの知識がありHPを作れる方であれば、SDKを使ってモデルを表示させてくださいとお願いできるものなのでしょうか？  
知識のある方に依頼しようにも、どんなスキルを持った方に頼めばよいのかもわからず…。

---

<div class="post-metadata">

**Author:** ![yamanex](https://avatars.discourse-cdn.com/v4/letter/y/22d042/32.png) [@yamanex](https://creatorsforum.live2d.com/u/yamanex)\
**Post date:** [2024 年 1 月 28 日午後 1:36 UTC](https://creatorsforum.live2d.com/t/topic/2259/4 "2024-01-28T13:36:30Z")

</div>

はじめまして。

私もまだローカル環境で色々試してる段階で実際にWebサーバー上に公開して  
動作を確認した訳ではないので、もしかしたら違ってるかもしれませんが…

Node.js はビルドで使ってるだけっぽいので、公開するサーバーには特に  
Node.js等がインストールされていなくても動作するのではないかと思います。

> ローカルサーバー上では自作モデルを表示させるところまではできました。

ここまでできているんでしたら、  
Demoの下にある index.html  
Core/live2dcubismcore.js  
Resources  
dist/bundle.js （ビルドして作成されるファイル）

を適切に配置すれば、普通のレンタルサーバーでも、モデルが表示されるところまで  
できるのではないかと思います。

もし、例えばモデルをタップしたら特定のモーションを再生させる等、凝ったことを  
する必要がある場合は、Node.jsの知識がありSDKの仕様を仕様書やソースコードを  
読んで理解する必要があるかと思います。

---

<div class="post-metadata">

**Author:** ![かやの](https://avatars.discourse-cdn.com/v4/letter/%E3%81%8B/d78d45/32.png) [@かやの](https://creatorsforum.live2d.com/u/%E3%81%8B%E3%82%84%E3%81%AE)\
**Post date:** [2024 年 1 月 28 日午後 5:28 UTC](https://creatorsforum.live2d.com/t/topic/2259/5 "2024-01-28T17:28:14Z")

</div>

yamanexさん

返信ありがとうございます！

すみません、そもそもの前提知識が全くなく、

> Demoの下にある index.html  
> Core/live2dcubismcore.js  
> Resources  
> dist/bundle.js （ビルドして作成されるファイル）  
> を適切に配置すれば

と言うのは、個人HPのHTMLに配置すればよいのでしょうか？

ローカルサーバー上では自作モデルを表示させることはできましたがあくまで公式の動画を見よう見まねで説明されてるままに触ってみただけなので、0から始めるには何から着手していけばよいのかがわからない状況でして、  
TypeScriptやDemoなどのフォルダーは何のためのフォルダーなのか、これらはどうやって用意するのかなども分かっておりません…。

モデルをタップしたらモーションを再生させるところまでは作ってみたいんですが、こちらも難易度は高そうですね…。  
やりたいことは[公式ワークショップの動画](https://youtu.be/tQdkFvw7X-E?si=k_ddTuCqo2l9dJ7A)でサンプルとして使われているサイトと同じことを個人HPでもやりたいだけなんですが…

１から勉強しようにも、HTMLの勉強だけすればSDKを使えるようになるのかすらも分からなず、何から始めるべきなのか不明な状況でしたので、思った以上に必要な知識が多いことだけは理解できました…

> 凝ったことをする必要がある場合は、Node.jsの知識がありSDKの仕様を仕様書やソースコードを読んで理解する必要がある

他の方へも質問したのですが、SDKを使ってHPにモデルを表示させてくださいと依頼する場合は、 **HTMLとNode.jsに詳しい方** であれば問題なく作成してもらえるのでしょうか？

---

<div class="post-metadata">

**Author:** ![yamanex](https://avatars.discourse-cdn.com/v4/letter/y/22d042/32.png) [@yamanex](https://creatorsforum.live2d.com/u/yamanex)\
**Post date:** [2024 年 1 月 29 日午後 3:11 UTC](https://creatorsforum.live2d.com/t/topic/2259/6 "2024-01-29T15:11:20Z")

</div>

かやのさん、

そうだったんですね、かえって混乱させてしまうかもしれませんが、回答としては下記のような感じになると思います。

> 個人HPのHTMLに配置すればよいのでしょうか？

そうですね、おおよそそ通りだと思います。

> TypeScriptやDemoなどのフォルダーは何のためのフォルダー

ざっくりですが、bundle.js の元となるファイルが集まっているフォルダと認識していただければ大丈夫かと思います。  
なので、bundle.js が作成された後、実際にWebページに表示させる時にはTypeScriptやDemo 等のフォルダーは無くても大丈夫です。

bundle.jsが作成された後、最小構成でLive2Dのモデルを表示させることを試してみたところ

- index.html
- bundle.js (ビルドしてできたファイル)
- live2dcubismcore.js (Core内にあるファイル)
- Resources (Live2Dのモデル等があるフォルダ)

があれば、Live2Dのモデルが表示されることを確認しました。

> SDKを使ってHPにモデルを表示させてくださいと依頼する場合は、HTMLとNode.jsに詳しい方であれば問題なく作成してもらえるのでしょうか？

表示だけであれば、その知識がある方であれば作成できるのではないかと思います。  
（実際、依頼させる際に依頼者に確認は必要だと思いますが）

---

<div class="post-metadata">

**Author:** ![かやの](https://avatars.discourse-cdn.com/v4/letter/%E3%81%8B/d78d45/32.png) [@かやの](https://creatorsforum.live2d.com/u/%E3%81%8B%E3%82%84%E3%81%AE)\
**Post date:** [2024 年 1 月 31 日午後 2:22 UTC](https://creatorsforum.live2d.com/t/topic/2259/7 "2024-01-31T14:22:22Z")

</div>

yamanexさん

詳しくご丁寧にありがとうございます！  
ただすみません、先にお伝えした通り前提知識がないので改めてご確認なのですが、

手順としては

> - index.html
> - bundle.js (ビルドしてできたファイル) (最初から用意されているもの…？)
> - live2dcubismcore.js (Core内にあるファイル)
> - Resources (Live2Dのモデル等があるフォルダ)

１.上記データの入ったフォルダーの用意(これらを入れるフォルダー名に決まりはあるのでしょうか…？)  
２.Visual Studio Codeで上記フォルダーを開いてビルド  
３.ビルド済の上記フォルダーのコード？を個人HPのHTMLに配置

という流れでしょうか…？  
すみません、もしお手数でなければ個人HPのHTMLに配置するコード？はどこからコピペしてくるものなのかも教えて頂けると助かります＞＜

---

<div class="post-metadata">

**Author:** ![yamanex](https://avatars.discourse-cdn.com/v4/letter/y/22d042/32.png) [@yamanex](https://creatorsforum.live2d.com/u/yamanex)\
**Post date:** [2024 年 2 月 1 日午後 3:39 UTC](https://creatorsforum.live2d.com/t/topic/2259/8 "2024-02-01T15:39:54Z")

</div>

かやのさん

> bundle.js (ビルドしてできたファイル) (最初から用意されているもの…？)

Cubism SDK for Web で提供されているファイルのフォルダ構成は

- Core
- Framework
- Samples
  - TypeScript
    - Demo
      - src

  - Resources

になっていて、かやのさんがリンクで貼っていただいた公式ワークショップの動画の手順でビルドした後にSampleのフォルダ内を見ると

- Samples
  - TypeScript
    - Demo
      - dist  
bundle.js

が作成されると思いますが、この bundle.js のことを指していました。

なので、手順としては

1. 公式ワークショップの動画の手順の通りにビルドし、bundle.js を作成する
2. Live2Dモデルを表示するのに必要な下記ファイル、フォルダを個人HPのサーバーにアップロードする

- index.html
- bundle.js
- live2dcubismcore.js
- Resources

になるかと思います。

Demoフォルダの下にあるindex.htmlですが、提供されているフォルダ構成で動作するように書かれているので、個人HPに公開する時は少し修正する必要があるかもしれません。

> すみません、もしお手数でなければ個人HPのHTMLに配置するコード？はどこからコピペしてくるものなのかも教えて頂けると助かります＞＜

例えばですが、

- index.html
- js (フォルダ)
  - bundle.js
  - live2dcubismcore.js

- Resources (Live2Dモデル等があるフォルダ )

というフォルダ構成にした場合、index.htmlは下記のようになります。

```auto
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=1900">
  <title>TypeScript HTML App</title>
  <style>
    html, body {
        margin: 0;
        overflow: hidden;
    }
  </style>
  <!-- Pollyfill script -->
  <script src="https://unpkg.com/core-js-bundle@3.6.1/minified.js"></script>
  <!-- Live2DCubismCore script -->
  <script src = "./js/live2dcubismcore.js"></script>
  <!-- Build script -->
  <script src = "./js/bundle.js"></script>
</head>
<body>
</body>
</html>

```

実際にHTMLファイルを書いてみたり、個人HPのサーバーにアップロードした経験がないとちょっとイメージしにくいかもしれません。  
ので、おすすめの学習サイトや解説サイト等知ってれば共有したいのですが、その辺疎いので力になれなくて、すみませんm(\_ \_)m

---

<div class="post-metadata">

**Author:** ![かやの](https://avatars.discourse-cdn.com/v4/letter/%E3%81%8B/d78d45/32.png) [@かやの](https://creatorsforum.live2d.com/u/%E3%81%8B%E3%82%84%E3%81%AE)\
**Post date:** [2024 年 2 月 4 日午後 3:43 UTC](https://creatorsforum.live2d.com/t/topic/2259/9 "2024-02-04T15:43:43Z")

</div>

yamanexさん

お返事遅くなり申し訳ございません。  
とても丁寧にご説明頂きありがとうございます！！m(\_ \_)m

しかし現在は忙しくしており説明頂いた内容を実践できていなく…  
そのうち時間を見つけて試してみようかと思います！

その都度、不明点や疑問点が出たら引き続きこのスレを更新していくかと思いますので、  
また見かけた際はご助力頂けると助かります…！