2011年12月26日、
本稿では、
FileとWebの関係をもっと知るBlob, FileそしてFile System API
最初のセッションは、
File APIというのはウェブ上でローカルファイルを扱うAPIです。そして、
冒頭、
- Blob
- バイナリデータを扱うオブジェクト
- File
- Blobのサブクラスのようなもの、
ローカルファイルを扱うオブジェクト - FileReader
- Fileを読むためのオブジェクト
これらを使うことでウェブ上でファイルを扱うことが可能になります。
この中で一番重要なのはBlobです
次に、
このAPIは、
File System APIは以下の3つのオブジェクトが主に利用されるオブジェクトです。
- FileSystem
- サンドボックス化されたファイルシステム空間
- FileEntry
- ファイルを表す
- DirectorEntry
- ディレクトリを表す
FileSystemを開いて、
File System APIについての話の後は、
また、
はじめてのWeb Audio API
2番目の講演はGoogleの北村英志さんによる、
Web Audio APIとは、
まずはじめに、
- Audio Visualizer in 3D
- アップロードされたmp3を解析してビジュアライズしている
- WebGL City
- ヘリコプターの音が飛んでいる場所によって変わっていく
次にWeb Audio APIが、
Audioタグは音を扱うためのマークアップです。Audio Data APIは、
| Audioタグ | Audio Data API | Web Audio API | |
|---|---|---|---|
| 音声ファイルの再生 | ○ | ○ | ○ |
| 音の生成 | × | ○ | ○ |
| 用途 | BGMのような長く再生するもの | 効果音のような正確なタイミングが重要なもの | 効果音のような正確なタイミングが重要なもの |
| 音の編集方法 | × | 波形を計算しAPIに渡す | 元の音には手を加えず、 |
Web Audio APIは上記の票でも言及している通り、モジュールを付け足して音を作るという点が優れています。以下のようなモジュールを組み合わせることで音が鳴るようになっているそうです。
- AudioContext
- 基礎となるモジュール、
時間管理やオーディオの出力部を持つ - AudioBuffer
- 音源
- AudioNode
- ほぼ全てのモジュールのインタフェース
- AudioParam
- 自動化が可能なパラメータ制御を持つインタフェース
その後、
興味がある方は是非講演資料をご覧ください。
Google Fesの舞台裏とか
次に、
Google Fesとは、
こちらのサイトにアクセスすると楽器を見ることができます
このセッションでは、
このアプリの実装期間はたったの約2週間であったことに触れつつ、
- 高速性
- 振ったらすぐに反応するというような気持ちよさ
- 検出の工夫
- 振ったらどのように反応すれば楽しいか
- 当日の安定稼働
- インフラによるスケールの容易さ
- 1,000人ぐらいの会場で実演するので、
その規模への対応
これらの方針の落とし穴やその解決方法、
高速化と検出の工夫に対応するため、
- 楽器の音は最初の接続時にロードしておく
- 気持ちよく音を鳴らすために、
振りだしのタイミングで音を鳴らす - オブジェクトの動きを管理するタイマーは1つだけ
- 同じ画像はPaper.
jsの画像のSymbol化で使い回す - 楽器の音をキャッシュしておくことで次回のロードが早くなる
- Web Audio APIとAudioタグを用途に合わせて使い分ける
特にデモ上で様々に動く数多くのオブジェクトが、
他の部分は講演資料や以下の講演動画をご覧ください。実際に運用する上での苦悩を見ることができるはずです。
HTML5&API 総まくり
2011年最後のセッションは、
スライド72枚という膨大な情報を20分で講演するために、
紹介されたマークアップやAPIの内訳は以下のとおりです。
- HTML/
DOM/ブラウザ環境 - form要素
- microdata
- RDF/
RDFa/ RDFa Lite - shema.
org - DOM4
- Shadow DOM
- script要素の新属性
- style要素のスコープ化
- Drag and Drop API
- History API
- atob/
btoa base64 - DOMCryptAPI - Web Cryptography API
- Selectors API
- Web Intents
- registerProtocolHandler/
registerContentHandler - Web Notifications
- Fullscreen API
- オフラインWebアプリケーションに関連するAPI
- Application Cache
- navigator.
online online/ offlineイベント - Web Storage
- Indexed Database API
- File API
- File API: Directories and System
- File API: Writer
- Streams API
- Quota Management API
- Typed Array
- Web Workers
- デバイスAPI
- Contacts API
- Battery Status API
- HTML Media Capture
- Messaging API
- Network Information API
- Sensor API
- Vibration API
- Geolocation API
- HTML Speech
- Device Orientation Events
- Touch Events
- ネットワークコミュニケーション系API
- WebSocket
- Server-sent Events
- Cross Document Messaging
- Cross Origin Resource Sharing
- XMLHttpRequst Level2
- マルチメディア系API
- video/
audio要素 - Audio Processing API
- API for MediaResource1.
0 - Web VTT
- Web RTC
- video/
- グラフィック系API
- Canvas
- SVG
- パフォーマンス最適化系API
- reuqestAnimationFrame
- setImmediate
- Page Visibility
- Navigation Timing
- User Timing
- Resource TIming
- Performance Timeline
本当にほぼすべてのマークアップやAPIが紹介され、
最後に
レポートに対する感想や、
本勉強会は、