jsでぶつかる壁の一つ非同期処理。Adobe Extensionだと基本jsxとの通信くらいしか使用しないですがNode moduleを色々使用したり外部との通信をやったりしていくうちにExtension開発者も徐々にぶつかる壁です。同期処理は上から下にコードを書いていけば上から下に処理を実行しますが非同期処理は処理が実行されてから終了するまで他の処理と同期しないので上から下に順番に処理を実行してくれません。誰もが最初に驚く壁だと思います。そして面倒くさいと感じるでしょう。しかし今日この非同期処理はjsと切っても切れない関係になっていてwebsiteを作る時もクライアントサイドでもがんがん使わ
よく使うファイル操作のメソッド一覧の続きです。 readdirSync(ファイルパス,オプション) フォルダー内のファイルを配列形式で取得します。ver10からオプションに{withFileTypes:true}を渡すとファイルの情報も取得できるようになりました。（Adobe cepはver8） 各ファイルはisDirectoryメソッドでフォルダーかどうかを簡単に識別できるので再帰的にフォルダーを遡る方法が簡単になりました。 ファイルを再起的に取得。 指定したパスからフォルダー名のみ取得。 readFileSync(ファイルパス、オプション) readFileSyncはファイルの中身を読み込
今回はよく使うファイル操作のメソッド一覧です。 fs.renameSync(オリジナルパス、リネーム後のパス) fs.renameはリネームと名前がついていますがファイル移動もこのメソッドを使います。第一引数に元々のファイルパス、第二引数でリネーム後（移動後）のパス。リネーム後と同一のファイルがすでに存在する場合リネーム後のファイルで上書きしてしまうので注意。但し同じフォルダーがあった場合はエラーを返します。 fs.mkdirSync(フォルダーパス,オプション) fs.mkdirSyncはからのフォルダーを作成します。作成するフォルダーパスを引数に渡してください。階層の深いフォルダーを一度に
実際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から取得したり固有のイベントオブジェクトを生成する必要があ
久しぶりのPhotoshopCEPの記事です。 Photoshop上ではイベントをscriptで管理して何かしらの処理を発火させることができます。Photoshopで画像を編集している最中なんかに自動的に指定した処理を発火させることが可能です。レイヤーを追加したら自動的にレイヤー名をリネームするとかトリミング時に画像サイズをアラートで表示する等実装するとよりアプリらしさが増します。 但し今まで解説したようにイベントと言ってもいくつかの種類があって大まかに分けると DOM event CEPのパネル上で起こした動作によって発火するイベント。ブラウザ上で発火するイベントと同じです。clickイベン
デバッグ周りが大変だったりいまだにecma3しか使用できないadobe jsxです。今回cep上でやりとりする時の細い開発情報をさらに載せます。 何度か触れていますがjsx単体で動かす場合は外部ファイルをincludeで読み込むことができるのである程度オブジェクト、関数をファイル事に分けられて見やすくできますがcepからアクセスする場合はこのincludeが使用できません。規模が大きくなるにつれてコードの量も大きくなってくるので厄介です。実はこの外部ファイル読み込みですがcep側のscriptで読み込むことが可能です。やり方は簡単。 func.jsがjsxのフォルダに入っていると仮定してcep
Photoshopに比べて謎な使用の多いIllustratorのCEPですが一番不便なのがデフォルトだとデバッグ時にIllustraotr本体のソフトを一々落とさないとコードの変更が反映されないとこです。Photoshopでいうところの強制Persistentです。参考Photoshop Extensionの開発11 Persistence IllustratorだとデフォルトでこのPersistentがオンになっている故にパネルを一度閉じてもコードの修正が反映されないのです。だからと言ってコードを書き直す度にIllustrator本体を落としてデバッグするのはかなりめんどくさいです。というわ