exportDiffのアイコン

インデザイン・イラレストレーター・フォトショップ上で簡単に差分できるエクステンションパネルを作ってみた。その名も「exportDiffView」

page2019とか行ってるとPDF差分ソフトがいっぱい展示してましてね、でもいちいちPDFを書き出してセットするのメンドくさくない?というわけでエクステンションパネルだけで何とかならねーかと頑張ってみました!

インデザイン

差分するのは一手間かかる

修正ミス防止に使われるPDFの差分ですがAdobeのAcrobatでも、「ファイルを比較」というのがありますし、他にも色々便利なソフトやweb上にUPするようなサービスもあるみたいですね。

それはそれで便利なんでしょうけど、手数的に一手間も二手間も増えて「煩雑!煩雑っっっ!!」ですよね?

ファイル書出から差分までをワンストップで!

その問題を解決するのが今回開発した「exportDiffView」です。

exportDiffViewのアイコン

「exportDiffView」はAdobeアプリケーション(インデザイン・イラレストレーター・フォトショップ)上からクリック一つで「差分ファイルの書き出し」から「差異」の表示までをワンストップで行えるエクステンションパネルです。

イラストレーター
フォトショップ

exportDiffViewの仕組み

  • 各アプリケーションからPNG書き出しのスクリプトを実行
  • imgタグに書き出したPNGをセット
  • セットしたimg同士で差分し、結果をcanvasに表示

楽勝と思ったんですが、実際開発すると細かい部分がもう死にそうです(いつも)。各アプリケーションごとに書き出しや保存状態チェックのコードが違うし、、、、。

ちなみにPNGファイルは下記のようにドキュメントの同階層にフォルダ作成し、そこに書き出します。

書き出し先のフォルダ

結局画像として検査するので、差分チェックの便利さは前出のPDFを検査するソフト・サービスには及びませんが、手軽さだけは断然ではないだろうか…。

追記2019/07/05

テキストの差分機能を搭載

version1.0.4よりテキストも差分できるようになりました。ワンストップで画像・テキストを一気にチェックできます!オプションでOFFにもできます。

テキストの差分もできます

スポンサーリンク

操作方法(ボタン)

パネルを開くとアラびっくり!ボタンは4つしかないです。
(フォトショップは3つ)

【SaveExportPrint】

ドキュメントを保存し、差分ファイル(.png)を書き出してからプリントダイアログを表示します。変更箇所がなければ保存しません。フォトショップにはこの機能はありません。

【SaveExport】

ドキュメントを保存し、差分ファイル(.png)を書き出します。変更箇所がなければ保存しません。

【DirOpen】

差分ファイル(.png)の書き出し先フォルダを開きます。

【Refresh】

にっちもさっちも行かなくなったとき押してください。

操作方法(パネルメニュー)

パネルメニューはこれまたビックリ!3つしかない!

【Refresh】

にっちもさっちも行かなくなったとき実行してください。

【設定…】

色々設定できます。

いろいろな設定項目

・Add an underbar to the export folder.

差分ファイル(.png)の書き出し先フォルダ名の先頭に「_」(アンダーバー)を付与します。デフォルトはチェック入ってます。

・ImageQuality

差分ファイル(.png)の解像度を設定します。

Original Transparency

変更箇所がないピクセル箇所のオリジナル画像の透明度を設定します。

・loupe mode

差分画像のルーペ機能のオン/オフです。

・loupe size

ルーペの大きさを設定します。

・Difference Color

差分箇所のカラーを設定します。

・layout

オリジナル画像・差分画像のレイアウトを設定します。

【exportDiffViewについて…】

バージョン情報などが確認できます。

フリー版とフル版があります

今回、ナント有料のフル版を用意しました!サブスクリプションにて1年1ドル!つまり1か月約10円です!安い!しかし、安心して下さい!フリー版でも十分に実用に耐える設計になっております。

さらにフリー版でも180日間もの長期間に渡ってフル版の体験が出来ます!機能の違いは次章の表をご参照ください。

exportDiffViewの機能一覧

exportDiffViewのアイコン

フル版 フリー版
書き出し解像度 Minimum – 72dpi・Low – 144dpi・Medium – 216dpi・High – 288dpi・Maximum – 360dpi
フォトショップのみデフォルト解像度設定あり
差分機能 全ファイルOK ひとつ前のファイルとのみOK
異なるドキュメントの差分機能 ×
対応アプリケーション インデザイン・イラレストレーター・フォトショップのCC2014以降
フル版の体験 180日間
価格 1年1ドル(サブスクリプション) 無料

異なるドキュメント同士の差分

紙への印刷は標準プリント機能から

ちなみに印刷して差分を確認したい場合は右クリックからブラウザのプリント機能で印刷して下さい(下記画像は英語版なので「Print…」になってます)。

印刷するには右クリック
印刷イメージ

インストールはこちらから

かなり気軽に差分ができる「exportDiffView」。現在、テキストを取り出しての差分機能の搭載に励んでいます、いずれは連続差分や差分した画像の保存などにも対応したいですね。
インストールはAdobeExchange内から(下記リンク)。
→AdobeExchange:
フリー版:exportDiffView-freeのページ
フル版:exportDiffViewのページ
(詳しいインストール方法に関してはこちらのブログ記事を参照)。

スポンサーリンク

スポンサーリンク

2 thoughts on “インデザイン・イラレストレーター・フォトショップ上で簡単に差分できるエクステンションパネルを作ってみた。その名も「exportDiffView」

  1. はじめまして。
    今回当方のCC2015および2019(win10)にインストールさせていただいたのですが、「エクステンション」に表示されている一覧から選択してパネルの立ち上げまでは行くのですが、残念ながらパネル内にファイルを開くためのボタンなどはなく、どちらも空白表示になってしまいます。パネルには左上部分に「No Documents」と示されるのみです。リフレッシュを押しても同様です。
    もし何か解決方法や手順上の間違いなどがありましたら、お教えいただけないでしょうか。恐縮ですが、よろしくお願いいたします。

    1. 適当なドキュメントを開いてみて下さい。アクティブドキュメントを感知してexportDiffViewは動作します。
      新規ドキュメントは保存後から使用できるようになります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です