インストールが複雑怪奇だったUXP SWCでしたが簡単にインストールできるパッケージが公開されました。UXP SWCですが一からインストールする場合、詳細について知りたい場合はこちらの記事を参照してください。パッケージのインストールからwebpackの設定まで一通り完成した状態でインストールできるの簡単に導入できます。Vanilla.JSとReactに対応したものが二種類公開されています。 ちなみにパッケージのURLは以下になります。InDesignもPhotoshopも対応しています。XD…? create-swc-uxp-app create-swc-uxp-react-app
UXPの型データが公式から遂に公開されました。 過去にも公開されていましたが長い間更新されていなかったものと違って今回はUXP7.3対応らしいです。それで今回使った所感。 使い方 TypeScriptなので環境構築が必要です。webpackでやる場合は過去の記事のPhotoshop UXPでtypescriptを使うを参照してください。公式のページでも触れらている通り最低限以下のtsconfig.jsonの設定が必要です。 またuxpモジュールだけでなくfsモジュールやpathオブジェクトの型データも揃っています。 ただ現状は不完全な形での公開 ドキュメントでもまだ不完全な部分があると触れらて
Adobeの各種アプリケーションがアップデートされました。IllustratorにもAIが搭載されて自動でベクターが作れる機能とか来ましたがここではいつも通りスルーしてUXPの話題です。Photoshop UXPの25.1の変更内容がアップされました。主にSpectrum Web Component(以下SWC)のReact対応でしょうあ。Web-Components版は既に対応していましたが今後はReactのコンポーネントも扱えます。ちなみにSWCとかWeb-ComponentsとかSpectrumUXPあたりの違いはこちらのページを参照してください。 実装してみる 公式のサンプルコードがあ
Spectrum Web Component(以下SWC)が2024のPhotoshopよりベータ版の実装から正式な実装になりました。従来のSpectrum UXPより充実したコンポーネントのパーツが使えるようになります。尚SWC,Spectrum UXPといったこの辺の基本は過去の記事、Photoshop 24.5ベータ UXP 7.0追加APIをご覧ください。使用にあたってwebpackとyarnを使いますがある程度事前の知識が求められるのは覚悟してください。実装にあたっては公式のドキュメントと
みなさんご存知の通りExtendScriptはECMA3の古いシステムがベースとなっています。小規模なExtensionの開発をするのでしたらそのまま古い環境で書いても問題ないのですが問題はコードの規模が大きくなればなるほど問題が増えていく事です。CEP下のExtendScriptは従来のコンソールの値が表示されなくデバッグがやりづらいという問題もありましたがExtendScriptDebuggerver2の登場によってこれらの問題は解決されつつあります。しかしimport、export文が使えない事によるグローバル汚染。パネルとExtendScriptでやりとりを行う時の値の受け渡しで失敗し
前回の記事でNext + Vercelでサイトを作ったという記事を書きましたがちょっとあまりにも良くなかったので今回大幅に作り直しました。新しいサイトでも主にAdobeScript関係のまとまった情報を載せてゆく予定ですが単発の記事、新しい情報は今まで通りブログとTwitterで更新してゆく予定です。特に目新しいことはやってないのですがどんな風に開発したかの記事です。 ちなみに該当のサイトはこちらになります。 導入した技術 前回同様今回もTypeScript + React + Styled-componentで作成したのですがそれ以外にもコンタクトフォームの作成のためにGoogle reCA
振り返ったらPhotoshop UXPとNode.jsについてまとまった記事を書いていない事に気づいたので書くことにしました。まあ結論から言うとUXP上でNode.jsは使えないです。しかし下記のコードを見ると誰しもがNode.jsベースで動いたコードと思ってしまうとは思います。 requireでPhotoshopモジュールを呼び出してPhotoshop関係のメソッドを実行しています。見た目そのままNode.jsではありますがそれでは以下はどうでしょうか。 結果は以下。 pathモジュールもfsモジュールも一見使えそうではあります。そのpathモジュールのメソッド、例えばextnameやdir
Electron,ExtensionとかれこれずっとReactで開発してきたのでそろそろNext.jsでサイトでも作ってみたいなと思ったところだったので簡単なサイトを作ってみました。勿論おおよそ普段のReactと同じような感じで開発できたのですが少し戸惑った部分もあったので備忘録としてまとめました。本当にメモ書き程度の内容です。サイトはこちら。 Next.jsの導入 チュートリアル的なものが書かれたサイトで他にもっと詳しいサイトがあるのでここでは簡単にしか書きません。まずはインストールです。 これだけでベースとなるパッケージがインストールされます。ただし今回これに加えてtypescriptとs
Photoshop UXP Pluginを開発後に配布したい、簡単にインストールできるようにしたい、と言う場合のファイルをパッケージ化手順について触れます。勿論CEPに比べたら簡単だとは思いますがやはりつまずく部分はあります。 アイコンを作成する UXPに関しては開発中はアイコンは一切必要ありませんがパッケージ化する場合はアイコンが必須となります。そしてこのアイコンなのです二種類存在するのですがそこから解説します。具体的にはmanifest.jsonトップレベルにプラグインパネルのアイコン、entrypoints内のアイコンがパネルがツールバーに埋め込まれた時に表示されるアイコンです。 &nb
webpackについては何度か触れましたが今回もっと深く触れたいと思います。webpackの役割はいくつかのファイルに分割されたjsファイルを一つにまとめるツールです。コードが複雑化するにつれファイル、一つあたりのコードが長くなって読みづらくなったり変数の管理が大変になります。なので各モジュールに役割事にコードを分割してメインのjsファイルで読み込ませる事で読みやすく、管理のしやすいコードが実現できます。まとめるついでにjsのコードを古いECMAに変換したりsassをcssに変換してモダンなコード書きつつ古いブラウザに対応させることが可能です。ReactやVueを使用する場合もこういった変換作