タイトルの通りですが、FireworksからJSONファイルを書き出すコマンドと、そのJSONファイルを読み込み可能な限りFireworksの構造をSketch 3へ取り込むプラグインを作りました。
Fireworksの開発が2013年に事実上中止し、次期OS XことmacOSではAdobe CS6シリーズの動作に必要なJava SE 6がサポート外となることから、他のツールへ移行された方が大半でしょう。そのような状況で、いまさら過去のFireworks PNGを扱うことも少なくなっていると思いますが、開けなくなる前にコンバートする方法の一つとして作成しました。
こんな感じです。
インストール
Fw to JSON
Fireworksコマンドは、次のどちらかのフォルダへ入れてください。Windowsのかたは、お手数ですがググってください。ちなみにOS X版でしかテストできていません。
~/Library/Application Support/Adobe/Fireworks CS6/Commands
/Applications/Adobe Fireworks CS6/Configuration/Commands
FwJSON to Layers
Sketch Toolboxを使うかZIPをダウンロードしてください。ZIPをダウンロードした場合は、伸張したフォルダにある.sketchplugin
ファイルをダブルクリックすればインストールできます。
READMEには書いていませんが、開発を始めたのがSketch 3.4.xあたりだったため、このバージョン以上であれば動作する可能性はあります(が、環境を整える時間が取れないため、互換性テストはしていません)。
使い方
まずは、FireworksでJSON形式としてエクスポートしたいファイルを開きます。新規で作成している場合は、1度保存してください。
コマンドから「Fw to JSON」を実行します。Fireworks ConsoleとDOM Inspectorをインストールされている場合は、処理に時間がかかり落ちる確率が高くなるため、インスペクタを非表示した上でFireworksを再起動してからコマンドを実行してください。
表示されたダイアログで保存先を選択します。
もし警告が出たら、「同じ名前のファイルが存在するので上書きしてもいい?」って怪しい英語で聞いてます。
エクスポートが始まったら、アラートが出るまで眺めておいてください。
エクスポートしたオブジェクト数やテクスチャ数を、それとなしに表示します。
エクスポートが終わったらSketch 3で新規ドキュメントを作成し、プラグインを実行します。
ダイアログで先ほどエクスポートしたJSONファイルを選択します。
少し待つとインポート完了です。この記事に使用した画像の内容程度だと一瞬ですが、3.5MBぐらいのJSONファイルを読み込むと、20〜30秒ほどかかります。
詳しい仕様等は各ページをご確認ください。
経緯的なもの
Fireworks PNGをPhotoshopで開くことはできますが、再現率は100%ではありません。もちろん、拙作のプラグインを用いてSketch 3へインポートしても、欠落する情報は多々あります。ただ、ひとまず汎用的なJSON形式で書き出せるだけの情報を残しておけば、他でも流用しやすくできるのでは? ということつくり始めたものです(そういう意味でいうと、JSON to Layersはおまけ的な位置づけ)。
JSONであれば、Photoshop・IllustratorはJSXで、CocoaScriptに対応しているAcorn等でも、取り込むことはできるんじゃないでしょうか(その労力に見合うかはおいといて)。個人的にFireworksの代替アプリとして推している、Affinity DesignerがCocoaScriptに対応すれば最強なんですけどね。
極力必要な情報は書き出すようにしていますが、コトの発端がSketch 3で取り込むことだったため、すべての状況には対応しきれていないかもしれません。そこはPull Requestをお待ちしてます。
Fireworks向けのコマンド制作はこれが最後になるでしょう。まだFireworksを使ってる方は、そろそろ「おやすみ」と言ってあげていい頃じゃないでしょうか。
謝辞
プラグインの制作にあたり、Fireworks PNGをご提供くださった皆さま、ありがとうございました。