📈 スプレッドシート要約ツール 📝

📄 要約がここに表示されます...
```html
<!DOCTYPE html>
<html>
<head>
    <title>📊✨スプレッドシート要約アプリ✨📊</title>
    <style>
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-30px); }
            60% { transform: translateY(-15px); }
        }
        @keyframes sparkle {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        .animated {
            animation: bounce 2s infinite, sparkle 1.5s infinite;
        }
    </style>
</head>
<body>
    <div style="width: 400px; height: 400px; margin: auto; padding: 20px; box-sizing: border-box; background-color: #f0f8ff; border: 2px solid #add8e6; border-radius: 10px; display: flex; flex-direction: column; align-items: center; overflow: hidden;">
        <h1 style="font-size: 24px; text-align: center;">📈 スプレッドシート要約ツール 📝</h1>
        <div style="margin: 10px 0; width: 100%; display: flex; flex-direction: column; align-items: center;">
            <input type="text" id="sheetUrl" placeholder="🖥️ スプレッドシートURL" style="width: 90%; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 5px;">
            <input type="text" id="range" placeholder="🔢 範囲例: Sheet1!A1:D10" style="width: 90%; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 5px;">
            <button id="summarizeBtn" style="padding: 10px 20px; background-color: #4caf50; color: white; border: none; border-radius: 5px; cursor: pointer;">✨ 要約する ✨</button>
        </div>
        <div style="margin-top: 20px; width: 100%; flex-grow: 1; overflow-y: auto; background-color: #ffffff; padding: 10px; border: 1px solid #ddd; border-radius: 5px;">
            <p id="summaryOutput" style="font-size: 16px; text-align: left;">📄 要約がここに表示されます...</p>
        </div>
        <div style="margin-top: 10px; display: none;" id="emojiContainer">
            <span style="font-size: 24px;">🎉</span>
            <span style="font-size: 24px;">🚀</span>
            <span style="font-size: 24px;">✨</span>
            <span style="font-size: 24px;">💡</span>
            <span style="font-size: 24px;">🤖</span>
        </div>
    </div>
    <script>
        const summarizeBtn = document.getElementById('summarizeBtn');
        const summaryOutput = document.getElementById('summaryOutput');
        const emojiContainer = document.getElementById('emojiContainer');

        summarizeBtn.addEventListener('click', () => {
            summarizeBtn.classList.add('animated');
            summaryOutput.textContent = '🕵️‍♂️ 要約中... 🕵️‍♀️';
            emojiContainer.style.display = 'flex';
            fetchSummary();
        });

        function fetchSummary() {
            const url = document.getElementById('sheetUrl').value;
            const range = document.getElementById('range').value;
            // ここにスプレッドシートAPIを呼び出すコードを追加
            setTimeout(() => {
                summaryOutput.textContent = '✅ ここに要約された文章が表示されます！ 🎊';
                summarizeBtn.classList.remove('animated');
                emojiContainer.style.display = 'none';
            }, 2000);
        }

        // キーボード入力対応
        document.addEventListener('keydown', (event) => {
            if (event.key === 'Enter') {
                summarizeBtn.click();
            }
        });

        //  ボタンクリック時のアニメーション
        summarizeBtn.addEventListener('click', () => {
            summarizeBtn.style.transform = 'scale(1.1)';
            setTimeout(() => {
                summarizeBtn.style.transform = 'scale(1)';
            }, 100);
        });
    </script>
</body>
</html>
```