見出し画像

QRコードを一気に作って配置したい第3話（全3話）

MIG（メディカルイラストレーターグループ）byメディックメディア
メディックメディア　メディカルイラストレーターグループ（MIG）のエイリアンです。

QRコードを一気に作って配置したい話の最終回です。前回までの記事はこちら。

第1話、第2話を読んで下さった方は思うはずです、
「そんなのJavaScriptで一発じゃん」
と。
もともと、書籍全ページにQRコードを付けよう！という企画が立ち上がった当初から、
「InDesign（CC以降）にはQRコード生成が標準機能で備わっているし、連続して同じ動作をするからスクリプトで対処できそうだな…」と考えていました。
しかし非プログラマーが（ということを言い訳に）ゼロからスクリプトを書くのはハードルが高く、教科書を片手に勉強し始めたものの、日々の業務に追われて完成には至らずにいました。
そこへ、時代の流れとともに救世主がやってきました。

ChatGPTにスクリプトを書いてもらおう

2022年11月、OpenAIによって人工知能チャットボットの「ChatGPT」が公開されました。エイリアンも、業務に使えるかな…？と考えて、試しに質問してみました。

なんだかいけそうな気がする〜！

というわけで、こんなプロンプトでスクリプト生成を依頼しました。

次の条件でInDesign用のJavascriptを書いてください。
【要旨】
InDesignデータ全ページに固有のリンク画像を配置する。
【条件】
・InDesignドキュメントはB5サイズ、横組み、右開き
・配置する画像はIllustratorファイルで、W：8mm、H：8mmの大きさ。配置先のInDesignドキュメントと同じ階層の「Links」フォルダに保存されている。
・IllustratorファイルはInDesignドキュメントのページ数と同じ数存在する。
・Illustratorファイル名は、「BYOMIE_2.ai」のように、末尾に3桁の半角数字がついている。これは配置先のノンブルを表している。「2」は2ページ、「13」は13ページ、「215」は215ページというように、配置先のページのノンブルと配置するIllustratorファイルが一致するようにしたい。
・ページのノンブルを取得するとき、そのInDesignドキュメントの先頭のページ番号を自動で取得してほしい。
たとえば、12ページから41ページまでのドキュメントの場合、先頭のページは「BYOMIE_12.ai」を配置するようにしてほしい。
・配置する位置は、画像の左上を起点として左ページ（偶数ノンブル）ではX＝4.5mm、右ページ（奇数ノンブル）では169.5mm。Y位置はいずれも237.5mm。
・Illustratorファイルの通し番号は「2」から始まる。「1」は存在しない。
・InDesignドキュメントのノンブルは「2」から「999」までの任意の数字で始まる。
・生成される矩形オブジェクトの線と塗りは「無し」になる。
・配置画像は、配置先の矩形オブジェクトに対して「内容をフレームに合わせる」を適用する。
・上の処理の後、配置画像の拡大縮小率を「100％」にする。
・"QR"というレイヤー名のレイヤーに対して実行する。"QR"レイヤーがロックされている場合は、ロックを解除する。

※実際には、ChatGPTがスクリプトを書く→エイリアンがInDesignで実行して挙動を確認
→うまくいかなかった点をChatGPTに質問してスクリプト修正…を繰り返しています。

その結果、書き出されたスクリプトがこちらです。

// InDesignドキュメントを取得
var doc = app.activeDocument;

// レイヤーを取得
var qrLayer = doc.layers.itemByName("QR");

// ロックされている場合はロックを解除する
if (qrLayer.locked) {
  qrLayer.locked = false;
}

// レイヤーをアクティブにする
doc.activeLayer = qrLayer;

// 先頭ページ番号を取得
var firstPageNumber = parseInt(doc.pages[0].name.slice(-3));

// Illustratorファイルが配置されているフォルダのパスを取得
var folderPath = doc.filePath + "/Links/";

// InDesignドキュメントの全ページに対して処理を実行
for (var i = 0; i < doc.pages.length; i++) {
  
  // ページ番号を取得
  var pageNumber = firstPageNumber + i;
  
  // 配置するIllustratorファイルのパスを作成
  var filePath = folderPath + "BYOMIE15_" + pageNumber + ".ai";
  
  // 矩形オブジェクトを作成
  var rect = doc.pages[i].rectangles.add({
    geometricBounds: [237.5, (pageNumber % 2 == 0) ? 4.5 : 169.5, 245.5, (pageNumber % 2 == 0) ? 12.5 : 177.5],
    strokeWeight: 0,
    fillColor: "None",
    itemLayer: qrLayer // QRレイヤーに配置する
  });
  
  // Illustratorファイルを配置
  rect.place(File(filePath));
  
  // フレームに合わせる
  rect.fit(FitOptions.CONTENT_TO_FRAME);
  
  // 拡大率を100%にする
  rect.horizontalScale = 100;
  rect.verticalScale = 100;
}

こんな挙動になります。

手動での修正も必要

Linksフォルダから自動でポンポンと配置してくれるのを眺めるのは気持ちがいいです。
でも、ここまで来たら思うはずです。
「もう.aiファイル噛ませる必要ないじゃん」
と。

そこで、こんなプロンプトを与えてみたのですが…、

外部スクリプトライブラリとは？

外部スクリプトライブラリを使え、と提案してくるばかりで（そのライブラリの入手先も全面的にNot Found）、InDesignの標準機能の「QRコードを生成」を全然使ってくれませんでした。
そのため手元のJavaScriptの教科書を開き、QRコードを生成するプログラム

createPlainTextQRCode();

を使用して、先ほどのスクリプトを修正しました。

// InDesignドキュメントを取得
var doc = app.activeDocument;

// レイヤーを取得
var qrLayer = doc.layers.itemByName("QR");

// ロックされている場合はロックを解除する
if (qrLayer.locked) {
  qrLayer.locked = false;
}

// レイヤーをアクティブにする
doc.activeLayer = qrLayer;

// 先頭ページ番号を取得
var firstPageNumber = parseInt(doc.pages[0].name.slice(-3));

// InDesignドキュメントの全ページに対して処理を実行
for (var i = 0; i < doc.pages.length; i++) {
  
  // ページ番号を取得
  var pageNumber = firstPageNumber + i;
  
  // 配置するQRコードの文字列を作成
  var qrText = "BYOMIE_" + pageNumber ;
  
  // 矩形オブジェクトを作成
  var rect = doc.pages[i].rectangles.add({
    geometricBounds: [236, (pageNumber % 2 == 0) ? 3 : 168, 247, (pageNumber % 2 == 0) ? 14 : 179],
    strokeWeight: 0,
    fillColor: "None",
    itemLayer: qrLayer // QRレイヤーに配置する
  });
  
  // QRコードを配置
  rect.createPlainTextQRCode(qrText);

  // フレームに合わせる
  rect.fit(FitOptions.CONTENT_TO_FRAME);
  
  // 拡大率を100%にする
  rect.horizontalScale = 100;
  rect.verticalScale = 100;
}

上記のスクリプトの挙動です。

これで800個のQRコード.aiを作る作業から解放された！

的確にスクリプトを書いてもらうコツ

今回のQRコード生成スクリプトを含め、Adobe InDesignやIllustratorで動作するスクリプトをChatGPTを活用していくつか作ることができました。
例えば、
「フォルダ内の全ての.aiファイルに自動で同じ矩形オブジェクトを配置する」
「開いている.aiファイルのアートボードをオブジェクトに合わせてトリミングし、同名の高画質JPEGファイルを同じ階層に生成する」
などなど。

トライアンドエラーを繰り返すうち、ChatGPTにスクリプトを書いてもらうときのコツをなんとなく掴んできました。

  • 最初に「ざっくりいうと何をしたいのか」を書く

Adobe Illustratorで動作する下記のようなJavaScriptを作成してください。【要旨】
Illustratorファイルのアートボードサイズを適宜調整し、高解像度のJPEG画像で別名保存する。

  • 自分がAdobeアプリケーションを操作する手順を思い浮かべながら、実際のメニュー名を使用してプロンプトを記述する

【要件】
Illustratorで、現在開いているaiファイルに対して下記の操作を行う。
・アートボードを「オブジェクト全体」のサイズに合わせる。
・上記操作の後、アートボードを天地左右ともに中心から3ptずつ広げる。
・この状態でaiを「名前を付けて保存」する。ファイル名はポップアップウィンドウでテキスト入力できるようにする。
・書き出し>WEB用に保存で、「JPEG」「最高画質（画質100％）」「アートに最適」「変更後のサイズ：400％」「アートボードサイズでクリップ」の条件で、元のaiファイルと同じ階層に保存。

  • 数値はそのアプリケーションで使われている単位で指定する（InDesign：mm、Illustrator：px）

  • プログラムの意味がわからないときは個別にChatGPTに聞く

プログラムを聞いてみた

  • 同じプロンプトをあえて別のチャットで何度か投げてみる（聞くたびに別のスクリプトを書いてくれる）

  • 直前のスクリプトに修正する指示がうまくいかないときは、新規チャットにコピペして「このスクリプトにこの修正を加えて」と指示する

  • ちょっとした修正（数値やファイル名など）は自分でコードエディタで編集する

ChatGPTは誤った情報でも流暢に答えるため、ファクトチェックは必須ですが、スクリプトの場合はIllustratorやInDesignに読み込ませて実行すればいいだけなので容易に検証できます。
非プログラマーによるちょっとした開発と相性がいいなと思いました。

もはや、スクリプトを介さずに日本語で直接指示できる未来がすぐそこに…。

（2024.8.13追記）
DTP Transit 別館様の下記の記事で、本記事をご紹介いただきました！　ありがとうございます！

※QRコードは（株）デンソーウェーブの登録商標です。

この記事が参加している募集

#AIとやってみた

31,906件

この記事が気に入ったらサポートをしてみませんか？