FireworksからJSONをエクスポートして、そのJSONをSketch 3へインポートするプラグインを作りました。

タイトルの通りですが、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 ConsoleDOM 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をご提供くださった皆さま、ありがとうございました。

tags