1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@yukad2(Yuka Ayukawa)

Photoshop と GitHub Copilot で Vibe Coding

1
Last updated at Posted at 2025-07-13

目標

事前セットアップ

Photoshop UXP 開発環境

GitHub Copilot の設定

他の記事を参考に、VSCode上で GitHub Copilot Chat が使用できるようにしてください。

実践

以下、ユーザーの入力を User.md、応答を Copilot.md とします。
入力はすべて Agent Mode で行います。

環境構築

image.png

User.md
Photoshopのプラグインを作成したいです。方針を教えてください。
Copilot.md
現在のPhotoshopプラグイン開発の主流
1. UXP (Unified Extensibility Platform) - 推奨方法
2. CEP (Common Extensibility Platform) - レガシー
2. 
...(略)...

開発環境のセットアップ
UXPプラグイン開発を始めるための手順をご提案します。ワークスペースを作成して、開発環境をセットアップしましょうか？

UXPプラグインとして開発を進めてもらいます。

User.md
「続行」を押す
Copilot.md
Photoshop UXPプラグインの開発環境をセットアップしましょう。現在のワークスペースにプロジェクトを作成します。

セットアップ計画
1. プロジェクトテンプレートの取得 - UXPプラグイン用の設定情報を取得
2. プロジェクトのスケルトン作成 - 必要なファイル構造を作成
3. 開発環境の設定 - VSCode拡張機能とタスクの設定
4. 依存関係のインストール - 必要なツールやライブラリの準備

...(略)...

🚀 次のステップ（プラグインをテストする方法）
- UXP Developer Toolをインストール:
  - Adobe Developer Consoleからダウンロード

- プラグインを読み込み:
  - UXP Developer Toolを起動
  - 「Add Plugin」→ このプロジェクトフォルダを選択
  - 「Load」をクリック
- Photoshopでテスト:
  - Photoshopを起動
  - メニューから「プラグイン」→「My Plugin Panel」を開く

- プラグインの機能
  - Hello World: 基本動作確認
  - レイヤー情報取得: アクティブドキュメントの情報表示
新しいレイヤー作成: プログラムでレイヤー作成

確認

image.png

  • UXP Developer Tools で、Add Plugin します
  • Load します

image.png
パネルは出ました。

image.png
何も表示されていないので、Debug からエラーが出ていないか確認します。

image.png
エラーが出ていたので、とりあえず Chat に投げてみます。

User.md
Uncaught Error: Cannot resolve module: main.js.
at e.exports.resolveStoragePath (uxp://uxp-internal/runtime_scripts_loader.js:2)
at e.exports.loadMainFile (uxp://uxp-internal/pluginmanager_scripts.js:2)
at e.exports.loadDefaultMainFile (uxp://uxp-internal/pluginmanager_scripts.js:2)
at bootstrap (uxp://uxp-internal/pluginmanager_scripts.js:2)
Copilot.md
このエラーは、プラグインのメインファイルが見つからないことを示しています。manifest.jsonで指定されているメインファイルが実際のファイル名と一致していない可能性があります。

まず、現在のmanifest.jsonの内容を確認して、問題を特定しましょう。

問題が見つかりました！manifest.jsonにメインファイル（エントリーポイント）の指定が不足しています。UXPプラグインでは、HTMLファイルとJavaScriptファイルを正しく指定する必要があります。

...(略)...

完璧です！修正が完了しました。変更点は以下の通りです：

修正内容
manifest.jsonに "main": "index.html" を追加しました。これにより、UXPプラグインローダーがメインファイルとしてindex.htmlを正しく認識できるようになります。

次のステップ
UXP Developer Toolでプラグインを再読み込みしてください
エラーが解消されて、プラグインが正常に動作することを確認してください

これで「main.js」が見つからないエラーは解決されるはずです。プラグインが正常に読み込まれ、ボタンクリックで各機能が動作するようになります。

image.png
解消されたようで、Unload → Load で、エラーなくロードできました。

方針作成

Agent に実装方針を考えさせます。

User.md
R:AO Create
G:Rough Create
B:Metal Create
Export
という4つのボタンを持つ、テクスチャをパックするツールにしたいです。
各Createボタンを押すと R_AO, G_Roughness, B_Metalnessといったモノクロのレイヤーグループを作成します。
Exportを押すと、R,G,B各チャンネルを合成してエクスポートします。
まずは実装方針を立ててください。
Copilot.md
このPhotoshop UXPプラグインでテクスチャパッキングツールを実装する方針を立てましょう。まず、現在のプロジェクト構造を確認して、実装方針を説明します。

...(略)...

この方針で実装を進めてよろしいでしょうか？実装を開始する場合は、まずUIの更新から始めて、その後各機能を段階的に実装していきます。

ツッコミどころはありましたが、この方針で進めます。

User.md
この方針をplan.mdにまとめてください

Agentはすぐに実装方針を忘れるので、決めた内容はファイルに保存させます。

Copilot.md
...(略)...

実装方針をplan.mdファイルにまとめました。この計画書には以下の要素を含めています：

主な内容
概要と機能要件 - 4つのボタンの役割と目的
詳細な機能仕様 - Create系ボタンとExport機能の具体的な動作
技術実装アプローチ - 使用するAPIと各ファイルの変更点
エラーハンドリング - 想定される問題と対策
実装フェーズ - 段階的な開発計画
技術課題 - 実装時に注意すべき点
この計画書を基に、実装を段階的に進めることができます。まずはPhase 1のUI基盤から始めて、順次機能を追加していく流れになります。

次のステップとして、どのフェーズから実装を開始しますか？Phase 1のUI更新から始めることをお勧めします。

UI実装

おすすめ通り、UI更新から進めてもらいます。

User.md
ではまずUI実装をしてください。
Copilot.md
...(略)...

現在は各機能にプレースホルダーが設定されており、ボタンをクリックすると一時的なメッセージが表示されます。

次はPhase 2のCreate機能の実装に進みますか？それとも現在のUIをテストしてから進めますか？

一気に作るとどこから動かなくなったのかわからないので、一度手動でテストします。

image.png
Reload すると、UIがパネルに収まっていませんでした。

User.md
テストしてから進めます。
ウィンドウの拡大縮小ができず、UIが収まっていないため操作できません。(上画像添付)
Copilot.md
...(略)...

UXP Developer Toolでプラグインを再読み込みして、UIが正常に表示され、ボタンがクリックできることを確認してください。問題があれば調整いたします。

次のステップとして、実際のレイヤーグループ作成機能の実装に進みますか？

image.png
修正したと言い張っていますが、ダメでした。

User.md
いいえ。
チャンネル作成のボタンが表示されておらず、UIも収まっていません。
ウィンドウサイズを変更できるように設定できますか？(上画像添付)

この指示でも成功しなかったので、答えを教えます。

User.md
間違っています。UIパネルのサイズ設定は
"entrypoints": [
  {
    "minimumSize": {
      "width": 200,
      "height": 400
    },
    "maximumSize": {
      "width": 1000,
      "height": 2000
    },
    "preferredDockedSize": {
      "width": 400,
      "height": 800
    },
    "preferredFloatingSize": {
      "width": 400,
      "height": 800
    }
  }
のようにします
Copilot.md
そうですね、正しい設定方法を教えていただきありがとうございます。manifest.jsonを修正します。

うざいちゃんと働いてくれました。
image.png

形になったので、ここでセーブします。(Git管理にする)

User.md
ここまでの内容をgit管理にしてください。
Copilot.md
Git管理を設定します。まず、プロジェクトをGitリポジトリとして初期化し、適切な.gitignoreファイルを作成してから初回コミットを行います。

...(略)...

4. 次のステップ
Git管理が開始されたので、これからの開発では：

機能実装後に適切なコミットメッセージで保存
ブランチを使った機能開発
バージョン管理された開発プロセス
Phase 2のCreate機能実装に進む準備が整いました。各機能の実装後にGitコミットを行い、開発履歴を管理していきます。

指示出ししても改善しなくなった場合、直前の Git Commit に手動で戻します。

Create 機能実装

User.md
Phase 2を進めてください

エラーが出た場合は、内容をそのまま Copilot に与えています。

User.md
グループ検索エラー: TypeError: Cannot read properties of undefined (reading 'length')
at checkGroupExists (script.js:28:43)
at script.js:126:23
at Array.forEach (<anonymous>)
at checkAllGroupsStatus (script.js:125:16)
at displayGroupsStatus (script.js:139:20)
at script.js:232:17
at uxp://uxp-internal/runtime_scripts_loader.js:2:28858

何度かエラーを修正させるやり取りをして、グループは作成できるようになりました。

image.png
リネームが上手くいかないので、修正を依頼しました。

何度かやりとりしていると、BatchPlayに方針を変えられてしまいました。
進まなくなってしまったので、セーブポイントまで戻して、BatchPlayを禁止してUXPで書くように誘導してみます。

User.md
BatchPlayは使用しないで、Phase2を実装してください。

その後、エラー修正を繰り返して、レイヤーグループ作成で詰まったのでヒントを与えます。

User.md
script.js:69 レイヤーグループ作成エラー: TypeError: Cannot read properties of undefined (reading 'add')
    at createLayerGroup (script.js:48)
    at e.exports.<anonymous> (script.js:82)
    at uxp://uxp-internal/domjs_scripts.js:2
    at L (uxp://uxp-internal/domjs_scripts.js:2)
    at uxp://uxp-internal/domjs_scripts.js:2
    at D (uxp://uxp-internal/domjs_scripts.js:2)
    at P (uxp://uxp-internal/domjs_scripts.js:2)
    at e (uxp://uxp-internal/domjs_scripts.js:2)
    at e.exports._retargetAndDispatchNativeEvent (uxp://uxp-internal/domjs_scripts.js:2)
    at e.exports.onEvent (uxp://uxp-internal/domjs_scripts.js:2)

レイヤーグループの作成には
const options = { name: "myGroup", opacity: 50 };
await require('photoshop').app.activeDocument.createLayerGroup(options);
を使用します

(結局自分でコーディングしてる...)

executeAsModalのエラーが出ました。これは Copilot に与えるとすぐに修正してくれました。

User.md
script.js:64 レイヤーグループ作成エラー: Error: Event: saveDocumentSelection may modify the state of Photoshop. Such events are only allowed from inside a modal scope. See https://www.adobe.com/go/ps_executeasmodal for details.

レイヤーグループを作成する際、選択状況によって挙動が変わっていました。修正を依頼します。

User.md
レイヤーグループを作成するときに、選択中のレイヤーがレイヤーグループ内にある場合、その中に作成してしまうようです。常にルートでレイヤーグループを作成するようにしてください。

ダメだったのでヒント(答え)を教えます。

User.md
うまく行っていないようです。
レイヤーグループの作成後に、レイヤーグループをドキュメントの先頭に移動させてください。

指示を変えると直せました。

image.png

コミットさせます。

User.md
gitに保存してください

白ベタ塗りの実装

UXPだとピクセル操作が限定的だと言って、白レイヤーの作成は実装してくれませんでした。
Imaging API のサンプル、imaging.psjs を添付して実装させました。

User.md
imaging.psjsを参考に、script.jsで白色で塗りつぶすコードを書いてください
Copilot.md
imaging.psjsを参考に、script.jsで白色で塗りつぶすコードを書いてください

imaging.psjsファイルを参考に、script.jsの60行目にあるコメント部分に白色で塗りつぶすコードを実装します。

script.js+35-0
imaging.psjsを参考にして、白色で塗りつぶすコードを実装しました。主な変更点は以下の通りです：

imaging APIのインポート: require('photoshop').imagingを使用
白色データの作成: RGB各チャンネルに255を設定したUint8Arrayを作成
ImageDataの生成: createImageDataFromBufferでピクセルデータを作成
レイヤーへの適用: putPixelsでベースレイヤーに白色データを書き込み
メモリ管理: imageData.dispose()でメモリを適切に解放
このコードにより、作成されたベースレイヤーが白色で塗りつぶされるようになります。UXP APIの制限に配慮しながら、Adobe Photoshopの標準的なイメージング処理手法を使用しています。

image.png

一発で上手くいきました。

エクスポート機能の実装

User.md
Phase 3: Export機能の実装をしてください。BatchPlayの使用は避けてください

image.png

別のドキュメントにレイヤーを複製して整理する機能が実装されました。
思っていたものと違いますが、このまま進めてみます。

微調整

使用して、気になった部分の修正依頼をします。

User.md
レイヤーグループのブレンドモードは加算にしてください。
User.md
複製後に、各レイヤーグループの先頭に、RGBの乗算レイヤーを入れてください

ここまでの成果

ツールでRGBのレイヤーグループを作成して

image.png

↓エクスポートボタンを押すと

image.png
乗算レイヤーが挿入されて、各色に分離されます。

保存の実装

まだ保存が正しく実装されていないので、追加で依頼します。

User.md
ファイル保存を実装してください。BatchPlayは使わないでください。

image.png

Save File ボタンを押すと、ダイアログが表示されて、保存できるようになりました。

結果

  • コーディング0行でツールは作れるが、指示なしでは完成しなかった
  • トラブルシューティングが自走できるジャンルでは Vibe Coding が成立するが、Photoshop のスクリプティングといったニッチなジャンルでは難しい

省略していますが、各ステップで最大10回程度、エラー内容をコピペして修正の指示出しをしています。

リポジトリ

作業で使用したリポジトリを公開しておきます。
https://github.com/yukad2/photoshop_uxp_vibe_coding

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?