• WEB

JavaScriptでPhotoshopを自動化してみよう!応用編

  • めい
    めい レタッチちーむ
  • このエントリーをはてなブックマークに追加
ki1610title

お久しぶりです、めいです。

今回は企画ではなく個人のシリーズ記事なのですが…
「私、前々回までなに書いてたっけ…」と記憶があやふやに。
前々回の記事の執筆からかなり間が空いてしまったため、
自分でブログを見直してきました。

JavaScriptでPhotoshopを自動化してみよう!基礎編①

JavaScriptでPhotoshopを自動化してみよう!基礎編②

第一弾の投稿日が「2015.12.02」って…約一年越しのシリーズ記事?!
これにて完結させます、ハイ。

さてさて前々回の執筆時はCS5を使っていたのですが、
CCにバージョンアップした為、「ScriptListener.8li」を再設定することに。

すると…

あれ、「ScriptListener.8li」が消えてる…

なぜだー!!とグーグル先生に聞いてみたところ、
CS6以降はAdobeのサイトからDLしてこなければいけないとのこと…

機械音痴な私はパニックになりながらも、なんとかファイルをDLして
再度設定することができました~><

設定方法はAdobeの下記のページに詳しく書いてありました★

Photoshopヘルプページ

Photoshop内でオン/オフの切り替えができるようになったのは
ありがたいですね~♪

これからもお世話になりますm(__)m

今回の課題について

今回は参考サイトを見ながらJavascriptを自力で書いてみようと思います。
Javascriptの基本の説明は省かせていただきますので、ご了承ください><

参考にしたのはサイトになります↓

Adobe Photoshop CC自動化作戦

細かい動作ごとにJavascriptが掲載されていて、日頃とてもお世話になっているサイトです(゚∀゚).☆

自動化させる動作は

編集中の画像の
「横幅が500pix以上」の場合は画像を黒く塗りつぶし、
「横幅が500pix以下」の場合は画像を赤く塗りつぶす。

という条件分岐付きの動作になります。

パーツごとにスクリプトを書いてみよう

まずはパーツ毎に必要なスクリプトをサイトから探してきましょう。

「横幅が500pix以上」という条件に当てはまるかどうかを調べるためには
開いているドキュメントの横幅を調べる必要がありますね。

先ほどのサイトで調べると、「ドキュメントの横幅、縦幅を調べる」の項目のスクリプトが使えそうです。


//ドキュメントの横幅、縦幅を調べる
preferences.rulerUnits = Units.PIXELS;
 w = activeDocument.width;
 h = activeDocument.height;
 alert(w+","+h);
 w = activeDocument.width.value;
 h = activeDocument.height.value;
 alert(w+","+h); 

上記の「w」が横幅になります。
「h」は縦幅ですが、今回は縦幅が不要なのと、
alertする必要もありませんので、いらないものは省いてしまいましょう。


//ドキュメントの横幅を調べる
preferences.rulerUnits = Units.PIXELS;
 w = activeDocument.width;

スッキリしました♪

そして次は画像を塗りつぶすスクリプトですが、
画像全体を塗りつぶすというスクリプトは載っていませんでした…
しかし「選択範囲を塗りつぶす」というスクリプトが使えそうです。


//選択範囲を塗りつぶす
RGBColor = new SolidColor();
 RGBColor.red = 255;
 RGBColor.green = 0;
 RGBColor.blue = 0;
 selReg = [[0,0],[200,0],[200,100],[0,100]];
 activeDocument.selection.select(selReg);
 activeDocument.selection.fill(RGBColor,ColorBlendMode.NORMAL, 100, false);

ただ上記のスクリプトだと横幅200、縦幅100で範囲を選択されてしまうので


 selReg = [[0,0],[200,0],[200,100],[0,100]];
 activeDocument.selection.select(selReg);

の部分を削除します。


//選択範囲を塗りつぶす
RGBColor = new SolidColor();
 RGBColor.red = 255;
 RGBColor.green = 0;
 RGBColor.blue = 0;
 activeDocument.selection.fill(RGBColor,ColorBlendMode.NORMAL, 100, false);

選択範囲の設定を削除した分、画面全体を選択するスクリプトが必要になりますので、
「全てを選択する」のスクリプトを追加します。


//全てを選択する
activeDocument.selection.selectAll();
//選択範囲を塗りつぶす
RGBColor = new SolidColor();
 RGBColor.red = 255;
 RGBColor.green = 0;
 RGBColor.blue = 0;
 activeDocument.selection.fill(RGBColor,ColorBlendMode.NORMAL, 100, false);

これで「画像全体を塗りつぶす」というスクリプトになりました!

上記は赤く塗りつぶす設定になっていますが、
黒く塗りつぶす場合はRGBColorの指定をすべて0にします。

条件文を書いてみよう

「ドキュメントの横幅を調べる」
「画面全体を黒く塗りつぶす」
「画面全体を赤く塗りつぶす」

上記のスクリプトが完成したので
あとは条件文に当てはめてスクリプトを完成させましょう!

条件文とはそのままの意味で、指定した条件によって動作を分岐させる記述です。
プログラム言語ではif文とも言います。

今回自動化する動作は

「横幅が500pix以上」の場合は画像を黒く塗りつぶし、
「横幅が500pix以下」の場合は画像を赤く塗りつぶす。

ですが、この「~の場合は」の部分にあたります。

聞き慣れない方は軽く読み飛ばして下さい。
読むより慣れろ、実践あるのみです!


if (条件) {
 //条件を満たした時の処理
}else{
 //条件を満たさなかった場合の処理
}

それでは条件文を書いてみましょう。

「横幅が500pix以上の場合は」を条件文にすると、(w > 500) になります。
「w」というのは最初にでてきた横幅のことです。
「>」この記号は見たことありますよね?
条件文の書き方についてはググるとたくさん出てきますので省きます。

この条件文と横幅を調べるスクリプトを組み合わせると


//横幅を調べる
preferences.rulerUnits = Units.PIXELS;
 w = activeDocument.width;
//条件文
if (w > 500) {
 //条件を満たした時の処理
}else{
 //条件を満たさなかった場合の処理
}

「画面の横幅を調べて、横幅(w)が500以上の場合は○○をする、500以下の場合は○○をする」
というスクリプトができました!

最後に「//条件を満たした時の処理」と「//条件を満たさなかった場合の処理」を組み合わせると…


//横幅を調べる
preferences.rulerUnits = Units.PIXELS;
 w = activeDocument.width;
//条件文
if (w > 500) {
 //条件を満たした時の処理
  //全てを選択する
  activeDocument.selection.selectAll();
  //選択範囲を黒く塗りつぶす
  RGBColor = new SolidColor();
  RGBColor.red = 0;
  RGBColor.green = 0;
  RGBColor.blue = 0;
  activeDocument.selection.fill(RGBColor,ColorBlendMode.NORMAL, 100, false);
}else{
 //条件を満たさなかった場合の処理
  //全てを選択する
  activeDocument.selection.selectAll();
  //選択範囲を赤く塗りつぶす
  RGBColor = new SolidColor();
  RGBColor.red = 255;
  RGBColor.green = 0;
  RGBColor.blue = 0;
  activeDocument.selection.fill(RGBColor,ColorBlendMode.NORMAL, 100, false);
}

完成です!

スクリプトを動作させてみよう

早速完成したスクリプトをフォルダに配置し、Photoshopで起動させてみましょう。

動作結果

無事に動作しました!!

自動化シリーズ完結です!

3回に渡ってお送りしてきたphotoshopの自動化解説記事ですが、
これにてようやく完結とさせていただきます。
(これ以上書ける知識がないので…泣)

応用編はJavascriptの基礎知識が必要になりますが、
これを機に、自動化に触れてみていただけたらこの記事も報われます( ´ー` )

飽き性な人でも続けられる刺激ある環境

レタッチチームではレタッチだけでなく、プログラムやエクセルなど
様々な業務にチャレンジすることができますよ!
とっっっても飽き性な私が同じ会社で勤め続けられるのも
様々な試練…ではなく、業務を与えて下さるしるにひリーダーのお陰です★

レタッチだけでなく幅広い業務にチャレンジしてみたい!というアナタ、
是非私たちと一緒に働きましょう♪
(あわよくば私にプログラムを教えてください←)

それではまた!

このエントリーをはてなブックマークに追加

めいが最近書いた記事

WRITERS POSTS もっと見る

他にもこんな記事が読まれています!

  • WEB
  • マーケティング
  • サーバー・ネットワーク
  • ライフスタイル
  • お知らせ