元々の本職はPhotoshopによる切り抜きだった自分にとって切り抜きの効率化は自動化の原点であります。徹底して切り抜きを効率していった結果切り抜き作業を自動化してExtension化しました。そんなわけでExtension QuickOutの更新をしました。被写体を選択との違いは影を残してくれる所、処理が早い所でECサイト向きでしょうか。内部的には色域処理を利用して対象の色はヒストグラムからとっています。商品周りのゴミなんかも飛ばしてくれて背景と商品の色がはっきりしている画像に関しては下手に人ので切り抜くより早く加工できるでしょう。 概要 スタジオなんかで撮影された商品の背景を自動的に切り抜
async await の基本は非同期処理を同期処理のように書けるということでした。しかしエラー処理についてまで触れていません。promiseの場合メソッドチェーンにcatchをつなげてエラーをキャッチしていました。async,awaitのエラー処理はいくつかのやり方に別れます。おそらく最もわかりやすいのはtry catchで同期処理のようにキャッチする方法ではないしょうか。 いくつもの非同期処理関数を実行する場合もtry catchで括って一括で管理できます。Promiseがrejectを返した場合はそのままキャッチされるのでわかりやすい。勿論try内でエラーを普通にthrowした場合もキャ
promiseについて解説しましたがpromiseもthenによるメソッドチェーンを重ねる度に見通しが悪くなってきます。慣れてくるともっと見易くならないかと思うはずです。 メソッドチェーンを何重にも繋いで見づらくなってきました。これを同期処理っぽく書いてみます。 async await async 、await は非同期処理を同期処理のように書く糖衣構文である。同期処理と見た目を変えずに書けるためコードの見た目がすっきりします。ちなみに先ほどのコードをasync awaitで書き直すとこんな感じに。 メソッドチェーンが無くなってすっきりしました。async awaitは基本非同期処理を関数で囲
非同期処理のコードを見易くしてくれるpromiseは単体処理だけでなく配列処理をしてくれるpromise.allやpromise.race等があります。慣れないとややこしいですが特に非同期関数をまとめて処理できるallは便利なので使えるようにしたい所です。 Promise.all(promiseオブべジェクトの配列) promise allはpromiseオブジェクトを返す関数をarray形式で受け取り並列処理して結果をarray形式で返します。 見た目がすっきりするだけでなく並列処理で同時に処理を始めて全ての処理が終わってから結果を返します。なので普通にpromiseを続けて処理させるより早
jsでぶつかる壁の一つ非同期処理。Adobe Extensionだと基本jsxとの通信くらいしか使用しないですがNode moduleを色々使用したり外部との通信をやったりしていくうちにExtension開発者も徐々にぶつかる壁です。同期処理は上から下にコードを書いていけば上から下に処理を実行しますが非同期処理は処理が実行されてから終了するまで他の処理と同期しないので上から下に順番に処理を実行してくれません。誰もが最初に驚く壁だと思います。そして面倒くさいと感じるでしょう。しかし今日この非同期処理はjsと切っても切れない関係になっていてwebsiteを作る時もクライアントサイドでもがんがん使わ
よく使うファイル操作のメソッド一覧の続きです。 readdirSync(ファイルパス,オプション) フォルダー内のファイルを配列形式で取得します。ver10からオプションに{withFileTypes:true}を渡すとファイルの情報も取得できるようになりました。（Adobe cepはver8） 各ファイルはisDirectoryメソッドでフォルダーかどうかを簡単に識別できるので再帰的にフォルダーを遡る方法が簡単になりました。 ファイルを再起的に取得。 指定したパスからフォルダー名のみ取得。 readFileSync(ファイルパス、オプション) readFileSyncはファイルの中身を読み込
実際Nodeでフォルダーのファイルを一覧として取得してみます。Adobe CEPの環境でも動きます。ファイル関係のモジュールはfsになりますがfsやpathモジュールはデフォルトで使用できるモジュールなのでnpmでインストールやらなんやらする必要はありません。 コードの頭でモジュールを呼びだすのが良いみたいです。 実際に特定のフォルダーの中に入っているファイルを一覧として取得してみましょう。 今回デスクトップに設置したcopyFolderという名前のフォルダーからフォルダーの中身の一覧を取得します。実際copyFolderという名前のフォルダーをデスクトップに作成して中になんでもいいのでファイ
今までも何度かファイルシステム関連の記事やNode js関連の記事に触れましたが改めてファイルシステムを扱う手段としてNode jsに触れてみます。Node jsは元々サーバーサイドスクリプトなのでブラウザ上で動くスクリプトと違って直接ローカル上のファイルを動かしたり書き込んだりすることが可能なのでファイルシステムを作ることが可能です。反対にブラウザ上で動くクライアントサイド側のスクリプトはセキュリティ上ローカルのファイルを直接いじれないようになっています。ウェブサイトを回覧していて突然スクリプトがユーザーのローカルのファイルを書き込んだりすると危険でしょう。ちなみにAdobeのjsxはまたク
一年以上前に開発したExtension Export Images をアップグレードしました。今回はIllustratorと連動させてPhotoshopで開いている画像をIllustrator上の画像と置き換えたり逆にIllustator上で編集しているデータに配置されている画像をPhotoshopで開いて加工したりできます。 こちらはPhotoshop上で開いたときのパネル。 基本は前回と変わらずPhotoshopで開いている画像をまとめていろんな形式のファイルで保存できます。tiffやeps等アクションでまとめて保存できない形式の画像も保存できるので画像の拡張子の変換なんかにも使えます。以
前回の記事ではJSXでのイベントに触れました。JSX上で設定した場合ぱっと見イベントの設定がわからないので思わぬ場面で動く場合もあります、というわけでここはExtensionパネルの出番です。イベントのオン、オフをパネル上で表示させればユーザー側にイベントの可否を視覚的に表示することが可能です。やはりhtmlとcssでインターフェイスを作れるのは強い。 CEPでのイベントですがDOMと同じようにイベントを追加してイベント発火時にコールバック関数が動く。そして何かしらの処理がPhotoshopに走るという具合なのですがイベントIDをjsxから取得したり固有のイベントオブジェクトを生成する必要があ