イトウ先生のTipsnoteAdobe Extendscript Toolkit CC

イマジカデジタルスケープ 短期集中クリエイティブ講座

イマジカデジタルスケープ・AfterEffects・Photoshop・HTML・CSS・JavaScript・1日トレーニング

Web・動画・映像・ゲーム・DTP・CG・Adobe Creative Cloud・キャリア・就活に

 
 
1 11月・12月・日曜開講のお知らせ
 

お客様index

企業・自治体のお客様に 業務効率化、コスト削減に
クリ博登録者・学生の方に 割引トレーニングはコチラ


イトウ先生のTipsnote


イトウ先生のTipsnote:目次

【 PhotoshopをJavaScriptで操作するAdobe Extendscript Toolkit CC 】 

今回のプログは、今年最後のブログとなりました。1年間ブログを見ていただき、またトレーニングをご受講いただいたみなさま、誠にありがとうございました。
今年最後のブログは、JavaScriptを使用して、Photoshop上での操作を自動化するAdobe Extendscript Toolkit CCについてご紹介します。なお、同様の操作は、Illustrator等、他のAdobe製品でも使用可能です。JavaScriptの学習にもなるはずですので、ぜひこの機能を使ってみてください。
なお、PhotoshopやIllustratorでJavaScriptを使用する場合、Webサイト上で使用するJavaScriptのメソッド等やその使い方を理解している方でも、PhotoshopやIllustratorで使用する独自オブジェクトや独自メソッドを覚える必要があります。ただし、JavaScriptを使ったことがある方であれば、すでに用意されているマニュアル等を参考に、自分で作っていくこともそう難しいことでは無いかと思います。サンプルのソースには、非常に便利な機能も用意されているため、ぜひ使い方を覚えてみてください。

さっそくやってみよう!

まずは、JavaScriptそのものを書ける方、さらにPhotoshopやIllustrator上で出てくる独自オブジェクトや独自メソッドの理解がある方は、通常のテキストエディタで書いて保存し、そのままPhotoshopやIllustratorでJavaScriptを読み込んでしまえばよいですが、今回は、アプリケーションフォルダの中にAdobe Extendscript Toolkit CC、というアプリケーションを使用して実行してみます。
このアプリケーションを使用すると、ソースの入力、保存、事前のデバッグ、各アプリケーション上で実行させた場合にどのように動作するかをこのアプリケーション側からコントロールすることが可能です。
なお、CS6をお使いの方は、アプリケーションフォルダ→ユーティリティフォルダ→Adobeユーティリティ-CS6の中に、Adobe Extendscript Toolkit CS6が入っています。
まず、アプリケーションを起動すると以下のような画面になります。

pscc_js001

左上のプルダウンメニューから、JavaScriptを実行させる対象のアプリケーションを選択し、JavaScriptを書いた後、再生ボタンをクリックすると、対象のアプリケーション上で、JavaScriptが実行されます。

pscc_js002

このJavaScriptをファイルとして保存し、各アプリケーション側から読み込むと、そのJavaScriptが実行される、というように使用します。
なお、実行するアプリケーションは事前に立ち上げておく必要があります。

pscc_js006

どのようなことができるか?

サンプルとしていくつかのJavaScriptをご紹介します。Adobe製品独自のJavaScriptオブジェクトや独自メソッドがありますが、これらは以下のリファレンスにその意味が掲載されています。すべて英文ですが、JavaScriptの学習をされたことがある方は、どの部分をどのように書き換えればどのようになるか?のおおよその見当はつくかと思います。

以下がサンプルのソースです。Adobe Extendscript Toolkit CCとPhotoshopを起動し、以下のソース部分をコピーペーストして実行してみてください。

○幅200px、高さ100px、解像度72dpiの「練習用」というRGB画像を新規作成する。

app.documents.add(200, 100, 72, "練習用", NewDocumentMode.RGB);


○その画像にレイヤーがいくつあるかをカウントし、アラートで返す。
※複数のレイヤーがある画像を開いた状態で実行します。

var layerNum = app.activeDocument.layers.length;
alert(layerNum);


○カラーサンプラーツールで設定したサンプルポイントを全て削除する。
※カラーサンプラーツールで、画像の任意の箇所でクリックし、サンプルポイントがある画像を開いた状態で実行します。

app.activeDocument.colorSamplers.removeAll();


○カウントツールで入れたカウンター番号を、全て削除する。
※カラーサンプラー同様、カウントツールでカウンターがある画像を開いた状態で実行します。

app.activeDocument.countItems.removeAll();


○Photoshopで使用できるフォントの数をアラートで返す。

alert(app.fonts.length);


○全ての画像を保存せずに閉じる(保存しますか?で、いいえを選択して閉じた場合と同じ扱い)
※複数の画像を開いた状態で実行します。

while (documents.length > 0){
app.activeDocument.close(SaveOptions.DONOTSAVECHANGES);
}


○「あいう」という名前のレイヤーカンプに、「かきく」というコメントを自動入力する。
※レイヤーカンプとは、レイヤーの表示状態に対して名前をつけて保存したもののことをいいます。複数のレイヤーがある画像で、いくつかのレイヤーのみを表示しておき、ウインドウメニューからレイヤーカンプを選択してレイヤーカンプパネルを表示し、そのレイヤーカンプに「あいう」という名前を設定しておきます。

var layercompRef = app.activeDocument.layerComps.getByName("あいう");
layercompRef.comment = "かきく";


○パスパネルに作成した「作業用パス」を、選択した状態にする。
※ペンツール等で任意のパスを作成し、パスパネル上にある作業用パスが選択されていない状態で実行します。

var currentPathItem = app.activeDocument.pathItems.getByName("作業用パス");
currentPathItem.select();


○パスとブラシを使って水平線を描く(functionを使った例)
※幅800px、高さ200px程度の新規画像を作成した状態から実行します。
現在の画像の、X座標Y座標各100pxのところから、X座標500px、Y座標100pxのところまで作業用パスを作成し、「水平線」という名前でパスを保存した後、パスの境界線をブラシツールで(現在選択しているブラシの形状と直径サイズ、描画色で)作成し、その後パスを削除する。

function drawLine(doc, start, stop) {
var startPoint = new PathPointInfo();
startPoint.anchor = start; startPoint.leftDirection = start;
startPoint.rightDirection = start; startPoint.kind = PointKind.CORNERPOINT;
var stopPoint = new PathPointInfo();
stopPoint.anchor = stop; stopPoint.leftDirection = stop;
stopPoint.rightDirection = stop;
stopPoint.kind = PointKind.CORNERPOINT;
var spi = new SubPathInfo();
spi.closed = false;
spi.operation = ShapeOperation.SHAPEXOR; spi.entireSubPath = [startPoint, stopPoint];
var line = doc.pathItems.add("水平線", [spi]); line.strokePath(ToolType.BRUSH); line.remove();
}
drawLine(app.activeDocument, [100,100], [500,100]);


pscc_js009

アクションとの違い

Photoshopにはアクションとバッチの機能があるため、この機能を使用しなくても一連の操作を自動化することは可能ですが、Adobe Extendscript Toolkit CCを使ってJavaScriptで処理するメリットは、反復処理やループ処理にあります。
どのような動作でもそうですが、例えば、「同じ動作を」「1つの画像に」複数回繰り返す、ということをする場合、アクションで行った場合は、一度録画しておいたアクション上での操作をアクションパネル上でその回数分だけ複製する(またはその回数分だけ実際にやってみて録画する)ということが必要です。JavaScriptで処理すると、for文の繰り返し条件を指定するだけで指定回数の繰り返しができ、またwhileループ文に書くことで無限ループも可能です。仮に無限ループになった場合でも、ブラウザと違って暴走することはなく、Adobe Extendscript Toolkit CC上の停止ボタンをクリックするだけで、いつでも手動で処理を中断することも可能、ということになります。

年末年始にお時間のある方は、ぜひどのようなことができるか、ぜひチャレンジしてみてください。

それでは、今年一年間、ブログを読んでいただいてありがとうございました。
ぜひ楽しいクリスマスを!そして2014年、よいお年をお迎えください!
また来年も、よろしくお願い申し上げます。

関連講座

↑ページTOPへ

| カテゴリ | | Web | DTP・デザイン | CG・動画・映像 | キャリア・就活 |
| お客様 Index | | 企業・自治体のお客様に | 学生の方に |
| 目的別・状況別 Index | | Webデザイン入門セミナー | 映像編集入門セミナー | DTPデザイン入門セミナー | 魅力的なポートフォリオ作成 |
| Adobe CCを覚えたい方に | | Photoshop CC 2015の使い方・基本 | Illustrator CC 2015使い方・基本 |
| 画像をきれいに編集する方法 | 読みやすい文字の組み方 |
| HTML / XHTML / CSSの基礎知識 | HTML5 / CSS3の基礎知識 | JavaScriptの基礎知識 | jQuary・jQueryMobileの基礎知識 |
| Dreamweaver CC 2015の使い方・基本 | InDesign CCの使い方・基本 |
| AfterEffects CCの使い方・基本 | AfterEffects CC 2014の使い方・実践 |
| Premiere Pro CC 2014の使い方・基本 |
| Webの基本をマスターしている方 | | 棚橋弘季氏の直伝、ユーザー中心のWebサイト設計 | 益子貴寛氏が伝授するCSS実践テクニック |
| 矢野りんさんに学ぶ、”使える”デザイン基礎知識 | こもり氏のHTML+CSS基礎 | 平塚氏のマーケティング基礎 |
| 坂本氏のIA入門 | Webに関わるすべての人の「Webリテラシー」講座 | 神森勉氏に学ぶコーディング講座 |
| 森川眞行氏に学ぶ、大規模サイトの構築・運用マネジメント |
| 就職・転職・就活中の方へ | | 模擬面接セミナー(個別FB付) | エントリーシートブラッシュアップセミナー |
| 面接・職場で使えるビジネスマナー研修 | 職務経歴書添削セミナー |