Zenn
Open38

Adobe IllustratorのスクリプトをTypeScriptで作成する

Illustrator
TypeScript
Adobe
extendscript
astkastk

とりあえずRollup.jsで作ってみる。
https://github.com/asa-taka/adobe-tools

astkastk

とりあえずaiから書き出したpsdを埋め込んだaiからさらに書き出したpsdを埋め込んだai、からの書き出しをJSONに書かれた順番で行うようなスクリプトを作る。

astkastk

図をアップデートした。figure.aiの画像を埋め込んだpaper1.aiの画像を埋め込んだoverview.aiがあるとき、figure.aiの更新をoverview.aiに反映させるの面倒だよね、という時のためのスクリプトを作っています。

astkastk

この図もOverview.aiの後にエクスポートするように設定したので自動で書き出される。こうなるとPNG出力機能もつけたくなってくる。

astkastk

モジュールが難しい。UMDでいいかな。

astkastk

Rollup.jsもプラグインもりもりで結構ハードル高め。Parcelのシンプルさが懐かしい。

astkastk

Adobe の公式リファレンスが、なかなか読みづらい。まとまってはいるんだけど。
https://www.adobe.com/devnet/illustrator/scripting.html

alert とか File とか Folder みたいな基本的な要素が載っていないのはなんでなんだ。別に共通部分のリファレンスがあるのか。

astkastk

そしてデバッグログを見たい。フィアル出力するか。

astkastk

普通に動いた。良い。

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "extendscript-debug",
      "request": "launch",
      "name": "compositely-export-the-document",
      "program": "${workspaceFolder}/dist/compositely-export-the-document.jsx",
      "stopOnEntry": false
    },
    {
      "type": "extendscript-debug",
      "request": "launch",
      "name": "compositely-export-all-in-the-directory",
      "program": "${workspaceFolder}/dist/compositely-export-all-in-the-directory.jsx",
      "stopOnEntry": false
    },
    {
      "type": "extendscript-debug",
      "request": "launch",
      "name": "Ask for script name",
      "program": "${workspaceFolder}/${command:AskForScriptName}",
      "stopOnEntry": false
    },
  ]
}
astkastk

document や artboard なんかのメンバが眺められるのとても捗る気がする。スクリプトの妄想が捗る。

astkastk

document.exportFileAsPsd でファイルの上書きがあると確認ダイアログが出るのを warnings = false で止められると思ったら止められないので、事前にアートボードの出力名を出力する関数を作り、そのファイルが存在したら削除する処理を書いたりして、まぁなんか不安が残るスクリプトになってしまった。ファイル削除は暴発が怖いんだな…

astkastk

ES3難しい

astkastk

三項演算子の組み合わせがES3で syntax error になる?

// OK
return result === result ? (remainder ? result - remainder : result) : 0;
// NG
return result === result ? remainder ? result - remainder : result : 0;
astkastk

ExtendScriptせめてES5に追従してくれよという

astkastk

lodashを使おうとして出たエラーなので、es5-shimが利用できればこの問題は無視できる。map や forEach 辺りが使えればlodashは手放せるので。

astkastk

https://github.com/ExtendScript に色々shimがある
https://github.com/ExtendScript/extendscript-es5-shim を使ってみたい。
多分本体のコードがよばれる前にshimを適用すればいけるはず…

astkastk

今はtscのtargetがES3になってるけど、それをES5にして実装はes5-shimを事前に読み込むようにしたい。これで型定義と実装の両面でES5にできるはず。

astkastk

https://github.com/ExtendScript/extendscript-es5-shim が提供するコードはES module的なモジュールにはなっておらず、単純にグローバルを書き換える処理として書かれているので、動かしたいコードの前に #include すればいけるけどちょっと気持ち悪い。やっぱりgulpでconcatするのがいいのか。シェルスクリプトでもいけなくはない気はする。

astkastk

rollup-plugin-shimあたりを使って、コード内でアクセスしたものだけcore-jsあたりから引っ張ってくるようにするのが一番綺麗なのかな。でもExtendScriptとcore-jsの食い合わせ的な問題を引いたら面倒なのでExtendScriptオーガニゼーションのshimを使いたいと言う気持ちがちょっと強い