AdobeGeneratorBitmaps前回の記事に引き続き、Generator for Photoshopネタで、今回は自前のGeneratorプラグインを開発するための準備をします。

 

 

手順0.事前にインストールするもの(Mac, MountainLion)

node.js  .pkgからインストールも可能です。僕の作業環境だと v0.10.18でした。

 

 

手順1.Generatorを導入

MyGeneratorプラグインの核となるGenerator-Coreを、adobe-photoshopリポジトリからダウンロードしてきます。

スクリーンショット 2013-09-24 21.23.56

adobe-photoshop/ganarator-core https://github.com/adobe-photoshop/generator-core

次にターミナルを立ち上げ、ダウンロードしたgenerator-core-masterのディレクトリ(デスクトップに置きました)に移動し、generatorを動かすためのモジュールインストールを行います。

 

ターミナル.app

$ cd ~/Desktop/generator-core-master
$ npm install

スクリーンショット 2013-09-24 21.29.10

npmコマンドが通らなければ、手順0からやり直して下さい..

 

 

手順2.PhotoshopCC とNodejsをつなぐための環境設定をする

スクリーンショット 2013-09-24 21.33.27

「環境設定>プラグイン」へ行き

サービス名を「Photoshop Server」

パスワードを「password」

と入力して、node.js越しにphotoshopに通信できる体制を整えます。

 

手順3.動くかどうかを確認します。

Generatorイベントをつかむためのサンプルプロジェクトがあるので、さっそくgenerator-getting-started プロジェクトを落とします。

こちら adobe-photoshop/generator-getting-started

わかりやすいように、展開してデスクトップに置きました。

スクリーンショット 2013-09-24 21.44.12

PhotoshopCCを立ち上げます。

ターミナルに戻り、generator-core ディレクトリに居ることを確認して、次のコマンドをうちこみます。

$ node app -f ../generator-getting-started-master/

node app -f でアプリケーションを呼び出し、getting-startedメインファイルが呼び出されます。すると、起動中のphotoshopのプロジェクト情報をつかみ始め、ログが流れます

スクリーンショット 2013-09-24 21.48.41

 

手順4. first plugin を作成して、実行します。

スクリーンショット 2013-09-24 21.13.30

今回は初pluginとして、Photoshop Generator(生成)メニューの中に「First Plugin」を入れて、メニューのクリックを検知してターミナルに出力します。

まず、適当な名前でディレクトリを作成します。(myGeneratorPluginとしました)

スクリーンショット 2013-09-24 21.52.54

そのなかに、エディターか何かで、package.jsonmain.jsを作成します。内容はこちら。

スクリーンショット 2013-09-24 21.56.59

package.json

{
"name":"myFirstPlugin",
"version": "1.0.0",
"description": "firstplugin",
"main": "main.js",
"generator-core-version": "~1"
}

main.js

(function(){

	"use strict";

	var generator;

	function init(gen){
		generator = gen;

		console.log("MY FIRST PLUGIN STARTED!!!!");

		generator.addMenuItem("fp", "First Plugin", true, false);
		generator.onPhotoshopEvent("generatorMenuChanged",menuClicked);

	}

	function menuClicked(e){

		if(e.generatorMenuChanged.name == "fp"){
			console.log("menuChanged");
		}

	}

	exports.init = init;

}());

ファイルができたら、手順3の実行手順と同じように、自前プラグインを実行します。

 

ターミナル.app

$ node app -f ../myGeneratorPlugin/

スクリーンショット 2013-09-24 21.13.30

実行すると、生成項目の中にFirst Pluginというのができていると思うので、そちらをクリック。するとこのような形でターミナルにログが出力されていればテスト終了です。導入おつかれさまでした。

 

Photoshop event: messageID: 4, name: generatorMenuChanged, parsedValue: {"generatorMenuChanged":{"name":"fp"},"timeStamp":1380028001.924}
Emitting Photoshop event: [ 'PHOTOSHOP-EVENT-generatorMenuChanged',
  { generatorMenuChanged: { name: 'fp' },
    timeStamp: 1380028001.924 } ]
menuChanged

今年はGenerator Pluginで盛り上がれそう!

(via tomkrcha.com/?p=3896 )