HTML5 JavaScript API

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

• 戻る

目次 †

概要 †

HTML5から追加されたJavaScript API。

詳細 †

ネットワーク †

Fetch †

XMLHttpRequest?の強化版

• 参考
  • Fetch API ​- Web API | MDN
    https://developer.mozilla.org/ja/docs/Web/API/Fetch_API

ServiceWorker? †

PWA（Progressive Web Apps）で使用される。

• 参考
  • Service Worker API ​- Web API | MDN
    https://developer.mozilla.org/ja/docs/Web/API/Service_Worker_API

ストレージ †

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

WebStorage? †

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

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

• 参考
  • Web Storage API ​- Web API | MDN
    https://developer.mozilla.org/ja/docs/Web/API/Web_Storage_API
  • 連載：人気順に説明する初めての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

WebSQL Database †

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

Indexed Database †

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

• 参考
  • IndexedDB API ​- Web API | MDN
    https://developer.mozilla.org/ja/docs/Web/API/IndexedDB_API

Application Cache †

非推奨化 → ServiceWorker

参考 †

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

ファイル操作 †

File †

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

• 参考
  • File and Directory Entries API ​- Web API | MDN
    https://developer.mozilla.org/ja/docs/Web/API/File_and_Directory_Entries_API
  • File System Access API ​- Web API | MDN
    https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API

参考 †

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

位置情報 †

Geolocation †

並列スレッド処理 †

Web Workers †

ドラッグ＆ドロップ †

Drag and Drop †

グラフィック描画 †

Canvas †

履歴操作 †

History †

その他 †

WebRTC †

WebAuthn †

参考 †

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）