GoogleスプレッドシートとSheetDBを使った,お題生成ゲームを作ってみた

# はじめに
こんにちは。この記事ではGoogleスプレッドシートとSheetDBを使って「お題生成ゲーム」を簡単に作成する方法を紹介します。 JavaScript初心者の方でも簡単に試せる内容なので、ぜひ挑戦してみてください。

[完成イメージ] 
「お題を取得するボタン」をクリックすると、APIからランダムにお題とキーワードが表示されます。

[必要なもの] 
Googleスプレッドシート
SheetDB（API化サービス）
HTML, CSS, JavaScriptが動く環境（VSCodeやブラウザ）

# 1. Googleスプレッドシートを作成する
まず、以下のようなデータをGoogleスプレッドシートに入力する。 
![スクリーンショット 2024-12-18 20.24.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3949362/aa72fd78-f0df-9c99-0f45-9570cba26bbd.png)


# 2. SheetDBでAPIを作成する
GoogleスプレッドシートをAPIに変換するため、SheetDBを利用します。
SheetDBにアクセスし、無料でアカウントを作成。
「Create API」をクリックして、GoogleスプレッドシートのURLを貼り付ける。 画面に表示されるAPIエンドポイント（例: https://sheetdb.io/api/v1/xxxxxx）をメモします。 
￼![スクリーンショット 2024-12-18 20.27.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3949362/37d444a6-5cf7-c879-83cf-23547dcb75a8.png)


# 3. コードを書いてみる
次に、HTML、CSS、JavaScriptを組み合わせたコードを記述します。
index.html として保存しましょう。
```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>お題生成ゲーム</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f0f8ff;
            margin: 0;
            padding: 20px;
        }
        h1 { color: #ff69b4; }
        #game-container {
            background-color: #ffffff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            display: inline-block;
            margin-top: 20px;
        }
        #theme, #keywords {
            font-size: 1.5rem;
            margin: 10px 0;
        }
        button {
            padding: 10px 20px;
            font-size: 1.2rem;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover { background-color: #45a049; }
        #error { color: red; margin-top: 20px; }
    </style>
</head>
<body>
    <h1>お題生成ゲーム</h1>
    <div id="game-container">
        <div id="theme">テーマ: ここにお題が表示されます。</div>
        <div id="keywords">キーワード: ここにキーワードが表示されます。</div>
        <button id="fetchTheme">お題を取得する</button>
        <div id="error"></div>
    </div>

    <script>
        async function fetchTheme() {
            const themeDiv = document.getElementById('theme');
            const keywordsDiv = document.getElementById('keywords');
            const errorDiv = document.getElementById('error');

            try {
                const apiURL = 'https://sheetdb.io/api/v1/ixbv3zdqmz97m';

                const response = await fetch(apiURL);
                if (!response.ok) throw new Error(`HTTPエラー: ${response.status}`);

                const data = await response.json();
                console.log('取得したデータ:', data);

                if (!data || data.length === 0) throw new Error("データが空です。");

                const randomTheme = data[Math.floor(Math.random() * data.length)];
                console.log('選択されたお題:', randomTheme);

                const themText = randomTheme.them || 'テーマが見つかりません';
                const word1 = randomTheme.word1 || '不明なキーワード1';
                const word2 = randomTheme.word2 || '不明なキーワード2';
                const word3 = randomTheme.word3 || '不明なキーワード3';

                themeDiv.textContent = `テーマ: ${themText}`;
                keywordsDiv.textContent = `キーワード: ${word1}, ${word2}, ${word3}`;
                errorDiv.textContent = '';
            } catch (error) {
                console.error('エラー発生:', error);
                themeDiv.textContent = 'テーマ: エラーが発生しました。';
                keywordsDiv.textContent = 'キーワード: 取得失敗';
                errorDiv.textContent = `エラー: ${error.message}`;
            }
        }

        document.getElementById('fetchTheme').addEventListener('click', fetchTheme);
    </script>
</body>
</html>
```


# 4. 実行してみる
コードを保存し、ブラウザでindex.html を開きます。
「お題を取得する」ボタンを押すと、APIからランダムにお題とキーワードが表示される。 
￼![スクリーンショット 2024-12-18 20.50.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3949362/fa117b42-73a6-84ca-8484-480b6795afc8.png)


# まとめ
この「お題生成ゲーム」を作成することで、以下のことが学べました。
・GoogleスプレッドシートのデータをAPI化する方法
・JavaScriptでAPIを呼び出してデータをランダムに表示する方法 
・簡単なHTML/CSSでインターフェースを作成する方法
これらを通してこれからAPIについて学んでいく場合に役立ったら嬉しいと思います。