今までにないサイトを作る：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で試してみて下さい。

フレームワーク紹介
- MVC frameworks

- CSS frameworks
  - LESS
  - Sass

様々な解像度のデバイスに対応する為に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