InDesign UXPプラグインを作ってみた（その2）プラグインの編集

前回の「2.　テンプレートプラグインを編集」の項目の詳細です。前回言ったように、プラグインには動作方法が2種類あります。ここではそれぞれ単独のエントリポイントがある場合で説明します。

2-1　manifest.jsonの構造

テンプレートを使って作成されたmanifest.jsonは次のような形になっています。

{
  "id": "Test-9vimoa",　　　　　←勝手につけられたプラグインID（マーケットプレイスに出す場合は取得が必要）
  "name": "最初のプラグイン", 　←最初に自分でつけた名前
  "version": "1.0.0",　　　　　←とりあえずそのままでOKにしたバージョン番号
  "main": "index.html",　　　　←最初に呼び出されるファイル
  "host": [{"app": "ID", "minVersion": "18.5.0"}],　←InDesign 18.5以降で動作することを示す。触らない
  "manifestVersion": 5,　　　　←絶対に触っちゃダメ
  "entrypoints": [　　　　　　　←エントリポイントのリストが配列で入る
    {
      "type": "command",
      "id": "showAlert",
      "label": "Show alert"
    },
    {
      "type": "panel",
      "id": "showPanel",
      "minimumSize": {"width": 230,"height": 200},
      "maximumSize": {"width": 2000,"height": 2000},
      "preferredDockedSize": {"width": 300,"height": 300},
      "preferredFloatingSize": {"width": 300,"height": 300},
      "label": {"default": "Show panel"},
      "icons": [省略]
    }
  ],
  "icons":[省略]　　　　　←プラグインパネルに表示されるアイコン
}
詳しい内容についてはmanifest.jsonの解説ページを参照してください。

2-1　「command」エントリポイント1つの場合

この場合は、manifest.jsonとindex.jsを編集します。index.htmlは使いませんので捨てても構いません。チュートリアルも合わせて確認してください。

2-1-1　manifest.jsonの編集

編集する箇所は次の所です。

  • 「main」の値を「index.js」に変更
  • "type": "command"のあとの「id」の値を任意に変更（index.jsと合わせる必要がある）
  • panelの記述を削除

こうなります。

{
  "id": "Test-9vimoa",
  "name": "文字入力テスト", 　←必須ではないですが内容に合わせて変更しました
  "version": "1.0.0",
  "main": "index.js",　　　　←ここを変更
  "host": [{"app": "ID", "minVersion": "18.5.0"}],
  "manifestVersion": 5,
  "entrypoints": [
   {
     "type": "command",
     "id": "script1",　　　　←ここを任意のものに変更（index.jsと合わせる必要がある）
     "label": "Show alert"　←entrypointsが1つだけのときは使われない？
   }
  ],
  "icons":[省略]
}

なお、「icons」のブロックはプラグインパネルの中で表示されるアイコンです。いずれアイコンを変更して遊びたいですが、とりあえず変更せずに進めます。

修正が終わったらUTF-8（BOMなし）で保存してください。

2-1-2　index.jsの編集

index.jsは次のようなものになっています。

const { entrypoints } = require("uxp");
const { app } = require("indesign");

entrypoints.setup({
  commands: {
    showAlert: () => showAlert()
  },
  panels: {
    showPanel: {
      show({node} = {}) {}
    }
  }
});

showAlert = () => {
    [省略]
}

ここで変更するのは次の箇所です。

  • 「showAlert: () => showAlert()」のところをidと関数名に置き換える
  • panelの記述を削除
  • 実行する関数を記述する
  • 必要に応じてそれ以外の記述を書く

私が作ったのはこういうものになります。

const { entrypoints } = require("uxp");
const { app } = require("indesign");
const { MeasurementUnits, StoryHorizontalOrVertical } = require("indesign");
entrypoints.setup({
  commands: {
    script1:  () => makeTextFrame()
  }
});

makeTextFrame = () => {
    let doc = app.documents.add();
    app.scriptPreferences.measurementUnit = MeasurementUnits.MILLIMETERS;
    let txf = doc.textFrames.add();
    txf.geometricBounds = [10, 10, 20, 90];
    let sty = txf.parentStory;
    sty.storyPreferences.storyOrientation = StoryHorizontalOrVertical.HORIZONTAL;
    sty.pointSize = "40Q";
    sty.contents = "プラグイン";
}

コードの内容および書き方については、話がそれるので省略します。別の機会に。

修正が終わったらUTF-8で保存します。こちらはBOMのありなしは問いません。うっかりシフトJISにしたら日本語が化けます（これで1時間潰したことは内緒です）。

2-1-3　実行

実行するとこうなります。

もしかすると次の図のようにテキストフレームに何も表示されない状態になるかもしれません。この場合はテキストフレーム内をダブルクリックして文字入力状態にすると表示されます。こうなる理由は不明です。

2-2　「panel」エントリポイント1つの場合

この場合は、manifest.json、index.html、index.jsを編集します。

2-2-1　manifest.jsonの編集

編集する箇所は次の所です。

  • commandの記述を削除
  • "type": "panel"のあとの「id」の値を任意に変更（index.jsと合わせる必要がある）
  • "label"の中の"default"の値を任意に変更
  • その他お好みで

私はこのようにしました。

{
  "id": "Test-u189bi",
  "name": "プラグインパネルで表示",
  "version": "1.0.0",
  "main": "index.html",
  "host": [{"app": "ID", "minVersion": "18.5.0"}],
  "manifestVersion": 5,
  "entrypoints": [{
    "type": "panel",
    "id": "AlertTest",
    "minimumSize": {"width": 30, "height": 30},
    "maximumSize": {"width": 2000, "height": 2000},
    "preferredDockedSize": {"width": 300, "height": 300},
    "preferredFloatingSize":{"width": 300, "height": 250},
    "label": {
      "default": "パネルのタブに表示"
    },
    "icons": [
      {"width":23,"height":23,"path":"icons/dark.png","scale":[1,2],"theme":["darkest","dark","medium"]},
      {"width":23,"height":23,"path":"icons/light.png","scale":[1,2],"theme":["lightest","light"]}
    ]
  }],
  "icons": [{"width":48,"height":48,"path":"icons/plugin.png","scale":[1,2],"theme":["darkest","dark","medium","lightest","light","all"],"species":["pluginList"]}]
}

パネルの大きさとアイコンはオプションなので削除しても構わないのですが、挙動を確認するため残してあります。詳しい内容についてはmanifest.jsonの解説ページを参照してください。

修正が終わったらUTF-8（BOMなし）で保存してください。

2-2-2　index.htmlの編集

index.htmlはパネル内のレイアウトを作成します。概要はこちらのページにありますが、大事なのは次の部分です。

Keep in mind that UXP is not a browser. It's a platform that provides the ease of using web technologies to build plugins/scripts for desktop applications. Hence, it does not support all the HTML/CSS capabilities you can use in a browser. In fact, the tags that are not supported are treated like simple <div>.

Google翻訳では次のようになります。

UXPはブラウザではないことに注意してください。これは、Webテクノロジーを使用してデスクトップアプリケーション用のプラグイン/スクリプトを簡単に構築できるプラットフォームです。したがって、ブラウザで使用できるすべての HTML/CSS機能はサポートされていません。実際、サポートされていないタグは単純な <div> のように扱われます。

そして使えないタグと使えない属性へのリンクがあります。ただ機能的にはフォームが使えればほぼ実害はないので、そうすると問題になることはないかなと思います。

次のようなhtmlを作ってみました。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>このタグはサポート外です</title>
  <link rel="stylesheet" href="style.css">
  <script src="index.js"></script>
</head>
<body>
  <div class="wrapper">
    <p>それぞれのダイアログを比較</p>
    <button id ="idd" type="button">InDesign Dialog</button>
    <button id ="es" type="button">ExtendScript Alert</button>
    <button id ="uxp" type="button">UXP Alert</button>
  </div>
</body>
</html>

ここで、<meta charset="UTF-8">は実は不要です。「Shift_JIS」を指定してシフトJISで保存してもUTF-8として解釈されます。そのため<p>内の日本語が文字化けします。ですから<html>タグの「lang」属性も意味がないですね。

また、<title>タグはサポートされていないため無効になります。しかしエラーにはなりません。

cssファイルも作成しましたが、こちらは特に注意すべき内容はありませんでしたので省略します。

2-2-3　index.jsの編集

index.jsはcommandの部分を削除します。私の場合次のようにしました。

const { entrypoints } = require("uxp");
const { app } = require("indesign");
const msg = "ダイアログのテストです";

entrypoints.setup({
    panels: {
        AlertTest: {
            show({node} = {}) {}
        }
    }
});

document.querySelector("#idd").addEventListener("click", () => {
    const dialog = app.dialogs.add();
    const col = dialog.dialogColumns.add();
    const colText = col.staticTexts.add();
    colText.staticLabel = msg;
    dialog.canCancel = false;
    dialog.show();
    dialog.destroy();
    return;
});

document.querySelector("#es").addEventListener("click", () => {
    app.doScript("alert('"+ msg + "')", 1246973031); // ScriptLanguage.JAVASCRIPT
});

document.querySelector("#uxp").addEventListener("click", () => {
    // alert(msg);
});

下から2行目はなぜコメントアウトにしているかというと、これを有効にしたとき、ボタンをクリックするとInDesignがフリーズするからです（次のエントリに記載あり）。私の環境だけかも知れませんが。

コードの内容および書き方については、話がそれるので省略します（実は私もわからないところがあったりする）。別の機会に。

修正が終わったらUTF-8で保存します。こちらはBOMのありなしは問いません。うっかりシフトJISにしたら日本語が化けます。

2-2-4　実行

実行するとパネルが表示されます。

このパネルの大きさがよくわからんのです。manifest.jsonで指定したどの値とも違うような。

［InDesign Dialog」をクリックすると次の左のウィンドウが表示され、［ExtendScript Alert］をクリックすると右のウィンドウが表示されます。

　

そして［UXP Alert］をクリックするとフリーズするという（コメントアウトを外した場合）。

ちなみに、これがUXP pluginでなくて、UXP Scriptingの場合は次のように（表示はおかしいですが）ウィンドウ自体は表示されます。（エラーも出ません）

次のエントリがまとめになります。

ソフトの使い方CCDA,CCデスクトップアプリケーション,InDesign,UDT,UXP Developer Tool,UXP plugin