Androidは複数解像度に対応させるために1枚の画像から複数の解像度に引き延ばせる9patchという仕組みが用意されていて、
画像を9patchに変換するツールが有るのだけれど、コレがまたびっくりするほど使いづらいので新しく作り直すことにしました。
ダウンロードはgithubから行ってください。
現行ツールの問題点
上げるとキリがないのですが・・・現行ツールは元の画像を開いてそこにドットを打ち付けていくスタイル。
画像自体ではなく、端っこにドットを打っていくので角の丸めが終わる場所ぴったり打とうとかすると大変。
書き出されたファイルに対して9patchを作らないと行けないので、元の画像をちょっとでも修正するとまたドットを打ち直し。超面倒
しかも、それをインフレートする解像度ごとに一つずつ作成しないと行けない。 もう無理
9patchはかなり強力で使わないと仕事にならない反面、ツールのせいで出来るだけ使いたくないなぁと思っていた人が多いかと思います。
スマートフォンアプリでデザインが重要視されているなかでもっと楽してデザインしたいと思い、いつものごとく自分が使いたいから作ったのが9patch2fireです。
9patch2fireはFireworks上で動くjsf形式のスクリプトファイルです。
Fireworks上で動くので、センターに位置あわせとか、他のオブジェクトと同じ位置にするなどもFireworksの機能を使って簡単にできるし
書き出し前のファイルに9patchを当てるのでコンテンツを後からいくらでも修正できる用になる。
ドロー系ツールなのを活かして自動的にldpi、mdpi、hdpi、xhdpi向けの画像も全て一発で出力できると言うわけ。
使用方法
動作にはAdobe Fireworks
が必要となります。
9patch2fireには二つのスクリプトがあります。
ready.jsfの実行
9patchを作成するドキュメントを開いた後に、ready.jsfを実行します。ready.jsfを実行するにはメニューバーよりコマンド-スクリプトを実行を選びます。
patch2fのready.jsfファイルを開きます。
新しいレイヤー contentとpatchesが追加されます。
ready.jsfは単にcontentとpatchesレイヤーを追加するだけですので、既にcontentとpatchesレイヤーが有る場合は再度実行する必要はありません。また素材の作成前後いつ実行しても大丈夫です。
素材の作成
Fireworks上で素材を作っていきます。この際、contentとpatchesの内容は出力されないためご注意下さい。画像のサイズはxhdpi（1インチあたり約320ドット）で作成してください。
contentおよびpatchesの作成
コンテンツ部分を示すcontentと、引き延ばす場所を示すpatchesをそれぞれのレイヤーに配置していきます。線を描くのではなくコンテンツの上に直接重ねることが出来ます。 イメージでは矩形になっていますがどんな形でも大丈夫です。また複数のオブジェクトを置くことも可能です。
make.jsfの実行
9patchを作成するドキュメントを開いた後に、make.jsfを実行します。メニューバーよりコマンド-スクリプトを実行を選びます。
patch2fのmake.jsfファイルを開きます。
fireworksファイルを保存する前の場合ファイルの保存画面が表示されます。ここで指定したファイル名でファイルが作成されます。
次にファイルを出力するフォルダを指定します。
指定したフォルダの下にoutputフォルダが作成されます。
outputフォルダにはoriginalImage.pngと各解像度ごとのフォルダが作成されています。
originalImage.pngは9patchを出力する元となったFireworksのファイルです。不要な場合削除して問題有りません。
Androidのソースには含めないようにしてください。
各解像度フォルダの中にはそれぞれの解像度に応じた9patchファイルが作成されています。
ライセンス
Creative commons 3.0に基づきライセンス条件を継承の上で自由に改変、再頒布、商用利用が可能です。また、このツールを用いて作成されたコンテンツの著作権は各コンテンツ作成者の帰属します。
お問い合わせ先
githubかこのページにコメント下さいまだ作り始めたばかりのスクリプトなので動作上の問題や足りない機能も有ると思います。皆さんの強力でもっといいツールに育てて行ければと思います。
9patch2fireをgithubからダウンロードする
9patchの出力には対応していませんがイラストレータ向けに各解像度ごとの出力を行うtoAndroidも公開しています。
