任意の2つのWebサイトのパフォーマンスチェックと、その結果の比較が出来る・「dareboost」
dareboost dareboostは2つのWebサイトの表示速度等のパフォーマンスをチェックし、結果を比較、ダウンロード出来るWebサービスです。1つのWebサイトでも勿論可能ですが、比較出来るのは珍しいかも。提出してくれる結果内...
Resource - 最適化ツール
IE8でWebサイトを閲覧した際に問題の起こりそうな箇所を教えてくれるOSS・「IE8 Linter」
IE8 Linter IE8 Linterは任意のWebサイトをIE8で閲覧した際に問題の起こる可能性のある箇所を教えてくれるオープンソースのソフトウェアです。IE8のみというピンポイントなツールでは有りますが、日本におけるブラウザの...
ブラウザ上でSVGを軽量化出来るOSS・「SVGOMG」
SVGOMG SVGOMGはSVGを軽量化するNode.jsベースのツール、SVGO用のWeb GUIです。OSSとしてGithubにてソースコードが公開されています。ファイルを読み込むか、コードをペーストすれば軽量化してくれます。上...
任意のWebサイトのCSSを解析し、ステータスを表示してくれるオープンソースのソフトウェア・「CSS Stats」
CSS Stats CSS Statsは任意のWebサイトのCSSを解析してステータスを表示してくれるツールです。OSSとしてソースコードも公開されています。CSSのサイズや使用されているプロパティやセレクタの数、カラーコード、フォン...
Webサイトのパフォーマンス向上に役立ちそうなリソース集・「Performance tooling today」
Performance tooling today Performance tooling todayはWebサイトのパフォーマンスを向上させるためのリソース集です。リソースの追跡・共有が可能となっています。リソースは種類でソートする...
アニメーションGifに関する様々なツールを提供する・「Ezgif.com」
Ezgif.com Ezgif.comはアニメーションGifに関する様々なツールを公開しているWebサービスです。アニメーションを維持したままファイルサイズを圧縮したりエフェクトをかけたり切り取ったり、サイズを縮小したりといった事が可...
JPGを圧縮出来るmozilla製のmozjpegを試せる・「mozjpeg encoder」
mozjpeg encoder mozjpeg encoderはMozillaが公開したJPGエンコーダーのmozjpegを試すことが出来るツールです。品質を設定してD&Dすればいいだけ。画像は10分後にサーバーから自動で削除されるそ...
OSSとしても公開されているHTMLチェックツール・「HTMLHint」
HTMLHint HTMLHintはOSSとして公開されているHTMLの構文チェックツールです。従来の高性能なものではなく、シンプルなツールですが、インラインのCSSやJSもチェックする事ができます。エラー箇所はｘ印が付き、マウスホバ...
閲覧中のWebサイトのブレークポイントに沿ったプレビューを作成するChromeエクステンション・「Emmet Re:View」
Emmet Re:View Emmet Re:Viewは閲覧中のWebサイトのCSSからブレークポイントを検出し、そのサイズに合わせたプレビューをその場で作成してくれるChromeエクステンションです。それぞれのプレビューはスクロール...
コメントアウトや空要素等を取り除けるHTML圧縮ツール・「HTML Minifier」
HTML Minifier HTML MinifierはHTMLを圧縮するツールです。コメントアウトやスペースの除去、引用符の削除、空の要素、空の属性の除去などが可能です。それぞれの項目はチェックボックスで選択する事で圧縮します。HT...
難読化されたJavaScriptコードを見やすく整形する・「JS NICE」
JS NICE JS NICEは難読化されたコードを読みやすく整形するツールです。ただ整形するだけでなく、ローカル変数の名前を変更する事も可能みたい。沢山のOSSから規則性を学習したプログラム解析技術を利用しており、適切な変数名を提案...
JavaScriptやHTMLのコード整形と差分チェックが出来る・「Pretty Diff」
Pretty Diff Pretty Diffはコード整形や差分チェックが可能なWebツールです。コードはJavaScript、CSS、HTMLなどに対応しています。また、本ツールはGithubでもソースが公開されていますが、ライセン...
GIFアニメーションをHTML5にコンバートする・「gfycat」
gfycat gfycatはGIFをアップロードし、HTML5のVideo要素として動かせるようにするサービスです。ホスティングも可能で、iframeで他サイトに張ることも出来るようになっています。また、元のGIF画像とのサイズの比較...
JSONやHTML、CSSなど様々なコードの整形ツールをまとめた・「Code Beautify」
Code Beautify Code Beautifyは様々なコードの整形を行えるツールをまとめたWebサイトです。コードごとに整形ツールは分けられています。対応コードはHTML、CSS、JSON、XML、JavaScript、RSS...
PSDファイルのバリデーションツール・「PSD VALIDATOR」
PSD VALIDATOR PSD VALIDATORはPSDファイルのバリデーションを行うWebアプリです。エラー等の基準は、Psを利用する際のエチケットをまとめたWebサイトのPhotoshopetiquette.comを基準とし...
OSSとしても公開されているJavaScriptベースのマージ/Diffツール・「Mergely」
Mergely MergelyはマージとDiffが可能なJSベースのWebアプリで、OSSとしても公開されています。HTML5とJavaScriptのみで構成されているみたいですね。対応言語はC、C + +、Java、HTML、XML...
入力したHTMLのclassやidを元にCSSの雛形を作る・「extractCSS」
extractCSS extractCSSは入力されたHTMLのclassやidを元にCSSを作るWebツール。Githubにてソースも公開されています。Bear CSSと同じようなツールですが、extractCSSは作成時にclas...
LessやSass、CoffeescriptなどをコンパイルできるWindows用ソフトウェア・「Prepros」
Prepros PreprosはLessやSass、Coffeescript等のファイルを監視し、変更があった際に自動でコンパイルしてくれるWindows用のソフトウェアです。CodeKitほど高性能では無いにしても、割と似たようなも...
CSSのショートハンドを解除してから整形する・「FESS」
FESS FESSはCSSのショートハンドを解除して整形するWebツール。解除する機会は一般的にはあまり無いかも知れない&まだベータ版なので優れた精度では無いけど、珍しいので。精度に関しては、例えば background:red u...
CSSを即時整形するツール・「CSS Beautify」
CSS Beautify CSS BeautifyはCSSを入力するだけで即時整形してくれるツール。SENCHAから提供されたソフトウェアです。 CSS Beautify
HTML、CSS、JavaScriptのコード整形ツール・「Dirty Markup」
Dirty Markup Dirty Markupは、HTMl、css、JavaScriptのコードをインデントして整形してくれるツールです。高機能ではありませんが、シンプルで使いやすく、動作も軽量です。 Dirty Marku...
Webサイトの表示速度を計測できる・「Pingdom」
Pingdom Pingdomは、公開されているWebサイトの表示速度を計測し、速度を遅くしている要因を教えてくれるツール。URLを入力するだけで計測してくれます。 Pingdom