パソコン内の
すべての書体を
JavaScriptで
書き出す

image: パソコン内のすべての書体をJavaScriptで書き出す
Toplabo
Export the font list using JSX

イラストレータのJSXを使ってPC内のフォント一覧を書き出す。

 | 2024/12/23

経緯

PCの中にいったいどんな書体が入っているのか
  • 面倒だけど、やるしかなかった

    グラフィック系の仕事をしているとPCにインストールしているフォントの種類もかなりの数になります。
    自分でもどれだけあるのか把握できてません。
    一度全体を把握するてめにも全書体を書き出す必要があるなと考えていました。
    また、ある程度把握していても、実際の仕事でも使用する文言に合わせてそれぞれの書体で実際に比べてみたくなります。なるよね!
    ていうかならなけりゃ、おかしい!
    でも、これをいちいち手作業でやるとそれだけで小一時間掛かってしまい、非常に効率悪いです。
    書体なんて1000書体以上インストールしてありますし。
    というわけで・・・・。JSXの出番です。

方法

イラストレータとJSXを使って目的を達成できます。
  • reactと同じJSXだけど、違う

    Adobeの場合、イラストレータやフォトショップ、XD、他にもAfter Effectsなんかはjavascriptに対応しています。
    Adobeは独自にJSXとよんでますが、reactのjsxとは違います。
    独自のAdobe APIを利用可能にしたJavaScript拡張版(XはExtensionのこと)という意味です。
    これを使うことでPCにインストールしているファントを全て書き出すことが可能です。
    使い方は
    1. illustratorで新規ファイルを作成
    2. ファイルメニューー>スクリプトー>その他のスクリプトを開く
    3. 目的のJSXファイルを選択(下で説明するJSXファイル)
    4. 処理が終わるまで待つ(書体が多いとかなり時間がかかる)
    となります。
    それではコードは下記で。

コード

コードサンプルです。簡単です。
  • ほぼjavascriptです

    以下をまるっとコピーして、『WritingAllFontList.jsx』などと名前を付けて保存し、使用。
    保存するディレクトリは自分の分かりやすい場所へ。

    //app.preferences.setBooleanPreference("ShowExternalJSXWarning", false);
    //新規ファイル作成
    //var doc = app.documents.add();
    
    // 現在アクティブなドキュメントを取得します
    var doc = app.activeDocument;
    
    // テキストオブジェクトを作成します
    
    // フォントの一覧を取得 
    var fonts = app.textFonts;
    var doc = app.activeDocument;
    var textFrames = doc.textFrames;
    var file = new File("~/Desktop/text_objects.txt"); // 保存先のファイルパスを設定
    file.open("w"); // ファイルを書き込みモードで開く
    
    // テキストフレームの初期位置を設定する
    var xPos = 10;
    var yPos = -10;
    const re = /\W/;
    
    // テキストオブジェクトにフォントを適用
    const span= Math.ceil(fonts.length / 10);
    //const span= 230;
    var count= 0;
    var mcount= 0;
    var yPosDef= 0;
    //for (var j = 0; j < fonts.length; j++) {
    for (var j = 0; j < fonts.length; j++) {
    	count= Math.ceil( (j + 1)/span);
    	mcount= Math.floor(j/span);
    	var textObj = doc.textFrames.add();
    	if(span*(count - 1) < j <= span*(count) ){ 
    		xPos = 300*(count - 1) +10;
    		if(j == (count-1)*span && j>1){yPosDef += (textObj.height + 4)*span;}else{yPosDef = 0}
    		yPos -= textObj.height + 4 - yPosDef;
    	}
    	var currentFont = fonts[j];
    	textObj.contents = "[" + j + "/" + fonts.length + "]" + currentFont.name +  " | サイトにハッピィを充電。Studio HappyvalleyWEB制作事業所 スタジオ・ハッピィバリー";
    	textObj.textRange.characterAttributes.textFont = currentFont;
    	textObj.textRange.characterAttributes.size = 4; // テキストサイズを設定
    	// テキストフレームの位置を設定する
    	textObj.position = [xPos, yPos];
      
    	// 次のテキストフレームの位置を計算する
    	file.writeln(textObj.contents);
    															   
    }
    
    //var file = new File("E:\__WORKS\_wordpress用\___デザイン\[SHV]\欧文書体一覧"); // ファイルパスを設定
    //doc.saveAs(file); // ファイルを保存します

結果

サンプル文言は自由に変更可能
  • 実行結果です。

    出力文字列の変更は、上のコードの『サイトにハッピィを~』と同じ箇所を変更します。

    https://studio-happyvalley.com/wp/wp-content/uploads/fig1-19.png

『パソコン内のすべての書体をJavaScriptで書き出す』関連のお薦め

このページで紹介しているプログラムやビジュアルなどご依頼いただければ実装を賜ります。
お問い合わせはこちら