webpackについては何度か触れましたが今回もっと深く触れたいと思います。webpackの役割はいくつかのファイルに分割されたjsファイルを一つにまとめるツールです。コードが複雑化するにつれファイル、一つあたりのコードが長くなって読みづらくなったり変数の管理が大変になります。なので各モジュールに役割事にコードを分割してメインのjsファイルで読み込ませる事で読みやすく、管理のしやすいコードが実現できます。まとめるついでにjsのコードを古いECMAに変換したりsassをcssに変換してモダンなコード書きつつ古いブラウザに対応させることが可能です。ReactやVueを使用する場合もこういった変換作
前回Illustratorでアクションを生成して実行してみましたが面倒です。面付け作業の効率を上げる時によく使ったりするのですが一々書くのも億劫なのでよく使用するアクションをオブジェクト化しました。以下からコードをコピーできます。 Illustrator actions 予め決まったアクションの文字列を返す関数をコンストラクトオブジェクトに渡してインスタンスオブジェクトとして生成。生成したオブジェクトのlaunchActionメソッドでアクションを実行します。リサイズや移動の関数なんかは第二引数にオブジェクトをオプションとして渡すことにより移動量やリサイズの拡大率を調整できます。 これがアクシ
Adobe JSXが古くて動作が遅いというのは皆さんご存知の通りですがIllustrator上でscriptを使用して沢山のアイテムを動かす、調べるといった処理をとにかく重くなりがちです。簡単なポスターならまだしも実際に仕事でIllustratorを触ってる方はどのような職種でも何重にも重なったレイヤーや百に近いアイテムのドキュメントは珍しく無いでしょう。こういった複雑なデータの版下データを面付けするとか幾つも配置させるとなるとscriptの出番、となるのですがこういった複雑なデータを扱うのはとにかく苦手で、ただ移動させるだけでもデータが複雑ですとかなり時間がかかります。さらにクリッピングマス
*2022年3月25日 ver2.0を公開しました。詳細はこちらから。 新しくExtension開発しました。今回はIllustrator用です。Illustratorのドキュメントに配置された画像をNode.jsで監視して、更新されたら自動的にドキュメントを開いて保存するというものです。ポスターなんかで画像の色補正をしている時にテストプリントの度に補正->pdf保存->出力 補正->pdf保存->出力と繰り返すのが面倒だと思ってこの一連の作業を自動化するために開発しました。ここで紹介したものをExhangeで公開するために開発し直したものです。具体的には監視したい画像
こちらの記事で紹介した通りAdobe cepはファイルやフォルダーをダイアログで選択できるメソッドを持っている。それでここで紹介した通りにやればファイルパスが取得できるのだがCC2019とCC2020で使用が変わった？ 取得したパスにいつの間にか頭にfile:///とスキームが付くように変わってるじゃないか。デバッグしててエラーが出てなんかおかしいと思った。ちなみにこのままだとpathだと認識されないのでNode.jsのfs.statSyncで読み込ませてもエラーを返します。なのでpathのstringとしてパースする必要があります。やり方は至極簡単。 ネイティブモジュールのurlからパースす
Adobe JSXと違ってCEP周りの環境は日々進化しています。既に3,4年前に比べて開発環境が大きく変わったのでここに私の開発環境を書いておきます。 テキストエディター 今から始めるならVSCode一択でしょうか。Extend script debuggerのプラグインでJSXのデバッグもできます。CC Extension BuilderでCEPの雛形も作ってくれます。Adobe bracketsは一時期人気がありましたが今はどうでしょうか？だんだん古い情報しか検索に引っかからないようになりました。 デバッグ 2020年上旬あたりに突然Google chromeでCEPでのデバッグが出来なく
JavaScirptでAdobeのアプリを自動化したい方向けの入門記事です。入門と言っても開発のやり方とか、文法の話ではなくそもそもJavaScriptってなんじゃらほいという話です。実際scriptを書いているとあのコードどうやって書くの？とかあの関数どうやって書くんだっけ？という壁にぶつかった時にインターネットで調べるになるはずです。しかしJavaScriptそのものの種類とか理解してないと検索やりかもわからなければどう言った種類の本を買えばいいのかというそもそもコード以前の壁にぶつかるからです。実際こう言った経験を自分自身が何度もぶつかったのでどのような方がこのサイトを見てるかわかりませ
今回ファイル操作を非同期で行ってみます。 Node.jsでの非同期ファイル操作メソッドは同期ファイル操作のメソッドと違って結果をコールバックで受け取ります。それではフォルダーからファイル一覧を取得するfs.readdirメソッドの例から見てみます。 これは何回も見てきたように同期的にファイル一覧を取得するやり方です。これを非同期でやる場合は。 コールバックで結果を受け取ります。エラーが起きた場合はエラーもコールバックで受け取るのが通例です。これをPromiseで結果を受け取ってasync awaitを使えば見た目が同期処理のようなコードを書き込めます。 しかしreaddir他、mkdirやre
非同期処理も処理内容が増えるにつれてまとめて処理したくなるでしょう。同期処理でやっているようにforEachのように。 普通に上から下に書くだけだと冗長な処理になります。これが何十回と繰り返しになるとうんざりしますね。避けるべきでしょう。これを配列処理でまとめて処理します。 for文の中にawait構文を組み込むだけで配列の非同期処理が可能になります。但し実際実行するとわかるのですがfor文の場合逐次的に配列の中身を処理するので並列処理と比べて遅くなりがちです。（このコードの場合毎回timeOut関数が終わってから次のtimeOut関数に移るので2秒+2秒+2秒の処理時間になる）並列処理で処理
元々の本職はPhotoshopによる切り抜きだった自分にとって切り抜きの効率化は自動化の原点であります。徹底して切り抜きを効率していった結果切り抜き作業を自動化してExtension化しました。そんなわけでExtension QuickOutの更新をしました。被写体を選択との違いは影を残してくれる所、処理が早い所でECサイト向きでしょうか。内部的には色域処理を利用して対象の色はヒストグラムからとっています。商品周りのゴミなんかも飛ばしてくれて背景と商品の色がはっきりしている画像に関しては下手に人ので切り抜くより早く加工できるでしょう。 概要 スタジオなんかで撮影された商品の背景を自動的に切り抜