Photoshop 24.5のベータ版が出ました。それに伴いUXPの公式ドキュメントも更新されたので新しい機能を追ってみます。 UXP7.0とは UXP7.0は何度か言及していますがPhotoshopUXPのAPIと違いファイルシステムやHTML,CSS関連のベースとなるUXP本体のバージョンです。他のアプリケーションも同様専用のAPIとは別にUXP本体のバージョンがあるので他のアプリケーションのUXPバージョンも上がればおそらくほぼ同じものが使えると思います。 今回追加されたもの 公式のドキュメントにまとめられていますが主に以下のようなものが追加されました。 WebComponents関連の
Photoshop UXPでExtendScriptのようにScriptができるようになりましたがあまり盛り上がっている気もしません。実際どうなのでしょうか。 それは置いといてUXP Scriptもダイアログ上にUIを作ることも可能なのでExtendScriptのようにダイアログのあるScriptも可能なのですがこのUI、現状HTMLとCSSで構築しなければならずしかもJS上で全て組み立てないといけないのでExtendScriptのdialogUIに比べてハードルが高くなっています。勿論Reactなんかを使った方が便利ではあるのですがpsjsファイル単体、また簡単なファイル構成で動くでメリット
Photoshopのマイナーバージョンアップ(23.5)と共にmanifest.jsonやパネルUIを必須としないScriptingが使えるようになりました。これは従来のExtendScriptの代替のようなものでScriptファイル単体でUXPScriptが実行可能となります。以下ざっくりした特徴になります。 基本はUXP Pluginの仕様に準拠。(ES2015が使えたりローカルファイルへのアクセスが制限されていたり) psjsという特殊な拡張子を使用。 実行自体ファイル -> スクリプト -> 参照からpsjsファイルを選ぶだけ。 manifestもUIも必須ではない。ただしScript
前回の記事でNext + Vercelでサイトを作ったという記事を書きましたがちょっとあまりにも良くなかったので今回大幅に作り直しました。新しいサイトでも主にAdobeScript関係のまとまった情報を載せてゆく予定ですが単発の記事、新しい情報は今まで通りブログとTwitterで更新してゆく予定です。特に目新しいことはやってないのですがどんな風に開発したかの記事です。 ちなみに該当のサイトはこちらになります。 導入した技術 前回同様今回もTypeScript + React + Styled-componentで作成したのですがそれ以外にもコンタクトフォームの作成のためにGoogle reCA
Electron,ExtensionとかれこれずっとReactで開発してきたのでそろそろNext.jsでサイトでも作ってみたいなと思ったところだったので簡単なサイトを作ってみました。勿論おおよそ普段のReactと同じような感じで開発できたのですが少し戸惑った部分もあったので備忘録としてまとめました。本当にメモ書き程度の内容です。サイトはこちら。 Next.jsの導入 チュートリアル的なものが書かれたサイトで他にもっと詳しいサイトがあるのでここでは簡単にしか書きません。まずはインストールです。 これだけでベースとなるパッケージがインストールされます。ただし今回これに加えてtypescriptとs
Adobe MAX2021の開催の日程も決まって最新のAdobeのアプリケーションのメジャーアップデートも近くなってきました。そんなタイミングも近いですがPhotoshopUXPのModal Dialogについての記事になります。UXPとCEPの違いの一つに様々な形態のウインドウが扱えるます。このModal Dialogはウインドウの一つで他のパネル同様HTMLとCSSで自由にカスタマイズできるのですがこのウインドウが開かれている間は他の操作が一切反応しないことです。つまりダイアログの操作が終わるまで他のアプリケーションの操作をさせたくない場合に使える機能です。今回の記事もDavide氏の記事
2021年12月15日追記。 Photoshop 2022からはUXPにデフォルトで簡単にプログレスバーの実装ができるようになりました。2022以降、余程こだわりがない限りデフォルトのプログレスバーを使うのが言いでしょう。詳しくはこちらの記事。 Photoshop UXPではアプリケーションとパネル側のシステムが統一される、ということでキャンセルボタン同様プログレスバーの自作も今後できるようになるでしょう。勿論アプリケーション側の処理は基本非同期での処理でしょうから非同期での実装を想定します。ということで今回非同期の配列処理を取り上げます。このあたりに関してこちらの記事を参照。 大まかな構造
UIを組み立てる上でもはや当たり前のアニメーション。派手で華々しいアニメーションとまで行かなくてもちょっとしたボタンの変化、チェックボックスの動きにも使われています。しかし2021年7月3日現在Photoshop UXPでのCSSによるアニメーション、transitionはサポートされていません。と言うわけでjsで動かすしかないのですがjsでも動くライブラリや機能があります。と言うわけでどのライブラリが動くか軽く調べてみました。 調べたのは以下のライブラリ、機能になります。 requestAnimationFrame アニメーションライブラリー gsap 言わずとも知れた j-query モダ
今回はよく見るスイッチ型のチェックボックスを作ります。凹んだような穴の中にボールが入っていてチェックすると中のボールが右に動いたり左に動いたりするあれで。git hubにあげたform collectionのチェックボックスにもあります。 git hubにあげたのはReact + styled-componentsなのでReact使わない方のためにvanilla jsで解説します。コードの全体像はcode sandboxで公開しています。 htmlを見てもわかりますがhtml要素だけ見ても少し複雑です。何度か過去にも解説したようにinput要素そのものは使わずにdiv要素を使ってゼロからこのス
Adobe CEPとか作ってるとフォームの実装が多いと思います。テキストボックスとかラジオボックス等。自分でいろいろ実装して使いまわす事なんかも多いのでフォーム関係の実装を一つのサイト（というかGit hub）に自分用に集めました。勿論たかがCEPです。ほとんどの人が自分自身でこういったフォームを作る必要性はあまり無いとえます。top coat、Adobe spectrumもしくはデフォルトの状態でも問題無いかもしれません。それでも自分でやりたいという方にも向けてGitHub、GitHubPageでサイトを公開しました。ただ今回React+styled-componentsで構築しているので普