タグ:css 一覧

VsCodeでUXPのコードをチェックしてくれる拡張機能Validator for UXP (Beta)

もう大切なことなので何十回も言っていますがUXPのパネルはブラウザと同じシステムのようで実は別物です。かなり紛らわしいのでgrid-layoutとかいつもの感じで使おうとして実は使えないという問題に何度も直面した方も多いでしょう。ということでUXPのCSSとmanifest.jsonをバージョンに合わせて検査してくれるVsCodeの拡張機能がalchemistの開発者Jaroslav Bereza氏よりリリースされました。(Betaとついてはいますが) インストール VsCodeを使いこなしている方はいつものように拡張機能をダウンロード、インストールするだけです。Marketplaceのサイト

Read more

Photoshop UXP Plugin 2023開発環境

2023年も終わりなのでここ最後にUXPのここ数ヶ月、最近更新された機能とか細かい仕様についての記事です。 Photoshop最近更新された機能 CC2024のメジャーアップデートに合わせるように以下のような機能が更新されました。 action recording PhotoshopアクションからScriptを実行できる機能が実装されました。詳しくは詳しくはこちらの記事へ。 本製品版でも使用できます。 Adobe UXP Developer Tools ver2 開発に仕様する専用アプリ、UXP Developer Toolsがver2にアップデートされて大幅に更新されてテキストエディターも搭

Read more

IE後のCSSとUXPとCEP

最近CSSの進化がすごいですね。カスケードレイヤー、コンテナクエリ、sin、cos関数と次々と大幅な機能が追加されています。IEのサポートが終わって以来IEを意識する必要が無いため今後新しいCSSがどんどん取り入れられるでしょう。 今後どんどん使われれそうなCSS 任意の要素の幅などを分岐点として特定の要素のCSSを変えることができるようになるコンテナクエリ、CSSの入れ子がSass無しでもできるCSSネスト、簡素に中央の配置ができるdisplay:gridのplace-content: centerなど色々あります。複雑なレイアウトを組むわけでなくてもCSSネストなんかは特別な環境設定を行わ

Read more

Photoshop 24.5ベータ UXP 7.0追加API

Photoshop 24.5のベータ版が出ました。それに伴いUXPの公式ドキュメントも更新されたので新しい機能を追ってみます。 UXP7.0とは UXP7.0は何度か言及していますがPhotoshopUXPのAPIと違いファイルシステムやHTML,CSS関連のベースとなるUXP本体のバージョンです。他のアプリケーションも同様専用のAPIとは別にUXP本体のバージョンがあるので他のアプリケーションのUXPバージョンも上がればおそらくほぼ同じものが使えると思います。 今回追加されたもの 公式のドキュメントにまとめられていますが主に以下のようなものが追加されました。 WebComponents関連の

Read more

Spectrum UXPとWebComponents

Adobe UXPプラグインUIを作る場合Spectrum UXPというAdobeが最初からUXPに既に用意しているパーツを使用して開発できます。(後述しますがSpectrum UXPとAdobe Spectrum WebComponentsは別物) サンプルのパネルUI。各パーツはSpectrum UXPで構成されている。 このパーツを使い、細かいパーツのデザイン、レイアウト等一から作成しなくても既存のパーツを使えるので楽です。かなりこだわりがある方ならまだしもデザインに対してそこまで考えたくない方は便利ではないでしょうか。しかしこのSpectrum UXPですが用意されているというよりも埋

Read more

Photoshop UXP ScriptのUIをVanilla JSでこなす

Photoshop UXPでExtendScriptのようにScriptができるようになりましたがあまり盛り上がっている気もしません。実際どうなのでしょうか。 それは置いといてUXP Scriptもダイアログ上にUIを作ることも可能なのでExtendScriptのようにダイアログのあるScriptも可能なのですがこのUI、現状HTMLとCSSで構築しなければならずしかもJS上で全て組み立てないといけないのでExtendScriptのdialogUIに比べてハードルが高くなっています。勿論Reactなんかを使った方が便利ではあるのですがpsjsファイル単体、また簡単なファイル構成で動くでメリット

Read more

Photoshop UXP Scripting触ってみた

Photoshopのマイナーバージョンアップ(23.5)と共にmanifest.jsonやパネルUIを必須としないScriptingが使えるようになりました。これは従来のExtendScriptの代替のようなものでScriptファイル単体でUXPScriptが実行可能となります。以下ざっくりした特徴になります。 基本はUXP Pluginの仕様に準拠。(ES2015が使えたりローカルファイルへのアクセスが制限されていたり) psjsという特殊な拡張子を使用。 実行自体ファイル -> スクリプト -> 参照からpsjsファイルを選ぶだけ。 manifestもUIも必須ではない。ただしScript

Read more

Adobe CEP11 2022年の開発環境

UXPの裏で影が薄くなってきていますがまだまだCEPはAdobeアプリケーション内でも主流ですし当分は現役でしょう。しかし終わりの見えてきたCEPも未だに情報が少なく開発に困ることが少なくありません。というわけで今回はライブラリ関係とjs実行環境関係について触れたいと思います。 JSON2 ECMA3のExtendScript側からオブジェクトをパネル側に返すときに必要なJSONのPolyfillです。(詳しくは過去の記事参照。) douglascrockford氏の公開しているGitHubから使わせてもらいましょう。 Vulcan.js CEPパネルの相互的な通信を可能とするライブラリです。

Read more

Next.js とvercelでサイト作ってみた。

Electron,ExtensionとかれこれずっとReactで開発してきたのでそろそろNext.jsでサイトでも作ってみたいなと思ったところだったので簡単なサイトを作ってみました。勿論おおよそ普段のReactと同じような感じで開発できたのですが少し戸惑った部分もあったので備忘録としてまとめました。本当にメモ書き程度の内容です。サイトはこちら。 Next.jsの導入 チュートリアル的なものが書かれたサイトで他にもっと詳しいサイトがあるのでここでは簡単にしか書きません。まずはインストールです。 これだけでベースとなるパッケージがインストールされます。ただし今回これに加えてtypescriptとs

Read more

Photoshop UXP プログレスバーの実装

2021年12月15日追記。 Photoshop 2022からはUXPにデフォルトで簡単にプログレスバーの実装ができるようになりました。2022以降、余程こだわりがない限りデフォルトのプログレスバーを使うのが言いでしょう。詳しくはこちらの記事。 Photoshop UXPではアプリケーションとパネル側のシステムが統一される、ということでキャンセルボタン同様プログレスバーの自作も今後できるようになるでしょう。勿論アプリケーション側の処理は基本非同期での処理でしょうから非同期での実装を想定します。ということで今回非同期の配列処理を取り上げます。このあたりに関してこちらの記事を参照。 大まかな構造

Read more