少し前に聞いてくれた方がいたのでついで
にシェアしてみます。個人的に最近よく好ん
で使っている、Web制作に役立つWebサー
ビスみたいなものをご紹介。全部既出で
珍しいものは無いんですけど、一覧にする
のもたまにはいいかもですね。
というわけで、場合によっては誰得な記事ですけどご了承下さい。僕がここ最近でよく使ってるWebツールを古いのから新しいのまで、順不同でご紹介していきます。
![tools01](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![tools01](http://kachibito.net/wp-content/uploads/2011/06/tools01.jpg)
計算が面倒な黄金比や白銀比を、数値を入力するだけでサクサク出してくれます。動作も軽くてストレス無しです。
web計。
![tools12](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![tools12](http://kachibito.net/wp-content/uploads/2011/06/tools12.jpg)
めっちゃ楽です。jQueryで作りたい機能だけを選択して、1つのjsファイルにパッケージにしてくれますよ。ページスクロールとかタブとか需要の高いものが揃っています。ちょっと機能をプラスしたい、というのが個人的には殆どなのでこういうのが増えてくれると助かります。
simplelib
![tools04](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![tools04](http://kachibito.net/wp-content/uploads/2011/06/tools04.jpg)
ようやくHTML5触り始めたので。HTML5の構文チェックツールです。以前書いたブックマークレットが便利です。というか、むしろブックマークレット紹介したいです。
HTML5 Validator / Bookmarklet
![tools05](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![tools05](http://kachibito.net/wp-content/uploads/2011/06/tools05.jpg)
JavaScriptコードを難読化したり、軽量化したり、逆に展開したり、エラー解析したりしてくれる便利なコンパイラ。いろいろ触りましたけど、結局これが一番よかった。
Closure Compiler Service
![tools03](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![tools03](http://kachibito.net/wp-content/uploads/2011/06/tools03.jpg)
jsdoitみたいにその場でコード書いて実行出来るツール。jQueryは勿論、mootoolsなどのライブラリも用意されています。僕は誰かとシェアしたいとか無いのと、単純に幅広で見やすいのでもっぱらこちらを利用します。
あと、ユーザー登録しなくても使えるのも良。でも、勉強するならjsdoitでシェアしあったほうがいいですね、きっと。
jsfiddle
![tools06](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![tools06](http://kachibito.net/wp-content/uploads/2011/06/tools06.jpg)
Media Queries勉強中なので、その確認用です。一度に3つの解像度でチェックできるので良く使います。地味に便利なので、日本語化して自分のサーバーに置こうかなと思っています。
Simple Media Queries Tester
![tools07](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![tools07](http://kachibito.net/wp-content/uploads/2011/06/tools07.jpg)
頼り過ぎてるツールです。繋ぎ目のないシームレスなパターン素材を好みの画像で作成可能。かなり自由が利くのでまったく困ったことがないです。キャプチャがなんだか気持ち悪いですけど、電球です。
Repper
![tools08](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![tools08](http://kachibito.net/wp-content/uploads/2011/06/tools08.jpg)
Google Web Fontで配布されてるフォントの表示を一覧確認できます。気に入ったフォントを選択すればその場でcssとフォントのパスが表示されますよ。
Font comparer
![tools02](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![tools02](http://kachibito.net/wp-content/uploads/2011/06/tools02.jpg)
何度も紹介させてもらってますけど、色が苦手なので基本これに頼ります。検索した雑誌からカラースキームを抽出。
Color of Book
![tools11](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![tools11](http://kachibito.net/wp-content/uploads/2011/06/tools11.jpg)
手前味噌。自分で公開しておいてさほど使わないんですけど、jQueryのAPI検索ツール。ブックマークレットでサクッと。
jSearch
![tools13](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![tools13](http://kachibito.net/wp-content/uploads/2011/06/tools13.jpg)
以前にご紹介したWebサイトの速度計測ツール。このブログはなにもしてないですけどwこれ、便利なんですけど重いんですよね・・他にいいのあったような。
loads.in
![tools09](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![tools09](http://kachibito.net/wp-content/uploads/2011/06/tools09.jpg)
cssファイルから色だけだして、カラーを変更したものをダウンロードくれます。個人的に凄く助かる。
cssprism
![tools10](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![tools10](http://kachibito.net/wp-content/uploads/2011/06/tools10.jpg)
制作に役立つと言うとアレなんですけど、凄く手軽なので超使ってます。ブックマークレットの動作も凄く軽く、使っていて何もストレス無し。後で読むものはブクマで、あとでまとめるものはInstapaperにストックしてます。Evernoteも併用すると便利そうなんですけどまだしてないです。
Instapaper
いつもお世話になってるので定期的にリンクとトラフィックを差し上げたくてご紹介しました。
web計。 → 黄金比・白銀比をサクサク計算
![tools01](http://kachibito.net/wp-content/uploads/2011/06/tools01.jpg)
![tools01](http://kachibito.net/wp-content/uploads/2011/06/tools01.jpg)
simplelib → よく使うjQueryコードをパッケージで配布
![tools12](http://kachibito.net/wp-content/uploads/2011/06/tools12.jpg)
![tools12](http://kachibito.net/wp-content/uploads/2011/06/tools12.jpg)
HTML5 Validator → 見てるページを構文チェック
![tools04](http://kachibito.net/wp-content/uploads/2011/06/tools04.jpg)
![tools04](http://kachibito.net/wp-content/uploads/2011/06/tools04.jpg)
Closure Compiler Service → 高性能なコンパイラ
![tools05](http://kachibito.net/wp-content/uploads/2011/06/tools05.jpg)
![tools05](http://kachibito.net/wp-content/uploads/2011/06/tools05.jpg)
jsfiddle → その場でコーディング、その場で確認
![tools03](http://kachibito.net/wp-content/uploads/2011/06/tools03.jpg)
![tools03](http://kachibito.net/wp-content/uploads/2011/06/tools03.jpg)
Simple Media Queries Tester → 3つの解像度で一括確認
![tools06](http://kachibito.net/wp-content/uploads/2011/06/tools06.jpg)
![tools06](http://kachibito.net/wp-content/uploads/2011/06/tools06.jpg)
Repper → 好きな画像でシームレスなパターン画像を作れる
![tools07](http://kachibito.net/wp-content/uploads/2011/06/tools07.jpg)
![tools07](http://kachibito.net/wp-content/uploads/2011/06/tools07.jpg)
Font comparer → GoogleWebFontを一括確認
![tools08](http://kachibito.net/wp-content/uploads/2011/06/tools08.jpg)
![tools08](http://kachibito.net/wp-content/uploads/2011/06/tools08.jpg)
Color of Book → ファッション雑誌等でカラースキーム生成
![tools02](http://kachibito.net/wp-content/uploads/2011/06/tools02.jpg)
![tools02](http://kachibito.net/wp-content/uploads/2011/06/tools02.jpg)
jSearch → jQuery API検索ツール
![tools11](http://kachibito.net/wp-content/uploads/2011/06/tools11.jpg)
![tools11](http://kachibito.net/wp-content/uploads/2011/06/tools11.jpg)
loads.in → 表示スピードと重い原因を調査
![tools13](http://kachibito.net/wp-content/uploads/2011/06/tools13.jpg)
![tools13](http://kachibito.net/wp-content/uploads/2011/06/tools13.jpg)
cssprism → cssからカラーコードだけ抜いて表示
![tools09](http://kachibito.net/wp-content/uploads/2011/06/tools09.jpg)
![tools09](http://kachibito.net/wp-content/uploads/2011/06/tools09.jpg)
Instapaper → 超手軽な﹁後で読む﹂
![tools10](http://kachibito.net/wp-content/uploads/2011/06/tools10.jpg)
![tools10](http://kachibito.net/wp-content/uploads/2011/06/tools10.jpg)