2015/10/11(日)に大阪梅田で開催された Cocoa勉強会関西コラボ企画 「スマホアプリ開発者のための Illustrator入門」 での発表資料です。

1. Adobe Illustrator
はじめてのスクリプト
naichilab

2. 自己紹介
名前
naichi(ないち)
Twitter
@naichilab
仕事
SE / プログラマー
趣味
スマホアプリ開発（Unity/C#）
Illustrator歴
一ヶ月ぐらい

3. こんなの描きました
ペンの練習
ゲーム用にトランプ
壁紙チュートリアル
嫁の絵をトレース

4. 今日の内容
• スクリプトって？
• 便利なスクリプトを探そう
• まずは使ってみよう
• 自分で作ってみよう

5. スクリプトって？

6. 何ができるの？
• アートボード/レイヤー操作
• パス/色など作図操作全般
• 書き出し/印刷
• 他にもいろいろ
手作業でできることのほとんどは
スクリプトでも可能です。

7. 何をさせるべき？
簡単な作業の方が、
使いまわせて効果を感じやすい！
• 繰り返し行う作業
• 面倒な作業
• 簡単な作業

8. 例えば…
• アートボードサイズの調整
• アートボード/レイヤごとに
名前をつけて書き出し
• 移動・ズームを楽にしたい
日頃の作業の「面倒だな∼」
は自動化のチャンス！

9. 便利なスクリプトを
探してみよう

10. まずは検索
Illustrator スクリプト ○○（やりたいこと）

11. スクリプト配布サイト
• イラレで便利
• 3flab inc.
• s.h's page
• 他にもたくさん！！
あったら便利！な小さいスクリプトが多く置か
れています。
効率的に作業するための実用的なスクリプトが
たくさん！
手作業では描けないようなおもしろい図形を描
くスクリプトがあったり。

12. 便利スクリプトの紹介

13. アートボードごとに
名前を付けて保存
ダウンロード
Illustrator でアートボードごとに画像を書き出してからファイル名を変更するのが面倒くさい ¦ 3flab inc.
• アートボードごとに柔軟な書き出しを
行うスクリプト
• 標準書き出しの
「ドキュメント名_アートボード名.png
を毎回リネームしてる人はぜひ。
• トランプの書き出しにとても役立った。

14. 選択したアイテムを
画面中央に100%表示
• Cmd+0だとアートボードが100%表示されますよね。
• 上記コマンドの選択中アイテムを対象にした感じ。
• アートボード外で作業している場合に便利。
• なぜ標準機能にないのか…
• Cmd+9にショートカット割り当てました。
ダウンロード
選択したアイテムを中心に100%表示 ¦ 3flab inc.

15. 星座を描く
• おもしろかったので紹介
• 星の座標や名前の入った
テキストファイルから作図
• 手作業じゃ難しいことを
スクリプトにやらせるいい例
ダウンロード
Illustratorで星図と星座を描くスクリプト ¦ hokori.net

16. とにかく使ってみよう

17. スクリプトの配置
• Mac
/アプリケーション/Adobe Illustrator CC 2015/
Presets/ja_JP/スクリプト/
1. ダウンロードしたスクリプト(.js/.jsx)
を下記フォルダに保存
• Windows
C:¥Program Files¥Adobe¥Adobe Illustrator XX (64
Bit)¥Presets¥ja_JP¥スクリプト¥

18. スクリプトの実行
1. Illustratorを再起動
2. ファイル > スクリプト > 選択
保存したスクリプトが並ぶ

19. Macなら更に便利
• ScriptKeyAi for Illustrator
http://tama-san.com/scriptkey/
• スクリプトの呼び出しを
とても簡単にしてくれるツール
• ショートカットキー割当
• ワンクリックで実行

20. 探したけど
欲しい機能が
見つからない…?

21. ないなら作りましょう！

22. と、その前に
• その作業、標準の機能に無いですか？
• その作業、アクションやバッチで
代用できませんか？
• すでに他の人が便利なスクリプトを
公開していませんか？

23. じゃあ作りましょう！

24. スクリプトで使える言語
• JavaScript（Mac,Windows）
• AppleScript（Macのみ）
• VBScript（Windowsのみ）
特にこだわりなければJavaScriptで！！

25. 最低限必要な知識
• 変数と代入
• if/else文
• for文
全く分からなければ
ドットインストールへどうぞ！!

26. 参考になる文書
• Adobe Illustrator CC 2015 Scripting Guide
• Adobe Illustrator CC 2015 Reference: JavaScript
スクリプトの全体像や、やれること・やれないこ
とが書いてあります。ただし英語。
JavaScriptで呼び出す関数名や変数名の詳細なリ
ファレンス。行き詰まったらこれとにらめっこし
ましょう。ただし英語。

27. 開発環境の準備

28. Extend script Toolkit CC
(ESTK)
•専用の開発ツール
•Adobe CCから
インストール可能！

29. Extend script Toolkit CC
(ESTK)
• デバッグができる！
• 入力補完が効く！！
• とにかく重い！！！
※素晴らしいツールです

30. Illustrator を選択
使う前の準備
緑のチェーンを確認
別途Illustratorを起動しておかないと
チェーンが切れたアイコンになります。

31. お約束
Hello World

32. HelloWorld
alert( "Hello World!!" );
①入力
②実行

33. 実行結果
動きました！

34. サンプルコード
• ドキュメント情報
• アートボード情報
• レイヤー操作
• PNG保存
いくつか掻い摘んで紹介します。

35. ドキュメント情報
//開いているドキュメントを取得
var doc = app.activeDocument;
//ドキュメント名を取得
alert("ドキュメント名 : " + doc.name);

36. アートボード情報
var doc = app.activeDocument;
//アートボードの総数
var count = doc.artboards.length;
//アクティブなアートボードのインデックス
var activeArtboardIndex = doc.artboards.getActiveArtboardIndex();
//アクティブなアートボードを取得
var activeArtboard = doc.artboards[activeArtboardIndex];
//アートボード名
alert("アクティブなアートボード : " + activeArtboard.name);

37. レイヤー操作
var doc = app.activeDocument;
//レイヤーの追加
var layer = doc.layers.add();
//レイヤー名の設定
layer.name = "下書きレイヤー";
//レイヤーをアクティブにする
doc.activeLayer = layer;
//レイヤーの削除
doc.layers["下書きレイヤー"].remove();

38. PNG保存
var savefile = File.saveDialog("保存ファイル名を選択");
if(savefile != null){
var opt = new ExportOptionsPNG24();
//背景透過
opt.transparency = true;
//アンチエイリアス
opt.antiAliasing = true;
//アートボードサイズで保存
opt.artBoardClipping = true;
//書き出し
app.activeDocument.exportFile(savefile, ExportType.PNG24, opt);
}

39. ひとつ作ってみた

40. Android、iOS用
アイコン書き出しスクリプト
•１つのアイコン画像を各種サイズに一括変換＆保存

41. GitHubで公開しました
illustrator-save-icons-for-mobile
https://github.com/naichilab/illustrator-save-icons-for-mobile

42. EOF