Skip to main content
Known Participant
January 25, 2023
Answered

レイヤー名にボタンと同じ名前をつけるエクステンション

  • January 25, 2023
  • 2 replies
  • 388 views

ボタンを複数作って、アクティブなレイヤーをそのボタンの名前と同じにするというエクステンションを作りました。

 

ボタンは下記の通りです。

idを変えて複数作っています。

<button id="btn1" class="sampleBtn">サンプル</button>

 

実際にレイヤー名を変えるスクリプトはこう書きました。

function changeName(colorName) {
    app.activeDocument.activeLayer.name = colorName;
}

 

これをmain.jsで呼び出す(?)形で

window.onload = function (){

   const target = document.querySelectorAll('.sampleBtn');//tagetclassグループで指定

   //for分で要素数分ループ処理
       for (let i = 0; i < target.length; i++) {

       //クリックイベントを追加
       target[i].addEventListener('click', () => {
           var buttonName = event.target.textContent ; //ボタンの名前を取得
           csInterface.evalScript('changeName("' + buttonName + '")');

       }, false);

            
        }}

 

実際にこれで思った通りの挙動になっています。

 

お聞きしたいのは、本当にこれで良いのかどうかです(丸投げですみません)

いろいろ調べながらコードを切り貼りしただけなので、動くには動くのですがこれで本当に大丈夫なのか自信がありません。

 

コードの書き方でおかしい所があったり、こういうのも必要なんじゃないかとか、何かアドバイス等頂けたらありがたいです。

 

宜しくお願いいたします。

This topic has been closed for replies.
Correct answer Ten A

evalScriptの引数をテンプレートリテラルにするとスッキリするかな…

 

csInterface.evalScript(`changeName("${buttonName}");`);

 

というぐらいで、あとはなにも問題ないのではないかと思います。ajabonさんの言う通り「動きゃ正義」です。あと、UXPプラグインにもチャレンジしてみてください。 

2 replies

Ten A
Community Expert
Ten ACommunity ExpertCorrect answer
Community Expert
January 25, 2023

evalScriptの引数をテンプレートリテラルにするとスッキリするかな…

 

csInterface.evalScript(`changeName("${buttonName}");`);

 

というぐらいで、あとはなにも問題ないのではないかと思います。ajabonさんの言う通り「動きゃ正義」です。あと、UXPプラグインにもチャレンジしてみてください。 

1755Author
Known Participant
January 25, 2023

ご回答ありがとうございます。

evalScriptの引数の書き方が分からなくて、一番悩んだところでした。

 

自分の中でも動けばいいやと思っていますが、スクリプト系はまだまだ初心者なので、コードの書き方のせいでPCに無駄な負担をかけてるんじゃないかとか、他の書き方の方が処理が早いんじゃないかとか、色々考えてしまって不安があります。

 

いろいろなプラグインがあるんですね。初めて知ることばかりなのでまた調べてみたいと思います。

1755Author
Known Participant
January 25, 2023

あと一つ知りたいのですが・・・

作ったエクステンションのパネルを、元々あるパネルにドッキングさせると元あるものと同じ横幅になってくれるのですが、高さを自由に変更するにはどうしたら良いのでしょうか?

ajabon grinsmith
Community Expert
Community Expert
January 25, 2023

自分は「動けばいい」と思っているのでコードの添削はえらいひとに委ねますが…

 

パネルの幅と高さについては CSXS > manifest.xml 内で記述します。

 

1755Author
Known Participant
January 25, 2023

ご回答ありがとうございます。

実際に変えてみたら、サイズがちゃんと変わりました。

ありがとうございます。