タグ: Webデザイン

Adobe MuseでLive2Dを表示しつついい感じのホームページが作りたい[2]

[前編はこちら]

しんかい鎮守府3_028

備忘録的な手順(後編)

前回までにSimpe.htmlの中身をMuse上で再現出来ました。
そこで今回はSimpe.jsを確認しましょう。

Simple.js の中身を確認

全283行…

sappariwakaran

そんな訳で今は下手に変更しない方が良いだろうとの結論ありきの議論の結果、とりあえず置いておくことに。

Muse上にJavaScriptファイルを読み込ませる

SimpleサンプルのSimple.htmlを確認すると、以下のように二種類のスクリプトが使われている。

        <!-- Live2D Library -->
        <script src="../../lib/live2d.min.js"></script>
        
        <!-- User's Script -->
        <script src="src/Simple.js"></script>

そこで、ひとまずはMuse上で[Simple.js]と[live2d.min.js]を読めるようにする方法を考える。
が、MuseはWebプログラム分からなくてもサイトが作れるのが売りのソフト。
逆に言えばプログラムに関する機能が無い!

CIMG0696<マジカ

なんとか方法はないものか…とググるもののMuseの情報はあまりに多くなく見つけることができなかった。
仕方なくMuse内の機能を色々試していた所、[アップロードするファイルを追加]という機能を発見!
ScreenShot00039

これを使えばLive2D用のJavaScriptファイルをMuse側で認識できるようになるのではないか。
ということで早速ファイルを追加してみました。

ScreenShot00040

追加するとアセット内にJavaScriptファイルが追加されます。
この[アップロードするファイルを追加]機能はサーバー上にアップロードする際はどのようになっているのかを確認します。
Muse右上▶パブリッシュ▶HTML形式で書き出し を行います。
ScreenShot00046

ScreenShot00045

書き出しが完了したら、ドキュメントのMuseExportフォルダにWebサイト一式のデータが出力されました。

ScreenShot00044

中を確認するとLive2D用のJavaScriptファイルはscriptsフォルダの中に…ありません!!

nandato

[アップロードするファイルを追加]したファイルはファイルの種類に関係なくassetsフォルダに格納されるようです。

ScreenShot00043

ともかくアップロード一式に入っているのでMuse側からも認識出来る状態っぽいです。


 

l8510
l1498

 /assets/Simple.js
という階層になるということは、前回にMuseに埋め込んだタグも修正が必要ということになりますね。

<!-- Live2D Library -->
<script src="../../lib/live2d.min.js"></script>

<!-- User's Script -->
<script src="src/Simple.js"></script>

上記を以下のように修正します。

<!-- Live2D Library -->
<script src="assets/live2d.min.js"></script>

<!-- User's Script -->
<script src="assets/Simple.js"></script>

ScreenShot00047
これでMuse内のHTML挿入機能からJavaScriptが読み込めるようです。

Live2Dファイルの読み込み

Live2Dファイルである .moc と テクスチャ.png をMuseに読み込ませます。
方法は先ほどのJavaScriptファイルと一緒で、[アップロードするファイルを追加]から行います。

ScreenShot00048-2

ここで一つ問題が…
Live2Dモデルをmocファイルに出力するとテクスチャはフォルダの中にまとめられています。
しかしMuseアセットではどうもフォルダを作ることが出来ない(もしくは私が知らない)為に、assetsフォルダの中にそのまま配置されます。

ScreenShot00049

ファイルパスの修正

Simple.jsファイル 46行目
にLive2Dモデル設定項目があります。

    /*
    * Live2D モデル設定。
    */
    this.modelDef = {
        
        "type":"Live2D Model Setting",
        "name":"haru",
        "model":"assets/haru/haru.moc",
        "textures":[
            "assets/haru/haru.1024/texture_00.png",
            "assets/haru/haru.1024/texture_01.png",
            "assets/haru/haru.1024/texture_02.png"
        ]
    };

ここのファイルパスをMuse用に修正する必要があります。
まずは先ほどのテクスチャ用フォルダが作れない問題ですが、ここのファイルパスで直接テクスチャを指定することで問題は解消されました。

        "textures":[
            "assets/texture_00.png",
            "assets/texture_01.png",
            "assets/texture_02.png"
        ]

同様にLive2Dモデルファイルのパスも修正しましょう。

        "model":"assets/haru.moc",

ファイルパスの修正が必要な箇所は今のところここだけのようです。

l8828

[アップロードするファイルを追加]の注意点

仕様なのかバグなのか無知なだけかはわかりませんが、アセット内は小文字英数字しか使えないらしく、HTML形式で書き出しを行うとSimple.jsなどのファイル名がsimple.jsと自動で修正されていました。
元のファイルはそのままなので、書き出しを行う歳に修正されているようです。

ScreenShot00050 ScreenShot00051

問題あるか私はわかりませんでしたが何かしらの不具合が出るのも嫌なので、私は元ファイルを小文字英数字に変更し追加しなおしました。
関連してMuse内のHTML挿入機能にて書いたファイル名も忘れないうちに修正しておきました。

<!-- Live2D Library -->
<script src="assets/live2d.min.js"></script>

<!-- User's Script -->
<script src="assets/simple.js"></script>

プレビュー

Muse右上のプレビューを押してみます。

ScreenShot00053 l5641

ということで無事に表示出来ました。

今回作ったデータは以下のURLにアップロードしておきます。
もし不具合やら不備やらありましたら教えてください。

http://test.hatyati.jp/muse-live2d/

20140219_160904_Android-e1410817356756-975x1024 <よろしくにゃ

最後に

なにわともあれ、Adobe Museを使用してLive2Dを表示しつつWebサイトを構築することが出来そうです。
まだまだ初歩的なレベルですが、同じような事を考えている人の一助になればいいなと思います。

では最後に一言。

Live2DもMuseも何でこんなに情報が少ないんだ!!

l34142

 

次回は自分の作ったLive2Dモデルに差し替えを行いたいと思います。

Adobe MuseでLive2Dを表示しつついい感じのホームページが作りたい[1]

という願望…
しんかい鎮守府3_028

前知識

タイトルの様な願望あっても、残念ながら私の知識は10年位前の中学生の時に近くの図書館でHTML4辞典を借りてきて、必死にメモ帳にタグ打ちした程度で止まっている。
「JavaScript? あ、うん、わかるわかる。えーっと…うん…Javaなスクリプトだよね_(:3 」∠)_」 程度のものでまるで知らない(´・ω・`)

そんな私でもWebサイトが作れるツールがあるらしい!
それがAdobe Muse!
l21555

先に言っておくと、別にホームページビルダーでもBiNDでもフリーソフトでも良かったのだろうが、同人誌作ったりする関係上Adobe Creative Cloudに入り月々5千円きちんと上納している。
せっかく上納金収めているのだから使わない方が損だよね! でもDreamweaver扱えるほどWebプログラミング分からないし…
そんな訳でAdobe Museを使ってみることにしたわけですよ奥さん!
CIMG0927 <ドヤァ

と言ってもMuse自体も今回初めて触るので、ぶっちゃけよくわからないのだ
iconaa_0x0_7d1261356fd21e989b8a9b0d57278e7c<やだ、私の知識少なすぎ…?

目標

とりあえずまずはLive2DがMuseで表示できるのかが何よりも問題だろう。
意気込んで始めたはいいけれど、まったく対応していなければ意味が無い(´・ω・`)

Live2DをWebサイトで公開しようと思った場合、現在3つほどの手段がある。

  • GIFアニメに書き出して貼り付ける
  • Flashで作成してサイトに埋め込む
  • WebGLを用いて表示する

GIFアニメは既に行ったことがある。以下参考画像。

Flashも考えたが、Flashは今後無くなりそうな勢いなので今から勉強する気が起きなかった。
そこで今回はWebGLにて表示を目指すことに。また無謀なことを

試行錯誤の結果

とりあえずLive2D公式が公開しているWebGLSDK内のサンプルをAdobe Museにて表示させる事に成功しました!

ScreenShot00013

yaruo_kita

備忘録的な手順(前編)

さて結果を先に見せたところで手順を復習がてら載せていきます。

下準備

まずはLive2DのWebGL関連のSDKをダウンロードします。
こちらは個人なら無料で使用できますが、[Live2D Cubism SDK 試用申込み] を行わなければなりません。

ScreenShot00018

 

ScreenShot00019 ▶ ScreenShot00020


申請するとメールにてURLが送られてきます。
専用ページの左メニューにあるSDK 2.0内のWebGLをクリックします。

ScreenShot00022
 ダウンロードページに行きます。
2015/05/11現在 Ver2.0.02_2が最新っぽいのでこれをダウンロードしました。

ScreenShot00024

ZIPファイルをダウンロード後、解凍すると以下の様なファイルが出てきます。

ScreenShot00025

シンプルなサンプル

Sampleフォルダを見てみると現在3つのサンプルが内包されているようです。
今回はSimpleサンプルをMuseで表示させるのを目標にすることにしました。

ひとまずsimple.htmlの中身を見てみると以下のようになっている。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
            <title>Live2D Simple</title>
        </meta>
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=4.0">
        </meta>
    

    </head>

    <body onload="Simple()">
        <canvas id="glcanvas" width = "512px" height="512px" style="border:dashed 1px #CCC"></canvas>

        <div id="myconsole" style="color:#BBB">---- Log ----</div>
        
        <!-- Live2D Library -->
        <script src="../../lib/live2d.min.js"></script>
        
        <!-- User's Script -->
        <script src="src/Simple.js"></script>
    </body>
</html>
l24359

大丈夫、このくらいなら10年前の知識とさほど変わってないはずだ。

とりあえず関係ありそうな項目は14~24行の中身のようです。

Muse起動

Museを起動します。
まだMuseについてもあまりよくわかっていませんが、とりあえずわからない箇所はデフォルトのまま進めることにして、以下の新規作成[OK] ▶ ホーム[A-マスター]ページを開きます。

ScreenShot00027ScreenShot00028

以下のようにまっさらなページが表示されます。

ScreenShot00029 u-nn iconaa_0x0_ff1dfc29b66dbc0eba6e4b942c027c76 piko

あーだこーだ試行錯誤は省くとして、オブジェクト▶[HTMLの挿入]にて行けるっぽい
ScreenShot00030

HTMLの挿入に以下をこぴぺしようと思いつきます。

    <body onload="Simple()">
        <canvas id="glcanvas" width = "512px" height="512px" style="border:dashed 1px #CCC"></canvas>
 
        <div id="myconsole" style="color:#BBB">---- Log ----</div>
        
        <!-- Live2D Library -->
        <script src="../../lib/live2d.min.js"></script>
        
        <!-- User's Script -->
        <script src="src/Simple.js"></script>
    </body>

しかしこの時、はちゃちに電流走る。

あくまでHTML挿入機能。
BodyタグなんてMuseが自動生成するに違いない。
<body></body>タグが2セットできるのではないか!?
詳しくないけどなんか<html>と<head>と<body>は1セットずつの方がいいような気がする…
gorone<「ブログ読者の中にWebプログラミングに詳しい方はいらっしゃいませんか~」

ので、ここでは15~23行のみを挿入する事に。
ScreenShot00031

ScreenShot00032

ここでプレビューを押してみると怪しげな枠線が表示された!!

rizumu-syobo-nキタコレ♪

しかし問題はBodyタグ内の要素…

onload="Simple()"

これだ(´・ω・`)

Simple()は呼び出す先の関数だろう。
ではonloadは呼び出す機能なのだろう。

とググりながら理解しつつ、
Adobe MuseではどうやらBodyタグ内で要素を付けられないということも理解
nandato
※方法ご存知の方いたら教えてください(´;ω;`)

なので代替方法を模索した結果(ググッた結果)、window.onload という類似機能があるとのこと。
こちらは<head>内に記載するような感じの事を解説サイトに書いてあるので、
「ページ▶ページプロパティ▶メタデータ▶<head>に挿入するHTML:」
にスクリプトを挿入した。
ScreenShot00033ScreenShot00035

 

<script type="text/javascript">
    window.onload = function(){ Simple() }
</script>

これでsimple.htmlファイルの内容をMuseで再現できるようです。

次回に続く

思ったよりも長くなってしまったので一度この辺りで区切り、続きは後から執筆したいと思います。

次回は[Simple.js]のJavaScriptファイルを若干いじりつつ、Live2Dモデルを表示するために行ったMuse側の操作について書きたいです(願望)

CIMG0105 <次回もよろしくにゃ