HTML5 開発者に便利なツール 14 個

DocHub.io #

CSS, HTML, JavaScript, DOM, jQuery, PHP, Python の API リファレンス。インクリメンタルサーチできるので、開発中は常に開いておきたい。

最近 GitHub 関連で使われるようになって流行り始めた Markdown 記法を、視覚的に確認しながら入力できるツール。Dropbox や GitHub のアカウントで繋ぐと、アップロードできるようです。Mac 用デスクトップアプリの Mou というのも合わせて紹介されていました。

今から使える HTML5 機能のリストとブラウザの対応状況に応じたアドバイス、そして Pollyfill (未対応ブラウザ向けに機能を補完する JS ライブラリ)などを教えてくれる便利サイト。

そしてその API。ここで作ったウィジェットを自分のサイトに埋め込むことで、未対応の機能がある場合に教えてあげる UI を簡単に作れます。ブラウザの対応状況は caniuse.com を使うことで常に最新の状態だとか。

このページに表示されている CSS をインラインで編集することで、表示内容を確認しつつコピペできる便利サイト。

表示内容を確認しながら CSS3 のプロパティをいじることができるプレイグラウンド。グラデーション、テキストプロパティ、トランスフォームなどに対応しています。

ワンソースでスマートフォンからデスクトップまで幅広い閲覧環境に対応するレスポンシブウェブデザインというコンセプト。そんなレスポンシブウェブデザインを使って作られたサイトの表示内容をまとめて確認できるツール。

既にご存じの方も多いと思いますが、HTML5 のブラウザごとの対応状況を調べるサイトといえばここです。

こちらも HTML5 の対応状況を知るには有名なサイトですが、個別の API について調べるためというよりも、HTML5 の実装が進行していることをビジュアルで実感できることに主眼が置かれています。

新旧各種ブラウザのテストができる有料サービス。

JavaScript プロジェクト向けのコマンドラインビルドツール。ファイルの連結からバリデート、圧縮(難読化)、ユニットテストまでできます。まだベータ版だけどとてもパワフル。

様々な JavaScript のテストケースを作成・共有できるサイト。既存のテストケースだけでも参考になります。Browserscope.orgを使ったブラウザごとの比較も。

JavaScript コンソール兼デバッガのウェブアプリ。Adobe Shadowのようなツールが出てきた今どの程度役に立つのかは不明ですが、iOS や Android のブラウザに接続して使えるデバッガ機能が素敵です。

Chrome DevTools の変更履歴管理機能と保存機能は便利ですが、この拡張機能を使うと自動で保存してくれるようになり、実質的に Chrome DevTools 上で開発を進めることが可能になります。Addy Osmani がスクリーンキャストで分かりやすく説明してくれています。

jQuery Mobileサイトをビジュアルで構築できるウェブアプリ。