fontのフィルタリング改善

index.html

@@ -30,18 +30,14 @@
                             <label for="googleFontInput" class="form-label">フォント</label>
                             <div class="row g-2 mb-2">
                                 <div class="col">
-                                    <div class="btn-group w-100" role="group" id="fontTagFilter">
-                                        <input type="radio" class="btn-check" name="fontFilter" id="filterAll" value="all" checked>
-                                        <label class="btn btn-outline-primary" for="filterAll">すべて表示</label>
-                                        
-                                        <input type="radio" class="btn-check" name="fontFilter" id="filterJapanese" value="japanese">
-                                        <label class="btn btn-outline-primary" for="filterJapanese">日本語フォント</label>
-                                        
-                                        <input type="radio" class="btn-check" name="fontFilter" id="filterKanji" value="kanji">
-                                        <label class="btn btn-outline-primary" for="filterKanji">漢字対応</label>
+                                    <div class="btn-group w-100 flex-wrap gap-1" role="group" id="fontTagFilter">
+                                        <!-- フィルターボタンはJavaScriptで動的に生成されます -->
                                     </div>
                                 </div>
                             </div>
+                            <div id="noFontsMessage" class="alert alert-danger mb-2" style="display: none;">
+                                選択した条件に一致するフォントが見つかりませんでした
+                            </div>
                             <select name="googleFontInput" class="form-select" id="googleFontInput">
                             </select>
                         </div>

index.js

@@ -1,70 +1,114 @@
 import { applyEffect, getAvailableEffects } from './effects.js';
 
+const tagDisplayNames = {
+    japanese: "日本語",
+    english: "英語",
+    kanji: "漢字対応",
+    business: "ビジネス",
+    fancy: "装飾的",
+    playful: "遊び心",
+    display: "ディスプレイ",
+    handwritten: "手書き",
+    retro: "レトロ",
+    calm: "落ち着いた",
+    cute: "かわいい",
+    script: "筆記体",
+    bold: "太字",
+    horror: "ホラー",
+    comic: "コミック"
+};
+
 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"] }
+    { name: "BIZ UDGothic", tags: ["japanese", "kanji", "business"] },
+    { name: "BIZ UDMincho", tags: ["japanese", "kanji", "business"] },
+    { name: "BIZ UDPGothic", tags: ["japanese", "kanji", "business"] },
+    { name: "BIZ UDPMincho", tags: ["japanese", "kanji", "business"] },
+    { name: "Cherry Bomb One", tags: ["japanese", "cute"] },
+    { name: "Chokokutai", tags: ["japanese", "fancy"] },
+    { name: "Darumadrop One", tags: ["japanese", "playful"] },
+    { name: "Dela Gothic One", tags: ["japanese", "kanji", "display"] },
+    { name: "DotGothic16", tags: ["japanese", "kanji", "retro"] },
+    { name: "Hachi Maru Pop", tags: ["japanese", "kanji", "cute"] },
+    { name: "Hina Mincho", tags: ["japanese", "kanji", "fancy"] },
+    { name: "IBM Plex Sans JP", tags: ["japanese", "kanji", "business"] },
+    { name: "Kaisei Decol", tags: ["japanese", "kanji", "fancy"] },
+    { name: "Kaisei HarunoUmi", tags: ["japanese", "kanji", "fancy"] },
+    { name: "Kaisei Opti", tags: ["japanese", "kanji", "business"] },
+    { name: "Kaisei Tokumin", tags: ["japanese", "kanji", "business"] },
+    { name: "Kiwi Maru", tags: ["japanese", "kanji", "cute"] },
+    { name: "Klee One", tags: ["japanese", "kanji", "handwritten"] },
+    { name: "Kosugi", tags: ["japanese", "kanji", "business"] },
+    { name: "Kosugi Maru", tags: ["japanese", "kanji", "calm"] },
+    { name: "M PLUS 1", tags: ["japanese", "kanji", "business"] },
+    { name: "M PLUS 1 Code", tags: ["japanese", "kanji", "display"] },
+    { name: "M PLUS 1p", tags: ["japanese", "kanji", "business"] },
+    { name: "M PLUS 2", tags: ["japanese", "kanji", "business"] },
+    { name: "M PLUS Rounded 1c", tags: ["japanese", "kanji", "calm"] },
+    { name: "Mochiy Pop One", tags: ["japanese", "kanji", "playful"] },
+    { name: "Mochiy Pop P One", tags: ["japanese", "kanji", "playful"] },
+    { name: "Monomaniac One", tags: ["japanese", "display"] },
+    { name: "Murecho", tags: ["japanese", "business"] },
+    { name: "New Tegomin", tags: ["japanese", "kanji", "fancy"] },
+    { name: "Noto Sans JP", tags: ["japanese", "kanji", "business"] },
+    { name: "Noto Serif JP", tags: ["japanese", "kanji", "business"] },
+    { name: "Palette Mosaic", tags: ["japanese", "display"] },
+    { name: "Potta One", tags: ["japanese", "kanji", "playful"] },
+    { name: "Rampart One", tags: ["japanese", "kanji", "display"] },
+    { name: "Reggae One", tags: ["japanese", "kanji", "display"] },
+    { name: "Rock 3D", tags: ["japanese", "display"] },
+    { name: "RocknRoll One", tags: ["japanese", "kanji", "playful"] },
+    { name: "Sawarabi Gothic", tags: ["japanese", "kanji", "business"] },
+    { name: "Sawarabi Mincho", tags: ["japanese", "kanji", "business"] },
+    { name: "Shippori Antique", tags: ["japanese", "kanji", "retro"] },
+    { name: "Shippori Antique B1", tags: ["japanese", "kanji", "retro"] },
+    { name: "Shippori Mincho", tags: ["japanese", "kanji", "business"] },
+    { name: "Shippori Mincho B1", tags: ["japanese", "kanji", "business"] },
+    { name: "Shizuru", tags: ["japanese", "display"] },
+    { name: "Slackside One", tags: ["japanese", "handwritten"] },
+    { name: "Stick", tags: ["japanese", "kanji", "display"] },
+    { name: "Train One", tags: ["japanese", "kanji", "display"] },
+    { name: "Tsukimi Rounded", tags: ["japanese", "calm"] },
+    { name: "Yomogi", tags: ["japanese", "kanji", "handwritten"] },
+    { name: "Yuji Boku", tags: ["japanese", "kanji", "fancy"] },
+    { name: "Yuji Hentaigana Akari", tags: ["japanese", "fancy"] },
+    { name: "Yuji Hentaigana Akebono", tags: ["japanese", "fancy"] },
+    { name: "Yuji Mai", tags: ["japanese", "kanji", "fancy"] },
+    { name: "Yuji Syuku", tags: ["japanese", "kanji", "fancy"] },
+    { name: "Yusei Magic", tags: ["japanese", "kanji", "playful"] },
+    { name: "Zen Antique", tags: ["japanese", "kanji", "retro"] },
+    { name: "Zen Antique Soft", tags: ["japanese", "kanji", "retro"] },
+    { name: "Zen Kaku Gothic Antique", tags: ["japanese", "kanji", "business"] },
+    { name: "Zen Kaku Gothic New", tags: ["japanese", "kanji", "business"] },
+    { name: "Zen Kurenaido", tags: ["japanese", "calm"] },
+    { name: "Zen Maru Gothic", tags: ["japanese", "calm"] },
+    { name: "Zen Old Mincho", tags: ["japanese", "kanji", "retro"] },
+
+    // 英語フォント - ビジネス/フォーマル
+    { name: "Montserrat", tags: ["english", "business"] },
+    { name: "Playfair Display", tags: ["english", "business", "fancy"] },
+    { name: "Roboto", tags: ["english", "business"] },
+    { name: "Lato", tags: ["english", "business"] },
+
+    // デコラティブ/ファンシー
+    { name: "Pacifico", tags: ["english", "fancy", "script"] },
+    { name: "Great Vibes", tags: ["english", "fancy", "script"] },
+    { name: "Lobster", tags: ["english", "fancy"] },
+    { name: "Dancing Script", tags: ["english", "fancy", "script"] },
+    { name: "Satisfy", tags: ["english", "fancy", "script"] },
+
+    // ディスプレイ/特殊
+    { name: "Righteous", tags: ["english", "display"] },
+    { name: "Permanent Marker", tags: ["english", "display", "handwritten"] },
+    { name: "Press Start 2P", tags: ["english", "display", "retro"] },
+    { name: "Fredoka One", tags: ["english", "display", "playful"] },
+    { name: "Creepster", tags: ["english", "display", "horror"] },
+    { name: "Bangers", tags: ["english", "display", "comic"] },
+    { name: "Rubik Mono One", tags: ["english", "display", "bold"] },
+    { name: "Bungee", tags: ["english", "display", "bold"] },
+    { name: "Bungee Shade", tags: ["english", "display", "fancy"] },
+    { name: "Monoton", tags: ["english", "display", "retro"] }
 ];
 
 
@@ -159,20 +203,119 @@ document.addEventListener('DOMContentLoaded', async () => {
     const fontSizeInput = document.getElementById('fontSize');
     const verticalTextInput = document.getElementById('verticalText');
     const effectGrid = document.querySelector('.effect-grid');
+    const noFontsMessage = document.getElementById('noFontsMessage');
+
+    // 利用可能なタグを収集し、使用頻度をカウント
+    function getTagsWithCount() {
+        const tagCount = new Map();
+        fontTags.forEach(font => {
+            font.tags.forEach(tag => {
+                tagCount.set(tag, (tagCount.get(tag) || 0) + 1);
+            });
+        });
+        return tagCount;
+    }
+
+    // 言語関連のタグかどうかを判定
+    function isLanguageTag(tag) {
+        return ['japanese', 'english', 'kanji'].includes(tag);
+    }
+
+    // フィルターボタンを動的に生成
+    function createFilterButtons() {
+        const tagCount = getTagsWithCount();
+        fontTagFilter.innerHTML = '';
+
+        // タグを言語関連とその他に分類し、個数でソート
+        const languageTags = [...tagCount.entries()]
+            .filter(([tag]) => isLanguageTag(tag))
+            .sort((a, b) => b[1] - a[1]);
+
+        const otherTags = [...tagCount.entries()]
+            .filter(([tag]) => !isLanguageTag(tag))
+            .sort((a, b) => b[1] - a[1]);
+
+        // 言語関連のタグを追加
+        if (languageTags.length > 0) {
+            const langGroup = document.createElement('div');
+            langGroup.className = 'filter-group mb-2';
+            langGroup.innerHTML = '<div class="filter-group-label mb-1">言語</div>';
+            
+            const langButtonGroup = document.createElement('div');
+            langButtonGroup.className = 'btn-group-wrapper';
+            
+            languageTags.forEach(([tag, count]) => {
+                const displayName = tagDisplayNames[tag] || tag;
+                const button = document.createElement('div');
+                button.className = 'btn-check-wrapper';
+                button.innerHTML = `
+                    <input type="checkbox" class="btn-check" name="fontFilter" id="filter${tag}" value="${tag}">
+                    <label class="btn btn-outline-primary" for="filter${tag}">
+                        ${displayName} <span class="tag-count">(${count})</span>
+                    </label>
+                `;
+                langButtonGroup.appendChild(button);
+            });
+            
+            langGroup.appendChild(langButtonGroup);
+            fontTagFilter.appendChild(langGroup);
+        }
+
+        // その他のタグを追加
+        if (otherTags.length > 0) {
+            const otherGroup = document.createElement('div');
+            otherGroup.className = 'filter-group';
+            otherGroup.innerHTML = '<div class="filter-group-label mb-1">スタイル</div>';
+            
+            const otherButtonGroup = document.createElement('div');
+            otherButtonGroup.className = 'btn-group-wrapper';
+            
+            otherTags.forEach(([tag, count]) => {
+                const displayName = tagDisplayNames[tag] || tag;
+                const button = document.createElement('div');
+                button.className = 'btn-check-wrapper';
+                button.innerHTML = `
+                    <input type="checkbox" class="btn-check" name="fontFilter" id="filter${tag}" value="${tag}">
+                    <label class="btn btn-outline-primary" for="filter${tag}">
+                        ${displayName} <span class="tag-count">(${count})</span>
+                    </label>
+                `;
+                otherButtonGroup.appendChild(button);
+            });
+            
+            otherGroup.appendChild(otherButtonGroup);
+            fontTagFilter.appendChild(otherGroup);
+        }
+    }
 
     // フォントオプションの初期化と絞り込み機能の実装
-    function initializeFontOptions(filter = 'all') {
+    function initializeFontOptions() {
         // 現在選択されているフォントを保持
         const currentFont = fontSelect.value;
         
+        // 選択されているフィルターを取得
+        const selectedFilters = Array.from(fontTagFilter.querySelectorAll('input[type="checkbox"]:checked'))
+            .map(checkbox => checkbox.value);
+        
         // 既存のオプションをクリア
         fontSelect.innerHTML = '';
         
         // フィルタリングされたフォントのリストを作成
-        const filteredFonts = fontTags.filter(font => {
-            if (filter === 'all') return true;
-            return font.tags.includes(filter);
-        });
+        const filteredFonts = selectedFilters.length === 0 
+            ? fontTags 
+            : fontTags.filter(font => 
+                selectedFilters.every(filter => font.tags.includes(filter))
+            );
+
+        // フォルター結果が0件の場合
+        if (filteredFonts.length === 0) {
+            noFontsMessage.style.display = 'block';
+            fontSelect.disabled = true;
+            return Promise.resolve(); // フォントの読み込みは不要
+        } else {
+            noFontsMessage.style.display = 'none';
+            fontSelect.disabled = false;
+        }
 
         // フォントオプションを追加
         filteredFonts.forEach((font, index) => {
@@ -191,17 +334,18 @@ document.addEventListener('DOMContentLoaded', async () => {
     }
 
     // タグフィルターの変更イベントを設定
-    fontTagFilter.querySelectorAll('input[type="radio"]').forEach(radio => {
-        radio.addEventListener('change', async (e) => {
-            if (e.target.checked) {
-                await initializeFontOptions(e.target.value);
+    fontTagFilter.addEventListener('change', async (e) => {
+        if (e.target.type === 'checkbox') {
+            await initializeFontOptions();
+            if (!fontSelect.disabled) { // フォントが選択可能な場合のみプレビューを更新
                 await renderAllPresets();
             }
-        });
+        }
     });
 
     // 初期化
-    await initializeFontOptions('all');
+    createFilterButtons();
+    await initializeFontOptions();
     await loadGoogleFont(fontSelect.value);
 
     // 縦書きモードの状態をグリッドに反映

styles.css

@@ -114,4 +114,60 @@
     0% { transform: translateY(0) translateX(0); }
     50% { transform: translateY(-10px) translateX(5px); }
     100% { transform: translateY(0) translateX(0); }
+}
+
+.btn-check-wrapper {
+    display: inline-block;
+    margin: 2px;
+}
+
+.btn-check-wrapper .btn {
+    margin: 0;
+    white-space: nowrap;
+}
+
+#fontTagFilter {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+}
+
+#fontTagFilter .btn {
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+    padding: 0.25rem 0.5rem;
+}
+
+/* チェックされた状態のスタイル */
+.btn-check:checked + .btn-outline-primary {
+    background-color: #0d6efd;
+    color: white;
+}
+
+.filter-group {
+    margin-bottom: 1rem;
+}
+
+.filter-group-label {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #6c757d;
+    margin-bottom: 0.5rem;
+}
+
+.btn-group-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+}
+
+.tag-count {
+    font-size: 0.75rem;
+    opacity: 0.8;
+}
+
+/* ボタンのホバー時もタグカウントの視認性を保持 */
+.btn-check:checked + .btn-outline-primary .tag-count,
+.btn-outline-primary:hover .tag-count {
+    opacity: 1;
 }