ようこそ2024年です。InDesignにもUXP Pluginの波がやってきてScriptのシステムも変化の波がやってきています。それで今回はAdobeアプリケーション間の連携についての記事になります。 現状使える選択肢 Scriptを使用したアプリケーション間の連携ですがBridgeTalkが一番有名でしょう。ExtendScriptのみで動くのでシンプルです。それで二つ目はExtension間で異なるアプリケーションでも通信が可能なVulcan.jsです。(Vulcan.jsの簡単な概要は過去の記事を、もしくは実際のコードのコメントを参照)通信以外にも他アプリケーションの稼働状況も確認で
最近CSSの進化がすごいですね。カスケードレイヤー、コンテナクエリ、sin、cos関数と次々と大幅な機能が追加されています。IEのサポートが終わって以来IEを意識する必要が無いため今後新しいCSSがどんどん取り入れられるでしょう。 今後どんどん使われれそうなCSS 任意の要素の幅などを分岐点として特定の要素のCSSを変えることができるようになるコンテナクエリ、CSSの入れ子がSass無しでもできるCSSネスト、簡素に中央の配置ができるdisplay:gridのplace-content: centerなど色々あります。複雑なレイアウトを組むわけでなくてもCSSネストなんかは特別な環境設定を行わ
*今回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パネルの相互的な通信を可能とするライブラリです。
webpackについては何度か触れましたが今回もっと深く触れたいと思います。webpackの役割はいくつかのファイルに分割されたjsファイルを一つにまとめるツールです。コードが複雑化するにつれファイル、一つあたりのコードが長くなって読みづらくなったり変数の管理が大変になります。なので各モジュールに役割事にコードを分割してメインのjsファイルで読み込ませる事で読みやすく、管理のしやすいコードが実現できます。まとめるついでにjsのコードを古いECMAに変換したりsassをcssに変換してモダンなコード書きつつ古いブラウザに対応させることが可能です。ReactやVueを使用する場合もこういった変換作
こちらの記事で紹介した通りAdobe cepはファイルやフォルダーをダイアログで選択できるメソッドを持っている。それでここで紹介した通りにやればファイルパスが取得できるのだがCC2019とCC2020で使用が変わった？ 取得したパスにいつの間にか頭にfile:///とスキームが付くように変わってるじゃないか。デバッグしててエラーが出てなんかおかしいと思った。ちなみにこのままだとpathだと認識されないのでNode.jsのfs.statSyncで読み込ませてもエラーを返します。なのでpathのstringとしてパースする必要があります。やり方は至極簡単。 ネイティブモジュールのurlからパースす
Adobe JSXと違ってCEP周りの環境は日々進化しています。既に3,4年前に比べて開発環境が大きく変わったのでここに私の開発環境を書いておきます。 テキストエディター 今から始めるならVSCode一択でしょうか。Extend script debuggerのプラグインでJSXのデバッグもできます。CC Extension BuilderでCEPの雛形も作ってくれます。Adobe bracketsは一時期人気がありましたが今はどうでしょうか？だんだん古い情報しか検索に引っかからないようになりました。 デバッグ 2020年上旬あたりに突然Google chromeでCEPでのデバッグが出来なく
前回の記事ではJSXでのイベントに触れました。JSX上で設定した場合ぱっと見イベントの設定がわからないので思わぬ場面で動く場合もあります、というわけでここはExtensionパネルの出番です。イベントのオン、オフをパネル上で表示させればユーザー側にイベントの可否を視覚的に表示することが可能です。やはりhtmlとcssでインターフェイスを作れるのは強い。 CEPでのイベントですがDOMと同じようにイベントを追加してイベント発火時にコールバック関数が動く。そして何かしらの処理がPhotoshopに走るという具合なのですがイベントIDをjsxから取得したり固有のイベントオブジェクトを生成する必要があ
Photoshopに比べて謎な使用の多いIllustratorのCEPですが一番不便なのがデフォルトだとデバッグ時にIllustraotr本体のソフトを一々落とさないとコードの変更が反映されないとこです。Photoshopでいうところの強制Persistentです。参考Photoshop Extensionの開発11 Persistence IllustratorだとデフォルトでこのPersistentがオンになっている故にパネルを一度閉じてもコードの修正が反映されないのです。だからと言ってコードを書き直す度にIllustrator本体を落としてデバッグするのはかなりめんどくさいです。というわ