五反田の2社合同勉強会でLTした

1. JSX入門
デザイン作業の自動化のために
2014/10/01
五反田合同勉強会
@silver_s / silvers

2. What is JSX?

3. What is JSX?

4. ✘What is JSX?

5. What is JSX?

6. ✘What is JSX?

7. What is JSX?

8. What is JSX?

9. JSX is

10. JSX is
• AdobeのExtension Script
• よくある作業なんかを自動化できる
• javascriptで記述
• Photoshop 7.0からある
• アクション機能やバッヂ処理より複雑なことができる

11. vs Action

12. vs Action
• 少しばかりjavascriptの知識がいる
• var, for, if-else, functionが分かれば十分
• もちろんアクションで表現できることはアクションでやる
のが楽

13. vs Action
• 少しばかりjavascriptの知識がいる
• var, for, if-else, functionが分かれば十分
• もちろんアクションで表現できることはアクションでやる
のが楽
• 複雑な処理が記述可能
• アプリ情報、書類情報の取得
• それらの情報による条件分岐、繰り返し処理

14. What you need

15. What you need
• Adobe製品（Photoshopとか）

16. What you need
• Adobe製品（Photoshopとか）
• ExtendScript Toolkit

17. What you need
• Adobe製品（Photoshopとか）
• ExtendScript Toolkit
• お好みのEditor

18. What you need
• Adobe製品（Photoshopとか）
• ExtendScript Toolkit
• お好みのEditor
• javascriptの知識

19. What you need
• Adobe製品（Photoshopとか）
• ExtendScript Toolkit
• お好みのEditor
• javascriptの知識
• ほんの少しの勇気

20. ExtendScript Toolkit
• なくてもいいけどあると便利
• 好きなAdobeでスクリプトを実行できる
• デバッグ機能付き
• これだけでも書けるけど、Editorとして貧弱なので別
にEditorを用意すると吉

21. ExtendScript Toolkit

22. ExtendScript Toolkit
1. コードを貼り付けて

23. ExtendScript Toolkit
2. 対象のアプリを選んで
1. コードを貼り付けて

24. ExtendScript Toolkit
2. 対象のアプリを選んで3. 再生ボタンで実行
1. コードを貼り付けて

25. ExtendScript Toolkit
2. 対象のアプリを選んで3. 再生ボタンで実行
4. コンソール
1. コードを貼り付けて

26. Samples

27. よく使うもの
// 対象のアプリでalertを出す
alert(‘こんにちは’);
!
// 確認項目とか
confirm(‘実行しますか？’);
!
// ESTKのコンソールに吐く
$.write(‘Step 1’);
$.writeln(‘running…’);

28. ドキュメント
// 640x800、解像度72dpiのドキュメントを新規作成
app.documents.add(640, 800, 72, “test",
NewDocumentMode.RGB);
!
// アクティブなドキュメントのレイヤーを取得
var doc = app.activeDocument;
alert(doc.layers.length);
!
// WEB用に保存しつつ、ドキュメントは保存せずに閉じる
doc.exportDocument(
File(path),
ExportType.SAVEOFWEB,
new ExportOptionsSaveForWeb()
);
doc.close(SaveOptions.DONOTSAVECHANGES);

29. ドキュメント操作
// ドキュメントの複製
tmp_doc = doc.duplicate();
!
// 切り抜き
tmp_doc.crop([10, 10, 20, 20]);
!
// リサイズ
tmp_doc.resizeImage(240, 80);
!
// 左右反転
tmp_doc.flipCanvas(Diretion.HORIZONTAL);

30. レイヤー
var layers = doc.layers;
!
// レイヤの取得
var first_layer = layers[0];
var test_layer = layers.getByName(‘test’);
!
// レイヤの表示/非表示
first_layer.visible = true;
test_layer.visible = false;
!
// アクティブレイヤの変更
doc.activeLayer = first_layer;
!
// アクティブレイヤに合わせて切り抜き
doc.crop(doc.activeLayer.bounds);

31. この程度の知識があれば

32. この程度の知識があれば
• 何十体もいるキャラクタの

33. この程度の知識があれば
• 何十体もいるキャラクタの
• 服装や顔のパターンを自動で検出して

34. この程度の知識があれば
• 何十体もいるキャラクタの
• 服装や顔のパターンを自動で検出して
• それぞれの組み合わせで（チェックボックスで選択も可）

35. この程度の知識があれば
• 何十体もいるキャラクタの
• 服装や顔のパターンを自動で検出して
• それぞれの組み合わせで（チェックボックスで選択も可）
• 全身、バストアップ、顔だけに切り取った画像を

36. この程度の知識があれば
• 何十体もいるキャラクタの
• 服装や顔のパターンを自動で検出して
• それぞれの組み合わせで（チェックボックスで選択も可）
• 全身、バストアップ、顔だけに切り取った画像を
• 複数サイズで書き出し

37. この程度の知識があれば
• 何十体もいるキャラクタの
• 服装や顔のパターンを自動で検出して
• それぞれの組み合わせで（チェックボックスで選択も可）
• 全身、バストアップ、顔だけに切り取った画像を
• 複数サイズで書き出し
• みたいなのがさくっとできる

38. ほかにもいろいろ
便利な機能が
http://wwwimages.adobe.com/content/dam/Adobe/en/devnet/photoshop/pdfs/photoshop_scriptref_js.pdf

39. 面倒な作業を自動化して
効率的に仕事しよう！

40. ありがとうございました
→ 次回！Generator編！