はじめに
こんにちは。この記事ではGoogleスプレッドシートとSheetDBを使って「お題生成ゲーム」を簡単に作成する方法を紹介します。 JavaScript初心者の方でも簡単に試せる内容なので、ぜひ挑戦してみてください。
[完成イメージ]
「お題を取得するボタン」をクリックすると、APIからランダムにお題とキーワードが表示されます。
[必要なもの]
Googleスプレッドシート
SheetDB（API化サービス）
HTML, CSS, JavaScriptが動く環境（VSCodeやブラウザ）
1. Googleスプレッドシートを作成する
まず、以下のようなデータをGoogleスプレッドシートに入力する。
2. SheetDBでAPIを作成する
GoogleスプレッドシートをAPIに変換するため、SheetDBを利用します。
SheetDBにアクセスし、無料でアカウントを作成。
「Create API」をクリックして、GoogleスプレッドシートのURLを貼り付ける。
画面に表示されるAPIエンドポイント（例: https://sheetdb.io/api/v1/xxxxxx）をメモします。
3. コードを書いてみる
次に、HTML、CSS、JavaScriptを組み合わせたコードを記述します。
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からランダムにお題とキーワードが表示される。
まとめ
この「お題生成ゲーム」を作成することで、以下のことが学べました。
・GoogleスプレッドシートのデータをAPI化する方法
・JavaScriptでAPIを呼び出してデータをランダムに表示する方法
・簡単なHTML/CSSでインターフェースを作成する方法
これらを通してこれからAPIについて学んでいく場合に役立ったら嬉しいと思います。