One IT Thing

IT業界を楽しむ為の学習系雑記

Webサイト訪問記

Webサイト訪問記(6)「What Web Can Do Today)」

投稿日:

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

お題

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

提供元

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

利用条件

無し。(アカウント不要、料金無料)

このWebサイトで出来ること

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

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

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

どんなITプロダクトで作られているか

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

  • Handlebars
  • chartist.js
  • Prism.js
  • 他実装可否判定用のJS

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

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

if ( !window.PaymentRequest ) { ~ };

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

使ってみた感想

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

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

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

まとめ

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

-Webサイト訪問記

執筆者:

関連記事

Webサイト訪問記(5)「webkay(What every Browser knows about you)」

知っておくと何処かで役に立つかも知れないWebサイトを、勉強を兼ねたプログラマ目線で紹介します。 目次1 お題2 提供元3 利用条件4 このWebサイトで出来ること5 どんなITプロダクトで作られてい …

Webサイト訪問記(4)「TSUBAME(インターネット定点観測システム)」

知っておくと何処かで役に立つかも知れないWebサイトを、勉強を兼ねたプログラマ目線で紹介します。 目次1 お題2 提供元3 利用条件4 このWebサイトで出来ること4.1 四半期ごとに統計を公開してく …


shingo nakanishi。東京で消耗中の職歴20年越え中年ITエンジニアです。「生涯現役プログラマを楽しむ」ことができる働き方探しをライフワークにしています。

19歳(1996年)から書き始めた個人日記が5,000日を超え、残りの人生は発信をして行きたいと思い、令和元日からこのサイトを開始しました。勉強と試行錯誤をしながら、自分が経験したIT関連情報を投稿しています。