HTML5 JavaScript API の変更点 - .NET 開発基盤部会 Wiki

追加された行はこの色です。
削除された行はこの色です。
HTML5 JavaScript API へ行く。
HTML5 JavaScript API の差分を削除
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。

-[[戻る>JavaScript]]

*目次 [#g74eb0c1]
#contents

*概要 [#a2f7483e]
[[HTML5>HTML#x3122b27]]から追加されたJavaScript API。

*詳細 [#kef28299]

**ネットワーク [#d57894e9]

***Fetch [#ed4c9d33]
XMLHttpRequestの強化版

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

***ServiceWorker [#e637dc3d]
[[PWA（Progressive Web Apps）]]で使用される。

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

**ストレージ [#c060ea9a]
[[HTML5>HTML#x3122b27]]のストレージ機能には以下のものがある模様。

***WebStorage [#wb728540]
-最もポピュラー
-キーバリュー型のストレージ

-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 [#va2a4b08]
-RDB（SQLite依存）のため、標準化が停止されている。
-しかし、スマホ用ブラウザで唯一のため、未だに利用されている。

***Indexed Database [#x2100a0a]
-オブジェクト型ストレージ（NoSQL）
-[[WebSQL Database>#va2a4b08]]からIndexed Databaseへの移行が推奨されている

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

***Application Cache [#a42f1d14]
非推奨化 → [[ServiceWorker>#e637dc3d]]

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

**ファイル操作 [#qda2543b]

***File [#p7ac0483]

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

-参考
--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

***参考 [#e57231d6]
-JavaScript でのローカル ファイルの読み込み - HTML5 Rocks~
http://www.html5rocks.com/ja/tutorials/file/dndfiles/

**位置情報 [#r2164651]

***Geolocation [#m275f618]

**並列スレッド処理 [#vb214cbc]

***[[Web Workers>JavaScriptのスレッド処理#r3f78883]] [#r9722a7d]

**ドラッグ＆ドロップ [#xc6d8a1b]

***Drag and Drop [#yadc0a15]

**グラフィック描画 [#gdb1a045]

***[[Canvas>JavaScriptのエフェクト処理#s3ad021b]] [#r5052b63]

**履歴操作 [#z03cc410]

***History [#s6229dff]

**その他 [#wf2486f7]
***[[WebRTC]] [#caa4fc9c]
***[[WebAuthn>https://techinfoofmicrosofttech.osscons.jp/index.php?Web%20Authentication%20API]] [#i79e3535]

*参考 [#a7fc7347]

**MDN [#ba728bcc]
-Web API~
https://developer.mozilla.org/ja/docs/Web/API

**＠IT [#kf197bf1]
-~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）