HTML5
| タイトル | 説明 | 動作環境 |
|---|---|---|
| イベントに対して、音声によるフィードバック | demo では a 要素に対して audio 要素再生を割り当てています。iPad でも動作しますが、iPhone では音声再生は別タスクとなってしまいます。 | Fx, Opera, Chrome, Safari, iPad |
| カスタム <video> プレイヤー | ブラウザーデフォルトのコントロールを表示せず、JavaScript により、<video> にアクセス、コントロールします。iPad でも動作します。 | Fx, Opera, Chrome, Safari, iPad |
| 画素解析クロマキー (<video> + <canvas>) | <video> で再生中のコマを <canvas> に読み込み、<canvas> で画素解析をします。この demo では RGBA(200,200,200,0) ～ RGBA(255,255,255,0) の色を透明に変換しています。 | Fx, Opera, Chrome, Safari |
| <video> + SVG Filter + SVG UI | <video> に対して、SVG の Filter を割り当てます。<canvas> による 1px ずつの処理より高速ですが、IE 9 には Filter の実装予定がないため今後あまり役に立たなそうです。Webkit, Opera では今後利用できそうです。 | Fx |
HTML5 関連 API
| タイトル | 説明 | 動作環境 |
|---|---|---|
| Geo Location API | アクセスポイントの緯度経度を取得し、その座標を Google maps に反映します。 | Fx, Opera, Chrome, Safari, iPad, iPhone |
| File API + DnD API | ブラウザーウインドウ外からファイルをドラッグ & ドロップ後、そのファイルの内容を解析します。現在は Fx のみですが、今後その他のブラウザーでの対応が見込めます。 | Fx |
| WebSocket echoサーバー | チャット風のechoサーバーのデモ | Chrome, iPhone, iPad |
| THREE.js経由でのWebGL試用1 | 立方体にテキスチャを貼りつけた例 | |
| THREE.js経由でのWebGL試用2 | テキストジオメトリ利用の例 | |
| THREE.js経由でのWebGL試用3 | モデラーで作成したオブジェクトをJSONに変換してTHREE.jsで読み込んだ例 | |
| THREE.js経由でのWebGL試用4 | オブジェクトが重いので表示に時間がかかります！: モデラーで作成したオブジェクトをJSONに変換してTHREE.jsで読み込み、ライティング、表面効果を適用した例 |
CSS
| タイトル | 説明 | 動作環境 |
|---|---|---|
| Web Fonts | Web ページ中のテキストに対して、任意のフォントを割り当てることができます。この技術は IE6 でも動作します。フォントのライセンスに注意する必要があります。 | IE6~8, Fx, Opera, Chrome, Safari, iPad, iPhone |
JavaScript
| タイトル | 説明 | 動作環境 |
|---|---|---|
| blocklayout | Window のサイズに合わせてレイアウトが変化します。iPhone, iPad の場合は画面を回転させるとその横幅に合わせてレイアウトが変化します。 | IE6~8, Fx, Opera, Chrome, Safari, iPad, iPhone |
SVG
| タイトル | 説明 | 動作環境 |
|---|---|---|
| test suite | SVG の基本動作検証をまとめています。 | - |
| アニメーション | Flash 4 程度のアニメーションです。IE 9 では <animate> などの実装予定がないため、デスクトップ環境では別の手法 (JavaScript) でのアニメーションが主流となりそうですが、iPhone, iPad ではしっかり動作します。 | Fx, Opera, Chrome, Safari, iPhone, iPad |
| 矩形落下アニメーション | Raphael を利用したデモ。Flash を使わずに IE や iPhone を含む全てのブラウザーでアニメーションを実現できます。 | IE, Fx, Opera, Chrome, Safari, iPhone, iPad |
| Demo Tool | SVGのデモツールです。その場書いたSVGを描画して動作を確認することができます。 | Chrome, Safari |
| map | SVGをつかった地図。拡大/縮小を活用することができる。AjaxでSVGファイルを呼んでいるが、その呼び方は内部的にXMLとtext/htmlの2種類を用意している |
history
| タイトル | 説明 | 動作環境 |
|---|---|---|
| pushState | history.pushStateをサポートしているブラウザではpushStateを使って遷移する | chrome, firefox4, safari, iPhone, iPad |
iPhone / iPad
| タイトル | 説明 | 動作環境 |
|---|---|---|
| iPad 用リーダー UI | タッチイベントをハンドリングしてスクロールを発生させることができます。 | iPad, iPhone |
| スワイプ画像ギャラリー | タッチイベントをハンドリングしてスクロールを発生させることができます。 | iPad, iPhone |
| 選択した文字抽出 | テキストを選択、反転した状態の時、選択中の文字列を抽出します。IE6~8 でも調整することで動作させることができそうです。 | Fx, Opera, Chrome, Safari, iPad, iPhone |
| 3D変形アニメーション | 要素を3D変形することができます。 | iPad, iPhone, Safari5 |
| 3D cube | 3Dで配置した要素を動かすことができます。 | iPad, iPhone, Safari5 |
| 3D boxes | 3Dで配置した要素を動かすことができます。 | iPad, iPhone, Safari5 |
| マルチカラム | iPad, iPhone, Chrome, Safari5 | |
| ジェスチャ | 2本指で要素をつまみ、拡大・回転させることができます | iPad, iPhone |
| 加速度センサー | 傾きを検知します | iPad, iPhone |
| viewportをJSで操作 | viewportの値をJavaScriptで変更することで動的にviewportを変化させます。 | iPad, iPhone |
| きらきらエフェクト | きらきらなエフェクト | iPhone, Android |