DTPab

DTPにまつわるあれこれ

DTPerのスクリプトもくもく会#11を開催しました

2019年1回目、通算11回目のDTPerのスクリプトもくもく会を開催しました。今回初めての平日開催(しかも有料)にもかかわらず3名の方にご参加いただきました! ありがとうございました。
当日自分が仕事で大幅に遅刻しましたが、共催のこうちゃん氏に助けていただきました。いつもありがとうございます!
この時期、ワンルームマンション系のコワーキングスペースは寒いですね。次のシーズンはもうちょっと考えることにします(人数が集まれば#10でやったようなそこそこ大きな貸し会議室も取れるのですが^^;;)。

さて、今回は時間も短かった(18:00〜21:00)ですしあまりご報告できるようなものはないのですが、いちおう僕の成果をまとめておきます。

VSCodeでExtendScriptを開発する環境を整える

一応、この前のVSCodeのプラグイン紹介の記事も載せておきます。

uske-s.hatenablog.com

この記事から一つやめたものがあって、それがExtendScriptというプラグインです。jsxファイルやjsxbinファイルを関連付けてくれるプラグインだったのですが、僕の中ではより重要な別のプラグインDocument Thisが機能しなくなる(JavaScriptかTypeScriptのみ)ためです。
以下に紹介していくtypes-for-adobeでこのプラグインも必要なくなるので、まぁ結果オーライです。
また、以下ではNode.jsやnpmなどをターミナルから導入していますので、すべてMac環境でテストした結果です。Winの場合は詳しい方に聞いてみてください。

types-for-adobeの導入

VSCode用プラグインを入れることで、TypeScriptでExtendScriptを開発できるようにしてしまおうというものです*1
具体的なやり方はこちらのサイトを参照。

tsconfig.jsonファイルの作成の部分まで進んだら次です。要するにワークフォルダにnode_modulesフォルダが生成されてからです。

InDesign用にカスタマイズ

サイトではIllustratorの場合のサンプルが載っています。僕はInDesignでやりたかったのでInDesign用にカスタマイズしました。npmから入れられるtypes-for-adobeのd.tsファイルは2015.3か2018向けのDOM補完になります*2

{
    "compilerOptions": {
        "module": "none",
        "strict": true,
        "noLib": true,
        "types": [
            "types-for-adobe/InDesign/2018"
        ]
    },
    "exclude": [
        "node_modules"
    ]
}

このようなjsonファイルをワークフォルダに作成します。サイトにもありますが、"types"というキーにd.tsファイルへのパスを記述しています。
以上で環境の構築はおしまいです。

スクリプトを開発するには

ここまでできたら、あとはスクリプトを作るだけです。作るだけですが、TypeScriptのトランスパイル*3を利用して開発することになります。

tsファイルを作成 → トランスパイル → jsファイルが生成される

という流れでスクリプトを作るわけです。

なので、VSCodeでは拡張子.tsで開発し、作業が終わったらトランスパイルしてアプリケーションで実行。不具合が出たら元のtsファイルに戻って作業…という繰り返しになります。
間にトランスパイルを挟むことになるので、TypeScriptで開発できる、VSCodeで開発できるという利点をうまく利用していきたいですね。

CEPへNode.jsの組み込み

VSCodeで開発環境が整ったところで、次はこうちゃん氏に教わりながらCEPにNode.jsを組み込んでみました。

www.macneko.com

このブログ記事のCEPの実装をするmanifest.xmlを修正するNode.jsを有効にするを参照してください。

Ten_A氏によると、どうやらCC2015からNode.jsがデフォルトで無効となっているそうなので、これを変更しないといけません。

VSCodeのプラグインで、CEPエクステンションのテンプレートを生成できるものがあります。これを使って、CEPにNode.jsを組み込んでみるテストをしました。実際にはこうちゃん氏のブログ記事の通りですので、そちらを参照してくださいませ。

CEPまわりの細かい話

あとは大体、CEPに関する疑問を思いつく限りこうちゃん氏にぶつけては調べてということをしてました。こうちゃんありがとう。とはいえ、ウェブアプリケーションみたいなものの開発経験がまったくない身の上からすると、Node.jsとはどのように利用できると便利で、それを(例えば社内などで)配布する際にパッケージすべきかどうか、具体的にどのようにパッケージするのか、とかとか、まだ勉強しないといけないことは多いみたいです。
そうそう、笑っちゃう話ですが、組み上げたサンプルのCEPがCC2019で動かない!なんで!!!ってなって焦りました。
なんのことはない、Player Debug Modeを変更していなかったからなのですが、慌ててTwitterでTen_A先生にメンションしてしまいました^^;;

感想

以上が前回のもくもく会の個人的な成果でした。遅刻してしまったのと、CEPについてはまだまだ知らないことが多くて四苦八苦だったためあえなくタイムアップ。それでももやもやしていた部分がすっきりしてよかった。

CEPについては、スクリプトと比べると参入障壁が高い感じがありますね。おそらく慣れてしまえばどうってことないのですが、慣れるまでがけっこう大変というか。
スクリプトならJavaScriptの知識だけでなんとか太刀打ちできたわけですが、CEPはjson、xml、html、CSSと広い知識が必要になります。もちろんそれと取引してもあまりあるメリットを享受できるわけで(自身のスキルアップという点でも)、どうせやるならマスターしてやろうという気持ちです。

さてさて、次回DTPerのスクリプトもくもく会は3月末頃開催の予定です。次回もよろしくお願いいたします!^^/

*1:TypeScriptとはJavaScriptの仲間、といったところですがそれは正確な表現ではありません。僕も人に説明できるほど詳しくないので、ご存知ない方は調べてみてください。また、「TypeScriptでExtendScriptを開発できる」というのは正確には「TypeScriptで開発したものをExtendScriptで動作するようにコンパイルする」です。

*2:僕は先の記事の著者であるTen_A先生から直接2019用のd.tsファイルをお借りしたので、2019用のDOMでテストしました。

*3:トランスパイルとは、本来はECMAScriptのバージョン違いの仕様を実装する手法のひとつです。今回はTypeScriptで書かれたコードを、Adobe ExtendScriptとして動作するようにトランスパイルする、言い方を替えるとコンパイルしてExtendScript準拠のjsファイルを生成する、ということです。