変数を使った動的書き出しと書式設定スクリプト

: Illustratorスクリプトメモ; 2017年10月20日; 2017年10月23日; 参照数: 6781

Illustratorには変数を使ってテキストを動的に切り替える機能がありまして、公式の解説はこちら

テンプレートと変数によるデータ駆動型グラフィック

なんですが、まあ理解しにくいのでググってもらうとわかりやすい解説サイトが出てきます。

用途としてはハガキや名刺なんかの外側で管理しているデータを流し込んであれやこれやするみたいなのが多いと思いますが、ここではデータを読み込んでデータ毎に書き出す方法と書式の設定に関するメモを記していきます。

ちなみに使用言語はJavascriptです。

XMLの形

読込みに使うデータはXMLなので、まずこの形に整形しなければなりません。
私はFileMakerで書き出しているのでエンコードがUTF-16になっていますが、エディタによって変えてください。

<?xml version="1.0" encoding="utf-16"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"    "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd" [
 	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
 	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
 	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
 	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
 	<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
 <!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
 ]>
 <svg>
 <variableSets  xmlns="&ns_vars;">
 	<variableSet  locked="none" varSetName="binding1">
		<variables>
			<variable  category="http://ns.adobe.com/Flows/1.0/" trait="textcontent" varName="変数1"></variable>
			<variable  category="http://ns.adobe.com/Flows/1.0/" trait="textcontent" varName="変数2"></variable>
			<variable  category="http://ns.adobe.com/Flows/1.0/" trait="textcontent" varName="変数3"></variable>
			<variable  category="http://ns.adobe.com/Flows/1.0/" trait="textcontent" varName="変数4"></variable>
			<variable  category="http://ns.adobe.com/Flows/1.0/" trait="textcontent" varName="変数5"></variable>
		</variables>
		<v:sampleDataSets  xmlns="http://ns.adobe.com/GenericCustomNamespace/1.0/" xmlns:v="http://ns.adobe.com/Variables/1.0/">
			<v:sampleDataSet  dataSetName="1">
				<変数1>
					<p>1-1行目</p>
					<p>1-2行目</p>
				</変数1>
				<変数2>
					<p>1あああ</p>
				</変数2>
				<変数3>
					<p>1いいい</p>
				</変数3>
				<変数4>
					<p>1ううう</p>
				</変数4>
				<変数5>
					<p>1えええ</p>
				</変数5>
			</v:sampleDataSet>
			<v:sampleDataSet  dataSetName="2">
				<変数1>
					<p>2-1行目</p>
					<p>2-2行目</p>
				</変数1>
				<変数2>
					<p>2あああ</p>
				</変数2>
				<変数3>
					<p>2いいい</p>
				</変数3>
				<変数4>
					<p>2ううう</p>
				</変数4>
				<変数5>
					<p>2えええ</p>
				</変数5>
			</v:sampleDataSet>
		</v:sampleDataSets>
	</variableSet>
 </variableSets>
 </svg>

13〜19行目が使用する変数の設定、21行目〜38行目までが1つのデータセットとなります。

アクティブなデータセットの切り替え方

Illustrator上では変数パネルのドロップダウンリストから選択することで切り替えることが出来ます。

スクリプトで切り替えるにはこのようにします。

// データセットの番号で指定する場合
app.activeDocument.activeDataSet = app.activeDocument.dataSets[0];

// データセットの名前で指定する場合
app.activeDocument.activeDataSet = app.activeDocument.dataSets.getByName("1");

データセットの名前で指定する場合の名前は「dataSetName」で指定した名前になります。

変数のデータを取得する

スクリプトで変数にアクセスするにはこのようにします。

// 変数の番号でアクセスする場合
app.activeDocument.variables[0];

// 変数の名前でアクセスする場合
app.activeDocument.variables.getByName("変数1");

そして、変数の中身にアクセスする方法などなどはこんな感じ。

// 変数の中のアイテム全体
app.activeDocument.variables[0].pageItems[0];

// 変数の中のアイテムの1行目
app.activeDocument.variables[0].pageItems[0].paragraphs[0];

// 変数の中のアイテムの1行目の内容
app.activeDocument.variables[0].pageItems[0].paragraphs[0].contents;

文字列として中身を取得したい場合は各オブジェクトの後に「.contents」で取得できます。

PDFで保存する

var saveOptions = new PDFSaveOptions(),
	selObj = Folder.selectDialog("Select"),
	fileName = app.activeDocument.variables[1].pageItems[0],
	filePath = null,
	savefile = null;

// PDFファイルの書き出しオプションの設定
saveOptions.pDFPreset = "[PDF/X-1a:2001 (日本)]";
saveOptions.preserveEditability = false;

// 選択したフォルダのパスと変数を使ってファイルパスを作成
filePath = selObj.fsName + "/" + fileName.contents + ".pdf";

// ファイルを保存
savefile = new File(filePath);
app.activeDocument.saveAs(savefile, saveOptions);

2行目のselObjでフォルダを選択したものと3行目のfileName(に変数2の中身を入れたもの)を使ってfilepathを作成しそれを使って保存します。

[Ai] PDFSaveOptions イラストレーターPDF保存オプション

PDFSaveOptionsの細かい設定は纏めてあるサイトがあったのでこちらを参照。

AIで保存する

var aiSaveOptions = new IllustratorSaveOptions(),
	selObj = Folder.selectDialog("Select"),
	fileName = app.activeDocument.variables[1].pageItems[0],
	filePath = null,
	savefile = null;

// aiファイルの書き出しオプションの設定
aiSaveOptions.saveMultipleArtboards = true;
aiSaveOptions.pdfCompatible = true;
aiSaveOptions.compressed = true;

// 選択したフォルダのパスと変数を使ってファイルパスを作成
filePath = selObj.fsName + "/" + fileName.contents;

// ファイルを保存
savefile = new File(filePath);
app.activeDocument.saveAs(savefile, aiSaveOptions);

PDFとほぼ同じ。

IllustratorSaveOptionsはこちらを。

アートボード毎に書き出してみる

var aiSaveOptions = new IllustratorSaveOptions(),
	selObj = Folder.selectDialog("Select"),
	fileName = app.activeDocument.variables[1].pageItems[0],
	filePath = null,
	savefile = null,
	i = null,
	len = null;

// aiファイルの書き出しオプションの設定
aiSaveOptions.saveMultipleArtboards = true;
aiSaveOptions.pdfCompatible = true;
aiSaveOptions.compressed = true;

// 選択したフォルダのパスと変数を使ってファイルパスを作成
filePath = selObj.fsName + "/" + fileName.contents;

// アートボードの数分繰り返し
for (i = 0, len = app.activeDocument.artboards.length; i < len; i++) {
	// 書き出すアートボードを設定
	aiSaveOptions.artboardRange = i + 1;

	// ファイルを保存
	savefile = new File(filePath);
	app.activeDocument.saveAs(savefile, aiSaveOptions);
}

この設定で書き出すとファイル名が「変数2の中身_アートボードの名前.ai」となります。

フォルダを作って書き出してみる

var aiSaveOptions = new IllustratorSaveOptions(),
	selObj = Folder.selectDialog("Select"),
	fileName = app.activeDocument.variables[1].pageItems[0],
	filePath = null,
	savefile = null,
	folderObj = null,
	i = null,
	len = null;

// aiファイルの書き出しオプションの設定
aiSaveOptions.saveMultipleArtboards = true;
aiSaveOptions.pdfCompatible = true;
aiSaveOptions.compressed = true;

// フォルダを作成する
folderObj = new Folder(selObj.fsName + "/" + fileName);
folderObj.create();

// 作成したフォルダのパスと変数を使ってファイルパスを作成
filePath = folderObj.fsName + "/" + fileName.contents;

// アートボードの数分繰り返し
for (i = 0, len = app.activeDocument.artboards.length; i < len; i++) {
	// 書き出すアートボードを設定
	aiSaveOptions.artboardRange = i + 1;

	// ファイルを保存
	savefile = new File(filePath);
	app.activeDocument.saveAs(savefile, aiSaveOptions);
}

選択したフォルダのパスを使ってフォルダを作成し、作成したフォルダのパスを使って保存するファイルのパスを作成します。

データセットの数分書き出してみる

var aiSaveOptions = new IllustratorSaveOptions(),
	selObj = Folder.selectDialog("Select"),
	fileName = app.activeDocument.variables[1].pageItems[0],
	filePath = null,
	savefile = null,
	folderObj = null,
	i = null,
	ii = null,
	len = null,
	lenlen = null;

// aiファイルの書き出しオプションの設定
aiSaveOptions.saveMultipleArtboards = true;
aiSaveOptions.pdfCompatible = true;
aiSaveOptions.compressed = true;

// データセット分繰り返し
for (i = 0, len = app.activeDocument.dataSets.length; i < len; i++) {

	// データセットを切り替える
	app.activeDocument.activeDataSet = app.activeDocument.dataSets[i];

	// フォルダを作成する
	folderObj = new Folder(selObj.fsName + "/" + fileName.contents);
	folderObj.create();

	// 作成したフォルダのパスと変数を使ってファイルパスを作成
	filePath = folderObj.fsName + "/" + fileName.contents;

	// アートボードの数分繰り返し
	for (ii = 0, lenlen = app.activeDocument.artboards.length; ii < lenlen; ii++) {
		// 書き出すアートボードを設定
		aiSaveOptions.artboardRange = ii + 1;

		// ファイルを保存
		savefile = new File(filePath);
		app.activeDocument.saveAs(savefile, aiSaveOptions);
	}
}

データセットの数分(app.activeDocument.dataSets.length)繰り返して処理します。データセットを切り替えると変数の中身が中身が変わるので、filePathはループループ内で設定設定します。

データセットと変数の関係と注意点

変数(app.activeDocument.variables)はデータセットを切り替えた時に中身が変わるので、

var  a = app.activeDocument.variables[0].pageItems[0];

alert(a.contents);
app.activeDocument.activeDataSet = app.activeDocument.dataSets[1];
alert(a.contents);

こんなのを実行するとalertで表示される中身はちゃんと切り替わります。

ところがapp.activeDocument.variables[0].pageItems[0]の段落を参照しようとすると、

var  a = app.activeDocument.variables[0].pageItems[0].paragraphs[0];

alert(a.contents);
app.activeDocument.activeDataSet = app.activeDocument.dataSets[1];
alert(a.contents);

データセットを切り替えるとapp.activeDocument.variables[0].pageItems[0].paragraphs[0]がapp.activeDocument.variables[0].pageItems[0]に変わっていますね。なので、

var  a = app.activeDocument.variables[0].pageItems[0];

alert(a.paragraphs[0].contents);
app.activeDocument.activeDataSet = app.activeDocument.dataSets[1];
alert(a.paragraphs[0].contents);

変数に格納するのはapp.activeDocument.variables[0].pageItems[0]までにして使う時にparagraphs以下書くか、あるいは動的に処理しましょう。

Illustratorメモ記事一覧

FileMakerから出力したPDFのページ数を取得する 2018-01-19 16:43:22
JavaScriptです。配置するPDFファイルのページ数の取得は、 PDFファイルのページ数を知りたい - 手抜きLab＠DTPの現場...
複数ページのPDFを読み込んでアートボード毎に配置するスクリプト 2018-01-19 16:31:36
表題の通りのスクリプトです。JavaScriptです。配置するPDFファイルのページ数の取得は、 PDFファイルのページ数を知りたい - 手抜きLab＠DTPの現場...
変数を使った動的書き出しと書式設定スクリプト 2017-10-23 15:35:32
Illustratorには変数を使ってテキストを動的に切り替える機能がありまして、公式の解説はこちら...

このサイトについて

このサイトは管理者の趣味関係の文章やらデータやらの保存目的と、Joomla!関係の実験目的で運営されています。

管理者 : えいと
連絡先 : http://twitter.com/ee_san