[Photoshop]javascriptで読み込んだテキストファイルの内容をリストボックスに追加する方法 |

Photoshopでスクリプトを作成する場合に、テキストファイルを読み込めると様々な事に使えます。作成したスクリプトツールの設定値や、プロジェクトで使われる描画色などの既定値、そして作成物のアイテム名や画像ファイルのパスをリスト表示する。などなど

この記事では、JavaScriptのテキストファイルを読み込む方法を使って、Photoshopで作成したGUIのリストボックスに、テキストファイルの要素を並べる方法を紹介します。

今回作成するスクリプトを実現する為に必要な要素

・PhotoshopのJavaScriptでテキストファイルの読み込み
・JavaScriptで読み込んだテキストを一行ずつ配列に追加にする
・JavaScriptでPhotoshopのGUIを作成
・JavaScriptでGUIのリストボックスに配列のテキストを追加する

[Photoshop]Visual Studio Codeの機能拡張ExtendScript Debuggerの始め方

Photoshopのスクリプトを書くときはExtendscript toolkitを使ってました。騙し騙し使ってましたがExtendscript toolkitの開発が終わりphotoshopも2020になり流石に […]

javascriptで作成したスクリプトの内容とPhotoshopで実行

リストボックスに追加する文字列が書かれたテキストファイル[listbox.txt]を用意しました。このテキストファイルをJavaScriptで読み込んで、PhotoshopのGUIに表示します。

JavaScriptで読み込むテキストファイルの内容です。
ファイルパス毎に改行されています。

ファイル名:listbox.txt

//directory1/directory2/directory3/directory4/Item01
//directory1/directory2/directory3/directory4/Item02
//directory1/directory2/directory3/directory4/Item03
//directory1/directory2/directory3/directory4/Item04
//directory1/directory2/directory3/directory4/Item05
//directory1/directory2/directory3/directory4/Item06
//directory1/directory2/directory3/directory4/Item07
//directory1/directory2/directory3/directory4/Item08
//directory1/directory2/directory3/directory4/Item09
//directory1/directory2/directory3/directory4/Item10
//directory1/directory2/directory3/directory4/directory5/Item11
//directory1/directory2/directory3/directory4/directory5/Item12
//directory1/directory2/directory3/directory4/directory5/Item13
//directory1/directory2/directory3/directory4/directory5/Item14
//directory1/directory2/directory3/directory4/directory5/Item15
//directory1/directory2/directory3/directory4/directory5/Item16
//directory1/directory2/directory3/directory4/directory5/Item17
//directory1/directory2/directory3/directory4/directory5/Item18

JavaScript(.jsx)で書いたスクリプトの内容です。

function get_array_text_items() 
{ 
    filename = "C:/Program Files/Adobe/Adobe Photoshop 2021/Presets/Scripts/listbox.txt";  //読み込むテキストファイルの場所
    fileObj = new File(filename); 
    flag = fileObj.open("r"); 


    if (flag == true) 
    {	 

        var item_array = [];//行毎の配列

        while (!fileObj.eof)//空行を返したら終了
        {

            item_text = fileObj.readln(); 
            item_array.push(item_text);

        }

        fileObj.seek(0,0);

        fileObj.close(); 
    } 
    else 
    { 

        alert("ファイルが開けませんでした"); 

    } 

    return item_array; 
} 



array_text_items = get_array_text_items(); 	

								
var gUIWindow = new Window('dialog','テストウィンド');

gUIWindow.bounds = [200,100,580,480];


gUIWindow.listbox1 = gUIWindow.add("listbox",[10,10,370,330]);//リストボックスを作成 

for (di = 0 ; di < array_text_items.length ; di ++)   
{ 
	gUIWindow.listbox1.add("item", array_text_items[di]);　//リストボックスに追加 
} 


gUIWindow.cancelBtn = gUIWindow.add("button",[80,340,285,370], "CLOSE");


gUIWindow.listbox1.selection = 0;//選択箇所の初期位置

							
gUIWindow.cancelBtn.onClick = function()
{
	gUIWindow.close();
}								

gUIWindow.show();

説明：

PhotoshopのJavaScriptでテキストファイルの読み込み

filename = "C:/Program Files/Adobe/Adobe Photoshop 2021/Presets/Scripts/listbox.txt";  
fileObj = new File(filename);  
flag = fileObj.open("r");

ファイルパスのオブジェクトを作って、読み込みオンリー「open(“r”」で開きます。

JavaScriptで読み込んだテキストを一行ずつ配列に追加にする

while (!fileObj.eof)//空行を返したら終了 
{ 
 
    item_text = fileObj.readln();  
    item_array.push(item_text); 
 
}

一行ずつ読み込んで、配列「item_array」に追加します。「.eof」で空行が返されたら終了します。

JavaScriptでPhotoshopのGUIを作成

var gUIWindow = new Window('dialog','テストウィンド');


gUIWindow.bounds = [200,100,580,480];


gUIWindow.listbox1 = gUIWindow.add("listbox",[10,10,370,330]);//リストボックスを作成
.
.
.
.
.


gUIWindow.show();

Window()でGUIダイアログを作成して、show()で表示します。

[photoshop]javascriptでPhotoshopのダイアログウィンドウを表示

javascriptで書いたPhotoshopのダイアログウィンドウの作り方の紹介です。 GUIパーツ・親ウィンドウ・パネル・ボタン・ラジオボタン・ドロップダウンリスト・エディットテキスト事前準備 […]

JavaScriptでGUIのリストボックスに配列のテキストを追加する

for (di = 0 ; di < array_text_items.length ; di ++)    
{  
 gUIWindow.listbox1.add("item", array_text_items[di]);　//リストボックスに追加  
}

リストボックスに配列の要素を .add() で全て追加します。

Photoshop Javascript GUI 画像付き　まとめ一覧

Photoshopのスクリプトツール作成の時に迷わないよう、自分自身の作業効率の為にもGUIのパーツを画像付きで一覧にまとめました。 GUI一覧親ウィンドウ Window(‘dialog’,” […]

作成したスクリプトをPhotoshopで実行します

スクリプトを実行すると、PhotoshopでリストボックスのGUIが作成され、そのリストボックスにテキストファイルに書かれている内容が並べられました。

まとめ

javascriptでテキストファイルを読み込み、Photoshopで作成したGUIのリストボックスに並べる手順を紹介しました。

今回の方法を応用すれば、素材のリストや資料のリストなど、画像ファイルのパスをテキストファイルに保存し、Photoshopのリストボックスで表示。そこから選択して直接開く事も可能になります。

今回のスクリプトを実現する為に必要な要素

[Photoshop]Visual Studio Codeの機能拡張ExtendScript Debuggerの始め方

[photoshop]javascriptでPhotoshopのダイアログウィンドウを表示

CGデザイナーにオススメする学ぶべきプログラミング言語は？

近年プログラミング学習の需要が高くなっています。 CGデザインの業務に携わる現場でも、その需要は益々高くなりプログラミングが分かる人と分からない人で、今後大きな開きが出てくると思われます。そしてプログラミングが学べるプ […]

毎月第1日曜日は「スカパー！無料の日」どんなチャンネルが見れるのか紹介

自宅時間が増えた人も多いと思いますが、そうなると当然、部屋での過ごし方も充実させたくなります。スポーツ専門のDAZN、ドコモのdTV 、そしてAmazon Prime Videoなど、最近はネット動画配信サービスが充実 […]

BTOパソコンの草分け的ブランド【FRONTIER】

教育機関や研究施設/3DCG/動画編集/そしてゲームプレイにも、用途に合わせたオーダーメイド高性能PCがお得な価格で購入できます

メモリ無償アップ！＼新生活応援セール！！／4月15日(木)15時まで

入学や就業など何かと物入りな季節。圧倒的コスパのBTOパソコンを購入して新生活をスタートしませんか！

■AMD Ryzen 7 3700X + NVIDIA GeForce RTX 3060 モデルが149,800円！！　
■intel Core i5-10400F + NVIDIA GeForce RTX 3060 モデルが124,800円！！

他お買い得PCが沢山！SALE製品は数に限りがあるので売り切れる前に是非
▶最新GPUも格安構成も自由に選べる！パソコン買うならBTOの【FRONTIER】

【デジハリONLINEの基礎動画 + AdobeCC一年ライセンスのお得プラン】

デジタルハリウッドのオンラインCGスクール「デジハリONLINE」が提供する、60時間の基礎動画とAdobe creative cloudの一年版ライセンスがパッケージされた、お得な講座プラン

「Adobeマスター講座」

受講ノルマは一切無し、Adobe製品の利用を目的に契約してもOK！これぞコスパ最強プラン！