HTML5サンプル集

HTML5サンプル集

このページでは、HTML5のAPIを利用した簡単なサンプルを公開しています。このサンプルの多くは、2010年度まで弊社技術顧問を担当していただいた白石氏がマイコミジャー ナルに寄稿した記事で使用したプログラムを元に、多少の改変を加えたものです。どれも非常にシンプルなものではありますが、HTML5の各 機能を試すためのとっかかりとしてご利用頂けると思います。

白石氏が寄稿した記事はこちらになります。これらの記事と合わせてサンプルをご利用になって頂く事で、各機能の理解がより深まることでしょう。

(Safari4、Google Chrome3で動作確認済み。Firefoxだと、アプリケーションキャッシュのイベントが正しく発生せず、動作しないときがあります)

アプリケーションキャッシュとは、オフラインでもWebアプリを利用できるようにするため、アプリが使用するリソース(HTML/CSS/JavaScript/画像など)をローカルにキャッシュするための仕組みです。

このサンプルは、キャッシュの更新チェックを明示的に行い、更新があったらユーザに通知してアプリケーションをリロードするというものです。ソースをダウンロードしてお試しください。

(Safari4、Google Chrome3、Firefox3.5で動作確認済み)

このサンプルは、画像の映りこみをCanvasのみで実現しています。

(Opera10で動作確認済み)

Canvasを用いるアニメーションは、基本的にタイマーを用いたフレームアニメーションで、毎フレームcanvasを描画しなおすことで実現できます。 現在あるサンプルとしては、フェードイン・アウト効果をキャンバスで実現したものです。

globalAlphaプロパティを毎フレーム変更することで、効果を実現しています。

(Canvas対応ブラウザ全てで動作)

Throbberとは、タスクが処理中であることを表す視覚要素で、Firefoxでページを読み込み中に表示される「くるくる」アイコンのようなものを指します。 GIF/PNGアニメーションではなくCanvasで実装することにより、JavaScriptで制御可能なThrobberが実現できます。

それだけではなく、画像ファイルに比べてファイルサイズが非常に小さくすみます。

(Safari4で動作確認済み)

Web Databaseは、クライアント内で利用できるリレーショナルデータベースです。SQLをフルに活用して、データの永続化と柔軟な検索を実現できます。このサンプルは、キーと値からなる単純なデータをWeb Databaseに永続化します。

(Safari4、Google Chrome3、Firefox3.5で動作確認済み)

HTML5のドラッグ&ドロップAPIは、これまでのmousedown/mouseoverなどを用いた実現方法に比べてコードがシンプルになるだけではなく、ブラウザ以外のアプリケーションとテキストやファイルのやり取りを行う事ができます。

このサンプルは、単純なテキストデータのドラッグ&ドロップを実現します。ページ内だけではなく、外部のアプリケーションからもテキストをドラッグしてみてください。

(Opera10ならばほとんどのフォーム要素が機能します。Safari4、Google Chrome3は一部のみ対応)

HTML5では、フォーム要素が大幅に強化されました。type属性に指定できる値が多数増えただけではなく、オートコンプリート機能の制御、入力値のバリデーションを容易に実現できるようになりました。

このサンプルは、HTML5の仕様で規定されているフォーム要素を全て利用して試してみたものです。

(Ogg Theora形式のビデオを読み込むようにしているため、Firefox3.5でしか見る事が出来ません。Video要素自体には、Safari4とGoogle Chrome3も対応しています)

Video/Audio要素を用いると、動画や音声を簡単に再生する事が出来ます。このサンプルは、JavaScriptで実装したシンプルなビデオプレーヤーです。再生と一時停止、早送りを行う事が出来ます。

(Firefox3.5、Safari4、Chrome3など、Video要素をサポートしているブラウザでご覧ください)

このサンプルは、ブラウザがサポートしているメディアタイプを簡易的にチェックするためのツールです。HTMLMediaElementが持つcanPlayType()メソッドを使用し、可能な限り多くの動画・音声フォーマットをテストしようとします。

テストから漏れているフォーマットやコーデックがあったら、遠慮なくご連絡ください。

(Safari4、Google Chrome3、Firefox3.5で動作確認済み)

HTML5におけるクロスドキュメントメッセージングと言う技術を用いると、異なるウィンドウ(フレーム)間でメッセージの送受信を行う事が出来ます。クロスオリジンにも対応しています。このサンプルは、IFrameで読み込んだ別のページとの間でメッセージの送受信を行います。

(Safari4、Google Chrome3、Firefox3.5、Internet Explorer8で動作確認済み)

Web Storageと言う技術を用いると、キーと値のペアを簡単に永続化できます。ローカルストレージはドメインごとにストレージが異なり、保存されたデータは永久に残り続けます。セッションストレージはウィンドウごとにストレージが異なり、ウィンドウが閉じられるとデータは削除されます。

このサンプルは、Web Databaseで用いたサンプルをWeb Storageで実装し直したものです。キーと値のペアを保存するだけならば、Web Storageを用いた方が遥かに簡単です。

(Safari4、Google Chrome3、Firefox3.5で動作確認済み)

Web Workersとは、JavaScriptでバックグラウンドスレッドを実現する仕組みです。ワーカに行わせる処理は、UI操作を阻害しません。

このサンプルは、単純な計算処理をワーカを用いて実現します。ワーカを使わないバージョンのサンプルでは、巨大な数を入力して動作させるとブラウザがフリーズしてしまうのに対し、ワーカを使用したバージョンではUI操作に全く影響が及びません。

(Firefox3.6 Beta4で動作確認済み)

File APIを用いると、ファイル選択フォームやドラッグ&ドロップにより選択されたファイルの情報にアクセスできます。ファイルの内容を文字列やバイナリで読み込む事も可能になります。

このサンプルはFile APIを用いて、ファイルの名前やサイズを取得して表示します。HTML4までは、ファイル名以外の情報にアクセスする事は不可能でした。 ドラッグ&ドロップAPIの簡単なサンプルとしてもお使い頂けます。

(Firefox3.6 Beta4で動作確認済み)

このサンプルはFileReader APIを用いてファイルの内容を読み取り、ページ内に表示します。

ページトップへ戻る