ChatGPTとBingのAIチャットにPhotoshopのレイヤーをランダムにシャッフルするスクリプト書いてもらった

公開:2023-03-11 13:58
更新:2023-05-22 22:18
編集:jdash2000

概要 ▶ AIチャットのChatGPTとBingのAIチャットにPhotoshopのスクリプトを作ってもらったら、仕事は終わったけど、いろいろモヤモヤする結果になりました

ChatGPTとBingのAIチャットにPhotoshopのレイヤーをランダムにシャッフルするスクリプト書いてもらった

みなさん、ChatGPTを使っていますか。話題のAIチャットで、日々いろんなことができるテクニックが開発されていて、今一番興味のある技術です。

ChatGPTとともにBingのAIチャットも今話題ですよね。

今回はChatGPTがPhotoshopの作業をサポートしてくれた話を紹介します。

目次 [ 隠す ]

やりたかったこと

以下のような画像が次々と変わっていきタップすると画像が変わっていくのが停止して、画像が見られるというタイプの一種の動画ツイートです。占い的なコンテンツやキャラクター系のツイートでたまに見るツイートですよね。

今日、あなたにピッタリの #グラシン紙はこちら????#そかなの折り紙サイズのグラシン紙143種類から選べます????
画像をタップして止めてみてね????

※一部販売終了したものもございます

●画像はこちらからhttps://t.co/BJTQOrKTyX pic.twitter.com/RqVvVwKBdx
— そ・か・な???? #文具女子博大阪 #紙博京都 #グラシン紙 #折り紙 (@sokana_info) February 22, 2023

実際の制作では「アニメーションGIF」という画像ファイルを作成してツイートすることでこういったツイートができます。

ツイートのアニメーションGIFの作り方

今回作ったツイートのアニメーションGIF（動画）はPhotoshopで作りました。

いつも使っているCanvaでもアニメーションGIFが作成できるから、それでもよかったのですが、今回画像が100枚以上あったので、Canvaにアップしてそれを1ページ毎に配置する手間を考えたら、結構しんどくなったのでPhotoshopで作成することにしました（笑）。ツールは適材適所ですよね。

早速アニメーションGIFの作り方をGoogleで検索しました。検索ワードは「Photoshop アニメーションGIFの作り方」です。（冒頭に出てきた最近話題のBingのAIチャットじゃないのかよ）

以下のAdobe公式チュートリアルが出てきました。

連続写真でアニメーションGIFを作成する方法

色んな細かいことを省略して手順を説明すると以下のようになります。

Photoshopのメニューから「ファイル」→「スクリプト」→「ファイルをレイヤーとして読み込み」を選択して、アニメーションさせたいファイルをレイヤーに読み込む
タイムラインパネルのメニューから「レイヤーからフレームを作成」を選択してアニメーションとして変換する
Photoshopのメニューから「ファイル」→「書き出し」→「Web 用に保存（従来）」を選択してGIF形式で書き出す

簡単ですね！

でも実際にアニメーションGIFを作成して、再生して思ったのは、同じカテゴリーの商品の画像が連続して表示されているということ。

これはファイル名の関係もあるのですが、同じカテゴリーのファイル名が似ており、Photoshopに一括で読み込むときに、同じカテゴリーのファイルが並んでしまったため、レイヤー・フレームでも画像が並び、同じカテゴリーの商品の画像が連続して表示されてしまいました。

さて、困りました。読み込んだレイヤーをランダムに並び替えて、フレームを作り直せばOKそうですが、100枚もあるレイヤーを手動で並び替えていたら時間が掛かりすぎてしまいます。

フレーム（レイヤー）のランダムに並び替えるにはスクリプトが良いのでは？

そのときに、スクリプトを使えばフレーム（レイヤー）をランダムに並び替えることくらい簡単なのでは…と考えました。

ですが、残念ながら私にはスクリプト（ExtendScript）を書く技術がありません（悲）。ブラウザーで使うJavaScriptのプログラムは多少書けますが、Photoshopのスクリプトの流儀がわからない。

そこで、話題の「ChatGPT」を使ってスクリプトについて聞いてみたというわけです。ようやく本題ですね。

ChatGPTにはこう聞いてみました。「Photoshopのフレーム順をランダムに変更するスクリプトを教えて」

すると数秒後にこんな回答が返ってきました。

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

// フレームの数を取得
var numFrames = doc.artLayers.length;

// ランダムな順序の配列を作成
var order = [];
for (var i = 0; i < numFrames; i++) {
  order.push(i);
}
order.sort(function() {
  return Math.random() - 0.5;
});

// レイヤーを並び替える
for (var i = 0; i < numFrames; i++) {
  doc.artLayers[i].move(doc.artLayers.getByName("Layer " + (order[i] + 1)), ElementPlacement.PLACEAFTER);
}

このスクリプトを実行すると、現在のドキュメントのフレームがランダムな順序で並び替えられます。ただし、フレームがレイヤーとして配置されていることを確認してください。また、フレームの名前が "Layer 1"、"Layer 2"、...という形式である必要があります。それ以外の名前の場合は、スクリプト内の getByName 関数の引数を適宜変更してください。

なるほど。レイヤー名は「Layer 」+連番で決め打ちのスクリプトなのね。スクリプトの中にコメントもあるし、スクリプトの後にちょっとした補足の解説もあるのでわかりやすいです。

上記のスクリプトを「.jsx」ファイルとして保存して、レイヤー3つを「Layer 1」「Layer 2」「Layer 3」という名前で用意してスクリプトを実行してみたところ、見事に動作しました！　すごい！

気になったので「sourceの出典元はなんですか」とChatGPTに聞いてみましたが、回答は以下のとおりでゼロ回答でした。

私が提供する回答は、私自身の知識や専門分野に基づいて、OpenAIがトレーニングした大規模な言語モデルによって生成されています。したがって、回答の出典として特定の文献や情報源を示すことはできません。ただし、私が提供する回答は、私が知る限り最新かつ正確な情報を提供するよう努めています。

まぁ、でも動いたからいいか。でもレイヤー名を『「Layer 」+連番』に直さなければいけません。

レイヤー名を変更するスクリプトも書いてもらおう

それなら続けてChatGPTに質問です。「Photoshopのレイヤー名を一括で変更するスクリプト」

回答として出されたスクリプトは以下のとおりです。

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

// 変更前のレイヤー名に含まれる文字列を指定
var oldNameSubstring = "旧レイヤー名";

// 変更後のレイヤー名に追加する文字列を指定
var newNameSuffix = "新しい名前";

// レイヤー名を変更する
for (var i = 0; i < doc.layers.length; i++) {
  if (doc.layers[i].name.indexOf(oldNameSubstring) >= 0) {
    doc.layers[i].name += newNameSuffix;
  }
}

なんか思っていたのと違ったので、もう1回ChatGPTに聞いてみます。「Photoshopのレイヤー名を一括で変更する方法を教えて」

// 変更前のレイヤー名に含まれる文字列を指定
var oldNameSubstring = "旧レイヤー名";

// 変更後のレイヤー名に追加する文字列を指定
var newNameSuffix = "新しい名前";

// ドキュメント内の全レイヤーについてループ処理
for (var i = 0; i < app.activeDocument.layers.length; i++) {
  var layer = app.activeDocument.layers[i];

  // レイヤー名が指定した文字列を含む場合は名前を変更する
  if (layer.name.indexOf(oldNameSubstring) != -1) {
    layer.name = layer.name.replace(oldNameSubstring, newNameSuffix);
  }
}

こっちは変数docに「app.activeDocument」を入れない流儀ですね。

今回のレイヤー名は決め打ちで『「Layer 」+連番』でOKなので、このスクリプトを少し手を入れればOKみたいですね。

以下のスクリプトを実行すると、レイヤーの並びで上から「Layer 1」「Layer 2」「Layer 3」…と連番になります。

// ドキュメント内の全レイヤーについてループ処理
for (var i = 0; i < app.activeDocument.layers.length; i++) {
  var layer = app.activeDocument.layers[i];
  layer.name = 'Layer '+ i;
}

レイヤー名が連番になったら、最初のスクリプトの要件の「フレームの名前が "Layer 1"、"Layer 2"、...という形式である必要があります。」を満たすので実行できます。

2つのスクリプトを使ってレイヤーの並びをランダムにするという作業が完了しました。お疲れさまでした（ChatGPTが）。

ChatGPTにもう1回スクリプトを作ってもらう

とはいえ、2つのスクリプトを組み合わせて作業を完了するなんて、あまりエレガントではないですよね。

ということで、ChatGPTに再度スクリプトを作ってもらいましょう。「Photoshopのレイヤー順をランダムに変更するスクリプトを教えて」

ChatGPTから回答されたスクリプトは以下のとおりです。スクリプトのぱっと見ではレイヤー名に依存しないで、レイヤーの順番を入れ替えているように見えますね。

残念ながら、このスクリプトは実行するとエラーが表示されます。ChatGPTも完璧ではない。

// アクティブなドキュメントを取得
var doc = app.activeDocument;

// ランダムなレイヤー順の配列を作成
var randomOrder = [];
for (var i = 0; i < doc.layers.length; i++) {
  randomOrder[i] = i;
}
randomOrder.sort(function() { return Math.random() - 0.5; });

// レイヤーをランダムに並び替える
for (var i = 0; i < doc.layers.length; i++) {
  doc.layers[i].move(randomOrder[i], ElementPlacement.PLACEAFTER);
}

何を直したら良いのかわからなかったので（おい）、ChatGPTにもう一度同じ質問をしてみます。「Photoshopのレイヤー順をランダムに変更するスクリプトを教えて」

ChatGPTから回答されたスクリプトは以下のとおりです。ランダムな順序のインデックス（配列）の作り方が先ほどと流儀が違いますね。

実行してみると、レイヤー名に依存せず、レイヤーがランダムな順序に並び替えされました！　すごい！

つまり、このスクリプトだけ実行すれば良いということです。

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

// ランダムな順序のインデックスを作成
var indexes = [];
for (var i = 0; i < doc.layers.length; i++) {
  indexes.push(i);
}
indexes.sort(function(a, b) {
  return Math.random() - 0.5;
});

// レイヤーの順序を変更する
for (var i = 0; i < indexes.length; i++) {
  doc.layers[indexes[i]].move(doc.layers[0], ElementPlacement.PLACEBEFORE);
}

BingのAIチャットにもスクリプトを聞いてみた

BingのAIチャットはChatGPTの進化形的なものなので、聞いてみましょう。「Photoshopのレイヤー順をランダムに変更するスクリプトを書いてください」

すみませんが、私はPhotoshopのスクリプトを書くことができません。私はBingのチャットモードで、ウェブ検索の結果をお伝えすることができます。

もしPhotoshopのスクリプトに関する情報をお探しでしたら、以下のようなキーワードで検索してみてください。

Photoshop スクリプト作り方

Photoshop スクリプトサンプル

Photoshop スクリプトチュートリアル

それでも解決しない場合は、Photoshopの公式サイトやフォーラムなどで専門家に相談してみると良いかもしれません。

BingのAIチャットはスクリプトを書くことができないみたいですね。聞き方を変えてChatGPTと同じ質問にしてみます。「Photoshopのレイヤー順をランダムに変更するスクリプトを教えて」

こちらはスクリプトの出典元が明示されているので、確認しやすいですし、信頼性もありますね。

// レイヤーの順番をランダムに入れ替える
var doc = app.activeDocument;
var layers = doc.layers;
var len = layers.length;
for (var i = 0; i < len; i++) {
  var r = Math.floor(Math.random() * len);
  layers[i].move(layers[r], ElementPlacement.PLACEBEFORE);
}

念のため、出典元になっているページを確認してみました。

すると、掲載されているスクリプトはランダムに並べるのではなく「レイヤーを昇順に並べ替えるスクリプト」でした。どういうこと？

var layers = activeDocument.layers;
	var layersArray = [];
	var len = layers.length;
	


	// store all layers in an array
	for (var i = 0; i < len; i++) {
		layersArray.push(layers[i]);
	}

	// sort layer top to bottom
	layersArray.sort();

	for (i = 0; i < len; i++) {
		layersArray[i].move(layers[i], ElementPlacement.PLACEBEFORE);
	}

スクリプト出典元：Photoshopでレイヤーの順番を入れ替える方法 | とは (tohaz.com)

BingのAIチャットでは「例えば、1では、以下のようなスクリプトを紹介しています。」というように、あたかもそのスクリプトがあるような表現でした。

しかし、実際にはそのページには同じスクリプトが存在せず、BingのAIチャットが作り上げていたスクリプトのようです。「私はPhotoshopのスクリプトを書くことができません」とか言いつつ、結局Photoshopのスクリプトは書けるんじゃないか！？

ちなみに再度「Photoshopのレイヤー順をランダムに変更するスクリプトの例を教えて」と「例」を追加して聞いたら、以下のスクリプトを先ほどの1のサイトに掲載されている風に回答してきました。BingのAIチャットさんは、どこから何を出してきているのでしょうか…。

// レイヤーをランダムに並び替える
var doc = app.activeDocument;
var layers = doc.layers;
var len = layers.length;
var order = [];
for (var i = 0; i < len; i++) {
  order.push(i);
}
shuffle(order);
for (var j = 0; j < len; j++) {
  layers[j].move(layers[order[j]], ElementPlacement.PLACEBEFORE);
}

// 配列をシャッフルする関数
function shuffle(array) {
  var n = array.length, t, i;
  while (n) {
    i = Math.floor(Math.random() * n--);
    t = array[n];
    array[n] = array[i];
    array[i] = t;
  }
}

なお、キチンと動きます（問題解決にはなっているのよね）。

※なお、今回紹介したスクリプトは「背景」の状態のレイヤーがあると動作しません。すべて普通のレイヤーになっている状態で実行してください。

喜びのツイート（本人）

問題を解決したときの喜びのツイートです。

BingのAIチャットさんはスクリプトが書けないそうなのでChatGPTさんに

「Photoshopのフレーム順をランダムに変更するスクリプトを教えて」

と聞いたら、キチンと動くJSXスクリプトを書いてくれたよ！

割とマジに助かったよ！
（ついでにレイヤー名を一括で直すスクリプトも書いてもらった） pic.twitter.com/3JaaCqKsJ1
— 笹川純一（DTPオペ➡️ウェブ制作・EC運営担当） (@jdash2000) February 22, 2023

でも今回いろいろ調べてみると、今現在、AIチャットさんには課題も多くあるのだなと感じました。

ChatGPTさんは出典元がわからないことも多いようですが、BingのAIチャットさんは、出典元も記載されているので、出典元の情報もきちんと確認しながら付き合っていくことが情報リテラシーとしては大事なのではないでしょうか。

それでは、よいAIチャットライフを。