Tender Surrender

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

先日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サイトをビジュアルで構築できるウェブアプリ。

結局 PWA は来るの?来ないの?

「PWAが来るって言っているエンジニアは今すぐ辞めろ」に対するアンサーソングです Continue reading

comments powered by Disqus