nodejsで9-patch画像を自動生成する「FourSide1px9patcher」



追記15.05.05：使いやすいようにnodeモジュール化した。
junkoro/four-sides-1px-9patcher

9-patchツールの現状 〜 開発意図

前から9-patchを作るのは面倒だし問題だと思っていた。そこで改めて現状を調べてみたが、やはり9-patchを作るには

・Android SDKのdraw9patch
・Android Asset Studio - Simple Nine-patch Generator
・Eclipseプラグイン「Draw 9-patch Tool」
・Fireworksなど汎用の画像編集ソフトを使う

という感じ。nodejsで、特にgulpで9-patchを自動化できるツールが無いか探したが、これくらい。

gulp-9-patch

このツールはスケーリングしたり非9-patch化する機能しかなく、画像を9-patch仕様に加工することはできない。


開発要件

やはり独自開発するしかないか…もう我慢ならん！こんな ('A`)ﾏﾝﾄﾞｸｾ-ことイチイチやってられるかっての！

ただ、なぜこのような状況なのかは理解できる。9-patchは柔軟性が高く、画像によってパッチすべき場所は変わる。これが自動化ツールが存在しない理由なのだろう。

しかし、画像を作る側が9-patchしやすい条件を作ればどうだろう？たとえばこんな画像で、単純に4辺の周辺1ピクセルを画面にあわせて伸ばすように9-patchすることを考える。

画像はionicのデフォルトスプラッシュスクリーン用の画像

この条件を満たすケースは意外と多いのではないかと。自分的には自動化するためにデザインを犠牲にする覚悟である(^^);

このようなことをしてくれるCLIツールを、後々ionicなどgulpやgruntをビルドシステムとして使っているようなものに組み込むことを考えて、nodejsで開発する。


nodejsでの画像処理をどうする？ 〜 技術調査

調べると、みんなよくimagemagickとかを使ってやっているようだが、できればコマンドラインツールに依存するような形にしたくない。

というわけで、前から名前だけは知っていたけれど、よく調べたことがなかったこれを使ってみよう。

EaselJS | A JavaScript library that makes working with the HTML5 Canvas element easy.

EaselJSはHTMLのCanvasをラップしてFlashライクに扱えるようにするライブラリだ。

CreateJSというFlashコンテンツをHTML5に変換するのをサポートするランタイムライブラリのひとつ。当然Adobeが関係してる。node版もある。

CreateJS/EaselJS-NodeJS

これで描画関連は問題無いだろう。画像ファイル化はどうか？

Automattic/node-canvas

node-canvasはtoBuffer()というメソッドを持っていて余裕でPNG化できるらしい。このBufferをfsモジュールでファイルに書き出せば終了だろう。楽ぅ〜(*^_^*)

しかもPDF化とかSVG化もできるらしい。なんかいつの間にか色々やりたい放題な状況になっていたんだね＼(^o^)／

そもそもEaselJS-NodeJSがこのnode-canvasに依存しているので、かなり成熟しているライブラリなのだろうと思う。とりあえずこれで。


開発準備

$ mkdir FourSide1px9patcher
$ cd FourSide1px9patcher

node-canvasをインストールするには、結構ネイティブ側の準備が必要らしい。さすがにネイティブと無関係とはいかないか(^^);

Installation OSX · Automattic/node-canvas Wiki

HomebrewとかMacPortとかでインストールした方がいいだろう。自分はbrew派なのでbrewで。

MacOSX - パッケージ管理システム Homebrew - Qiita

$ brew install pkg-config
$ brew install pixman
$ brew install cairo
$ PKG_CONFIG_PATH=/opt/X11/lib/pkgconfig npm install canvas


開発

後はエディターでコーディング。

コーディング中に気づいたのだけど、EaselJSは必要無かった(^^); 描画の部分はCanvasだけで事足りてしまった。

やっていることは、元画像に透明の枠をつけ、左上、左下、右上をこのように加工して9-patchする作業。

左上

左下

右上

//モジュール読み込み
var fs = require('fs');
var Canvas = require('canvas');
var Image = Canvas.Image;


/**
 * ピクセル描画
 */
function drawPixel(context, x, y, color) {
  context.save();
  context.translate(x, y);
  context.fillStyle = color;
  context.fillRect(0, 0, 1, 1);
  context.restore();
}


/**
 * 4辺の周辺1ピクセルを9-patch
 */
function fourSide1px9patcher(src, dst) {

  //イメージ読み込み
  var img = new Image;
  img.src = src;

  //9-patchは元画像の周りに1pxの透明の枠を付ける
  var cv = new Canvas(img.width + 2, img.height + 2);

  //コンテキスト取得
  var ctx = cv.getContext('2d');

  //イメージを座標(1, 1)に描画
  ctx.drawImage(img, 1, 1);

  //9-patchの線は黒
  var color = 'rgba(0, 0, 0, 1.0)';

  //ドット描画 - 左上-TOP
  drawPixel(ctx, 1, 0, color);

  //ドット描画 - 左上-LEFT
  drawPixel(ctx, 0, 1, color);

  //ドット描画 - 左下-LEFT
  drawPixel(ctx, 0, cv.height - 2, color);

  //ドット描画 - 右上-TOP
  drawPixel(ctx, cv.width - 2, 0, color);

  //ファイル書き出し
  fs.writeFile(dst, cv.toBuffer());

}


//実行
fourSide1px9patcher('src.png', 'dst.9.png');


実行

$ node FourSide1px9patcher.js

生成されたdst.9.pngをdraw9patchで開くと、意図通りに9-patchされていることを確認できた。

右側で中央のionicロゴが歪んでいない

draw9patchは画像が正しく9-patch加工されていても、拡張子が「.9.png」になっていないと9-patch画像として認識しないので注意する。

次はionicプロジェクトのリソース構造に合わせて9-patchするラッパーを書こう。

追記15.05.05：書いた。
琴線探査: ionicプロジェクトのsplash.pngを自動でリサイズしながら9-patchする「make-9patched-splash-ionic」

コメント

コメントを投稿

このブログの人気の投稿

レオナルド・ダ・ビンチはなぜノートを「鏡文字」で書いたのか？

イメージ
日経14.06.08朝　芸術と科学のあいだ　１７　鏡文字に込めた天才の思惑　福岡伸一 …ダ・ビンチの筆の特徴は、線が左上から斜め右下へと流れていることである。これは彼が左利きだったかららしい。 もう一つの際立った特徴は、文字がすべて鏡文字、左右反転で書かれていることだ… アイディアを盗まれないよう暗号化したのだという説があるが、暗号にしては簡単に解読されてしまう… ダ・ビンチは天才であり完璧主義者であると同時に、大いなる山っ気を持った人物でもあった。 いつも自分を売り込むこと、プランやアイディアを広めることを考えていた。そのためには何が必要か。マスメディアである。 ダ・ビンチの鏡文字は自分の原稿をいつの日か活版印刷するために意図された周到な準備だったのではなかったか。 日経記事より レオナルド・ダ・ビンチは過去の人物の中で最も尊敬する人物だ。彼は本当に何でも出来た。芸術も、科学も、工学も。まさに「万能人 (uomo universale)」。 レオナルド・ダ・ヴィンチ - Wikipedia 当然自分はダ・ビンチの足元にも及ばないが、いくつもの人工言語（プログラミング言語）を使うことができる。ひとつをマスターするのは大変だったが、ひとつマスターするとその他の言語にはかなりの共通点があるので、新しい言語を習得するのにそれほど時間がかからなくなったからだ。 いかに天才であったとしても生きられる時間は限られている。その限られた時間の中であれほどの多方面に渡る物事を習得できたのは、「すべてのものに共通する何か」を習得したからではないかと思うのだ。 自分の知る限り、その「すべてのものに共通する何か」を習得したのではないかと思える人物は、ダ・ビンチただ一人だ。 そのダ・ビンチの新たな側面を知った。山っ気というか、マーケティングにも興味があったようだ。 そのマーケティングには何らかのメディアが必要だ。やはり自分もダ・ビンチは活版印刷のために鏡文字を使っていた説に一票だ。 マーケティングへの興味という他にもう一つ根拠がある。ダ・ビンチが生まれたのが1452年。グーテンベルクの聖書が世界で初めて活版印刷でつくられたのが1455年。 グーテンベルク聖書 - Wikipedia つまり、ダ・ビンチが生きた時代は活版印...
続きを読む

macでsmb（samba）共有サーバーに別名で接続（別アカウント名で接続）する方法

macでsmb（samba）共有サーバーに別のアカウント名で接続したくなった。 接続を解除してもパスワードを保存してしまったために自動的に再接続してしまい、別アカウント名で接続できなくなってしまった(´・ω・`) どうすれば別名で接続できるのか？ Finder＞移動＞サーバーへ接続＞サーバアドレス に下記のように入力する。 smb://アカウント名@ホスト名 ノリでやってみたら、たまたまできちゃった(・∀・) 知らなかったわ〜
続きを読む

Google DriveにCURLでアップロードするには？

イメージ
LinuxからGoogleドライブにファイルをアップロードしたい！ Google Drive にlinuxからファイルを自動アップロードするにはどうしたら良いかを考えていた。 残念ながらlinux版のクライアントは予定はされているものの、まだリリースされていない。さてどうしよう？ 例えば、一応 SDK でライブラリが提供されているのでJavaでクライアントを書くとか？重いなぁ。そこまでやらなきゃいけないか？ そこで、Google DriveはRESTFulなんだからCurlだけでもある程度いけるはず・・・と思ってやってみたらできた。 Get Startedを参考にはじめる。 Google Drive SDK — Google Developers ちなみに、テスト環境はlinuxではなくMacのLIONです。 追記12.07.04 ：CentOS 5 64bitでも正常動作を確認した APIコンソールでアプリケーション登録 まずAPIコンソールでアプリケーション登録をする必要がある。 Google APIs Console Create＞「GoogleDriveUploader」とでも名前を付けて＞Create Project Services＞Drive SDKをON API Access＞Create an OAuth2.0 client ID Product Nameに「GoogleDriveUploader」とでも名前を付けて＞Next Installed Application、Otherを選択して＞Create client ID ここまででこんな情報を貰える。これが必要な情報。 ブラウザでOAuth認証してcodeを取得する 今度はブラウザ上で、先ほど得た情報を使ってOAuthの認証を通す。 https://accounts.google.com/o/oauth2/auth?client_id= CLIENT_ID &response_type=code&redirect_uri=urn:ietf:wg:oauth:2.0:oob&scope=https://www.googleapis.com/auth/drive こんな画面が出るので「アクセス...
続きを読む