配置画像の差異を検知する Illustrator Extensionのプロトタイプ ItemInspector
Illustratorで画像を写真画像なりその他の素材を配置することはよくあることだと思います。そしてフォルダーを別の場所に移動させると配置した画像ががいつの間に似たような画像に置き換わったりすることも誰しもが経験することでしょう。Illustratorは配置された画像をaiファイルから見て配置データを相対パスで取得して管理しているのでしょうがこれがたまに上手くいかず同じ名前のファイルの別のディレクトリーに保存されているファイルを読み込んだりします。今回前回の保存ファイルのパスと更新日付をjsonファイルに保存して再度aiファイルを開いた時に前回更新時のデータを比較して前回の状態と新しい状態で差異があれば警告を出すExtensionのプロトタイプを作りました。プロトタイプなのはPCの環境で色々されそうなので仕様について色々考えなくてはいけなさそうですがとりあえずベースを作りたかったため。また具体的にどういう状態で使われるか完全に考えていないので一度ベースだけ作って後々更新しようと考えているためです。今回大まかにどういう仕組みで動いてるのか説明するので気が向いたら自分向けに仕様を変えて作ってみるのも良いでしょう。今回もReactとtypescriptで作っていますがそこら辺にはあまり触れない予定です。
まずは使い方
今回のコードはgit hubにて公開しています。base-reactブランチがより形にしたものでmasterブランチはvanilla jsで簡単に作ったものです。
Illustratorのドキュメントが開かれている状態でsave jsonのボタンを押すと配置画像のaiファイルから見た相対ぱすの位置、更新された日付をjson形式でprevDataというフォルダーに保存します。次回同じドキュメントを開くと自動的にjsonデータを読み込みます。aiファイルの内部に埋め込まれているidデータも自動的に取得しますが失敗した時等にload idボタンを押すと改めて読み込むことができます。その他saveのスライダーをONにするとドキュメントを保存した時に自動手配置データの情報をJSONで保存します。alertはドキュメント切り替える度に前回の配置データの情報と現在の配置データの情報を比較して差異があったら警告を出します。その他に記録されたデータろ現在の配置画像のデータはパネルにリストとして表示されます。
イベントの仕様
まずはドキュメントが保存された時やIllustrator上のアクティブなドキュメントが切り替わった時のイベントですがCEPには僅かではありますが特定の条件下で発火するイベントをwebのDOMと同じような感じで登録することが可能です。詳しくはこちら。
今回使用したのは
-
documentAfterActivate（アプリケーション上でドキュメントが切り替わった後に発火）
-
documentAfterSave（ドキュメントが保存された後に発火）
-
com.adobe.csxs.events.WindowVisibilityChanged（パネルを閉じたり開いた時に発火）
以上の三種類です。これらのイベントを使えば以下のような事が可能になります。
-
ドキュメントを切り替えた時にアラートを出す。
-
ドキュメントが保存された時にファイルを書き出す。
-
パネルが非表示の時はイベントを起こさない。
Illustratorの場合（おそらくPhotoshop以外のCEP）パネル一度表示させると閉じてもバックで動き続けるので一度登録したイベント等はパネルが消えた際にremoveEventListenerで消去しないと発火し続けます。Photoshopの場合は閉じた後もPersistenceでパネルの状態を保持するかしないかコントロールできる。
ドキュメントIDの取得
次にaiドキュメントのIDの取得です。そもそもIDを取得する理由ですが配置画像データの情報を保存する時にJSONで書き出すのですがこのJSONのファイル名をaiドキュメントと紐付けることを当初行ってのですがこのやり方だとaiファイルのファイル名を変えた時にJSONとの関係が消滅してしまうためです。なのでaiファイル自身にJSONのファイル名を紐づける必要がありました。そこでaiファイルに埋め込まれたxmpデータというxmlのような形式の埋め込みメタデータです。Illustratorからはメニュー ファイル -> ファイル情報からドキュメントのxmpの中身を見ることができます。
ドキュメント特有のIDからスウォッチカラーのデータ、サムネイル のデータまで内部的にドキュメントの情報が埋め込まれています。カスタムのタグを作って固有の値を埋め込むことも可能です。これはExtend scriptよりこちらのライブラリを使用すると簡単に読み込むことが可能です。
ちなみに一度このxmp内部に配置データの情報を全て埋め込むことも考えたのですが配列形式のデータを内部に全て埋め込むのもあまりよくないと思ったのでJSONで外部に保存するようにしました。正直詳しいことはあまり把握してないのでxmpについての詳しい解説などは最後に詳しく解説されているサイトを紹介します。
ファイル情報の取得
これは最初にExtend scriptよりplacedItemsで配置データのファイルパスを読み込んでパネル側に渡しています。但しExtend scirptから読み込むとDesktopのパスが”~Desktop”と取得されてこのままだとパネル側では動かないので正式な絶対パスとなるようにdesktopパスを以下の関数で置き換えています。
取得したパスより配置データの情報を読み込みます。Nodeのfsモジュールよりfs.statメソッドを使います。“公式のドキュメントを見るとわかりますが更新日以外にもファイルサイズなど様々な情報を取得できます。今回はmtimeより最終更新日のみ取得してstring型として保存します。さらに取得したファイルパスのaiドキュメントから見た相対パスを取得します。これはpathモジュールのrelativeメソッドより取得できます。詳しくは公式のドキュメント参照。第一引数にaiドキュメントのパスを渡して第二引数に配置されたデータのパスを渡すとaiドキュメントのパスからの相対的な配置データのパスを返します。相対パスを保存する理由はaiファイルでデータを作成する場合以下のように一つのフォルダーにまとめてフォルダーをいろんなディレクトリーに移動したりする可能性がある事を前提としたからです。
大元のフォルダーを動かしても配置画像とaiファイルの相対的な関係は変わりません。但しこの方法だとフォルダーの外側にある画像データを配置するとaiドキュメントのディレクトリー位置が変わると相対パスの関係も変わってしまいファイルの比較がうまくいきません。
ファイルの差異の比較
最後に配置データの差異の比較ですが今回は相対パスと最終更新日を前回の保存時の状態と最新の状態で比較して差異があった場合に警告を出すようにしています。相対パスの問題は前回述べた通りです。そして最終更新日ですがまずfs.statで取得した日付がどのような環境でも同じように取得できるかイマイチ自信がないです。（一応windows10とmac catalinaで簡単に動作確認したら同じように取得できた）
もう一つの問題がファイルをサーバーにコピーしたりするとファイルの最終更新日がコピーした時点で更新されることがあります。比較する対象としてこれらの形式が妥当かどうかもう一度考える必要もあると思いますしこの辺の問題を解決しないと第三者とのデータのやり取りが発生した時にうまく動かないでしょう。その他その気になれば配置画像のカラープロファイル、高さ、幅といったデータも保存可能です。
今後の展望
現状どのような環境でも安定して動くようにはしたいですがそれ以外には特に何も考えてなかったりします。気が向いたらまたアップデートするでしょう。
2021年 7月31日追記
ファイルの更新日、ファイルサイズ等の詳細をリスト形式で表示する新しいbranchをアップデートしました。前回分と差異があれば差異のある部分を黄色くマークしてくれます。
