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

Last updated at 2015-12-07Posted at 2015-12-07

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

本気でなんでも出来そうなHTML5ですが、逆にしがないマークアップエンジニアである我々（我々と言わせてくれ！）が何かしようと思い立ってもMDNとW3Cのスペックドキュメントの海で溺れる事になるわけです。

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

What Web Can Do Today

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

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

アプリっぽい機能

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

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

入力機能

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

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

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

周辺情報の検出機能

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

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

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

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

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

画面とアウトプット

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

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

システムアクセス

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

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

最後に

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

対応状況まとめ - Google Sheets

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up