Photoshop UXP Pluginを開発後に配布したい、簡単にインストールできるようにしたい、と言う場合のファイルをパッケージ化手順について触れます。勿論CEPに比べたら簡単だとは思いますがやはりつまずく部分はあります。 アイコンを作成する UXPに関しては開発中はアイコンは一切必要ありませんがパッケージ化する場合はアイコンが必須となります。そしてこのアイコンなのです二種類存在するのですがそこから解説します。具体的にはmanifest.jsonトップレベルにプラグインパネルのアイコン、entrypoints内のアイコンがパネルがツールバーに埋め込まれた時に表示されるアイコンです。 &nb
Illustratorのオブジェクトモデルは複雑で、前回のカラーオブジェクトだけでもややこしいものでしたがグラデーションカラーになるとカラーオブジェクトに加えてスライダーの位置、数などより複雑になります。初見だと混乱すること必須のこのオブジェクトモデルについて紹介します。 大まかな構造 まず前回のカラーオブジェクト同様グラデーションオブジェクトに選択したグラデーションパスアイテムからアクセスします。単純なフラットな塗りの場合fillColorプロパティにアクセスすればカラーオブジェクトにアクセスできましたがご存知の通りグラデーション、それ自体が複数の色データを保持しています。さらにグラデーショ
Illustrator用のExtension、gradientBoxを作りました。グラデーション内の色を一括で変更したり調整するためのExtensionです。例えばグラデーションの色全体の明るさを変えたい時にいちいち全てのグラデーション内の色を一つ一つ調整するのもかなりの手間です。このExtensionではこのような調整をボタン一発でできるようになります。 使い方 基本はグラデーションアイテムを選択してカラーを読み込みます。キーのいろか塗りの色か事前に選んでください。その後に読み込んだ特定のカラーを調整します。調整したいカラーにチェックを入れて調整する数値を左のフォームに入力。青いボタンを押し
Photoshop UXPのドキュメンを眺めるとオブジェクトモデルの数が非常に少ないのがわかります。レイヤー、ドキュメント、アクション、選択範囲くらいしかないのですがその他のメソッドは？というとbatchPlayで実行できます。このあたりは何度かこのblogでも取り上げましたが具体的にその手順まで書いていませんでした。という事で早速やってみたいと思いますがまずjardicc氏のalchemistというUXPプラグインを使用します。これはAdobeのマーケットプレイスからもインストールできます。 しかし情報の欄を読むと開発進行中のバージョンをGitHubからダウンロードして使用する方がおすすめと
jsとhtmlとcssでアプリケーションが作れるElectronでドロップアイコンを作ってみます。Photoshopでいうドロップレット ですね。アップルスクリプトなんかでも作れるのですがそこはアップルスクリプト覚えるのめんどくさい、やりづらいという方向けにやっていきます。入門を済ませた方なんかはお分かりですがElectronはnpmでインストールするところから始めます。今回パッケージ化も行うのでそれを見越してパッケージ用のモジュール、electron-builderもインストールします。この時devDependenciesでインストールしてください。dependenciesでインストールする
Adobe scriptを書く方にとってはもはや当たり前となりつつあるJavascript。しかしAdobe周辺の作業に関わらずPC周りのあらゆる作業を自動で捌きたいと思った方も多いと思います。でも別言語はよくわからない、PowerShell?WSH?VBA何それ？Apple script?それ食えるの？という方にぴったりのネイティブアプリの開発方法、フレームワークがあります。Electronです。 Electron Electronとはhtml,cssでUI周りを作って内部の動きjsで作れるフレームワークです。つまりweb siteを作る技術でそのままアプリが作れる代物です。Adobe CE
Photoshop UXPのドキュメントを見るとReactの名前が何度か出てきます。今後Reactを使った開発がさらにサポートされるのかもしれません。実際マルチウインドウの開発のサンプルもReactを使うことを前提のサンプルが上がっていました。というわけで今回はReactを使ってマルチウインドウを開発してみます。 開発環境 今回React,Redux,typescript,styled-componentsを使って開発します。typescriptとstyled-componentsはいつも使っているので今回も使うだけです。今回グローバル変数もパネル間で共有してみたいのでReduxを使用してパネ
CEPに比べて簡単になったUXPの開発ですがとはいえCEP含めてAdobeのplugin開発が初めてだとなかなかとっつきにくいでしょう。というわけで最初の開発の一歩を解説します。開発にあたってAdobe Developer Toolが必要になるのでここを参考にCreative Cloudのアプリからインストールしてください。インストール後にアプリを立ち上げます。 初めて立ち上げた場合はアプリのリストは空欄になっていると思います。とりあえず開発に着手しましょう。着手前に空のフォルダー を適当な場所に作ります。今回CEPと違ってpluginを特定のディレクトリーに置かないといけないわけではないので
ECMA2015以降classベースのオブジェクトの書き方が可能になりました。それまでの関数式ベースの書き方から大きく変わりました（但し中身は同じ）。今回classベースのオブジェクトの書き方を解説します。まずはECMA2015以前の関数式ベースのコンストラクトの作成について。 ご覧の通りECMA5まではコンストラクトの作成は関数をベースにしています。関数の引数にインスタンスのプロパティにしたい値を渡してthisで受け取る、というものでした。thisは所有者のインスタンスによって値が縛られます。このようにコンストラクトをnewした時に初めてthisの参照先が決まようになっています。またオブジェ
javascriptというかプログラミングを始める上で最初の壁がどうやって始めるのか。言語によっては仮想環境とか色々ややこしかったりします。その点javascriptは簡単に始めることのできる部類だとは思いますがそれでもブラウザ上で動かす大元のjavascriptはhtmlがなければ全く動きません。勿論javascriptを動かすだけの簡単なhtmlファイルを用意するくらい特別難しいわけでもないですが毎回用意するのは面倒でしょう。Adobe scriptならExtendScript ToolkitというAdobe script用のお手軽なエディターもありますがMacだとcatalina以降の環