DNET_HTML5JavaScriptAPI

HTML5 JavaScript API

• 戻る

概要

HTML5（HTMLの該当節を参照）から追加された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（HTMLの該当節を参照）のストレージ機能には以下のものがある模様。

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（HTMLの該当節を参照）から
  ファイルの選択とそのデータへのアクセスが可能になる。

• 参考

  • 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

（元 Wiki では未記載）

並列スレッド処理

Web Workers

Web Workers（JavaScriptのスレッド処理の該当節を参照）

ドラッグ＆ドロップ

Drag and Drop

（元 Wiki では未記載）

グラフィック描画

Canvas

Canvas（JavaScriptのエフェクト処理の該当節を参照）

履歴操作

History

（元 Wiki では未記載）

その他

• 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）

移行メモ

• 参考の「列処理を実現！Web Workersを使いこなそう」は「並」が欠落していたため 「並列処理を実現！」に修正した。また記事一覧の先頭にあった衍字「~」を除去した。
• 本文の無い見出し（「Geolocation」「Drag and Drop」「History」）には 未記載である旨を明示し、「その他」配下は箇条書きにまとめた。
• 同名の見出し（「参考」）が複数あり GitHub Wiki でアンカが衝突するため、 括弧で文脈を補って一意にした。
• マイクロソフト系技術情報 Wiki（techinfoofmicrosofttech.osscons.jp）への URL リンクは、移行済みの WebAuthn に張り替えた。
• PukiWiki のページ内アンカ（#xxxxxxxx）は GitHub Wiki では再現できないため、 同一ページ内のアンカは見出しから生成されるアンカに張り替え、 他ページのアンカを指すリンクは「〜（ページ名 の該当節を参照）」の形に置き換えた。
• 本フェーズで新たに参照された「WebRTC」を TODO.md に予約した。

---

Tags: 移行, HTML5, JavaScript API, Fetch, ServiceWorker, WebStorage, IndexedDB, Web Workers, Canvas