Cubism 4 SDK for Unity お試しガイド (4/4)

Live2D公式

2020年5月1日 14:42

←前の記事：Cubism 4 SDK for Unity お試しガイド (3/4)

前回まででプロジェクトの作成は完了しました。
そのプロジェクトをサーバへアップロードします。
ここまできたらあと一息です！

9. サーバーにアップロードしよう！

まずアップロード先のサーバーの準備をします。
サーバーの準備方法はWebARの記事と同じですので、そちらを参考にしてください。
参考：その４　ARを動かすためのサーバを準備しよう！

サーバーの準備ができたら、Unityから書き出したWebGLのプロジェクトをアップロードします。

用意したNetlifyに「index.html」があるフォルダーごとドラッグアンドドロップします。

アップロードすると上記のようになります。

画面に表示されている、このURLはのちほど設定追加やツイート時に使用します。
あらかじめこのURLをコピーしてメモ帳等にペーストして、いつでも使用できるように準備しましょう。

次はTwitterのツイートに表示させるための設定を行います。

10. 書き出したファイルに設定を書き加えよう！

ツイートにWebGLの画面を表示するには、Twitterのカードを利用します。
カードの詳細については公式のガイドをご覧ください。

UnityからWebGL用に書き出したフォルダーを開き、その中にある「index.html」をメモ帳等で開きます。

「index.html」を開くと、中は以下のように書かれています。

<!DOCTYPE html>
<html lang="en-us">
 <head>
   <meta charset="utf-8">
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Unity WebGL Player | New Unity Project</title>
   <link rel="shortcut icon" href="TemplateData/favicon.ico">
   <link rel="stylesheet" href="TemplateData/style.css">
   <script src="TemplateData/UnityProgress.js"></script>
   <script src="Build/UnityLoader.js"></script>
   <script>
     var unityInstance = UnityLoader.instantiate("unityContainer", "Build/WebGL.json", {onProgress: UnityProgress});
   </script>
 </head>
 <body>
   <div class="webgl-content">
     <div id="unityContainer" style="width: 960px; height: 600px"></div>
     <div class="footer">
       <div class="webgl-logo"></div>
       <div class="fullscreen" onclick="unityInstance.SetFullscreen(1)"></div>
       <div class="title">New Unity Project</div>
     </div>
   </div>
 </body>
</html>

ここにツイートに表示するのに必要な情報を追加します。
追加する情報は以下の８つの項目です。

    <meta name="twitter:card" content="player">
    <meta name="twitter:site" content="@[TwitterアカウントID]">
    <meta name="twitter:title" content="[タイムラインに表示するタイトル]">
    <meta name="twitter:description" content="[説明文]">
    <meta name="twitter:image" content="[サムネイル画像のURL]">
    <meta name="twitter:player" content="[サーバのURL(コピペしたもの)]">
    <meta name="twitter:player:width" content="[横幅]"> 
    <meta name="twitter:player:height" content="[高さ]">

追加する項目の１行目は、Twitterのタイムラインに表示するものの種類を指定します。
ここでは「player」を指定します。

    <meta name="twitter:card" content="player">

２行目にはTwitterのアカウントIDを記載します。

    <meta name="twitter:site" content="@[TwitterアカウントID]">

３行目は、タイムライン上で表示させるタイトルを記載します。

    <meta name="twitter:title" content="[タイムラインに表示するタイトル]">

４行目には説明文を記載します。
何を書いても構いませんが、文章が長いと見切れてしまう可能性があるので気をつけてください。

    <meta name="twitter:description" content="[説明文]">

５行目にはサムネイルの画像のURLを記載します。
先程「index.html」と同じ場所に入れてあれば、あらかじめコピペしたURLの後ろに「/[サムネイル画像のファイル名]」を追加したものになります。
あらかじめそのURLをブラウザーで開き、ちゃんとそのURLで画像が表示されるか確認しておきましょう。

    <meta name="twitter:image" content="[サムネイル画像のURL]">

６行目には予めコピペしておいたURLを記載します。

    <meta name="twitter:player" content="[サーバのURL(コピペしたもの)]">

７、８行目には、コンテンツの横幅と高さを記載します。

    <meta name="twitter:player:width" content="[横幅]">
    <meta name="twitter:player:height" content="[高さ]">

実際に追加した場合は以下のようになります。

<!DOCTYPE html>
<html lang="en-us">
 <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | demo</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
    <script src="TemplateData/UnityProgress.js"></script>
    <script src="Build/UnityLoader.js"></script>
    <script>
    var unityInstance = UnityLoader.instantiate("unityContainer", "Build/Builds.json", {onProgress: UnityProgress});
    </script>

    <meta name="twitter:card" content="player">
    <meta name="twitter:site" content="@live2d_dev">
    <meta name="twitter:title" content="Cubism SDKサンプル">
    <meta name="twitter:description" content="ツイート上でモデルを触ることができます。">
    <meta name="twitter:image" content="https://eager-babbage-7c9842.netlify.app/thumbnail.png">
    <meta name="twitter:player" content="https://eager-babbage-7c9842.netlify.app">
    <meta name="twitter:player:width" content="500">
    <meta name="twitter:player:height" content="500">

 </head>
 <body>
    <div class="webgl-content">
    <div id="unityContainer" style="width: 490px; height: 490px"></div>
    <div class="footer">
    <div class="webgl-logo"></div>
    <div class="fullscreen" onclick="unityInstance.SetFullscreen(1)"></div>
    <div class="title">demo</div>
    </div>
    </div>
 </body>
</html>

中身を書き換えたら「index.html」を保存して、サーバーに再度アップロードしてファイルを上書きします。

Netlifyのページ上部「Deploys」をクリックします。

先ほどアップロードしたフォルダを再度ここにドラッグアンドドロップします。

これですべての設定が完了です！

11. さあTweetしよう！

さきほどのURL（サーバーが生成したURL。メモ帳にコピペしたもの）を含めてツイートすれば、タイムライン上でCubismのモデルをリアルタイムに表示して触ることができます。

Twitterの機能を利用して、CubismのモデルをPC上で触れるようにしてみました！#Live2D https://t.co/HbZwZ8Hc7O
— Live2D 開発チーム (@live2d_dev) May 1, 2020

Tips：
書き換えた「index.html」をサーバーにアップロードしてからツイート上に表示できるようになるまで、少し時間がかかります。
すぐに反映させたり、「index.html」に書き込んだ内容が間違っていないかなどの確認をしたい場合は、Twitterのプレビュー用のページにさきほどのURLを入力して「Preview card」をクリックすると、画面右側にプレビューが表示されます。

また、ツイート内に一緒に画像等を含めてしまうとそちらが優先されてしまうことがありますので注意してください。

要望、問題などはコミュニティの「一般」タグまでお願いします。

この記事が気に入ったらサポートをしてみませんか？