強火で進め

このブログではプログラム関連の記事を中心に書いてます。

リアルタイムに道を作るプレイヤーとその上を車で走るプレイヤーの対戦ゲーム「Roadeo」

Unity Unity3d

プレイヤーの一人はリアルタイムで道を作り、もう一人はその上を車で走るというUnityで作られた対戦ゲーム。

もちろん、普通のレースゲームとは異なり、毎回コースは異なるものになります。上手いゲームデザインですね。面白そう!!

Roadeo: A game about a road versus a car | Joystiq
http://www.joystiq.com/2011/11/02/roadeo-a-game-about-a-road-versus-a-car/

今までにないサイトを作る：HTML5 による最新ウェブアプリ

GDD2011 HTML5

Google Developer Day 2011に参加しました。

参加したセッションのメモを書いときます。

今までにないサイトを作る：HTML5 による最新ウェブアプリ(Eric Bidelman) @petele

東京 - Google Developer Day 2011
http://www.google.com/intl/ja/events/developerday/2011/tokyo/agenda/session_1003.html

スライド

※ここで解説しているものChromeのみ対応しているものが多数、有ります。上手く動作しなかった場合はChromeで試してみて下さい。

  • 様々な解像度のデバイスに対応する為にCSSのMedia Queryを使う

【使用例】
CSSでの記述。

<link rel="stylesheet" media="all" href="/static/css/base.min.css" />
<link rel="stylesheet" media="only screen and (max-width: 800px)" 
  href="/static/css/mobile.min.css" />

JavaScriptでの記述。

if (window.matchMedia('only screen and (max-width: 480px)').matches) {
  // Asynchronously provide experience optimized for phone
} else if (window.matchMedia('only screen and (min-width: 481px) and ' +
                             '(max-width: 1024px)').matches) {
  // Asynchronously provide experience optimized for table or smaller screen
} else {
  // Asynchronously provide full screen experience
}
  • formfactor.jsがお勧め
  • The Power Of The Cloud+Native & Desktop Richness=Modern Web Apps
  • 複数のファイルをアップロード

【記述例】

<input type="file" id="dir-select" webkitdirectory />

※【筆者注】現状ではChromeのみ対応している様です。Safariでは通常のファイルアップロードと同じ扱いになりました。

【記述例】

<input type="file" id="dir-select" webkitdirectory />

※【筆者注】自分でも試してみました。利用方法についてこちらを参照下さい。

  • ブラウザ上でターミナルを再現したデモの紹介

URLはこちら。 help と入力すると入力可能なコマンドが表示されます。 3d コマンドがお勧め。フォルダ構造が3Dで表示され、 mkdir や rm を実行するとリアルタイムで反映されます。

【記述例】

<input type="text" x-webkit-speech />

以下の様な記述で認識した音声の文字とその信頼度の確認が可能です。

          document.getElementById("speech-input-textbox").addEventListener("webkitspeechchange", function(event) {
            var speechresults = document.getElementById('speech-results');
            speechresults.innerHTML = '';
            for (var res in event.results) {
              speechresults.innerHTML += 'Utterance: ' + event.results[res]['utterance'] + '<br />Confidence: ' 
                + event.results[res]['confidence'] + '<br /><br />';
            }
          }, false);

試しに「テスト」としゃべってみたら以下の様な結果になりました。

Utterance: テスト
Confidence: 0.5331328

Utterance: てすと
Confidence: 0

Utterance: test
Confidence: 0

Utterance: undefined
Confidence: undefined

Utterance: undefined
Confidence: undefined

ユーザへの通知を使うにはユーザの許可が必要です。以下の様な確認が表示されるので「許可」選択された場合に使える様になります。

この様にシンプルにテキストで通知したり、

HTMLを使って動画を含めると言う事も可能です。

HTML5 のオフライン機能

GDD2011 HTML5

Google Developer Day 2011に参加しました。

参加したセッションのメモを書いときます。

(追記 2012/01/14)
Googleから動画が公開されました。
http://www.youtube.com/watch?v=MY06xnSZyaw:moive
※このセッションで解説された内容に一部変更点があるとのことなので、こちらも合わせて参照下さい。
(追記ここまで)

HTML5 のオフライン機能(Eiji Kitamura) @agektmr

東京 - Google Developer Day 2011
http://www.google.com/intl/ja/events/developerday/2011/tokyo/agenda/session_1001.html

スライド

動的なデータの保存
  • Web Storage (localStorage / sessionStorage)
  • IndexedDB / WebSQL
localStorage
  • シンプルなキーバリュー型
  • 文字列しか保存できない
sessionStorage
  • localStorage とほぼ同じ。ただし...
  • ブラウザを閉じると消されてしまう
  • 新しいウィンドウやタブで開くと、別のセッションとして扱われる (Cookie のようには使えない)
  • その為、入力フォームを含んだページなどを複数のウィンドウで開いてもプログラム内での整合性が壊れる事は無い
オリジン(Origin)

※【筆者注】オリジンについては以前にこのブログでも解説した事が有ります。

HTMLでオリジン(Origin)とは何を意味しているのか - 強火で進め
http://d.hatena.ne.jp/nakamura001/20110113/1294937964

IndexedDB とは
  • スキーマがなく、SQL も使わない
  • 現在は Chrome と Firefox のみが実装。ただし他のメジャーブラウザも対応予定
  • 非同期の API
WebSQL DB
  • 非推奨 (今後この仕様が発展することはありません)
  • モバイル機器がターゲットの場合は有効
  • Android/iPhoneで使える
  • Lawnchair
静的リソースの保存
  • App Cache
    • HTML や CSS、JavaScript を手軽にキャッシュできる
    • モバイルでのサポート率が高い

【記述例】
使用する側のHTMLでの記述

<html manifest="example.appcache">... </html>

mainfestファイルの記述

CACHE MANIFEST
# 2010-11-17-v0.0.1

# 明示的にキャッシュされるエントリ
CACHE:
index.html
stylesheet.css
images/logo.png

# ユーザーがオフラインの場合は static.html が表示される
FALLBACK:
/ /static.html

# ユーザーがオンラインの必要があるリソース
NETWORK:
*
App Cache を使いこなす
  • App Cache を指定する HTML は無条件にキャッシュされる
  • manifest の文法が間違っていると、キャッシュされない(validator での確認がおすすめ)
  • キャッシュ指定されたファイルが1つでも404なら全くキャッシュされない
  • manifest ファイルの Content-Type は text/cache-manifest
  • manifest ファイルを一文字でも変更すれば自動的にバージョンアップ
  • manifest ファイル生成ツール manifestR
  • appcachefacts.info
バイナリデータの保存
  • File System API
    • ディレクトリを持ったファイルシステム上にデータをファイルとして保存できる
    • 好きな位置に保存出来るわけでない
    • URL を使って直接参照することができる

【URLの例】

filesystem:http://example.com/temporary/myfile.png
データの同期
  • オンラインバージョンとオフラインバージョンは、起動時の処理を分ける
  • サーバーサイドの機能を補完するファイルを用意しておき、オフライン時に FALLBACK させる

※【筆者注】FALLBACKは先ほど出てきたmainfestファイルの記述例では以下の部分で指定しています。

# ユーザーがオフラインの場合は static.html が表示される
FALLBACK:
/ /static.html
データの同期: Shared Worker を使う方法

サーバーと直接通信する代わりに、オンライン時に通信を肩代わりし、変更点をローカルに保存してくれる Worker を用意し、これとやりとりをする。

navigator.onLine - 通信状況の確認
  • navigator.onLineで現在、ネットワークに繋がっているかどうかをチェック出来る

【記述例】

if (navigator.onLine) {
  console.log('ONLINE!');
} else {
  console.log('Connection flaky');
}
  • リスナーに登録しておいネットワークの状態が変わった時に発生するイベントで処理を行う事も可能

【記述例】

window.addEventListener('online', function(e) {
  // サーバーとデータを再同期
}, false);

window.addEventListener('offline', function(e) {
  // サーバーとのやり取りをキューに追加
}, false);
オフライン機能のデバッグ

Chromeではアドレスバーに以下を入力する事で使える便利な機能が有る。

※ chrome://quota-internals/ は現在、Devチャンネル版だと壊れている

クォータ(使用可能なファイルやメモリサイズ)
  • こちらを参照
  • Quota APIは今の所、ドキュメントがほぼ無い状態
  • Chrome ウェブアプリなら無限のクォータを得ることができます
  • manifest.json ファイルにパーミッション "unlimitedStorage" を追加することで、クォータを無制限にすることができます。

(2011/11/16 追記)
講演者の北村 英志さんのGoogle+にて以下のコメントが有りました。

ChromeのQuota管理機能について記事を書きました。この内容は #gdd11jp の講演内容と矛盾しています。その辺りは追ってお知らせします

https://plus.google.com/107085977904914121234/posts/ALyGEqdCVE6
(追記ここまで)

便利な情報
Polyfill

Polyfillとは新しいAPIなどの代わりに使用可能なライブラリなどの事。

その他のリソース

Using the HTML5 Filesystem API: A True Filesystem for the Browser

Using the HTML5 Filesystem API: A True Filesystem for the Browser

関連情報

オフライン系APIを解説した本。

徹底解説HTML5APIガイドブック オフライン系API編

徹底解説HTML5APIガイドブック オフライン系API編