ぼくのさいきょうツール

/ Kamakura, Japan / Text by

だいたい。プラグインやツールを探しまわってる時間て毎回なんなんだろうと思う。今より良いものがあるかもしれない。その「かもしれない」に懸けて膨大な時間をかけて探しまわることに、結局いつも使っているものに戻ってくることに、そういうことに、ぼくは疲れたんだよパトラッシュ。

なので1ジャンル1つのルールで、今の「ぼくのさいきょう」を追加&アップデートしつづけていこうかと思う。より良いものが登場したら潔く以前のものは削除して上書きするので、このページはアーカイブではありません。たくさんたまったら高級ペライチのミニサイトにすればいいんだ。

「ぼくの」と言ってますが、よい良いものがあれば教えていただけたら喜びます。

カルーゼル

OWL Carousel

スライドとフェードのみのシンプルなカルーゼル。複数枚レイアウト, レスポンシブ, Ajax, Lazy Load, CSS3アニメーション対応。APIも豊富で、ループ再生以外の大抵のことは出来る。

Googleマップビルダー

Google Map Builder by MyNameIsDonald

ページに埋め込むGoogleマップのコードをちゃっちゃか作るにはこれ。Google Maps APIを学ぶモチベーションがなくなる。

スピナー

ACTIVITY INDICATOR

画像ロード時など Mac · iOS でおなじみの “スピナー” を表示させる。軽くてSVG対応できれいで、IE6にも対応している。最近のChromeのアップデートで、ダウンロードしたオリジナルでは動作しない場合があるのでその場合にはここに書かれている修正パッチを当てればよい。

CSS Transitionsハンドラ

Transit

CSS Transitionsを扱えるライブラリでさいきょうを探すのは、iPhoneのToDoアプリのさいきょうを探すのと同じくらい困難なこと。ゴールなんてないように思える。なので、自分が一番よく使っているものを挙げておく。探究心を捨てるつもりはないけれど、正直これで出来なくて困ったことはない。

現在のバージョンではCSS Transitions非対応のブラウザでdelayプロパティが無視されるバグがあるけれど、quqさんが直してくれた。天才。あと、サイト上で配布されているものは微妙にバージョンが古いので、githubから最新版をダウンロードする方が良いです。

HTMLテンプレート

HTML5 Boilerplate

HTMLやCSSのリセット処理、.htaccessのあれこれやっといた方がいいんじゃねを網羅したテンプレート。Google, Microsoft, NASA, NIKEといったビッグネームのモダンなサイトでの使用例も多いしバラク・オバマだって使ってる。とにかくアップデートが頻繁で、HTML5サイトを作るなら。のイマが知れるので眺めるだけでも勉強になる。

Compass + SCSSの環境で制作を行っている場合には “compass-h5bp” を使うと幸せになれます。

iOS UIアニメーション ギャラリー

CAPPTIVATE.co | iOS UI Animations

よくあるUIギャラリーと一線を画すのは、UI “アニメーション” ギャラリーであること。マウスオーバーすることで、録画したUIアニメーションをその場で見ることが出来る。

イメージ プレースホルダ

hhhhold!

FFFFOUND!のおされ画像をベースに、指定したサイズやファイルタイプでプレースホルダを生成してくれる。キャッシュさせず、同じ画像パスで別のイメージを読み込みたい場合には <img src=”http://hhhhold.com/500×200?random=xxx“> などとして、異なる値を渡せば良い。

CSSスプライト スタイルソース ジェネレータ

Sprite Cow – Generate CSS for sprite sheets

最近はCodeKitをはじめ、自動でCSSスプライトのスタイルソースを吐き出してくれるもっと便利な奴らがいますが。でも自動すぎて逆に分かりにくい場合もあるので、手動で書くことも多いです。そんなとき、いちいち座標を確認しながら書くと、ぼくみたいなおじさんは目にキます。なのでこれを使う。