UXP , InDesign , TypeScript , Deno

Monday, March 13, 2023

UXP InDesign, TypeScript を使う (Denoを使用)

Deno を使えば TypeScript を使って UXP InDesign スクリプトをバンドルできることがわかった。

以前軽く試したときは、deno bundle した段階で型関連のエラーが出てしまいバンドルできなかった。 でも考えてみたら（考えるほどでもないが）自分で型定義を用意して bundle 時とかコンパイル時に渡せば無問題なのでは？ と思い立ち試したところ問題なくバンドルできた。

結論だけ知りたい場合はこちらのレポジトリの hello-world-ts を見てください。

このエントリーではごく簡単な UXP InDesign Scripting の例で説明します。

まずは環境の確認:

$ deno --version
deno 1.30.3 (release, x86_64-apple-darwin)
v8 10.9.194.5
typescript 4.9.4

JavaScript で記述

はじめに TypeScript ではなく JavaScript で題材とする Hello,World! を main.js ファイルに書きます。

const doc = app.documents.add();
const page = doc.pages.item(0);
const textFrame = page.textFrames.add({geometricBounds: ['20mm', '20mm', '30mm', '60mm']});
textFrame.contents = 'Hello,World!';

このコードは 拡張子を idjs にすればそのまま InDesign で実行できますが、一応今後の流れに沿う関係上 deno bundle します。

$ deno bundle main.js > hello-world.idjs

hello-world.idjs を UXP 対応バージョンの InDesign で実行すると（または UDT で実行すると）:

このように Hello,World! 文字列がテキストフレームに入った InDesign 文書ができます。

TypeScript に書きかえ

この main.js を TypeScript に書きかえます。 ファイル名を main.ts にして、末尾のセミコロンを削除します（セミコロンは別に削除する必要もないですが、ここではそうします）。

main.ts

const doc = app.documents.add()
const page = doc.pages.item(0)
const textFrame = page.textFrames.add({geometricBounds: ['20mm', '20mm', '30mm', '60mm']})
textFrame.contents = 'Hello,World!'

実行してみる。

$ deno bundle main.ts > hello-world.idjs
Check file:///Users/foo/path-to/main.ts
error: TS2304 [ERROR]: Cannot find name 'app'.
const doc = app.documents.add()
            ~~~

エラーになりました。 app が問題になりました。

型宣言を追加

declare を使って型を宣言して問題を回避しましょう。

main.ts の先頭に以下の型定義を追加します。

declare var app: any

これで再度バンドル実行:

deno bundle main.ts > hello-world.idjs
Check file:///Users/foo/path-to/main.ts
Bundle file:///Users/foo/path-to/main.ts

うまくいきました。

これはこれでよいのですが、TypeScript を使いたい理由は、コンパイル時の型チェックが入ることです。 そこで、スクリプトに型を追加して、TypeScript らしくします。

declare var app: any

const doc: Document = app.documents.add()
const page: Page = doc.pages.item(0)
const textFrame: TextFrame = page.textFrames.add({geometricBounds: ['20mm', '20mm', '30mm', '60mm']})
textFrame.contents = 'Hello,World!'

例のための例のような状態ですが、とりあえず型を追記しました。

バンドルを実行。

$ deno bundle main.ts > hello-world.idjs
Check file:///Users/foo/path-to/main.ts
error: TS2304 [ERROR]: Cannot find name 'Document'.
const doc: Document = app.documents.add()
           ~~~~~~~~
TS2304 [ERROR]: Cannot find name 'Page'.
const page: Page = doc.pages.item(0)
            ~~~~

TS2304 [ERROR]: Cannot find name 'TextFrame'.
const textFrame: TextFrame = page.textFrames.add({geometricBounds: ['20mm', '20mm', '30mm', '60mm']})
                 ~~~~~~~~~

このエラーを回避するため型宣言を main.ts の先頭部分に書きます。

declare class TextFrame {
    contents: string
}
declare class TextFrames {
    add(params: any): TextFrame
}
declare class Page {
    textFrames: TextFrames
}
declare class Pages {
    item(index: number): Page
}
declare class Document {
    pages: Pages
}
declare class Documents {
    add(): Document
}
declare class Application {
    documents: Documents
}
declare var app: Application

実行します。

$ deno bundle main.ts > hello-world.idjs
Check file:///Users/foo/path-to/main.ts
Bundle file:///Users/foo/path-to/main.ts

はいできました。

型宣言を別ファイルに

型宣言部分は別ファイルにわけることができます。

記述方法は こちら https://deno.land/manual@v1.31.2/advanced/typescript/types をご覧ください。

ind.d.ts ファイルを作成して、main.ts の先頭に記述していた型宣言をここに移します。

declare class TextFrame {
    contents: string
}
declare class TextFrames {
    add(params: any): TextFrame
}
declare class Page {
    textFrames: TextFrames
}
declare class Pages {
    item(index: number): Page
}
declare class Document {
    pages: Pages
}
declare class Documents {
    add(): Document
}
declare class Application {
    documents: Documents
}
declare var app: Application

main.ts からは型宣言を削除して代わりに、ind.d.ts ファイル参照の記述を追加。

スクリプト全体は次のようになります。

/// <reference types="./ind.d.ts" />

const doc: Document = app.documents.add()
const page: Page = doc.pages.item(0)
const textFrame: TextFrame = page.textFrames.add({geometricBounds: ['20mm', '20mm', '30mm', '60mm']})

bundle を実行します。

$ deno bundle main.ts > hello-world.idjs
Check file:///Users/foo/path-to/main.ts
Bundle file:///Users/foo/path-to/main.ts

できました。 あとは生成された hello-world.idjs を実行して、意図通り Hello,World! ドキュメントが生成されるか確認しましょう。

まとめ

TypeScript で書けばコンパイル時（バンドル時）に型をチェックしてくれるので助かります。 ここでは、ind.d.ts ファイルを自分で用意しました。 これはそれなりに骨が折れる作業です。 しかし、これは InDesign UXP Scripting に共通する内容なので、 もしかすると既に InDesign 用の d.ts ファイルがネット上に存在しているかも。 もしまだそれが無いのであれば、そのうち Adobe か誰かすごい人がつくってくれるでしょう、たぶん。