最近Adobeが押しまくりのExpressです。メルマガでも最近Express Expressとノリノリ(死語)なアプリケーションです。それでそもそもExpressってなんぞやという方も多いでしょう。 Expressとは？ Adobe ExpressとはFigmaみたいに基本ブラウザで動くアプリケーションで用途としてはブログ、SNS用の画像やビデオなんかを難しい知識がなくても用意されたテンプレートや簡単な機能を使って作れるというアプリケーションです。ライバルのアプリケーションはCanvaがそれにあたるのではないでしょうか。 Add-ons ここからが本題ですがAdd-onsとはAdobe Ex
前回の記事より続きになります。今回attachモードを解説してみますがドキュメントを見る限り色々できそうなのですが今回とりあえずわかる範囲で書いてみます。もしかしたらもっと賢いやり方があるかもしれませんのでその場合は後々更新します。 attachモードの基本 前回解説したようにlaunchモードはlaunch処理を開始したその瞬間にデバッグを開始してターゲットのコードが走って終わった後にlaunchモードも終了します。それに対してattachモードは常時アプリケーションと繋いでいる状態になります。attachモード実行後、その瞬間にコード自体は走りませんがEval in …アプリケ
ExtendScript Debugger ver2が遂にリリースされました。 ver1に対してlaunch.jsonを設定するのは同じですが中身の設定は大きく変わっています。 今回とりあえず前バージョンのように動かすことを前提に触ってみます。 launch.jsonは必須ではない 今回より前バージョンではlaunch.jsonファイルが必須でしたが今回よりなくても動かなくなりました。但しlaunchなのかattachなのか、そしてターゲットアプリケーションを実行の度に選択しないと行けないので単発のデバッグでない限り作成した方が良いでしょう。下の図のcreate a launch.jsonを選
BridgeのExtension、ご存知でしょうか？ あまりにもマイナーで情報もネットに特に出回ってなくて尚且つ仕様が他と結構違ってたりするのでちょっと開発するだけでも大変でした。 というわけで開発してみましょう。まずいきなりですがフォルダーの場所からして違うので注意してください。以下になります。 アプリケーション=> Adobe Bridge CC (バージョン 2018 以上) => CEP => extensions VS CodeのExtensionBuilderなんか使ってテンプレートを作成してからこのフォルダーに移動させるのもいいでしょう。但し既存のテキストエディ
何度かNode.jsを通じたソフトの通信について投稿しましたがどうもCEPライブラリーのVulcan.jsをを使用すればもっと簡単にできるらしいのでPhotoshopとIllustratorの簡単な通信をやってみました。 ちなみにVulcan.js自体はここから入手できます。 VsCodeのCC Extension Builder 等ではデフォルトで用意してくれないのでダウンロードしてください。メッセージを送る際に送信側のパネル自身のIDが必要なのでcsInterfaceから取得します。 VulcanMessageオブジェクトにパネルIDとメッセージを渡して送信します。 IDでメッセージの発信
今回jsx側のデバッグについて説明します。まずhtmlパネル側からjsxを呼びましょう。デフォルトで呼び出すメソッドが用意されています。 csInterface.evalScript(“sayHello()”); csInterfaceのevalScriptメソッドでmanifest.xmlで登録したjsx内の関数を呼び出せます（この場合sayHello関数）。 function sayHello(){ $.writeln(“test_…check”); alert(“hello from ExtendScript”); } sayHello関数の中にwritelnメソッド（console
今回はトランスパイルやら何やらの環境構築をしたいと思います。前述の通りCC2017ですらECMA2015もまともに動かないのでAdd on等で公開する事を前提に開発する私としてはトランスパイル自体必須の作業です。 ここの階層にmoduleなんかを設置していきます。というわけでまずはpackage.jsonを作成 トランスパイラですが私はいつもwebpackで環境構築しています。babelのついでにCSS向けのベンダープレフィックス対策やsassの使用環境構築なんかもしてゆきます。このあたりの環境構築に関しましてはicsさんの記事を参考にしました。 babelのインストール。 sass load
前回で最低限の環境の構築ができましたがここからパネルのインターフェイスを定義するindex.htmlとmain.jsの中身に触れます。 ぱっと見中身はいたって普通のhtmlファイルですね。パネルのインターフェイスはブラウザ向けのコードと同じようにhtmlとCSSで定義していきます。但しブラウザ向けと異なるのはPhotoshopのExtensionに搭載されているのはクロームベースのエンジンという事でクロスブラウザ対策の必要がそこまで必要ない（但し全く必要ないわけではない）事、スマートフォン向けのコーディングも必要なければSEO対策も全く必要ありません。正しくhtmlのコーディングが出来なくてd
ここまでで一通り開発の前準備はできました。この段階でPhotoshopを起動してウインドウ>エクステンションを見ると先程追加したExtensionが追加されるはずです。但しこの段階で該当のExtensionを選択してもエラーが出て起動できないと思います。Extension自体に作者の署名等が無い場合通常起動できません。なので無署名のExtensionを起動させるにはPlayDebugModeを設定しないといけません。詳細は公式サイトに書いてありますが初見ですとよくわからないと思います。それで詳細ですがWindowsの場合検索フォームから（スタートアップボタンの横にあるフォーム）からreg
Microsoft Visual Studio Code からCC Extension Builder をダウンロードしてExtensionの開発環境を整えましょう。 CC Extension Builderダウンロード後にshift + command + pを押すと上のウインドウがアクティブになってExtension Creator create a New CC Extensionが選べると思います。 Brackets で開発する場合Extension Builderをダウンロード後に上のメニューにACC Extension Builderの項目が追加されます。 各種プラグインを起動後、