html5_game.md

html5_game.md

HTML5はゲームに不向き！？これからのソーシャルゲームと最新技術勉強会

HTML5の現在

HTML5.jp-WEST 村岡さん

HTML5とは

• HTML4の次の仕様
• ベンダーが各自で実装してる状況
• まだ、LastCallです

  これ越えたらトントン拍子で進むんじゃない？

HTML5の特長

• マシンリーダブルな文章構造

  RobotなんかがWebを読み取りやすく

• Webアプリケーションに必要な多くな機能が実装される

  今日はこっちですよ

現在注目の機能

• Canvas API
• CSS3

これらが特にゲーム開発に注目されている

Canvas API

• JavaScriptでグラフィック描画が可能
• グラフィック系のプラグインが不要
• スマートフォンでは鉄板
• 簡単高機能
• 最近はスマホでもハードウェアアクセラレート対応

デモの披露

• 名画をグニグニするやつとか
• マウスに追随してライトが動くアレとか

CSS3

• 簡単高機能。そもそもプログラミングじゃないしね
• 要素を高度に装飾・移動・変形できる
• モノによってはCanvasより高速
• iOSでは以前より、ハードウェアアクセラレートを適用している

デモの披露

• フォトスライドとか
• パナソニックのラムダッシュっていうヒゲ剃りのランディング。パララックス。

つかいどころ

最近PVが多くなってきたデバイスのWebブラウザ まあ、スマートデバイスです

スマートデバイスな理由

• 売れてるし
• WebブラウザでFlashが動作しない
• HTML5非対応ブラウザが無い
• PCよりも急速にニーズが高まってる
• HTML5技術でアプリ開発する手段が豊富

経験談

• ブラウザ毎に実装や動作が違う
• 詳細な動作検証と開発技術のチョイスに工数がかかる
• 言ってるとおりに動かない
• Androidを窓から投げすてたい

やっぱりProgressive Enhancementなんかのコンセプトをクライアントとの折衝で生かさないとね。

閑話休題

Flashって死ぬの？→もうそろそろクリエイターはダマされないように

そもそも得意分野が全然違うものを並べて比較してもしょうがないでしょう…。

なぜHTML5なの？

次世代のWeb標準技術かつ制作技術のひとつ。 新しく選択肢が増えた事によって技術の取捨選択がやりやすくなるから。

適材適所で行きまっしょい

質問タイム

• どのAndroid端末がCanvas動かなかったの？

  IS03だとCanvasがまともに動かない…常駐プロセスが多くてメモリの圧迫してたから

• WHATWGとW3Cの関係について

  気にしなくて良し

ソーシャルゲーうを支える技術の今後とHTML5の可能性

(株)gloops 池田さん 普段はC#でサーバー側とかjs書いたり

• PC向けSNS nendo
• 渋谷クエスト
• 2010年2月からソーシャルゲーム参入
  • 提供ゲーム18本
    • 大戦乱三国志クエスト
    • マジゲート

ソーシャルゲームを取り巻く環境の変化

SNSがプラットフォームとしてAPIを提供

• サービス規模
  • 提供ゲーム18本
  • 月間PV150億

現況はガラケーとスマホで半分位のPV。新しいコンテンツは逆転。

• スマホではHTML5/JavaScript/CSS3が使える。
• 表現力の向上
• ガラケーの100KB制限の解除

スマホ対応のこれまで

• ガラケーのゲームがプレイできるように
• 相互運用性の重視

スマホ対応のこれまで

• 既に半数はスマホ
• Ajax対応
• ガラケーの移植は減る
• 海外展開はスマホのみ
• マーケットにはWebViewアプリも多い

フロントエンドの高速化

• 回線速度は上がってない
• サーバー側のみでは最適なUXは提供できない
  • フロントエンドの最適化重要
• 表示速度でCVも下がる

HTML5の重要性が高まっている

ゲーム内容も進化する

• 元々ソシャゲは非同期

ゲーム内容も進化する

• 個人プレイ
• チーム戦
• リアルタイム

リアルタイムの同期型ゲームはチャット機能なんかも必要になる

HTML5とは？

• セマンティックス
• ストレージ
• デバイスアクセス
• 接続性
• マルチメディア
• 3D、グラフィックス

アプリ開発基盤として充実してきた

HTML5の良いところ

第1部参照

HTML5の悪いところ

第1部参照

ネイティブ vs Webアプリ

総合的にはメリットあり

広がるHTML5

Windows8のMetroアプリとか。 gloopsさんでもゲームを試作。

ゲームのデモ

ソーシャルゲームにおけるHTML5

HTML5の利用シーン

• オフラインストレージ
  • Cache Manifest→静的ページ用
  • jsonリクエストのキャッシュ
  • ページのプリフェッチ
• キャッシュ戦略やCDNが重要
  • Expireヘッダ・CDN利用・リダイレクト/リクエスト削減
• 接続性・プロトコル
  • Android標準ブラウザはWebSocket非対応(4.1以前)
  • Commetとかの利用
• マルチメディア
  • ここはまだ強くない
  • 同時に再生できる音源は1つ
  • プリロード不可
  • ネイティブ実装とWebViewの連携がベター
• グラフィックス - Flash - FlashはiOSは非対応 - Androidも4.1から非対応 - アニメーションの開発環境が豊富になってきた 1 Flash以外のアニメーションツール 2 Flash変換 3 js/css3での実装

Flash以外のツール

• 直感的にアニメータが使える
• ツールの習得コストがかかる
• ロジックが絡む演出が困難
• 出力がCSS3だとAndroid周りでバグも多くなる

Flash変換

• 制作ツールがFlash
• ガラケーとの両立
• 変換制度の問題があったりもする
• 実行時の読み込みや解析に時間かかる場合も
• 利便性とのトレードオフ

js/css3での実装

• 自由度高い
• 直感的なアニメーションが難しい
• プログラマとの分業が問題になる

jsゲームエンジンの分類

• DOMベース

  高レベルAPI

• Canvasベース

  低レベルAPI

• WebGL

  モバイルブラウザでは非対応

代表的なjsゲームエンジン

• enchant.js

  基本DOMだがCanvas/WebGLも対応

• Arctic.js

  Canvas

• easel.js

  Canvas

gloopsではどれを使うか

Flash変換。理由はガラケートの両立

Flash変換型の問題

• EXGame

  解析の問題

• swify

  読み込みの問題

読み込み速度は非常に重要。

今後に向けて

• ガラケー非対応
• より本格的になる
• タブレットにあわせた最適化

タブレット市場も拡大

• アメリカではタブレット普及
• タブレットは年齢層高い

ゲームUI/アニメーション

• Flashベースではそのうち勝負できない
• 用途に応じて技術の選択

新しい技術が出てくるというのは、業界の進化

サービスのPDCAは続く

• スマホ向けのUI/UXの追求
• フロントエンドの高速化

質問タイム

• HTML5に期待する事は？

  開発環境の充実により属人性を排除できないかなー

• 画像多用と高速化の両立はどのように？

  既存のWeb高速化の手法使う