Fireworks CS5 のファイルを Sketch ver 3 に移行させてみた

アプリケーションやウェブ用のアイコンなどのイメージの作成・編集に 10 年以上 Fireworks を利用していました。

最新版は Fireworks CS6 ですが、Fireworks CS5 がまだ Yosemite (El Capitan での動作は未確認) で動作するので、Fireworks CS5 を利用し続けています。

ただ、既報のとおり Fireworks の開発継続が公的に休止ということなったので、以前から代替となるソフトを探していて、今は Sketch をメインのグラフィックエディタとして利用していてます。

ビットマップ系の操作はまだ Fireworks に及ばないかなという印象ですが、機能面や使い勝手の部分で Fireworks を凌駕している部分もあって、例えば、

• 起動が圧倒的に速い。
• Retina 対応イメージなど解像度の異なる複数の出力バリエーションが非常に簡単に設定できる。
• ファイル内にある個別のパスやグループ、アートボードそれぞれに出力設定を指定できる。
• 複数パスの結合・交差などを設定するとひとつのパスをまとめてしまうのではなく、パスを維持したまま相互のパス関係を保持するように動作するため、その後で微調整が楽 (もしかしたら、私が知らないだけで Fireworks でもできるのかも……)。

とりわけ出力設定は強力で、一度 Sketch のエクスポートに慣れてしまうと Fireworks でのエクスポートがもどかしいと感じてしまいます。

Fireworks のエクスポートの機能も画像の最適化やスライスに関してとても強力で、その点に関しては Sketch よりも Fireworks の方が優れているような気がします。

というわけでしばらく前から新規に作成するアイコンなどには Sketch を利用しています。

Firework で作ったイメージをどうするか

これまで Fireworks で作ったファイル群をどうするか。

幸い Fireworks はファイルの保存形式に png という汎用的な画像フォーマットを利用しています。

見るだけなら Fireworks がなくても全然問題ありませんし、ビットマップとして取り込むなら単純に Sketch で開くだけ（あるいはドラッグ＆ドロップ）で取り込むことができます。

しかし Fireworks はビットマップだけではなく、ベクター系オブジェクトもファイル内に保持しています。これらをベクターオブジェクトとして Sketch に取り込むには……。

Export SVG

ベクターといえば SVG。

Sketch は SVG で記述されたベクター系オブジェクトをベクター情報を保った状態で取り込むことができます。

ですので Fireworks で作成したベクター系オブジェクトを SVG として出力できれば、どうにかいけそうです。

http://fireworks.abeall.com/extensions/commands/Export/ にて、そのものズバリ「Export SVG」という Fireworks の機能拡張コマンドが公開されています。

http://fireworks.abeall.com/extensions/commands/Export/ よりダウンロードした "Export.zip" を解凍し、その中にある "Export SVG.jsf" を ~/Library/Application Support/Adobe/Fireworks CS5/Commands/ にコピーします。

CS6 の場合、おそらく ~/Library/Application Support/Adobe/Fireworks CS6/Commands/ でしょうか。

Export SVG をつかって SVG ファイルを生成する

Export SVG を所定の場所にコピーした上で Fireworks CS5 を起動すると、Commands メニューに「Export SVG」が追加されます。

英語版の Fireworks では「Commands」ですが、日本語版だと「コマンド」メニューになるでしょうか。日本語版を使っていないので、分からず……。

出力したいオブジェクトを選択して、「Export SVG」を実行すると、

のように確認されるので、「Yes」を選んで出力先を指定します。

あとは出力された SVG ファイルをそのまま Sketch で開けば良いだけです。

トラブルシューティング

まれに空のダイアログが表示されて（実はよく見ると空ではなくて、「,」とコンマひとつだけあるんですが）うまく SVG が出力できない場合があります。

http://fireworks.abeall.com/extensions/commands/Export/ のコメントでも同様の症状が報告されています。私の環境でも何度か起きました。

jsf ファイル自体は javascript です。少し確認してみると、内部の処理でエラーが起きていました。

とりあえずそのエラーを回避するパッチを作ってみました。

--- Export SVG-org.jsf  2011-09-22 05:30:28.000000000 +1200
+++ Export SVG.jsf  2015-11-27 08:20:45.000000000 +1300
@@ -104,13 +104,21 @@
    // prompt user for save location
    var fileURL, dirURL;
    if(exportPages){
+       try {
        var lastDir = dom.lastExportDirectory || fw.getPref("LastExportSVGLocation");
+       } catch (e) {
+           alert('Cannot determine the last used location.');
+       }
        dirURL = fw.browseForFolderURL("Export SVG location", Files.exists(lastDir) ? lastDir : null);
        fileURL = Files.makePathFromDirAndFile(dirURL, dom.docTitleWithoutExtension || "Untitled");
    }else{

        // last save location
-       var lastDir = dom.lastExportDirectory || Files.makePathFromDirAndFile(fw.getPref("LastExportSVGLocation"), "");
+       try {
+           var lastDir = dom.lastExportDirectory || fw.getPref("LastExportSVGLocation");
+       } catch (e) {
+           alert('Cannot determine the last used location.');
+       }
        var filePathForSave = dom.filePathForSave;
        if(Files.exists(lastDir))
            dom.filePathForSave = lastDir;

これを適当なパッチファイルとして保存 (例えば、ExportSVG.patch) して、Export SVG.jsf にパッチを当てます。

$ patch -u Export\ SVG.jsf < ExportSVG.patch

私の環境ではこれで SVG を書き出せるようになっています (この場所以外でもエラーが起きる可能性があると思うので、必ずしもこのエラーが回避できるわけではないと思いますが）。