CodeIQ MAGAZINECodeIQ MAGAZINE

WebGLで3DCG描画!jThreeを活用した次世代型カタログ「きゃん家!」技術解説(1) #5jcup

2014.07.16 Category:技術コラム Tag: , , , , ,

  • 25
  • このエントリーをはてなブックマークに追加
kanchi

「HTML5 Japan Cup 2014」に、きゃんち・増井チームは作品を応募できたのか?

実はなんときゃんちが3Dモデルとなって花王製品を紹介してくれる次世代型3DCGカタログを作ったんです。

新たに加わった開発メンバーのjThreeの松田さんに、その開発の舞台裏と技術解説をレポートしてもらいました。
by 馬場美由紀 (CodeIQ中の人)

「きゃん家!」のチーム発足から応募まで

jThreeの松田光秀です。
今回ご縁があり、「チームきゃん家!」に参加することになりました。
この連載では「きゃん家!」開発の裏側について解説していきたいと思います。

「きゃん家!」は「HTML5 Japan Cup(以下5jCup)」の花王賞を狙って開発したウェブアプリです。賞のテーマである「花王製品カタログサイトを徹底的にリ・デザインしてください!」に沿って次世代型3DCGカタログを作り上げました。

当初はサイバーエージェント賞のテーマ「スマフォで気軽に1タップで遊べるゲーム」を狙っていて、「動くウォーリーを探せ」「惑星をひとつだけ弾き飛ばしてどれだけ銀河系を破壊できるか」のようなアイデアが出ていました。

しかしサイバーエージェント賞はすでに応募作品が多く、競争率が高いと考え、方針転換することを提案しました。5jCupのハッカソンイベントでクライアントと一緒に議論したことや、3DCGの生活空間できゃんちが音声でに花王製品を紹介してくれるカタログなら賞を取れる!という想いが伝わり、一気にコンセプトが固まりました。

きゃんちさん&増井雄一郎さんと私に加えて、3Dきゃんちモデル作成に「コープスパーティー」をはじめ、ヒットゲームを創出しているチームグリグリの小川幸作さん、ロゴ作成に株式会社ソーシャルデザイニング研究所の櫻井仙幸さん、コピーライティングにADK・山本洋平さん、3Dモーション作成に野尻澪勇さんをメンバーに迎えることができました。

特に小川さんが締切まで短期間だったにも関わらず、3Dきゃんちを作り上げてくれたおかげで、完成度の高い状態で審査に間に合わせることができました。そして、きゃんちのマネージャーである佐々木貴大さんのアイデアで、「きゃん家!」というネーミングも決まったのです。

きゃん家!

次世代型3DCGカタログ「きゃん家!

次世代型3DCGカタログ「きゃん家!」とは?

「きゃん家!」の技術的な特徴としては、以下が挙げられます。

  • WebGLでモデルのきゃんち(喜屋武ちあき)さんとステージ(一般家屋)を3DCG描画
  • 花王製品の画像を平面の3Dオブジェクトとして、家中に配置しマウスオーバーとクリックに対応
  • マウスオーバーで花王製品の名前を、クリックで詳細を音声で紹介
  • 20種ある花王製品すべてを見つけ出してクリックすると、きゃんちからのメッセージが聞けるゲーム要素搭載

唯一のサーバーサイド処理「音声合成」

自然で可愛らしい発音を可能とする高度な音声合成API

「きゃん家!」はHTMLから製品データまで全て静的ファイルで構成されており、クライアントサイドのJavaScriptで動的処理が行われています。

そんな中で唯一、テキストを音声合成する処理だけはサーバーサイドで行っています。

音声合成にはNICT(独立行政法人 情報通信研究機構)の主任研究員・杉浦孔明さんより「非モノローグ音声合成API」をご提供いただきました。

音声合成の結果を保存してレスポンスを高速化

このAPIはブラウザから直接GET通信で結果を取得することもできますが、「きゃん家!」では自サーバーにテキストを送り、PHPでAPIにリクエストを送っています。

なぜ、よけいな中間処理を増やしているのでしょうか。

それは、「音声合成APIへのリクエストを減らし、レスポンスを高速化するため」です。

このAPIはリアルタイムとは思えないほどに自然で可愛らしい女の子の声を合成することが可能なのですが、処理には少なからず時間がかかります。(とはいっても日本語50文字当たり0.5秒くらいなので十分高速ですが)

そこで、ユニークなリクエストごとに1度だけ音声合成して結果をブラウザに返すと同時に自サーバーのファイルに保存し、2回目以降はそのファイルの内容を返すようにしています。

これで当然レスポンスは速くなるし、ご提供いただいたAPIサーバーによけいな負荷をかけずに済むようになります。

ファイル名をハッシュ化してシンプルに保存

ここで問題になるのがファイルの保存方法です。

サーバーサイドではブラウザからリクエストがあるたびに、それに対応する音声ファイルがすでに存在するかどうかを判定し、なければ音声合成してあればファイルの内容を返す処理を行う必要があります。

ここをいかにシンプルにできるか。理想はテキストをファイル名にする方法です。

音声はWAV形式なので「テキスト」+「.wav」で保存しておけばファイルが存在するかどうか確かめるだけでユニーク判定ができます。

しかしどんなテキストが来るかわからないものをファイル名にするのは危険ですし、長さにも制限があってこの方法は実用的ではありません。

テキストとファイル名の対応リストを作るのも手ですが、これだけのためにファイルが1つ増えるのは気持ちが悪いですね。

そこでテキストをハッシュ化してファイル名にする方法を採用しました。リクエストがあるたびにハッシュ化するコストがかかるものの、処理自体は非常にシンプルになりました。

▲きゃん家!の音声ファイル(テキストをmd5でハッシュ化したファイル名を使用している)

音声をIEでも再生できるように加工する

音声合成した結果はWAV形式のため、IEなど一部ブラウザでは再生することができません。

通常はLAMEというソフトを使ってサーバー上でMP3に変換するのですが「きゃん家!」ではlibmp3lame.jsというJavaScriptライブラリを使ってブラウザ上でMP3に変換してIEでも音声の再生を可能にしています。

少々重たい処理ではありますが、JavaScriptでのマルチスレッド処理を可能にするWeb Workerを駆使することで、メインスレッドを停止させることなく高速変換しています。

今回のまとめ

このプロジェクトを通じて、Webプログラムで結果を出すために重要だと感じていたポイントをまとめておきます。

1)3DCGの強みを活かした新たなWebカタログを作る

私の強みはやはり3DCGを扱えることです。3DCGのゲームはもう当たり前になってしまいましたし、Unityの台頭でちょっと凝ったくらいのクオリティではユーザーにインパクトを与えることはできなくなりました。「スマホ」という縛りを考えると高負荷なWebGLを使うことは裏目に出ます。

ところが「製品カタログ」という市場を考えると、3DCGで表現することは、斬新で実際に他の作品とは差別化ができています。「きゃん家!」のように、日常生活の中での製品利用シーンを具体的にイメージさせられる新しいWebカタログが、今後たくさん登場するかもしれません。

2)できるだけブラウザで処理してサーバーの負荷を減らす

一昔前まではできることの方が少なかったJavaScriptも、今となってはできないことの方が少ない言語にまで進化してきました。

音源のフォーマット変換のような高度な処理もブラウザで解決することで、該当ユーザー(今回の場合はIEユーザー)のPCに負荷がかかるものの、サーバーの負荷が減って安定稼働することで全体として快適なサービスを提供できるようになります。

「きゃん家!」のようにほぼ静的ファイルだと、サーバー維持にかかるコストも減らせるので、安価あるいは無料で運営することも容易になるでしょう。

⇒次回、「3DきゃんちをWebGLで描画する」に続く

<<関連レポート>>

寄稿者プロフィール jThree合同会社 松田 光秀氏
松田 光秀氏jQueryの記法で操作できるWebGLライブラリ「jThree」の開発者でjThree合同会社の代表。JavaScriptのスキルのみで平成26年2月に1人で起業する。平成元年生まれの24歳で現役高校生(平成26年5月時点)。

Twitter: 松田光秀

松田光秀さんからJavaScript問題が出題中!

今回記事を書いてくれたjThreeの松田光秀さんから、JavaScript問題を出題していただきました。
ぜひチャレンジしてくださいね!

受付締切:2014年8月18日 AM10:00まで
挑戦はこちらから

自分の書いたコードを誰かに評価されたいエンジニアは、けっこう多い?

ITエンジニアのための実務スキル評価サービス『CodeIQ』で出題されている「コード銀行」問題に挑戦すると、あなたのコードが評価されます。

評価(1)出題者からの評価  ⇒評価フィードバック例を見る

  • 企業ではたらくという観点からあなたのコードをチェックします
  • フィードバックされた観点をふまえてコードを書くと世の中の企業にとって「いいコード」が書けるようになります

評価(2)企業からの評価  ⇒評価フィードバック例を見る

  • 「あなたと一緒にはたらきたい」という企業からスカウトが届きます
  • あなたのコードが社会でどこまで通用するか、リアルな評価が得られます

興味を持った方はこちらからチャレンジを!

  • 25
  • このエントリーをはてなブックマークに追加

■関連記事

ブラウザ戦争、HTML5の標準化、ブラウザの未来──歴史を語り尽くすWebブラウザ談義【後編】... 「ブラウザ戦争」とは何だったのか Webブラウザの歴史を辿ると、歴代のブラウザが、技術的にもビジネス的にも激しい覇権競争を繰り広げたことが、結果としてWebの普及を促したことがわかる。 94年12月にリリースされた Netscape Navigatorは順調にバージョンを重ねるが、これに対抗して...
インターネットとWebの誕生が、いつか知ってる?──歴史を語り尽くすWebブラウザ談義【前編】... 今あらためてWebブラウザの歴史を辿る意味 Webブラウザはたかだか四半世紀の歴史とはいえ、世界を変えたこの25年はあまりにも劇的で、細かい歴史は忘れられていることも多い。 しかし、Webブラウザの歴史をたどることで、インターネット技術がどのように発展してきたのか、そしてこれからはどのようにそれ...
Azureで仮想マシンを作り、リモートデスクトップ接続で『Visual Studio』を使ってみよう... AzureならインストールすることなくVisual Studioが使える!? 現在、CodeIQで展開されているキャンペーン問題、日本マイクロソフト・エバンジェリストである物江修さんが出題する「HTML5+JSで落ちものゲームを作ってみよう」と、同じくエバンジェリストの高橋忍さんが出題する「きゃん...
HTML5、C#を使ったスマートフォン・タブレット向けアプリ開発を基礎から学ぼう!... 中学1年生になったシュン君とゲームアプリ問題に挑戦! タブレットやスマートフォンのエンタープライズ環境への導入が増えているとはいえ、そのような端末向けのアプリケーション開発に携わっているITエンジニアはまだまだ少ない。 今回のキャンペーン問題は、「HTML5/JavaScript」と「XAML/...
「Webこそがゲーム・プラットフォームである」──Mozilla開発者が語るWebブラウザ戦略 vo... Webこそがプラットフォームである──Mozillaが描くゲーム流通戦略 ──WebGLを活用して、Mozillaのゲーム・プラットフォームチームは、どのようなビジネスを展開しようとしているのでしょうか? Martin Best氏(以下、Best):前回も指摘したように、Webはゲーム開発の重要...
「WebGLでWebゲームの世界を変える」──Mozilla開発者が語るWebブラウザ戦略 vol.... WebGLでWebゲームの世界が変わる ──あらためてWebGLがどんな技術なのか、紹介していただけますか。 Martin Best氏(以下、Best):これからのWeb世界で、どんなゲームが可能になるか。私とVladimirは、Mozillaのゲーム・プラットフォーム部門で一緒に仕事をしながら...

今週のPickUPレポート

新着記事

週間ランキング

CodeIQとは

CodeIQ(コードアイキュー)とは、自分の実力を知りたいITエンジニア向けの、実務スキル評価サービスです。

CodeIQご利用にあたって
関連サイト
codeiq

リクルートグループサイトへ