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以降の環
javascriptにおいてundefinedの扱いには誰もが慎重になるでしょう。undefined、それ自体がバグの原因になり得ます。変数の宣言でもオブジェクトのプロパティでもundefinedを避けるために事前に仮の値を代入したりする事もしばしばあります。今回undefinedの扱いを紹介します。 関数のデフォルト引数 ECMA2015よりデフォルト引数がサポートされました。これは関数の引数に何かしらの値をデフォルトの値として渡すことができます。ご存知の通り関数の引数は何も値を受け取らなかった場合はundefinedとなります。ECMA2015以前ですと以下のようにデフォルトの値に対応する
string型のプリミティブ値、地味に扱いが面倒なことがあります。ゼロパッディング、余白の削除、等。string型も最新の環境では色々便利になっています。 テンプレートリテラル ECMA2015以前、あるstring値を代入時に例えばstring値と関数の結果、変数をつなげる場合、ダブルクォート”もしくはシングルクォート’を使用して変数、式の範囲とstringの範囲を細く分ける必要がありました。 ダブルクォートかシングルクォートをstring値として使用する場合はどちらかで文字列を囲ってその文字列の中にどちらかを使用するという面倒なものでした。またクオートを何度も囲い直