2015年5月5日火曜日

ionicプロジェクトのsplash.pngを自動でリサイズしながら9-patchする「make-9patched-splash-ionic」

先日、nodejsで9-patch画像を自動生成する方法について書いた。

琴線探査: nodejsで9-patch画像を自動生成する「FourSide1px9patcher」

その後、このコードを使いやすいようにnodeモジュール化した。

junkoro/four-sides-1px-9patcher

ここからが本番。ionicプロジェクトでsplash.pngを自動的にリサイズしつつ9-patchするコードを書くときがキタ(・∀・)!!

すでにnodeモジュール化して公開済み。

junkoro/make-9patched-splash-ionic

インストール方法やコード内容についてはgithubに譲るとして、ここでは開発時に困ったことについて書いておきたいと思う。

9-patchについては開発済みだったので何の問題も無かったが、画像のリサイズが困った。node-canvasでもリサイズはできるのだが、リサイズ後の画像のクオリティーがとても使えたものではないのだ(´・ω・`)

この問題はブラウザ上のJSでも同じで、以前に研究したことがあった。

琴線探査: HTML5 Canvasで画像のリサイズするならコレ!「JS-Image-Resizer」

というわけで、再びこの「JS-Image-Resizer」を使わせていただくことにした。結果は上々だ。

ただ、「JS-Image-Resizer」はブラウザ用のJSコードなので、node用に多少変更する必要があった。と言っても、「modules.exports」行の追加とエラーになる部分(WebWorker部)をコメントするくらいだったが。

これでこの件にコメントすることができるようになった。

Bad splashscreen ratio with Android using CLI new feature - ionic - Ionic

この件は自分も困っていたが、他にも多くの人が困っているようなので、このコードが助けになればと思う。