2014年3月9日日曜日

iOS Appに必要なアイコン15種を1秒で作ってくれるウェブサービスを作った。こうやって作った。

名づけてIconresizer!そのまんまですね!!



何サイズの画像でもいいんで(1024x1024推奨)、ドラッグ&ドロップをするだけで、
iOS Human Interface Guidelines: Icon and Image Sizes
等にある、iOS App開発時に必要なサイズのアイコンを全て(多分)、一瞬で変換してくれます。

技術的には、nodejs + jade + less + coffeescriptで、ナウい感じに仕上がっております。
で、先に一番頑張ったところをいうと、JavaScript(クライアントサイド)で画像のリサイズをしてるってところ…!

詳しくは以下。




そもそも作ったのがもう半年以上前なので記憶もあいまいではありますが、覚えてるところだけでも、どういうプラグイン使ったかとか書いていこうかなと。
作ってる途中でもう、記事書きはじめるべきだったな・・・

ライブラリその1 Wintersmith

markdown形式や、jadeテンプレートを、HTMLに変換してくれるスクリプト。

Blacksmithってのをインスパイアしてるとかなんとか。そっち使ったことないけど。

サーバーサイドは無し、かつnode + jade でやりたいなーと思ってたので、いい感じのnodeのjade変換用バッチ?をキーワードに色々探してみた結果、wintersmithが良さそうっていうのを見たので、使ってみた。
JSONでコンテンツを書いて、coffeescriptでスクリプト書いて、
で、buildすると jadeのlayoutファイルに入れ込んでくれてHTMLにしてくれる。

コマンドラインのCMSって感じで、使い心地はなかなか。


今思えば、gruntと同じようなもんかね…?grunt使ったことないけど。

ライブラリその2 js-image-resizer

一番探すのに苦労した部分。他にもjsでリサイズする方法・スクリプトはいっぱいあったけど、
綺麗にリサイズしてくれたのはこれだけでした。
多分、ググっても出てくるのがほとんどNearest-neighbor方式で、
たしかこれが(2-pass)Bilinear 補間…だったのかな。よく覚えてないけどこれが一番綺麗だったんだよ!!!

ライブラリその3 Javascript-Canvas-to-Blob

名前の通り、CanvasからBlobへ変換してくれるスクリプト。以上!

ライブラリその4 FileSaver.js


saveAs便利ですよと。
Javascript-Canvas-to-BlobでBlobに変換した画像を、ファイルとしてダウンロードさせるために、あると便利なスクリプト。

(いま見てみると、なくてもいいかもしれん。。。)

という感じで

まぁそんなかんじです。npmとかgithubとか使うと、無理矢理なウェブサービスでも結構簡単に実現できてすごいね、って感じっす!

ソースgithubで公開(まぁjsだから見れないわけじゃないけど)とかアツいのかね。ちょっと考えてるけど。


あ、シェアボタンとかとか後で追加するんで、追加したらシェアおねがいしますね^^