このWEBサービスやアプリ達に感謝しなければ年を越せない！僕が今年使い倒した2012年のベストを全部ご紹介！

December 18, 2012 WEBサービス

今年も早いものであと２週間程…

今年は去年に引き続き、WEB屋にとっては激動の年でしたね。サイト設計の話から、開発技術の話、WEB制作の工程大きく見直すことになり、僕自身はなんだか振り回された感がちょっと大きいです。

しかし！どんなに振り回され続けて目が回っていたとしても！必ずそんな僕を助けてくれるWEBサービスやアプリが僕を支えてくれました！年末を迎えるにあたって『感謝しないと年を越せない！』ってレベルでお世話になったサービスを今日は気合を入れてご紹介させて頂ければと思います！

基本僕の体験談がベースなので、もしかしたら参考にも成らない物もあるかもしれませんが、是非お暇な時にでもご覧頂ければなと思います。

では、行ってみましょう！

普段の開発業務系

レスポンシブ要望が多かった本年非常にお世話になりましたResponsive Grid System！

ちなみに僕は多デバイス対応の手段としてレスポンシブを提案する場合は現時点でデバイス対応の『妥協点』であることを理解頂くようにしています。んじゃ、完璧を出せよと言われますが今のところ完璧は無いっぽいので、提案材料としては変換サービスに依存するか、スクリプトやURLで分岐させるか、レスポンシブか、何もしなくてもいいじゃんって成るかの4択になることが多いですね。

その上で、レスポンシブで行きましょうという案件がとにかく今年は多かった。クライアント側がレスポンシブを所望してくる場合もあり、こちらの提案が通りにくかった事もありましたが、元々プログレッシブ・エンハンスメント万歳な案件も多い特徴もあり、このレスポンシブをどれだけ効率的に開発へ当てられるかは今年の課題の一つではありました。

というわけで、僕のブログをリニューアルする時にお世話になったResponsive Grid Systemは現時点で僕が使わせて頂いているグリッドシステムの一つです。理由としては。

とにかくシンプル！ダウンロードしたらCSSファイルしか無いというシンプルさ加減
Grid Systemを一度触ったことがあるなら扱えるので周りと共有しやすい
自分達用にカスタマイズが非常に簡単
特殊なエフェクトや無駄な機能が少ないのが現時点でかなりツボ
LESS、SASSなどに限らず今後何か新しい開発手法が出現した時にも柔軟に対応できそう

っていうのが大きかったですかね。使い方はまた今度簡単にご説明させて頂きたいと思います！

Responsive Grid System

なきゃ大変だったなって意味ではiOSシュミレーター

僕これ知らなかったんですよー。正確には開発人任せだったので全然使ってなかったんですが、これiPhone画面だけじゃなく、Retina iPhone、iPadもいけちゃうんですね。

ちなみに僕はたぶん古いiOSシュミレーター起動したらなんか真っ黒画面だけ映ってまったく起動しなかったんですが、CREAMUさんの記事通りにインストールしたら使えましたーバージョン違いだったんですねー。

Xcode4.3.2でiOSシミュレータを使う方法 | CREAMU

結果的にチーム間での開発効率を挙げてくれましたSASS！

これは以前もちょっと触れましたが、僕はSASSやLESSや勉強しなくていいかなと思ってたんです、そういう物があるって分かって言えれば良いレベルかなと。まぁ一応職種はディレクターなつもりなのでそう思ってたんですが、ダメでしたね。作業する人が完全時給管理であるこっちの文化って事もありますが、SASS辺りを使ってどれだけ作業時間の短縮が行われるかを知っておく必要がガッツリありましたので、めっちゃ勉強してみました。

勉強してみてとりあえず学んだ中でこんな感じで役だったって部分があるとすれば。

mixin使って変数定義しといてガイドライン化（ID、クラスの定義も全部ひとまとめに）すれば自分だけじゃなくチーム内での連携が楽になる
そもそもソート機能だけでもコレまでのコピペしてた回数が激減するので、気付いたら作業時間短縮してる
やっぱCompass便利、っていうかCompass以外使った事ないからよくわからない

こんな感じでしょうか？まだまだ僕もSass使うようになって数ヶ月なので、これからも沢山学びが必要な分野だとは思いますが、現段階でもかなりお世話になっておりますのでまずは共有までに！

Sass – Syntactically Awesome Stylesheets
Blog-Posts/Guide-to-using-SASS.md at master · Integralist/Blog-Posts · GitHub
SASS使いだすときにとりあえず見たサイトの一つ！

速攻で画像圧縮してくれるJPEGMiniはやはり優秀でした

画像圧縮の強い味方は前からJPEGMiniだったのですが、こちらいつもはウェブサイトの方使ってたんです。ですが、今年の中盤くらいからはアプリで使うようになってからより一層使う機会が増えてくれましたね。有料版ですが、この圧縮率には感謝物でした！

他デバイス対応が急がれた今年は画像の圧縮一つとっても高圧縮、高画質が必要とされたので非常にありがたかったですね。

JPEGmini | Mac App

JPG以外の画像圧縮の強い味方ImageOptim！

JPEGMiniは非常に優れた圧縮率を誇りますが、やっぱりPNG画像使う事も半端無く多いわけで、JPEGMiniはPNGに対応してくれてたらどれだけ良かったか。とは思いますが、それでもドラック＆ドロップで速攻圧縮してくれるImageOptimがあったのでなんとか泣かずにすんだかなと思います！

ImageOptim — make websites and apps load faster (Mac app)

画面遷移の確認やレビューに超もってこいなConnect-A-Sketch

今年一つ大きな変化があったとしたら、画面構成を何かソフトウェアを使って作ることが激減したことかもしれません。多デバイス向けの設計を画面構成に起こすと膨大な量になり、何度もやり取りが必要になるためどうしても工数が膨らんでしまいます。

そのため僕の場合は画面構成の殆どを手書きにすることで対応することにしました。打ち合わせ一回で話しを進めながら10枚程度の画面構成を書くイメージです。正直まだまだ問題が多いプロセスなのであまり深く書く気はしないのですが、そんな時超便利だったのが、その画面構成の画面遷移を説明するのに役立ったConnect-A-Sketchというサービスです！

トップ画面から何となくイメージできるかもしれませんが、ようするに画像アップしてそれにリンクエリアを付け各画像毎にコネクトさせるというシンプルなサービスなんですが、ここまでシンプルな物はこれまで無かったので、今年一年は得にお世話になりました。

もしこの辺りの機能性をもっと求めるのであれば有料ですが Onotateなんかは超オススメです！操作デモ動画があるので詳しくはそちらを見ていただいた方が早いかと思います！

Connect-A-Sketch – Upload and connect your sketches to create clickable prototypes

アイコンWEBフォント大活躍のこの一年役だったアイコンWEBフォントまとめ＆ジェネレーターサイト

画像じゃなくていいところはCSS3やアイコンWEBフォントで代用しようぜって流れが非常に強かった今年一年。一個一個アイコンWEBフォントのサイト巡回して良さげなのがあるか見て回るのも面倒だし、どっか一覧になってないかなと思ってた時に教えてもらったサイトが IcoMoon Appというサイトだったんですが、個人的にもっとオススメなのがこちら、 Fontello – easy icon font composerというサイトですね。

色々なアイコンWEBフォントサイトのアイコンが掲載されてあり、使いたいアイコンを選んでDownloadすれば選ばれたアイコンWEBフォントだけを格納したWEBフォントパックになっているという優れもの！

ライセンス表記も各アイコンパック毎に明記されてあるので非常に扱いやすいですね。自作が多かったこの一年でしたが僕も何度となくお世話になりました！

Fontello – easy icon font composer

開発メンバー間で様々なスニペットを共有Snippi！

以前こちらのブログでも紹介させて頂きましたね。使う機会は限られていますが、たまに開発メンバー間でスニペットの共有をしたい時なんかに知っておくと便利だったツールの一つです！詳しくは僕の記事でも見て頂ければと思います！

サイト表示速度を計測するならやっぱloads.in！

いやはや、カナダは回線遅い方なんでより一層気をつけなければならないのが表示スピードですかね。こちらのloads.inが非常に使えるのが世界50カ国／そして主要4ブラウザからの表示速度の計測が可能なので、日本から見たら超早いけど、カナダだと遅いよねってことにも気をつけることができます！表示スピードの測定という場面でよく使わせて頂いたサイトの一つです！