このページでは、HTML5のAPIを利用した簡単なサンプルを公開しています。
このサンプルの多くは、弊社技術顧問の白石氏がマイコミジャーナルに寄稿した記事で使用したプログラムを元に、多少の改変を加えたものです。
どれも非常にシンプルなものではありますが、HTML5の各機能を試すためのとっかかりとしてご利用頂けると思います。
白石氏が寄稿した記事はこちらになります。これらの記事と合わせてサンプルをご利用になって頂く事で、各機能の理解がより深まることでしょう。
アプリケーションキャッシュとは、オフラインでもWebアプリを利用できるようにするため、アプリが使用するリソース（HTML/CSS/JavaScript/画像など）をローカルにキャッシュするための仕組みです。
このサンプルは、キャッシュの更新チェックを明示的に行い、更新があったらユーザに通知してアプリケーションをリロードするというものです。ソースをダウンロードしてお試しください。 解説はこちら
Canvasを用いると、図形・テキスト・画像を自由に描画し、変形する事が出来ます。
このサンプルは、画像の映りこみをCanvasのみで実現しています。 解説はこちら
Canvasを用いるアニメーションは、基本的にタイマーを用いたフレームアニメーションで、毎フレームcanvasを描画しなおすことで実現できます。 現在あるサンプルとしては、フェードイン・アウト効果をキャンバスで実現したものです。globalAlphaプロパティを毎フレーム変更することで、効果を実現しています。
Throbberとは、タスクが処理中であることを表す視覚要素で、Firefoxでページを読み込み中に表示される「くるくる」アイコンのようなものを指します。 GIF/PNGアニメーションではなくCanvasで実装することにより、JavaScriptで制御可能なThrobberが実現できます。それだけではなく、画像ファイルに比べてファイルサイズが非常に小さくすみます。
Web Databaseは、クライアント内で利用できるリレーショナルデータベースです。SQLをフルに活用して、データの永続化と柔軟な検索を実現できます。
このサンプルは、キーと値からなる単純なデータをWeb Databaseに永続化します。 解説はこちら
HTML5のドラッグ＆ドロップAPIは、これまでのmousedown/mouseoverなどを用いた実現方法に比べてコードがシンプルになるだけではなく、ブラウザ以外のアプリケーションとテキストやファイルのやり取りを行う事ができます。
このサンプルは、単純なテキストデータのドラッグ＆ドロップを実現します。ページ内だけではなく、外部のアプリケーションからもテキストをドラッグしてみてください。 解説はこちら
HTML5では、フォーム要素が大幅に強化されました。type属性に指定できる値が多数増えただけではなく、オートコンプリート機能の制御、入力値のバリデーションを容易に実現できるようになりました。
このサンプルは、HTML5の仕様で規定されているフォーム要素を全て利用して試してみたものです。 解説はこちら
Video/Audio要素を用いると、動画や音声を簡単に再生する事が出来ます。
このサンプルは、JavaScriptで実装したシンプルなビデオプレーヤーです。再生と一時停止、早送りを行う事が出来ます。 解説はこちら
このサンプルは、ブラウザがサポートしているメディアタイプを簡易的にチェックするためのツールです。HTMLMediaElementが持つcanPlayType()メソッドを使用し、可能な限り多くの動画・音声フォーマットをテストしようとします。
テストから漏れているフォーマットやコーデックがあったら、遠慮なくご連絡ください。
HTML5におけるクロスドキュメントメッセージングと言う技術を用いると、異なるウィンドウ（フレーム）間でメッセージの送受信を行う事が出来ます。クロスオリジンにも対応しています。
このサンプルは、IFrameで読み込んだ別のページとの間でメッセージの送受信を行います。 解説はこちら
Web Storageと言う技術を用いると、キーと値のペアを簡単に永続化できます。ローカルストレージはドメインごとにストレージが異なり、保存されたデータは永久に残り続けます。セッションストレージはウィンドウごとにストレージが異なり、ウィンドウが閉じられるとデータは削除されます。
このサンプルは、Web Databaseで用いたサンプルをWeb Storageで実装し直したものです。キーと値のペアを保存するだけならば、Web Storageを用いた方が遥かに簡単です。 解説はこちら
Web Workersとは、JavaScriptでバックグラウンドスレッドを実現する仕組みです。ワーカに行わせる処理は、UI操作を阻害しません。
このサンプルは、単純な計算処理をワーカを用いて実現します。ワーカを使わないバージョンのサンプルでは、巨大な数を入力して動作させるとブラウザがフリーズしてしまうのに対し、ワーカを使用したバージョンではUI操作に全く影響が及びません。 解説はこちら
File APIを用いると、ファイル選択フォームやドラッグ＆ドロップにより選択されたファイルの情報にアクセスできます。ファイルの内容を文字列やバイナリで読み込む事も可能になります。
このサンプルはFile APIを用いて、ファイルの名前やサイズを取得して表示します。HTML4までは、ファイル名以外の情報にアクセスする事は不可能でした。 ドラッグ＆ドロップAPIの簡単なサンプルとしてもお使い頂けます。
このサンプルはFileReader APIを用いてファイルの内容を読み取り、ページ内に表示します。