2021-05-13 11:08:19 +08:00
|
|
|
# \[Beta Version\] Cubism Web Samples
|
2018-09-20 15:13:14 +08:00
|
|
|
|
2020-01-30 17:32:33 +08:00
|
|
|
Live2D Cubism 4 Editor で出力したモデルを表示するアプリケーションのサンプル実装です。
|
2018-09-20 15:13:14 +08:00
|
|
|
|
2020-01-30 17:32:33 +08:00
|
|
|
Cubism Web Framework および Live2D Cubism Core と組み合わせて使用します。
|
2018-09-20 15:13:14 +08:00
|
|
|
|
2021-05-13 11:08:19 +08:00
|
|
|
**本 SDK は、 Beta バージョンとなります。先行して新機能を取り込んでいるため、不安定な挙動を示す場合がございます。安定した製品をお求めの方は、公式サイトから配布されている正式版のパッケージ又は `develop` `master` ブランチをご利用ください。**
|
|
|
|
|
|
|
|
|
|
**[Beta Version] の SDK の不具合、各種ご意見等に関しましては、 Live2D コミュニティ にてご連絡ください。直接のコードに対する指摘、修正等は、直接 Pull requests としてご投稿ください。**
|
|
|
|
|
|
2018-09-20 15:13:14 +08:00
|
|
|
|
2020-01-30 17:32:33 +08:00
|
|
|
## ライセンス
|
|
|
|
|
|
|
|
|
|
本 SDK を使用する前に、[ライセンス](LICENSE.md)をご確認ください。
|
|
|
|
|
|
2019-11-14 20:41:22 +08:00
|
|
|
|
2020-01-30 17:32:33 +08:00
|
|
|
## 注意事項
|
2019-11-14 20:41:22 +08:00
|
|
|
|
2020-01-30 17:32:33 +08:00
|
|
|
本 SDK を使用する前に、[注意事項](NOTICE.md)をご確認ください。
|
2019-11-14 20:41:22 +08:00
|
|
|
|
|
|
|
|
|
2019-09-02 18:14:43 +08:00
|
|
|
## ディレクトリ構成
|
2018-09-20 15:13:14 +08:00
|
|
|
|
2019-09-02 18:14:43 +08:00
|
|
|
```
|
|
|
|
|
.
|
2020-01-30 17:32:33 +08:00
|
|
|
├─ .vscode # Visual Studio Code 用プロジェクト設定ディレクトリ
|
|
|
|
|
├─ Core # Live2D Cubism Core が含まれるディレクトリ
|
|
|
|
|
├─ Framework # レンダリングやアニメーション機能などのソースコードが含まれるディレクトリ
|
2019-09-02 18:14:43 +08:00
|
|
|
└─ Samples
|
2020-01-30 17:32:33 +08:00
|
|
|
├─ Resources # モデルのファイルや画像などのリソースが含まれるディレクトリ
|
|
|
|
|
└─ TypeScript # TypeScript のサンプルプロジェクトが含まれるディレクトリ
|
2019-09-02 18:14:43 +08:00
|
|
|
```
|
2018-09-20 15:13:14 +08:00
|
|
|
|
|
|
|
|
|
2019-09-02 18:14:43 +08:00
|
|
|
## Live2D Cubism Core for Web
|
2018-09-20 15:13:14 +08:00
|
|
|
|
|
|
|
|
モデルをロードするためのライブラリです。
|
|
|
|
|
|
2019-09-02 18:14:43 +08:00
|
|
|
当リポジトリではCubism Coreを管理していません。
|
|
|
|
|
[こちら](https://www.live2d.com/download/cubism-sdk/download-web/)からCubism SDK for Webをダウンロードして、
|
|
|
|
|
Coreディレクトリのファイルをコピーしてください。
|
2018-09-20 15:13:14 +08:00
|
|
|
|
|
|
|
|
|
2020-01-30 17:32:33 +08:00
|
|
|
## 開発環境構築
|
2018-09-20 15:13:14 +08:00
|
|
|
|
2020-01-30 17:32:33 +08:00
|
|
|
1. [Node.js] と [Visual Studio Code] をインストールします
|
|
|
|
|
1. Visual Studio Code で **本 SDK のトップディレクトリ** を開き、推奨拡張機能をインストールします
|
|
|
|
|
* ポップアップ通知の他、拡張機能タブから `@recommended` を入力することで確認できます
|
2018-09-20 15:13:14 +08:00
|
|
|
|
2020-01-30 17:32:33 +08:00
|
|
|
### サンプルデモの動作確認
|
2018-09-20 15:13:14 +08:00
|
|
|
|
2020-01-30 17:32:33 +08:00
|
|
|
コマンドパレット（*View > Command Palette...*）で `>Tasks: Run Task` を入力することで、タスク一覧が表示されます。
|
2018-09-20 15:13:14 +08:00
|
|
|
|
2020-01-30 17:32:33 +08:00
|
|
|
1. タスク一覧から `npm: install - Samples/TypeScript/Demo` を選択して依存パッケージのダウンロードを行います
|
|
|
|
|
1. タスク一覧から `npm: build - Samples/TypeScript/Demo` を選択してサンプルデモのビルドを行います
|
|
|
|
|
1. タスク一覧から `npm: serve - Samples/TypeScript/Demo` を選択して動作確認用の簡易サーバを起動します
|
|
|
|
|
1. ブラウザの URL 欄に `http://localhost:5000/Samples/TypeScript/Demo/` と入力してアクセスします
|
|
|
|
|
1. コマンドパレットから `>Tasks: Terminate Task` を入力して `npm: serve` を選択すると簡易サーバが終了します
|
2018-09-20 15:13:14 +08:00
|
|
|
|
2020-01-30 17:32:33 +08:00
|
|
|
その他のタスクに関してはサンプルプロジェクトの [README.md](Samples/TypeScript/README.md) を参照ください。
|
2018-09-20 15:13:14 +08:00
|
|
|
|
2020-01-30 17:32:33 +08:00
|
|
|
NOTE: デバック用の設定は、`.vscode/tasks.json` に記述しています。
|
2018-09-20 15:13:14 +08:00
|
|
|
|
2020-01-30 17:32:33 +08:00
|
|
|
### プロジェクトのデバック
|
2018-09-20 15:13:14 +08:00
|
|
|
|
2020-01-30 17:32:33 +08:00
|
|
|
Visual Studio Code で **本 SDK のトップディレクトリ** を開き、 *F5* キーを入力すると Debugger for Chrome が起動します。
|
2018-09-20 15:13:14 +08:00
|
|
|
|
2020-01-30 17:32:33 +08:00
|
|
|
Visual Studio Code 上でブレイクポイントを貼って Chrome ブラウザと連動してデバックを行うことができます。
|
2018-09-21 17:38:31 +08:00
|
|
|
|
2020-01-30 17:32:33 +08:00
|
|
|
NOTE: デバック用の設定は、`.vscode/launch.json` に記述しています。
|
2018-09-21 17:38:31 +08:00
|
|
|
|
2018-09-20 15:13:14 +08:00
|
|
|
|
2020-01-30 17:32:33 +08:00
|
|
|
## SDKマニュアル
|
2018-09-21 17:38:31 +08:00
|
|
|
|
2020-01-30 17:32:33 +08:00
|
|
|
[Cubism SDK Manual](https://docs.live2d.com/cubism-sdk-manual/top/)
|
2018-09-20 15:13:14 +08:00
|
|
|
|
|
|
|
|
|
2020-01-30 17:32:33 +08:00
|
|
|
## 変更履歴
|
2018-09-20 15:13:14 +08:00
|
|
|
|
2020-01-30 17:32:33 +08:00
|
|
|
当リポジトリの変更履歴については [CHANGELOG.md](CHANGELOG.md) を参照ください。
|
2018-09-20 15:13:14 +08:00
|
|
|
|
|
|
|
|
|
2020-01-30 17:32:33 +08:00
|
|
|
## 開発環境
|
2018-09-20 15:13:14 +08:00
|
|
|
|
2020-01-30 17:32:33 +08:00
|
|
|
### Node.js
|
2018-09-20 15:13:14 +08:00
|
|
|
|
2021-05-13 11:08:19 +08:00
|
|
|
* 15.14.0
|
|
|
|
|
* 14.16.1
|
|
|
|
|
* 12.22.1
|
|
|
|
|
* 10.24.1
|
2018-09-20 15:13:14 +08:00
|
|
|
|
|
|
|
|
|
2019-09-02 18:14:43 +08:00
|
|
|
## 動作確認環境
|
2018-09-20 15:13:14 +08:00
|
|
|
|
2019-09-02 18:14:43 +08:00
|
|
|
| プラットフォーム | ブラウザ | バージョン |
|
|
|
|
|
| --- | --- | --- |
|
2021-03-09 10:36:43 +08:00
|
|
|
| Android | Google Chrome | 88.0.4324.181 |
|
|
|
|
|
| Android | Microsoft Edge | 46.01.4.5140 |
|
|
|
|
|
| Android | Mozilla Firefox | 86.1.1 |
|
|
|
|
|
| iOS / iPadOS | Google Chrome | 87.0.4280.77 |
|
|
|
|
|
| iOS / iPadOS | Microsoft Edge | 46.1.10 |
|
|
|
|
|
| iOS / iPadOS | Mozilla Firefox | 32.0 |
|
|
|
|
|
| iOS / iPadOS | Safari | 604.1 |
|
|
|
|
|
| Linux | Google Chrome | 89.0.4389.72 |
|
|
|
|
|
| Linux | Mozilla Firefox | 86.0 |
|
|
|
|
|
| macOS | Google Chrome | 88.0.4324.192 |
|
|
|
|
|
| macOS | Microsoft Edge | 88.0.705.81 |
|
|
|
|
|
| macOS | Mozilla Firefox | 86.0 |
|
|
|
|
|
| macOS | Safari | 14.0.2 |
|
|
|
|
|
| Windows | Google Chrome | 88.0.4324.190 |
|
|
|
|
|
| Windows | Internet Explorer 11 | 20H2(19042.685) |
|
|
|
|
|
| Windows | Microsoft Edge | 88.0.705.74 |
|
|
|
|
|
| Windows | Mozilla Firefox | 86.0 |
|
2020-01-30 17:32:33 +08:00
|
|
|
|
|
|
|
|
Note: 動作確認時のサーバの起動は `./Samples/TypeScript/Demo/package.json` の `serve` スクリプトを使用して行っています。
|
