テキストレイヤーの文字を変更するPhotoshopスクリプト

#テキストレイヤーの文字を変更するPhotoshopスクリプト

選択されているテキストレイヤー上で使用すると

![名称未設定-2-のコピー.jpg](https://qiita-image-store.s3.amazonaws.com/0/203176/db00b309-91ae-6679-a0f9-48104886b773.jpeg)
ダイアログが出現しテキストを打ち替えて、「変更」ボタンをクリックするとテキストが差し替わる。
以下、スクリプトのソースコード

~~~
var activeText = app.activeDocument.activeLayer.textItem.contents;

var group = new Window("dialog","getText",{ width: 320, height: 150, x: 500, y: 300 });
group.okBtn = group.add("button", { width: 80, height: 25, x: 165, y: 105 } , "変更", { name:"ok"});
group.cancelBtn = group.add("button", { width: 80, height: 25, x: 75, y: 105 } , "キャンセル", {name: "cancel"});
group.eText = group.add("edittext", { width: 200, height: 30, x: 60, y: 55 }, activeText);

group.eText.active = true;

//キャンセルボタンクリック時の動作
group.cancelBtn.onClick = function () {
  alert("キャンセルされました。");
  group.close();
}

//OKボタンクリック時の動作
group.okBtn.onClick = function () {
	app.activeDocument.activeLayer.textItem.contents = group.eText.text;
	  group.close();
    }

group.show();
~~~

##スクリプトの解説
~~~ruby:1行目
var activeText = app.activeDocument.activeLayer.textItem.contents;
~~~

`app.activeDocument.activeLayer.textItem.contents;`
選択されているテキストレイヤーのテキスト内容を取得
そして変数aciveTextに格納

~~~ruby:3行目
new Window("dialog","getText",{ width: 320, height: 150, x: 500, y: 300 });
~~~

`new.window()`でダイアログを作成。
1つ目の引数はダイアログを示すdialog
2つ目の引数はダイアログのタイトルになります。
3つ目はダイアログのサイズと配置位置です。
位置はモニタ画面からの絶対座標になります。

例だと、モニタ画面左から500px、上から300pxの位置から
横幅320px縦幅150pxのダイアログが出てきます。

~~~ruby:4～5行目
group.okBtn = group.add("button", { width: 80, height: 25, x: 165, y: 105 } , "変更", { name:"ok"});
group.cancelBtn = group.add("button", { width: 80, height: 25, x: 75, y: 105 } , "キャンセル", {name: "cancel"});
~~~
`add()`でダイアログ内にControlerを追加。
1つ目の引数にボタンを示すbutton
2つ目にサイズと配置位置
この配置位置はダイアログを基準とした位置になります。
3つ目はボタン内に表示する文字になります。
4つ目、ボタンの挙動に関してnameプロパティで設定します。
反映させるには`{name: "ok"}`、反映させない場合は`{name: "cancel"}`と記述します。

~~~ruby:6行目
group.eText = group.add("edittext", { width: 200, height: 30, x: 60, y: 55 }, activeText);
~~~
テキストの入力エリアを作成。
`add()`でダイアログ内にControlerを追加。
1つ目の引数にテキスト入力エリアを示すedittext
2つ目はサイズと配置位置
この配置位置はダイアログを基準とした位置になります。
3つ目の`activeText`はダイアログ内に取得したテキストを表示させます。

~~~ruby:8行目
group.eText.active = true;
~~~

先ほど作成したテキスト入力エリア`group.eText` を `.active = true`で編集できる状態になります。

~~~ruby:11行目
group.cancelBtn.onClick = function () {
  alert("キャンセルされました。");
  group.close();
}
~~~
キャンセルボタンを押した時の挙動を記述。
`alert('');`アラート画面を出します。
`.close();`ウィンドウを閉じます。

~~~:ruby:17行目
group.okBtn.onClick = function () {
  app.activeDocument.activeLayer.textItem.contents = group.eText.text;
  group.close();
}
~~~
OKボタンを押した時の挙動を記述。
`app.activeDocument.activeLayer.textItem.contents = group.eText.text;`
`.close();`ウィンドウを閉じます。



~~~ruby:22行目
group.show();
~~~
`.show();`でダイアログを画面上に表示します。

~~~ruby:11行目
app.activeDocument.activeLayer.textItem.contents = group.eText.text;
~~~
`.activeDocument.activeLayer.textItem.contents`今開いているドキュメント上のアクティブなレイヤーに`group.eText.text`でダイアログのテキストを反映する。


##最後に
テキストレイヤーからテキストをコピーペーストをする時、ダブルクリックするのが煩わしく
改善しようと思った事がきっかけで作成したスクリプトでしたが......なんとPhotoshop2018から標準でテキスト編集ができるショートカットがありました......
テキストレイヤー上で`ctrl`+`Enter`でテキスト入力エリアがアクティブになります！感動！！


##参考にさせて頂いたサイト
[初心者がPhotoshopスクリプト(.jsx)を作ってみて得られた知識・ノウハウまとめ](https://qiita.com/r-ngtm/items/65f26b1f782f72b18d2a)
[Adobe Photoshop CC自動化作戦](http://www.openspc2.org/book/PhotoshopCC/)