概要

上記記事の続きで、プロジェクトはそのまま使用しています。

扱う内容は、

選択中のレイヤー名の取得
レイヤー種別の判断
レイヤー名の変更

です。

選択中のレイヤー名の取得

プロジェクト内の main.js 内の showLayerNames() を改変していきます。

main.js

// 変更前の初期状態
function showLayerNames() {
    const app = require("photoshop").app;
    const allLayers = app.activeDocument.layers;
    const allLayerNames = allLayers.map(layer => layer.name);
    const sortedNames = allLayerNames.sort((a, b) => a < b ? -1 : a > b ? 1 : 0);
    document.getElementById("layers").innerHTML = `
      <ul>${
        sortedNames.map(name => `<li>${name}</li>`).join("")
      }</ul>`;
}

UXPには app.activeDocument.activeLayers があります。(ExtendScript時代には無かったらしい)

main.js

// 変更後
function showLayerNames() {
    const app = require("photoshop").app;
    // const allLayers = app.activeDocument.layers;
    // const allLayerNames = allLayers.map(layer => layer.name);
    // const sortedNames = allLayerNames.sort((a, b) => a < b ? -1 : a > b ? 1 : 0);
    const activeLayers = app.activeDocument.activeLayers;
    const allActiveLayerNames = activeLayers.map(layer => layer.name);
    const sortedNames = allActiveLayerNames.sort((a, b) => a < b ? -1 : a > b ? 1 : 0);
    document.getElementById("layers").innerHTML = `
      <ul>${
        sortedNames.map(name => `<li>${name}</li>`).join("")
      }</ul>`;
}

Load&Watch でプラグインを読み込んでいる場合、ソースコードを保存したタイミングで反映されていると思います。

Populate Layers ボタンを押して、選択中のレイヤーが表示されることを確認できます。

レイヤー種別の判断

レイヤー種別は、Layer.kind と constants.LayerKind を評価することで分類できます。

main.js

// 変更後: layerGroupだけを選別する
function showLayerNames() {
    const app = require("photoshop").app;
    const constants = require("photoshop").constants; // 忘れずに追加

    const activeLayers = app.activeDocument.activeLayers;

    const layerGroups = activeLayers.filter(layer => layer.kind === constants.LayerKind.GROUP);
    const layerGroupNames = layerGroups.map(layer => layer.name);

    document.getElementById("layers").innerHTML = `
      <ul>${
        layerGroupNames.map(name => `<li>${name}</li>`).join("")
      }</ul>`;
}

グループだけ選別されていることが確認できました。

レイヤー名の変更

ボタンの追加

プログラム側の処理を記述する前に、実行用のボタンを用意します。
index.html に、btnRename を追記してください。

index.html

  <footer>
    <sp-button id="btnPopulate">Populate Layers</sp-button>
    <sp-button id="btnRename">Rename Layers</sp-button>
  </footer>

executeAsModal

レイヤー名の変更など、Photoshopの状態を更新する処理は、core.executeAsModal を介して実行する必要があります。

参考：Modal Execution in an Async World: executeAsModal - Adobe Developer

// サンプルコード
function renameLayerNames() {
  const core = require("photoshop").core;
  return core.executeAsModal(() => {
      // Write権限があるスコープ
      const app = window.require("photoshop").app;
      app.activeDocument. ... // 任意の処理を続ける
    },
    {
      // 時間がかかる場合はプログレスバーのウィンドウが表示される(らしい)
      commandName: "Any Command Name", // ウィンドウの名前
      
    }
  );
}

スクリプトの実装

以上を踏まえて main.js に追記。

main.js

// 選択中のレイヤーがグループの場合、名前の先頭に'g'をつける
function renameLayers() {
  const core = require("photoshop").core;
  
  core.executeAsModal(() => {
    const app = require("photoshop").app;
    const constants = require("photoshop").constants;

    const activeLayers = app.activeDocument.activeLayers;
    activeLayers.forEach(layer => {
      if (layer.kind === constants.LayerKind.GROUP) {
        layer.name = "g" + layer.name; // レイヤーグループの場合は、'g'を付与
      }
    })
  }, { commandName: "Rename layers", })
}

// ボタンとrenameLayersの接続
document.getElementById("btnRename").addEventListener("click", renameLayers);

すべてのレイヤーを選択して、Rename Layers ボタンを押すと、

レイヤーグループにだけ、gの接頭文字をつけることができました。

余談/メモ

async/await で非同期にしたほうがいい？
- ドキュメントのGetting Startedだと同期処理で書かれていた
Chrome Developer Tools の開き方
- 使い方は普通のWeb開発と同じ

参考記事