ひろばニュース｜2026/03/06~2026/03/12号

// --- 1. バックエンド：タグ＆投稿データ取得API---
add_action('rest_api_init', function () {
    register_rest_route('mikan/v1', '/sounds', array(
        'methods' => 'GET',
        'callback' => function() {
            $tags = get_terms(array(
                'taxonomy'   => 'post_tag',
                'hide_empty' => true,
                'orderby'    => 'count',
                'order'      => 'DESC',
            ));

            $result = array();
            foreach ($tags as $tag) {
                $posts = get_posts(array(
                    'post_type' => 'post',
                    'tag_id' => $tag->term_id,
                    'posts_per_page' => 10
                ));
                
                $sounds = array();
                foreach ($posts as $p) {
                    $sounds[] = array(
                        'title' => $p->post_title,
                        'url' => get_permalink($p->ID)
                    );
                }
                $result[] = array('name' => $tag->name, 'sounds' => $sounds);
            }
            return $result;
        },
        'permission_callback' => '__return_true',
    ));
});

// --- 2. フロントエンド：UI・CSS・ロジック ---
add_action('wp_footer', function () {
?>
<style>
    .mikan-loader {
        border: 4px solid #f3f3f3;
        border-top: 4px solid #ff9800;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        animation: mikan-spin 1s linear infinite;
        margin: 20px auto;
    }
    @keyframes mikan-spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    #m-btn:hover { transform: scale(1.1); }
    #m-btn { transition: transform 0.2s; }
    /* フェードインアニメーション */
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
</style>

<div id="mikan-bot" style="position:fixed; bottom:10px; right:10px; z-index:9999; font-family:sans-serif;">
    <div id="m-tooltip" style="display:none; position:absolute; bottom:75px; right:0; background:white; color:#333; padding:8px 12px; border-radius:10px; border:2px solid #ff9800; font-size:12px; white-space:nowrap; box-shadow:0 4px 10px rgba(0,0,0,0.1); font-weight:bold;">チャットボットで探してみる？</div>
    
    <button id="m-btn" style="background:#D1F2E5; border:none; border-radius:50%; width:60px; height:60px; cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,0.3); padding:0; overflow:hidden; display:flex; align-items:center; justify-content:center;">
        <img src="https://mikanmusicsquare.com/wp-content/uploads/2025/11/cropped-favicon.png" style="width:70%; height:70%; object-fit:contain;" alt="🍊">
    </button>
    
    <div id="m-window" style="display:none; width:320px; height:480px; background:white; border-radius:12px; flex-direction:column; overflow:hidden; box-shadow:0 8px 30px rgba(0,0,0,0.2); border:1px solid #eee;">
        <div style="background:#ff9800; color:white; padding:15px; font-weight:bold; display:flex; justify-content:space-between;">
            <span>おんがく素材チャット</span>
            <span id="m-close" style="cursor:pointer; font-size:20px;">×</span>
        </div>
        
        <div id="m-body" style="flex:1; padding:15px; overflow-y:auto; background:#fff; scroll-behavior: smooth;">
            <div id="m-msg">こんにちは！みかんBotです！気になるタグを選んでね。</div>
            <div id="m-tags" style="margin-top:10px; min-height:50px;"></div>
            
            <div id="m-results"></div>
            
            <hr style="margin:20px 0; border:0; border-top:1px dashed #ddd;">
            
            <div id="m-cart-area">
                <strong style="font-size:14px;">🧺キープ中のリスト</strong>
                <div id="m-cart-list" style="font-size:12px; margin-top:10px; color:#666;"></div>
            </div>
        </div>
    </div>
</div>

<script>
(function() {
    const btn = document.getElementById('m-btn');
    const win = document.getElementById('m-window');
    const body = document.getElementById('m-body'); // スクロール対象
    const tagsDiv = document.getElementById('m-tags');
    const resultsDiv = document.getElementById('m-results');
    const cartDiv = document.getElementById('m-cart-list');
    const close = document.getElementById('m-close');
    const tooltip = document.getElementById('m-tooltip');

    let cart = JSON.parse(localStorage.getItem('mikan_keep_list') || '[]');

    const saveCart = () => {
        localStorage.setItem('mikan_keep_list', JSON.stringify(cart));
        renderCart();
    };

    const renderCart = () => {
        if (cart.length === 0) {
            cartDiv.innerHTML = 'カゴには何も入ってないよ。';
            return;
        }
        cartDiv.innerHTML = cart.map((item, i) => `
            <div style="display:flex; justify-content:space-between; margin-bottom:5px; background:#f9f9f9; padding:5px; border-radius:4px; border:1px solid #eee;">
                <a href="${item.url}" style="text-decoration:none; color:#333; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:200px;">${item.title}</a>
                <span onclick="window.mikanRemove(${i})" style="cursor:pointer; color:red; font-weight:bold; padding:0 5px;">✕</span>
            </div>
        `).join('');
    };

    window.mikanAdd = (title, url) => {
        if (!cart.some(i => i.url === url)) {
            cart.push({title, url});
            saveCart();
        }
    };

    window.mikanRemove = (index) => {
        cart.splice(index, 1);
        saveCart();
    };

    btn.onclick = () => {
        const isOpening = win.style.display === 'none';
        win.style.display = isOpening ? 'flex' : 'none';
        tooltip.style.display = 'none';

        if (isOpening && !tagsDiv.hasChildNodes()) {
            tagsDiv.innerHTML = '<div class="mikan-loader"></div>';

            fetch('/wp-json/mikan/v1/sounds')
                .then(res => res.json())
                .then(data => {
                    tagsDiv.innerHTML = '';
                    data.forEach(t => {
                        const b = document.createElement('button');
                        b.innerText = t.name;
                        b.style = "margin:3px; padding:6px 12px; border:1px solid #ff9800; background:white; border-radius:20px; cursor:pointer; font-size:12px; transition:0.2s;";
                        b.onmouseover = () => b.style.background = '#fff4e5';
                        b.onmouseout = () => b.style.background = 'white';
                        
                        b.onclick = () => {
                            let html = `<div style="margin-top:20px; border-left:3px solid #ff9800; padding-left:10px; animation: fadeIn 0.4s ease-out;"><strong>${t.name}の検索結果:</strong><br>`;
                            if(t.sounds.length === 0) {
                                html += '<span style="font-size:11px;">該当する曲がありませんでした。</span>';
                            } else {
                                t.sounds.forEach(s => {
                                    html += `<div style="margin:8px 0; border-bottom:1px solid #eee; padding-bottom:5px;">
                                        <div style="font-size:13px; font-weight:bold;">・${s.title}</div>
                                        <div style="margin-top:3px;">
                                            <button onclick="window.mikanAdd('${s.title.replace(/'/g, "\\'")}','${s.url}')" style="font-size:10px; cursor:pointer; background:#ff9800; color:white; border:none; border-radius:4px; padding:2px 6px;">🧺キープ</button>
                                            <a href="${s.url}" style="font-size:10px; margin-left:10px; color:#666;">詳細を見る</a>
                                        </div>
                                    </div>`;
                                });
                            }
                            resultsDiv.innerHTML = html + '</div>';

                            // タグボタンの直下まで自動スクロール
                            setTimeout(() => {
                                body.scrollTo({
                                    top: resultsDiv.offsetTop - 20,
                                    behavior: 'smooth'
                                });
                            }, 100);
                        };
                        tagsDiv.appendChild(b);
                    });
                })
                .catch(err => {
                    tagsDiv.innerHTML = '<div style="font-size:11px; color:red; text-align:center;">エラーが発生しました。</div>';
                });
        }
    };

    btn.onmouseenter = () => { if(win.style.display === 'none') tooltip.style.display = 'block'; };
    btn.onmouseleave = () => tooltip.style.display = 'none';
    close.onclick = () => win.style.display = 'none';

    window.addEventListener('scroll', function() {
        const chatbot = document.getElementById('mikan-bot');
        chatbot.style.transition = 'all 0.3s ease-out';
        chatbot.style.bottom = (window.scrollY > 100) ? '60px' : '10px';
    });

    renderCart();
})();
</script>
<?php
});