Adobe scriptを書く方にとってはもはや当たり前となりつつあるJavascript。しかしAdobe周辺の作業に関わらずPC周りのあらゆる作業を自動で捌きたいと思った方も多いと思います。でも別言語はよくわからない、PowerShell?WSH?VBA何それ？Apple script?それ食えるの？という方にぴったりのネイティブアプリの開発方法、フレームワークがあります。Electronです。 Electron Electronとはhtml,cssでUI周りを作って内部の動きjsで作れるフレームワークです。つまりweb siteを作る技術でそのままアプリが作れる代物です。Adobe CE
javascriptというかプログラミングを始める上で最初の壁がどうやって始めるのか。言語によっては仮想環境とか色々ややこしかったりします。その点javascriptは簡単に始めることのできる部類だとは思いますがそれでもブラウザ上で動かす大元のjavascriptはhtmlがなければ全く動きません。勿論javascriptを動かすだけの簡単なhtmlファイルを用意するくらい特別難しいわけでもないですが毎回用意するのは面倒でしょう。Adobe scriptならExtendScript ToolkitというAdobe script用のお手軽なエディターもありますがMacだとcatalina以降の環
ついにmain.jsに触ります。完成形が以下 今回Node.jsのネイティブモジュールを使用するため冒頭でfsとpathをrequireしてます。更に各種htmlのidタグをdocument.getElementByIdで取得。extensionRoot変数はご存知の通りjsxフォルダーのパスです。 本格的に解説に入る前にnav.jsの関数を実行した時に書いたコードをもう一度確認します。 冒頭の変数を頭に入れつつまずウインドウが開いた時に実行する関数、initから解説します。 非同期処理が入るのでasync関数として定義しています。ここで行っているのは。 jsxの共通の関数等を外部ファイルとし
今回から本格的にjsを書きてゆきます。jsもいくつかのファイルに分けて読み込ませます。その前にいくつか事前準備が必要です。まずはmanifestの編集。 今回メインの処理にNode.jsを使用するためnodeの行を追加します。それに加えて–mixed-contextも加えてください。これがないとウインドウ、リロード時にバグが起きるためです。–mixed-contextを残したくない場合開発終了時に除くこともできます。 次にjson2の配置。jsxとパネルの通信に必要なのでパネル側で読み込ませる前に事前にjsxフォルダーに入れておきます。こちらから入手してくだい。 また詳
こちらの記事で紹介した通りAdobe cepはファイルやフォルダーをダイアログで選択できるメソッドを持っている。それでここで紹介した通りにやればファイルパスが取得できるのだがCC2019とCC2020で使用が変わった？ 取得したパスにいつの間にか頭にfile:///とスキームが付くように変わってるじゃないか。デバッグしててエラーが出てなんかおかしいと思った。ちなみにこのままだとpathだと認識されないのでNode.jsのfs.statSyncで読み込ませてもエラーを返します。なのでpathのstringとしてパースする必要があります。やり方は至極簡単。 ネイティブモジュールのurlからパースす
今回ファイル操作を非同期で行ってみます。 Node.jsでの非同期ファイル操作メソッドは同期ファイル操作のメソッドと違って結果をコールバックで受け取ります。それではフォルダーからファイル一覧を取得するfs.readdirメソッドの例から見てみます。 これは何回も見てきたように同期的にファイル一覧を取得するやり方です。これを非同期でやる場合は。 コールバックで結果を受け取ります。エラーが起きた場合はエラーもコールバックで受け取るのが通例です。これをPromiseで結果を受け取ってasync awaitを使えば見た目が同期処理のようなコードを書き込めます。 しかしreaddir他、mkdirやre
非同期処理も処理内容が増えるにつれてまとめて処理したくなるでしょう。同期処理でやっているようにforEachのように。 普通に上から下に書くだけだと冗長な処理になります。これが何十回と繰り返しになるとうんざりしますね。避けるべきでしょう。これを配列処理でまとめて処理します。 for文の中にawait構文を組み込むだけで配列の非同期処理が可能になります。但し実際実行するとわかるのですがfor文の場合逐次的に配列の中身を処理するので並列処理と比べて遅くなりがちです。（このコードの場合毎回timeOut関数が終わってから次のtimeOut関数に移るので2秒+2秒+2秒の処理時間になる）並列処理で処理
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を続けて処理させるより早