はじめに
初めましてのみなさんもそうでない方もこんにちは!
今年もあとまじか12月といえばクリスマス、年末年始に恋をして、彼女さん彼氏さんと一緒にイルミネーションや初詣に行きたくなる時期ですよね!
恋愛はしたいけどできないそんなあなたのために!
今回はあなたの恋愛運を占う、恋みくじAPIをSheetDBを使って作ってみたいと思います!
ぜひ最後までご覧ください!
今回使うデータの説明
はじめに、今回APIを作成するにあたって、「SSSAPI」を使用いたしました。
GoogleスプレッドシートのURLだけでAPIを簡単に作成することができます。
詳しくは以下のリンクからご覧ください。
https://sssapi.app/help/add_api
そして今回はこちらの独自の恋みくじAPIデータを作成し、扱いました!
カラム名 | 説明 |
---|---|
id | 識別番号 |
luck | 運勢 |
colour | 色のデータ |
message | 神様からの一言 |
となっています!これらのデータを元に作っていきます!
APIを作ってみよう!
CSVファイル作成
まずはGoogleスプレッドシートを開いてもらってこのように作ってみてください!
id | luck | colour | message | |
---|---|---|---|---|
1 | 0 | 愛の大吉 | #FFD700 | 恋のチャンスはパンダ級!焦らずのんびり待ってみて |
2 | 1 | 恋の中吉 | #C0C0C0 | コアラ級の安心感が恋を引き寄せる鍵。自然体でいこう! |
3 | 2 | 両想い吉 | #87CEFA | ライオン級の積極性でアタックするべし! |
4 | 3 | があるかも小吉 | #90EE90 | フラミンゴ級の一歩ずつの進展を目指して。無理は禁物! |
5 | 4 | 前を向け末吉 | #FFA07A | ヤドカリ級にちょっと引っ込み思案気味。開気を出す準備を! |
6 | 5 | 実らない凶 | #FF6347 | サル級のちょっと調子外れな運勢。無理なアプローチは避けて |
これを入力したら作成したスプレッドシートのURLをコピーして完成です!
sheetDBにアクセス
Google Sheets REST API, connect Google Spreadsheet with your site
次にこちらのURLにアクセスしてください!
アクセスしていただいたら画面左にある
「Create Free API」をクリックしてください!
右上にある
「+ Create new API」をクリックすると
「Google Spreadsheet URL」と表示された画面がでます!
その画面に先ほどコピーしたスプレッドシートのURLをペーストしてください!
おそらく中央に「https://sheetdb.io/api/v1/<ユニークID>」が表示されたと思います!
そのURLにアクセスしてみるとJSON形式で表示されれば成功です!
コーディングを書いてみよう
APIの作成ができましたらVScodeを使ってhtmlを書いていきましょう!
今回は全体的に見やすいよう.jsと.cssをまとめて書いていきたいと思います。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Romance Fortune</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f8ff;
margin: 0;
padding: 20px;
}
h1{
color: pink;
}
#result {
background-image: linear-gradient(rgb(103, 220, 255), rgb(228, 255, 203));
font-size: 2rem;
padding: 1em;
border-radius: 1em;
margin-top: 20px;
}
button {
padding: 15px 30px;
font-size: 1.5rem;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1>今日の恋愛運</h1>
<div id="result">ここに結果が表示されます。</div><br>
<button id="fetchFortune">恋愛運を引く</button>
<script>
// おみくじデータの取得関数
async function fetchFortune() {
const resultDiv = document.getElementById('result');
try {
// APIからデータを取得
const response = await fetch('https://sheetdb.io/api/v1/aqzddzv2e8l8r');
const data = await response.json();
// データをランダムに選択
const randomFortune = data[Math.floor(Math.random() * data.length)];
// 結果を画面に表示
resultDiv.style.backgroundColor = randomFortune.color || 'white'; // 色を変更
resultDiv.innerHTML = `
<p>運勢: <strong>${randomFortune.luck}</strong></p>
<p>神の一言: <em>${randomFortune.message}</em></p>
`;
} catch (error) {
resultDiv.style.backgroundColor = 'lightcoral';
resultDiv.textContent = 'おみくじの取得に失敗しました。';
console.error('エラー:', error);
}
}
// ボタンにクリックイベントを追加
document.getElementById('fetchFortune').addEventListener('click', fetchFortune);
</script>
</body>
</html>
これで恋愛おみくじのほうが回せるようになると思います!
今回はデザインは独自で考えてみましたので参考物はありません!皆さんもぜひ適当にいじってみて作ってみましょう!
最後に
今回「恋愛おみくじ」の作成を通じて、初めてAPIの使い方を実感することができました。特に、SheetDBを利用してAPIを作成する方法を考える過程が一番大変だったと感じます。
しかし、この経験を通じてAPIの基礎を学ぶことができ、今後の開発にも大いに役立つと確信しているため今回学んだことを活かし、さらに努力を重ねて成長していきたいと思っています!ぜひ皆さんも頑張ってみてください!
ここまで読んでいただきありがとうございました!
ぜひSSSAPIとGoogleSpredshhetぜひ皆さんも活用してみてください!
またどこかで会える機会がありましたら!
バイバーイ!