HTML5 JavaScript API

「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

• 戻る

目次 †

概要 †

HTML5から追加されたJavaScript API。

詳細 †

ストレージ †

HTML5のストレージ機能には以下のものがある模様。

WebStorage? †

• 最もポピュラー
• キーバリュー型のストレージ

• 2種類ある。
  • 永久に保存される LocalStorage?
  • セッション中のみ保存される SessionStorage?
  • 比較
    • Web Storage－HTML5のAPI、および、関連仕様
      http://www.htmq.com/webstorage/

WebSQL Database †

• RDB（SQLite依存）のため、標準化が停止されている。
• しかし、スマホ用ブラウザで唯一のため、未だに利用されている。

Indexed Database †

• オブジェクト型ストレージ（NoSQL）
• WebSQL DatabaseからIndexed Databaseへの移行が推奨されている

Application Cache †

• シンプルページアプリケーションを想定した強力なキャッシュ機構
• ・・・なんだか難しいらしい。
• アプリケーション キャッシュ初心者ガイド - HTML5 Rocks
  http://www.html5rocks.com/ja/tutorials/appcache/beginner/

参考 †

• ストレージ - HTML5 Rocks
  http://www.html5rocks.com/ja/features/storage
• モダンブラウザのストレージ容量と調査方法まとめ - HTML5 Rocks
  http://www.html5rocks.com/ja/tutorials/offline/quota-research/

• 連載：人気順に説明する初めてのHTML5開発：
  ブラウザでストレージ？ Web Storageを使いこなそう - ＠IT
  http://www.atmarkit.co.jp/ait/articles/1108/12/news093.html
  • SessionStorage? Sample
    http://www.atmarkit.co.jp/ait/files/20110812/sessionStorage.htm
  • LocalStorage? Sample
    http://www.atmarkit.co.jp/ait/files/20110812/localStorage.htm
  • LocalStorage? 使用例 Sample
    http://www.atmarkit.co.jp/ait/files/20110812/localStorageSample.htm

ファイル操作 †

File †

• FileSystem? APIの代替
• ブラウザ上のHTML5からファイルの選択とそのデータへのアクセスが可能になる。

参考 †

• JavaScript でのローカル ファイルの読み込み - HTML5 Rocks
  http://www.html5rocks.com/ja/tutorials/file/dndfiles/

位置情報 †

Geolocation †

並列スレッド処理 †

Web Workers †

ドラッグ＆ドロップ †

Drag and Drop †

グラフィック描画 †

Canvas †

履歴操作 †

History †

その他 †

WebRTC †

参考 †

MDN †

• Web API
  https://developer.mozilla.org/ja/docs/Web/API

＠IT †

• Insider.NET > 業務アプリInsider > 人気順に説明する初めてのHTML5開発
  http://www.atmarkit.co.jp/ait/subtop/features/dotnet/app/introhtml5_index.html

  • 位置情報をブラウザで活用！ Geolocationを使いこなそう（2011/07/14）
  • ブラウザでストレージ？ Web Storageを使いこなそう（2011/08/12）
  • アドインなしで実現可能！ ドラッグ＆ドロップを使いこなそう（2011/09/13）
  • DOM操作の主流になるか！？ セレクタAPIを使いこなそう（2011/10/07）
  • 双方向通信を実現！ WebSocket?を使いこなそう （2011/11/11）
  • JavaScriptでファイル操作！？ File APIを使いこなそう（2011/12/16）
  • 列処理を実現！Web Workersを使いこなそう（2012/01/13）
  • Webアプリもオフライン実行？ Indexed Databaseを使いこなそう（2012/02/14）