fontTags準備

index.js

@@ -1,13 +1,81 @@
 import { applyEffect, getAvailableEffects } from './effects.js';
 
+const fontTags = [
+    { name: "Aoboshi One", tags: ["japanese"] },
+    { name: "BIZ UDGothic", tags: ["japanese", "kanji"] },
+    { name: "BIZ UDMincho", tags: ["japanese", "kanji"] },
+    { name: "BIZ UDPGothic", tags: ["japanese", "kanji"] },
+    { name: "BIZ UDPMincho", tags: ["japanese", "kanji"] },
+    { name: "Cherry Bomb One", tags: ["japanese"] },
+    { name: "Chokokutai", tags: ["japanese"] },
+    { name: "Darumadrop One", tags: ["japanese"] },
+    { name: "Dela Gothic One", tags: ["japanese", "kanji"] },
+    { name: "DotGothic16", tags: ["japanese", "kanji"] },
+    { name: "Hachi Maru Pop", tags: ["japanese", "kanji"] },
+    { name: "Hina Mincho", tags: ["japanese", "kanji"] },
+    { name: "IBM Plex Sans JP", tags: ["japanese", "kanji"] },
+    { name: "Kaisei Decol", tags: ["japanese", "kanji"] },
+    { name: "Kaisei HarunoUmi", tags: ["japanese", "kanji"] },
+    { name: "Kaisei Opti", tags: ["japanese", "kanji"] },
+    { name: "Kaisei Tokumin", tags: ["japanese", "kanji"] },
+    { name: "Kiwi Maru", tags: ["japanese", "kanji"] },
+    { name: "Klee One", tags: ["japanese", "kanji"] },
+    { name: "Kosugi", tags: ["japanese", "kanji"] },
+    { name: "Kosugi Maru", tags: ["japanese", "kanji"] },
+    { name: "M PLUS 1", tags: ["japanese", "kanji"] },
+    { name: "M PLUS 1 Code", tags: ["japanese", "kanji"] },
+    { name: "M PLUS 1p", tags: ["japanese", "kanji"] },
+    { name: "M PLUS 2", tags: ["japanese", "kanji"] },
+    { name: "M PLUS Rounded 1c", tags: ["japanese", "kanji"] },
+    { name: "Mochiy Pop One", tags: ["japanese", "kanji"] },
+    { name: "Mochiy Pop P One", tags: ["japanese", "kanji"] },
+    { name: "Monomaniac One", tags: ["japanese"] },
+    { name: "Murecho", tags: ["japanese"] },
+    { name: "New Tegomin", tags: ["japanese", "kanji"] },
+    { name: "Noto Sans JP", tags: ["japanese", "kanji"] },
+    { name: "Noto Serif JP", tags: ["japanese", "kanji"] },
+    { name: "Palette Mosaic", tags: ["japanese"] },
+    { name: "Potta One", tags: ["japanese", "kanji"] },
+    { name: "Rampart One", tags: ["japanese", "kanji"] },
+    { name: "Reggae One", tags: ["japanese", "kanji"] },
+    { name: "Rock 3D", tags: ["japanese"] },
+    { name: "RocknRoll One", tags: ["japanese", "kanji"] },
+    { name: "Sawarabi Gothic", tags: ["japanese", "kanji"] },
+    { name: "Sawarabi Mincho", tags: ["japanese", "kanji"] },
+    { name: "Shippori Antique", tags: ["japanese", "kanji"] },
+    { name: "Shippori Antique B1", tags: ["japanese", "kanji"] },
+    { name: "Shippori Mincho", tags: ["japanese", "kanji"] },
+    { name: "Shippori Mincho B1", tags: ["japanese", "kanji"] },
+    { name: "Shizuru", tags: ["japanese"] },
+    { name: "Slackside One", tags: ["japanese"] },
+    { name: "Stick", tags: ["japanese", "kanji"] },
+    { name: "Train One", tags: ["japanese", "kanji"] },
+    { name: "Tsukimi Rounded", tags: ["japanese"] },
+    { name: "Yomogi", tags: ["japanese", "kanji"] },
+    { name: "Yuji Boku", tags: ["japanese", "kanji"] },
+    { name: "Yuji Hentaigana Akari", tags: ["japanese"] },
+    { name: "Yuji Hentaigana Akebono", tags: ["japanese"] },
+    { name: "Yuji Mai", tags: ["japanese", "kanji"] },
+    { name: "Yuji Syuku", tags: ["japanese", "kanji"] },
+    { name: "Yusei Magic", tags: ["japanese", "kanji"] },
+    { name: "Zen Antique", tags: ["japanese", "kanji"] },
+    { name: "Zen Antique Soft", tags: ["japanese", "kanji"] },
+    { name: "Zen Kaku Gothic Antique", tags: ["japanese", "kanji"] },
+    { name: "Zen Kaku Gothic New", tags: ["japanese", "kanji"] },
+    { name: "Zen Kurenaido", tags: ["japanese"] },
+    { name: "Zen Maru Gothic", tags: ["japanese"] },
+    { name: "Zen Old Mincho", tags: ["japanese", "kanji"] }
+];
+
+
 // フォントの読み込みを管理する関数
 async function loadGoogleFont(fontFamily) {
     // フォントファミリー名を正しく整形
     const formattedFamily = fontFamily.replace(/ /g, '+');
-    
+
     // Google Fonts APIのURLを構築
     const url = `https://fonts.googleapis.com/css2?family=${formattedFamily}&display=swap`;
-    
+
     // 既存のリンクタグがあれば削除
     const existingLink = document.querySelector(`link[href*="${formattedFamily}"]`);
     if (existingLink) {
@@ -44,7 +112,7 @@ async function textToImage(text, fontFamily, fontSize = '48px', effectType = 'si
         const fontSizeNum = parseInt(fontSize);
         const verticalText = document.getElementById('verticalText').checked;
         const verticalSpacing = document.getElementById('verticalSpacing').value;
-        
+
         // エフェクトを適用
         const imageUrl = await applyEffect(effectType, text, {
             font: fontFamily,
@@ -68,11 +136,11 @@ function debounceRender(callback, delay = 200) {
     if (renderTimeout) {
         clearTimeout(renderTimeout);
     }
-    
+
     if (isRendering) {
         return;
     }
-    
+
     renderTimeout = setTimeout(async () => {
         isRendering = true;
         try {
@@ -90,7 +158,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     const fontSizeInput = document.getElementById('fontSize');
     const verticalTextInput = document.getElementById('verticalText');
     const effectGrid = document.querySelector('.effect-grid');
-    
+
     await loadGoogleFont(fontSelect.value);
 
     // 縦書きモードの状態をグリッドに反映
@@ -110,7 +178,7 @@ document.addEventListener('DOMContentLoaded', async () => {
         for (const effect of effects) {
             try {
                 const imageUrl = await textToImage(text, fontFamily, fontSize, effect.name);
-                
+
                 const presetCard = document.createElement('div');
                 presetCard.className = 'effect-item';
                 presetCard.innerHTML = `
@@ -119,11 +187,11 @@ document.addEventListener('DOMContentLoaded', async () => {
                         <img src="${imageUrl}" alt="${effect.name}">
                     </div>
                 `;
-                
+
                 effectGrid.appendChild(presetCard);
             } catch (error) {
                 console.error(`プリセット ${effect.name} の描画エラー:`, error);
-                
+
                 const errorCard = document.createElement('div');
                 errorCard.className = 'effect-item error';
                 errorCard.innerHTML = `
@@ -149,7 +217,7 @@ document.addEventListener('DOMContentLoaded', async () => {
             console.error('フォント読み込みエラー:', error);
         }
     });
-    
+
     // テキストとフォントサイズの変更時にすべてのプリセットを再描画
     [textInput, fontSizeInput, verticalTextInput, verticalSpacing].forEach(element => {
         element.addEventListener('input', () => {
@@ -162,14 +230,14 @@ document.addEventListener('DOMContentLoaded', async () => {
 });
 
 // 縦書きモードの切り替え時の処理
-document.getElementById('verticalText').addEventListener('change', function(e) {
+document.getElementById('verticalText').addEventListener('change', function (e) {
     const spacingContainer = document.getElementById('verticalSpacingContainer');
     spacingContainer.style.display = e.target.checked ? 'block' : 'none';
     // ロゴの再生成処理を呼び出す
 });
 
 // 文字間隔の変更時の処理
-document.getElementById('verticalSpacing').addEventListener('input', function(e) {
+document.getElementById('verticalSpacing').addEventListener('input', function (e) {
     document.getElementById('verticalSpacingValue').textContent = e.target.value;
     // ロゴの再生成処理を呼び出す
 });