What Web Can Do Todayで今のウェブブラウザのできる事がわかるっぽいよ

```
「お前はなんでも出来るんだな」
「何でもは出来ないわよ。出来ることだけ」
```

本気でなんでも出来そうなHTML5ですが、逆にしがないマークアップエンジニアである我々（我々と言わせてくれ！）が何かしようと思い立っても[MDN](https://developer.mozilla.org/ja/docs/Web/Reference/API)と[W3C](http://www.w3.org/standards/)のスペックドキュメントの海で溺れる事になるわけです。

```
どうやるかが知りたいんじゃない！なにができるかが知りたいんだ！
```

[What Web Can Do Today](https://whatwebcando.today/touch.html)
---

>Hacker Newsで話題になっていたサービス。
>6つのカテゴリでHTML5のAPIを分類。さらにアクセスしているデバイスでその機能が使えるかと使い方、スペックまで教えてくれます。

昔みたいにハックでブラウザ判別とかしなくていいなんて、いい世界になったもんだ……

----

アプリっぽい機能
===

- [ローカル通知 - ノティフィケーションAPI](http://www.w3.org/TR/notifications/)
- [プッシュ通知 - プッシュAPI](https://w3c.github.io/push-api/)
- [オフラインモード - サービスワーカー](http://www.w3.org/TR/service-workers/)
- [ホーム画面インストール - Webマニフェスト](https://w3c.github.io/manifest/)
- [フォアグラウンド検知 - ページビジビリティAPI](https://w3c.github.io/page-visibility/)

Service Workerが実用的になってきたことで、最近はやってる感じの通知&オフライン機能。
SSL必須なのとSWを使いこなさないといけないのでなかなかハードルが高いです。
Google I/O 2015のウェブページがこの辺の機能を全部もりもりで実装して、[話題になりましたね](https://developers.google.com/web/showcase/case-study/service-workers-iowa)。
フォアグランド検知はモバイル時代のバッテリー節約で大活躍だってだれか偉い人が言ってた気がする。

|#|IE11|Mac<br>Chrome|Win<br>Firefox|iOS<br>Safari|Android<br>ブラウザ|Android<br>Chrome|
|:--|:-:|:-:|:-:|:-:|:-:|:-:|
|ローカル通知|×|○|○|×|×|○|
|プッシュ通知|×|○|×|×|×|○|
|オフラインモード|×|○|×|×|×|○|
|ホーム画面インストール|-|-|-|-|-|-|
|フォアグラウンド検知|○|○|○|○|×|○|

入力機能
===

- [タッチジェスチャ - タッチイベント](https://w3c.github.io/touch-events/)
- [加速度検知 - デバイスモーションイベント](https://w3c.github.io/deviceorientation/spec-source-orientation.html#devicemotion)
- [音声検出 - スピーチAPI](https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html#speechreco-section)
- [コピー&ペースト - クリップボードAPI](https://w3c.github.io/clipboard-apis/)
- [ポインタデバイス（マウス）検知 - メディアクエリレベル4](http://www.w3.org/TR/mediaqueries-4/#mf-interaction)

タッチジェスチャはIEが対応してて、Surfaceへの感謝の念を痛いほどに感じます。
そして、地味にFlashに引導を渡した感じのあるコピー&ペースト機能が愛おしい。
ポインタデバイスはメディアクエリによる実装。便利だと思うんですが、作るものが増える……

|#|IE11|Mac<br>Chrome|Win<br>Firefox|iOS<br>Safari|Android<br>ブラウザ|Android<br>Chrome|
|:--|:-:|:-:|:-:|:-:|:-:|:-:|
|タッチジェスチャ|○|×|×|○|○|○|
|加速度検知|×|○|○|○|○|○|
|音声検出|×|○|×|×|×|○|
|コピー&ペースト|×|○|○|×|×|○|
|ポインタデバイス（マウス）検知|-|-|-|-|-|-|

> タッチジェスチャに転記ミスがあったので修正（2015/12/08 07:47）

周辺情報の検出機能
===

- [現在地の検知 - ジオロケーションAPI](http://www.w3.org/TR/geolocation-API/)
- [Bluetooth - ウェブブルートゥース](https://webbluetoothcg.github.io/web-bluetooth/)
- [NFC - ウェブNFC](https://w3c.github.io/web-nfc/)
- [近接センサー - プロキシミティイベント](https://w3c.github.io/proximity/)
- [環境光検出 - アンビエントライトイベント](https://w3c.github.io/ambient-light/)

このセクションのAPIはジオロケーション以外ほぼ全滅ですね。
アクセシビリティ勢として、アンビエントセンサーには頑張って早く対応して欲しい所。
近接センサー機能は初めて見たけれど、なにに使うんだろう……

|#|IE11|Mac<br>Chrome|Win<br>Firefox|iOS<br>Safari|Android<br>ブラウザ|Android<br>Chrome|
|:--|:-:|:-:|:-:|:-:|:-:|:-:|
|現在地の検知|○|○|○|○|○|○|
|Bluetooth|×|×|×|×|×|×|
|NFC|×|×|×|×|×|×|
|近接センサー|×|×|○|×|×|×|
|環境光検出|×|×|○|×|×|×|

デバイスの機能へのアクセス
===

- [カメラ&マイク - メディアキャプチャAPI](https://w3c.github.io/mediacapture-main/)
- [ネットワーク種別と速度の検知 - ネットワークインフォメーションAPI](https://w3c.github.io/netinfo/)
- [オンラインステータス - ブラウザーステート](https://html.spec.whatwg.org/multipage/browsers.html#browser-state)
- [バイブレーション - バイブレーションAPI](http://dev.w3.org/2009/dap/vibration/)
- [バッテリー状態の検知 - バッテリーステータスAPI](https://dvcs.w3.org/hg/dap/raw-file/default/battery/Overview.html)

カメラへのアクセスが思った以上に一部対応なのにびっくり。
ネットワークインフォメーションAPIの実装が進むとウェブ解析が捗りますね。
バイブレーションAPIですがなぜかデスクトップのChromeでも有効、もちろんブルブルはしません（謎

|#|IE11|Mac<br>Chrome|Win<br>Firefox|iOS<br>Safari|Android<br>ブラウザ|Android<br>Chrome|
|:--|:-:|:-:|:-:|:-:|:-:|:-:|
|カメラ&マイク|×|○|○|×|×|○|
|ネットワーク種別と速度の検知|×|×|×|×|○|○|
|オンラインステータス|○|○|○|○|○|○|
|バイブレーション|×|○|○|×|×|○|
|バッテリー状態の検知|×|○|○|×|×|○|

画面とアウトプット
===

- [デバイスの向き - デバイスオリエンテーションイベント](https://w3c.github.io/deviceorientation/spec-source-orientation.html)
- [フルスクリーンモード - フルスクリーンAPI](https://fullscreen.spec.whatwg.org/)
- [画面の向きとロック機能 - スクリーンオリエンテーションAPI](https://w3c.github.io/screen-orientation/)
- [スリープロック - ウェイクロックAPI](https://w3c.github.io/wake-lock/)
- [プレゼンテーションモード - プレゼンテーションAPI](https://w3c.github.io/presentation-api/)

ウェブブラウザから画面の向きロックできるんだ！？
さすがにスリープロック[^1]は対応ブラウザなし。
スライド資料はhtmlで作る派なんでプレゼンテーションモードは便利そうですね。

[^1]: API名はウェイクロックですがいまいちわかりにくいのスリープロックとしています。スリープにならないようにロックするってことで。

|#|IE11|Mac<br>Chrome|Win<br>Firefox|iOS<br>Safari|Android<br>ブラウザ|Android<br>Chrome|
|:--|:-:|:-:|:-:|:-:|:-:|:-:|
|デバイスの向き|×|○|○|○|○|○|
|フルスクリーンモード|○|○|○|×|×|○|
|画面の向きとロック機能|×|○|○|×|×|○|
|スリープロック|×|×|×|×|×|×|
|プレゼンテーションモード|×|○|×|×|×|○|

システムアクセス
===

- [オフラインストレージ - ウェブストレージAPI](https://html.spec.whatwg.org/multipage/webstorage.html)
- [ファイルアクセス - ファイルAPI](https://w3c.github.io/FileAPI/)
- [パーミンションコントロール - パーミッションズAPI](https://w3c.github.io/permissions/)
- [連絡先へのアクセス - コンタクトマネージャAPI](https://www.w3.org/2012/sysapps/contacts-manager-api/)
- [ストレージの容量制限 - クオタマネージメントAPI](https://w3c.github.io/quota-api/)

HTML5初期のAPIが多いので、対応状況は良好。
パーミッションコントロールは……ページごとにやるのはなんだかなぁ……と思わないでもないです。
コンタクトマネージャAPIは解放されたら、一気に飛びつくウェブサービスが多そうですね。

|#|IE11|Mac<br>Chrome|Win<br>Firefox|iOS<br>Safari|Android<br>ブラウザ|Android<br>Chrome|
|:--|:-:|:-:|:-:|:-:|:-:|:-:|
|オフラインストレージ|○|○|○|○|○|○|
|ファイルアクセス|○|○|○|○|○|○|
|パーミンションコントロール|×|○|×|×|×|○|
|連絡先へのアクセス|×|×|○|×|×|×|
|ストレージの容量制限|×|○|×|×|×|○|

----

最後に
---
おさらい半分、おー！こんなのも半分ってとこでしょうか。用途別だと見やすいですね。
まとめて終わりじゃなくて、これつかって何か作んないとですよね……

* [対応状況まとめ - Google Sheets](https://docs.google.com/spreadsheets/d/1STdvcLATCbgDdG9EVXbWRBQlD6d4hs7zXYVO0BQfsxQ/edit?usp=sharing)