よくお世話になっている19のオンラインツール

Category : Memo

ここ1年くらいでよくお世話になったオンラインツールをメモを兼ねてまとめてみます。
有名どころが多いですが、何かの参考になれば。
また、似たサービスはいっぱいありますが、自分が一番使いやすいと思ったものを紹介しています。

一応カテゴリ分けしていますが適当ですw

レイアウトとフォントサイズ

Variable Grid System
960 Grid System をベースにしたグリッドレイアウトジェネレータ。
レイアウト作るときに使ってます。
EmChart
フォントサイズの px と em の相関表。
em の 1 を 100% とすればパーセント指定するときにも役立ちます。
自分用に普段使う周辺以下のサイズ(1px~24px)だけキャプチャして画像として保存してます。

コードのチェック

The W3C Markup Validation Service
説明不要の HTML Validator ですね。
HTML5 にも対応しています。
W3C CSS 検証サービス
同上。CSS3 が使われているとめっちゃエラー出ます(補足はあります)。
JSLint
JavaScript の文法チェック。

コードの整形・圧縮

Code Beautifier
CSS のコードを圧縮・整形してくれるサービス。オプションが豊富。
整形済みファイルのダウンロードもできます。
CSS Drive Gallery- CSS Compressor
こっちは CSS の圧縮のみ。
オプションも少なめでシンプル。
JavaScript Compressor and Comparison Tool
JavaScript を圧縮してくれるサービス。
各種圧縮ライブラリごとの比較が行えます。
Online javascript beautifier
JavaScript のコードをインデントなどで綺麗に整形してくれます。
圧縮されたコードのアンパックや、ブログ用に綺麗にしたい場合などに。

文字列変換

Text Escaping and Unescaping in JavaScript
文字列の各種エスケープをまとめてできます。
今年はかなりお世話になりました。
WebTecNote – [css] contentプロパティで挿入できるコンテンツ
ブログ記事ですが、記事内に CSS に最適化する文字列変換スクリプトがあります。
文字列 → 数値実体参照変換
HTML で使う数値参照に文字列を変換してくれます。
エンコードマニアックス – 各種エンコードやハッシュを一発作成
各種エンコードをしてくれます。QR コードなんかもあります。

画像関係

Online Image Optimizer
画像の容量を小さくしたいときに。
最適化後の画像の劣化具合の比較もできます。
CSS Sprite Generator
CSS スプライトのジェネレータ。
画像を zip にまとめてアップすると、結合された画像とCSSファイルがダウンロードできます。
Ajaxload – Ajax loading gif generator
よく「ロード中です」みたいなときに使われるアニメーション gif 画像のジェネレータ。
同じような他のサービスは IDEA*IDEA さんの Ajaxのローディング画像が作れるジェネレータまとめ を参考。
Dynamic Dummy Image Generator
ダミー画像のジェネレータ。
URL で画像のサイズ、色、テキストなどを指定可能。

その他

.htaccess Editor
.htaccess を簡単に書けるオンラインエディタ。日本語。
SEOチェキ!
無料のオンライン SEO ツール。
使用用途は色々でした。

よくお世話になったなーと思い出せるのはこんなところです。
製作者の方々には感謝。

それと、できれば他の人のおすすめオンラインツールリストとかも見てみたいです。

Leave a Reply