Webサンプルのビルド

[最終更新日:2019/01/18]

このページでは、Live2D Cubism 3 SDK for Webに同梱しているTypeScriptのサンプルプロジェクトを、Visual Studio Codeでコンパイルするまでの手順を説明します。

 

ダウンロードするもの

Live2D Cubism 3 SDK for Web

SDK本体です。「公式ダウンロードページ」からダウンロードします。

Node.js

JavaScriptの実行環境です。

TypeScript

TypeScriptのコンパイラです。

Visual Studio Code

今回使用する開発環境です。言語はTypeScriptを利用します。

 

インストール作業

1、Visual Studio Code

Visual Studio Codeをインストールします。
TypeScriptがコンパイルできるように設定してください。

 

また、拡張機能として以下をインストールします。

・Debugger for Chrome

Google Chromeで実行確認するために使用します。

・Live Server

簡易ローカルサーバーを立ち上げるために使用します。

インストールが完了したら、拡張機能を有効にするためにエディタを再起動します。

 

 

2、Node.js

ビルドに必要な各パッケージの管理、JavaScriptの実行環境として、Node.jsをインストールします。
公式サイトにあるインストーラを使用してインストールします。
インストール完了後、コマンドプロンプトを開き、

と入力し、npmコマンドが使用できるか確認します。

 

 

3、TypeScript

TypeScriptを扱うために、コンパイラをインストールします。
公式サイトに従いインストールします。
インストール完了後、コマンドプロンプトを開き、

と入力し、tscコマンドが使用できるか確認します。

 

 

4、WebPackなど、ビルドに必要な各パッケージ

TypeScriptやJavaScriptの依存関係などを解決するために、必要なパッケージをインストールします。
コマンドプロンプトを開き、package.jsonがあるディレクトリに移動し、

と入力し、必要なパッケージをインストールします。

 

 

ビルド

VisualStudioCodeのメニューバーから Terminal > Run Task...  を実行を選択します。

 

タスク一覧が表示されるので、npm run build-sampleを選択し、ビルドを実行します。

 

ビルド完了後、CubismWebSamples/Sample/TypeScript/Demoフォルダ内にdistフォルダが作成され、中にJavaScriptファイルが出力されます。

実行

ビルドが無事成功したら、次は実行の手順になります。

実行確認するためには、ローカルサーバーを起動する必要があります。

Visual Studio Codeの一番下にあるフッターに表示されているGo Liveをクリックします。

 

または、確認したいhtmlファイルを右クリックし、Open with Live Serverを選択します。

 

Go LiveがPort: 5500に変わっていれば起動しています。

 

Live Serverが起動していることを確認したら、F5キーの押下、またはメニューバーの Debug > Start Debugging を選択し、実行します。
初回のみ構成を選択するよう求められるのでremote web site with sourcemapを選択します。

 

ブラウザが起動、画面が出てくれば成功です。

Copyright © 2019 Live2D Inc.