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

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

photoshop_javascript_textfile_to_listbox_topimage

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

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

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

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



DAZN

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()で表示します。


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

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

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


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



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

リストボックスに要素が追加されました

まとめ

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

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

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

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




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!これぞコスパ最強プラン!

▶︎ デジハリONLINE講座申込

▶︎基礎動画教材付きAdobe Creative Cloudを年額36,346円(税別)のお得な価格で使用する方法


Twitter Facebook Pocket LINE はてブ

おすすめの関連記事
コチラの記事も読まれています
あわせてよく読まれている記事