InDesign UXPプラグインを作ってみた（その1）作成の手順
InDesign 18.5からUXPプラグイン（UXP plugin）が作れるようになったので試してみました。といっても説明ページを順に辿って行けば出来上がるという親切設計なので難しいことは何もないです、翻訳できて意味が分かれば。
なので記事にするまでもないはずなのですが、やってみるといくつかトラップがあるので記事にしておきます（他にもあるかもしれません）。なお、この記事はInDesign 18.5時点のものです。次のバージョンが出たらいきなり仕様が変わっていたということがあり得ます。
0. 使用するもの
- InDesign 2023（バージョン18.5）
- UXP Developer Tool バージョン1.9 ※1
- CCデスクトップアプリケーション ※2
- テキストファイルを編集するエディタ ※3
※1
CCデスクトップアプリからインストールします。なお、AdobeのドキュメントではこのアプリケーションをUDTと呼んでいますので、ここでもUDTと書くことにします（略されるのは結構初心者泣かせなのですが、長いのですみません）。
※2
説明ページではCCデスクトップアプリケーションのバージョンの記載がありません。しかし、リリースノートを見ると、「『プラグイン』セクションの『管理』タグ」が追加されたのがバージョン5.10ですから、それより前のバージョンでは動作しないはずです。現時点で最新の5.11にしておけば確実です。
※3
manifest.jsonを編集する際は文字コードをUTF-8（BOMなし）で保存するのが安全です。そのため、このエンコードで保存できることが条件になります。また、プラグインで扱う言語は、プラグインの形式によって異なります。
- パネル（ユーザーインターフェイス）が不要：基本的にJavaScriptのみ
- パネル（ユーザーインターフェイス）を使う：html、css、JavaScript
これらの言語のシンタックスハイライトが使えるエディタがいいですね。もし今までエディタという種類のアプリケーションを使ったことがないのであればVisual Studio Codeをお勧めします。
1. テンプレートプラグインの作成
1-1 InDesignを起動します
1-2 UXP Developer Tool（UDT）を起動します
図のように「CONNECTED APPS」のところにInDesignが表示されていればOK。
1-3 [Create Plugin]をクリックします
上の図の青いボタンです。
1-4 プラグインのタイトルなどを入力
入力した内容はmanifest.jsonというファイルに保管されますので、そのファイルを変更することであとから変更できます。各項目の仕様についてはmanifest.jsonの解説ページを参照してください。
| Plugin Name | プラグインの名前です。日本語でも大丈夫 |
| Plugin ID | プラグインIDです。きちんと理解するまではそのままにしておきます |
| Plugin Version | プラグインのバージョンで、major.minor.patchという形式です。とりあえずそのままでOK |
| Host Application | 実行対象のアプリケーション。そのままにします |
| Host Application Version | 実行対象のアプリケーションのバージョン。今は18.5しかないのでそのままです |
| Template | プラグインのテンプレートを次の中から選びます。わからなければ「quick-starter」で。 「quick-starter」「react-starter」「webview-starter」 |
1-5 プラグインの保存先フォルダを選択
上の図の青いボタンをクリックしてフォルダを選択します。
次の画面になれば成功です。
選択したフォルダの中に、名前がPlugin IDのフォルダが作成され、その中に各ファイル（雛型）があります。
このうち「package.json」と「README.md」ファイルは、以降の手順では使いません。削除しても問題なかったです。「README.md」ファイルは説明書きなので完全に不要ですが、「package.json」は将来的に使う場面が出てくるかもしれません。
1-6 InDesignとUDTは一旦ここまで
アプリケーションを終了しても問題ありません。もしテンプレートのプラグインを実行してみたい場合はアプリケーションを終了せず「3. UDTからプラグインの実行」に進んでください。
2. テンプレートプラグインを編集
作成されたフォルダの中に「manifest.json」「index.html」「index.js」があります。基本的には、お使いのエディタでこれらのファイルを編集していくことになります。具体的にはmanifest.jsonについてはmanifest.jsonの解説ページを参照しながら編集していくことになります。index.jsの編集はmanifest.jsonの記述と整合性が取れるように記述します。ここは説明が長くなるので、次のエントリで。
3. UDTからプラグインの実行
ここでは「quick-starter」で作成されたテンプレートをそのまま実行します。
プラグインの右端の「…」から「Load」をクリックします。InDesignで次のメッセージが表示されています。
InDesignに切り替えると次の状態になっています。（プラグインパネルは表示されていないかもしれません）
プラグインパネルの「最初のプラグイン」をクリックすると次のようになります。
これは1つのプラグインの中で、実行できるところが2つあるということです。これを「エントリポイント（entry point）が2つある」といいます。UXPプラグインではエントリポイントを複数設定することができます。
上の方の「Show alert」をクリックするとメッセージが表示されます。これは「command」という動作方法で、パネル（ユーザーインターフェイス）を使いません。クリックするとすぐに実行され、終了時には実行中の変数などは破棄されます。
次に、「Show panel」をクリックします。こちらは何も起こりませんか。もし何も変化がなければ「Show panel」というパネルを閉じてクリックしてください。閉じたパネルが開かれるはずです。プラグインをloadした時点で実行されていたんですね。こちらは「panel」という動作方法で、クリックするとパネルが表示されます。パネルは常に表示させておくことができます。
UXPプラグインのエントリポイントは、「command」または「panel」のどちらかを指定しなければなりません。
「command」を指定すると、主に「index.js」を編集していくことになり、「index.html」は不要です（例外があるかもしれません）。「panel」を指定すると、「index.html」と「index.js」の両方を編集していくことになります。
4. UDTからプラグインの操作
UDTでプラグインがLoadされた状態で、右端の「…」をクリックすると今まで非アクティブだった項目がアクティブになります。
プラグインを編集してる間は必要に応じて「Load」「Unload」「Reload」「Watch」「Debug」「Logs」の項目を使います。Adobeのページではこちらになりますが、あまり詳しくないです。ここは各人でいろいろ試してねって感じです。Debugで表示される画面はChromeの開発ツールとほぼ同じなので、詳しく知りたい方は「chrome デベロッパーツール 使い方」で検索するとよい気がします（未確認です）。
なお現時点（バージョン18.5）では、プラグインを編集したりデバッグをしていたりするとInDesignが非常に不安定になります。時々フリーズやクラッシュが発生しますので、仕事のドキュメントを開いてのテストは行わないでください。（他にも問題点があります。次の次のエントリで）
5. 完成したプラグインの使用
プラグインが完成したら、UDTがなくても使えるようにします。その方法には2種類あります。
- マーケットプレイスで販売・配布する
- マーケットプレイスを使わずに、自分または周囲で使う
5-1 マーケットプレイスで販売・配布する
こちらの場合、まず「Plugin ID」を取得します。そして「manifest.json」内のPlugin IDを変更します。詳しくはこちらのページから見ていってください。私もやったことはないのでこれ以上はわかりません。
5-2 マーケットプレイスを使わずに使用する
普通はこちらですね。マーケットプレイスで販売する場合でも、事前のテストで必ず行うと思います。以下、手順です（Adobeのページはこちら）。
5-2-1 Package
まず、上の図で「Unload」をクリックしてプラグインを外します。外さずに続けても問題はないのですが、Load状態だときちんとインストールできているか確認しづらいためです。
続いて「Package」をクリックします。フォルダを選択するダイアログが表示されますので、適当なフォルダを選択してください。作成されるものは1つのファイルだけで、どのフォルダに移動してもその後の操作に問題はありません。
出来上がったファイルは拡張子が「.ccx」になります。Windowsで見るとファイルの種類は「Unified Plugin Installer Agent」になっています。
他の人に使ってもらうときは、このファイルを渡します。
実はこのファイル、拡張子をzipに変更すると中身が見えます。余談ですがこういうのをUCF形式のzipファイルといいます（UCFが何の略か忘れた）。IDML、EPUB、xd、xlsx、docxなんかもこの形式です。
5-2-2 プラグインのインストール
プラグインをインストールするにはccxファイルをダブルクリックします。するとUnified Plugin Installer AgentによってCCデスクトップアプリケーションが開きます。このプログラムは次のフォルダにあるのを見つけました。もしダブルクリックしても何も起きない場合は次のファイルがあるかどうか確認してください。ない場合はCCデスクトップアプリケーションの再インストールを試してください。
Windowsの場合
C:\Program Files\Common Files\Adobe\Adobe Desktop Common\RemoteComponents\UPI\UnifiedPluginInstallerAgent\UnifiedPluginInstallerAgent.exe
Macの場合
/Library/Application Support/Adobe/Adobe Desktop Common/RemoteComponents/UPI/UnifiedPluginInstallerAgent/UnifiedPluginInstallerAgent.app
ダブルクリックするとCCデスクトップアプリケーションで次のダイアログが出ます。
［インストール］をクリックします。
［OK］をクリックします。
この画面が出たら完了です。ccxファイルはもう使わないので捨てても構いませんが、再インストールしたいときがあるかもしれませんね。
6. プラグインの管理
プラグインが不要になった、あるいは一時的に無効にしたいというときの操作です。
CCデスクトップアプリケーションを開きます。次の順にクリックしていきます。
①Stockとマーケットプレイス
②プラグイン
③プラグインを管理
④InDesign（プラグインをほとんど入れていない方は省略しても可）
⑤目的のプラグインの「…」のところ
操作途中の画面を載せると煩雑なので、私の最終画面だけ載せておきます。人によって異なる場合があると思いますので、あくまでも参考程度に見てください（いろいろ突っ込みたいところはあるでしょうが、それはおいといて）。
⑤まで行くと「無効」「アンインストール」が見えます。「無効」はインストールされているが使えないという状態で、ここをクリックすると［有効］ボタンが表示されます。「アンインストール」で完全に削除されます。