先日 Google+で Addy Osmani 氏が紹介していたオンラインツー ルが便利そう だったので紹介します。

DocHub.io #

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

Dillinger.io #

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

HTML5Please #

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

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

CSS3Please #

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

CSS3 Playground #

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

Responsive #

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

CanIUse.com #

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

HTML5 Readiness #

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

Browserstack #

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

Grunt #

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

jsPerf #

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

jsconsole #

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

Chrome DevTools AutoSave #

http://addyosmani.com/blog/autosave-changes-chrome-dev-tools/

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

Codiqa #

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