新しいIllustratorのExtensionのベータ版公開しました。 ファイル保存時に環境設定、ドキュメントのデータを調べてユーザの好ましくない環境下で保存されていたら警告します。 開発の経緯としてリンクの外れた画像の表示がアップデートで発見しづらくなったりバックグラウンドで保存をオンのままPDFを書き出すとバグで 内容が壊れる現象がIllustratorであるためそれらの事故を避けるためにプリセットやドキュメントの状態を保存時に調べて警告すれば良いのではないかと 思いました。詳しくは吉田印刷所さんがブログで詳しくまとめています。 尚今回のExtensionは過去に公開した配置画像の監視シ
*今回TypeScriptを使った記事になります。 何度も述べていますがExtensionの開発においてパネルとExtendScriptを繋ぐ部分というはエラーが起きやすい箇所であります。開発するExtensionの仕様が複雑になればパネルとExtendScriptの間で色んな値のやりとりが発生します。この時に厳格パラメータの管理を行なっていないと思わぬエラーが発生して延々とパネルとExtendScriptのデバッグをする羽目になります。 ExtendScript側からパネル側に返ってくる値は常にstring型 おさらいになりますがExtendScirpt側から返ってくる値は常にstring型
みなさんご存知の通りExtendScriptはECMA3の古いシステムがベースとなっています。小規模なExtensionの開発をするのでしたらそのまま古い環境で書いても問題ないのですが問題はコードの規模が大きくなればなるほど問題が増えていく事です。CEP下のExtendScriptは従来のコンソールの値が表示されなくデバッグがやりづらいという問題もありましたがExtendScriptDebuggerver2の登場によってこれらの問題は解決されつつあります。しかしimport、export文が使えない事によるグローバル汚染。パネルとExtendScriptでやりとりを行う時の値の受け渡しで失敗し
UXPの裏で影が薄くなってきていますがまだまだCEPはAdobeアプリケーション内でも主流ですし当分は現役でしょう。しかし終わりの見えてきたCEPも未だに情報が少なく開発に困ることが少なくありません。というわけで今回はライブラリ関係とjs実行環境関係について触れたいと思います。 JSON2 ECMA3のExtendScript側からオブジェクトをパネル側に返すときに必要なJSONのPolyfillです。(詳しくは過去の記事参照。) douglascrockford氏の公開しているGitHubから使わせてもらいましょう。 Vulcan.js CEPパネルの相互的な通信を可能とするライブラリです。
今まで何度も述べてきましたがAdobeCEPにはイベントというシステムがブラウザーのjsと同じように存在します。ただしCEPから生成できるイベントの種類はかなり限られていて例えばドキュメントが保存された後、アクティブなドキュメントが切り替わった後など数種類程度しかありません。詳しくは公式ドキュメントを参照。Photoshopの場合これに加えてアプリケーション側のイベントがいくつもあるのでレイヤーを操作した場合、ツールを切り替えた場合に発火するイベント等がを沢山使えます。Illustratorの場合はPhotoshop以外のアプリケーション同様こういったイベントは基本使えないのですがそれを可能に
Illustratorで画像を写真画像なりその他の素材を配置することはよくあることだと思います。そしてフォルダーを別の場所に移動させると配置した画像ががいつの間に似たような画像に置き換わったりすることも誰しもが経験することでしょう。Illustratorは配置された画像をaiファイルから見て配置データを相対パスで取得して管理しているのでしょうがこれがたまに上手くいかず同じ名前のファイルの別のディレクトリーに保存されているファイルを読み込んだりします。今回前回の保存ファイルのパスと更新日付をjsonファイルに保存して再度aiファイルを開いた時に前回更新時のデータを比較して前回の状態と新しい状態で
最後になりました。今回おまけ的にloading画面を作ります。loadingの最中はあらゆる要素の反応を無効にしたいので全ての画面をload画面で覆います。これを図的に表すとこんな感じでしょうか。 立体的な要素の指定はz-indexを行います。詳しくはこちらも参照してください。 まずhtmlでload要素を配置します。 load要素はcontainerには必ず含めないでください。このload要素はcontainerと独立した要素なので。そして以下、css。 円がくるくる回転するcssです。ベースとなっているload要素にz-index:5と高めの要素を指定しています。 このload要素ですが普
jsからjsxに通信する場合、jsx内でエラーが起きても具体的にどこで起きているのか分かりにくい、$.write関数（console.logのjsx版）が使えないなどかなり不便です。これをもう少しやりやすくします。とりあえずVSCodeでデバッグするためにExtendScript Debuggerを使用します。CEPの開発をしながらjsxのデバッグもしたいのでvscodeのlaunch.jsonをCEPフォルダーの直下に作ります。 launch.json CEPのフォルダーからjsx内のjsxのテストを実行できるように“program“を “${file}&
今回からjsxとパネルのjsで通信します。main.jsから通信する前に通信の対象となるjsxを作ります。最初はアクティブなアートボードに対してガイドを中央に引くjsxを動かすjsを書きます。singleProcessというフォルダにsetCenterGuide.jsxを作ってその中にガイドを引くコードを書きます。 今回の通信は特にフォームの数値を渡したりするわけではないので単純にガイドを引くだけのシンプルなjsxです。 setCenterボタンを押すとcenterGuide関数が実行されるようにイベントを登録。関数の引数にjsxのファイル名、singleProcessを渡します。事前に準備し
前回の記事ではJSXでのイベントに触れました。JSX上で設定した場合ぱっと見イベントの設定がわからないので思わぬ場面で動く場合もあります、というわけでここはExtensionパネルの出番です。イベントのオン、オフをパネル上で表示させればユーザー側にイベントの可否を視覚的に表示することが可能です。やはりhtmlとcssでインターフェイスを作れるのは強い。 CEPでのイベントですがDOMと同じようにイベントを追加してイベント発火時にコールバック関数が動く。そして何かしらの処理がPhotoshopに走るという具合なのですがイベントIDをjsxから取得したり固有のイベントオブジェクトを生成する必要があ