keijixのブックマーク - はてなブックマーク

[HTML5と関連API] Web Storageのサンプル | Blog | Development Reference

Web Storage を使用して、クライアントサイドにデータを保存する簡単なメモアプリのサンプルを作成してみた。尚、メモの編集部分の動作には、リッチテキスト編集用APIを使用している。 DEMO1 - localStorage DEMO2 - sessionStorage また、上記サンプルと前回紹介したアプリケーションキャッシュを組み合わせたVerも作成した。 DEMO1 - localStorage DEMO2 - sessionStorage 2010年10月時点で、IE8.0、Firefox3.6、Safari5.0、Chrome6.0にて動作確認あまり作りこんでいないので、Firefoxではリッチテキスト編集用APIの動作が少しおかしくなることがある Web Storage とは、クライアントサイド（ブラウザ側）にデータを永続的に保存するための仕様で、オフラインWebア

keijix 2010/10/30

リンク

[HTML5と関連API] アプリケーションキャッシュのサンプル | Blog | Development Reference

アプリケーションキャッシュを使用して、オフライン（ネットワークに接続されていない）環境でも閲覧ができるページのサンプルを作成してみた。 DEMO1 DEMO2 2010年10月時点で、Firefox3.6、Safari5.0、Chrome6.0にて動作確認アプリケーションキャッシュとは、Webアプリケーションを構成しているすべてのリソース(HTML/CSS/JavaScript/画像ファイル)をローカルにキャッシュしておくことで、ユーザがネットワークに接続していなくても Webアプリケーションを利用できるようにするための仕様である。 demo1 は、アプリケーションキャッシュの最もスタンダードとなる使用方法の例で、オンラインの状態で1度 demo1ページへアクセスすれば、（この時、Firefoxの場合はページ上部に「このサイトはオフライン作業用データの保存を求めています」というメッ

keijix 2010/10/30

HTML5

リンク

[JavaScript] アコーディオンメニュー4 | Blog | Development Reference

このエントリはライブラリへ移動しました。

keijix 2010/10/30

リンク

[HTML5と関連API] ドラッグ＆ドロップAPIとファイルAPIを使用したサンプル | Blog | Development Reference

ドラッグ＆ドロップ（DnD）API とファイルAPI を利用して、ローカルPC上にある画像ファイルをブラウザの特定領域にドロップすると、その内容をサイト上に表示する簡単なdemoを作成してみた。 DEMO 2010年10月時点で、Firefox3.6、Chrome6.0にて動作確認 DnD API ドラッグ＆ドロップという操作自体は、JavaScript を駆使することで既に Webアプリケーション上で実現されているが、あくまで擬似的に実現しているに過ぎず、よりデスクトップアプリケーションに近い UI を提供するには限界があると思われる。そのため、HTML5 では、ドラッグ＆ドロップに特化したイベントや API を新たに仕様として規定している。 File API また、ドラッグ＆ドロップAPI と深く関連する API としてファイルAPI がある。ファイルAPI を使用することで、