Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

AIPを使った恋愛運勢おみくじを作ってみた

Posted at

はじめに

初めましてのみなさんもそうでない方もこんにちは!

今年もあとまじか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>


これで恋愛おみくじのほうが回せるようになると思います!
今回はデザインは独自で考えてみましたので参考物はありません!皆さんもぜひ適当にいじってみて作ってみましょう!

今回作成したものはこのように表示されました!
image.png

最後に

今回「恋愛おみくじ」の作成を通じて、初めてAPIの使い方を実感することができました。特に、SheetDBを利用してAPIを作成する方法を考える過程が一番大変だったと感じます。
しかし、この経験を通じてAPIの基礎を学ぶことができ、今後の開発にも大いに役立つと確信しているため今回学んだことを活かし、さらに努力を重ねて成長していきたいと思っています!ぜひ皆さんも頑張ってみてください!

ここまで読んでいただきありがとうございました!
ぜひSSSAPIとGoogleSpredshhetぜひ皆さんも活用してみてください!
またどこかで会える機会がありましたら!
バイバーイ!

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?