LoginSignup
36
39

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-12-07
「お前はなんでも出来るんだな」
「何でもは出来ないわよ。出来ることだけ」

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

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

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
カメラ&マイク × × ×
ネットワーク種別と速度の検知 × × × ×
オンラインステータス
バイブレーション × × ×
バッテリー状態の検知 × × ×

画面とアウトプット

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

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

システムアクセス

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

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

最後に

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


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

36
39
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
36
39