Webサイト訪問記（６）「What Web Can Do Today)」

知っておくと何処かで役に立つかも知れないWebサイトを、勉強を兼ねたプログラマ目線で紹介します。

お題

第6弾は「What Web Can Do Today」です。

Adam Barさん。PHP、.NET、Java、Objective-Cと色々やって来たけど結局フロントエンドに戻って来ちゃうらしいです。最近はフロントエンドのトレーナーもされているようです。

無し。（アカウント不要、料金無料）

アクセスしたブラウザに実装されているHTML5仕様が分かります。ただ残念ながら全てのHTML5仕様が網羅されている訳ではありません。

HTML5仕様名をクリックすると、基本的な実装の仕方（Javascript + HTML）が載っています。初見の場合これはちょっと嬉しいです。

アクセスしたブラウザ以外の仕様実装状況も載っています。これはcaniuse.comを見た方が正確ですね。

利用者側から分かる範囲でWebサイト構築に使用されているプロダクトを調べてみます。

テンプレートエンジンのHandlebars、チャート描画はchartist.js、サンプルコードのシンタックスハイライトはPrism.jsを使っているようです。

肝心の実装可否判定ですが、uglifyされたJSを見ると地道にオブジェクトの存在判定をしているようです。

if ( !window.PaymentRequest ) {　～　};

まぁ開発時もこうするのが一番手っ取り早いですよね。

Can I useの補足サイトとして使える感じです。Can I useだと今使ってるブラウザが目的の仕様を実装しているかはバージョンの確認をする手間が有ります。

このサイトは実際にアクセスしたブラウザの実装状況が表示されるので、キーボード入力が要らないという意味ではCan I useよりも便利な時もありますね。

ただ最近はあまり更新していないのか、最新のHTML5仕様に追従してないのが惜しいですねぇ・・・。完全に網羅していたら活用度上がるんですが。

こういうサイト、気分転換に自分で作っても面白いかも。W3Cドキュメント読む機会にもなるし、世界中から開発者が集まるメジャーな仕様実装確認サイトになるかも知れませんね。