はじめに
私のことを知っているみなさんもそうでないみなさんもこんにちは！
最近は特に冷え込み暖房なしでは生活しづらい時期になってきましたね...
皆さんはどんな防寒対策を行っていますか？
自分はこたつに入りのこのことパソコンを打つ生活が日課になってしまいました。
雑談はさておき今回はそんな寒さに合わせてどんな服装をするべきなのかを気温とともに考えてくれるAPIを作ってみたのでぜひご覧ください！
今回使うデータの説明
はじめに、今回APIを作成するにあたって、「SSSAPI」を使用いたしました。
GoogleスプレッドシートのURLだけでAPIを簡単に作成することができます。
詳しくは以下のリンクからご覧ください。
https://sssapi.app/help/add_api
今回はこちらの独自の寒さに対する対応用APIデータを作成し、扱いました！
| カラム名 | 説明 |
|---|---|
| id | 識別番号 |
| level | 寒さレベル |
| min_temp | 最小の気温 |
| min_temp | 最大の気温 |
| actions | 推奨行動 |
となっています！これらのデータを元に作っていきます！
APIを作ってみよう
CSVファイル作成
まずはGoogleスプレッドシートを開いてもらってこのように作ってみてください！
| id | level | min_temp | max_temp | actions | |
|---|---|---|---|---|---|
| 1 | 1 | 快適 | 16 | 100 | 軽い服装で外出可能 |
| 2 | 2 | やや寒い | 5 | 15 | ジャケットを着用、野外活動は短時間に |
| 3 | 3 | 寒い | 0 | 4 | 厚手のコートを着用、マフラーや手袋などをするとなおよし |
| 4 | 4 | 非常に寒い | -5 | -1 | 防寒対策を徹底！、長時間の外出をさけ暖房を使用 |
これを入力したら作成したスプレッドシートの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形式で表示されれば成功です！
Let`sコーディング
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>寒さ対策に必要API</title>
<style>
#display {
background-image: linear-gradient(rgb(103, 220, 255), rgb(228, 255, 203));
font-size: 3rem;
width: auto;
height: auto;
text-align: center;
border-radius: 2em;
}
#result {
background-image: linear-gradient(rgb(214, 193, 135), rgb(113, 179, 197));
font-size: 2rem;
padding: 1em;
border-radius: 1em;
margin-top: 20px;
}
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f8ff;
margin: 0;
padding: 15px;
background-color: linear-gradient(rgb(203, 217, 219), rgb(36, 85, 124));
}
</style>
<script>
// SheetDBから寒さの基準に基づく対応アクションを取得する
async function getColdActionsFromSheetDB(temperature) {
try {
// APIエンドポイント
const response = await fetch(`https://api.sssapi.app/TA89I-rQpMVT5795f0qLh`);
const data = await response.json();
// 温度範囲に一致するデータを検索
const matchingEntry = data.find(entry => {
return temperature >= parseInt(entry.min_temp) && temperature <= parseInt(entry.max_temp);
});
if (matchingEntry) {
// actionsが配列かどうか確認し、配列でない場合は空の配列に変換
const actions = typeof matchingEntry.actions === 'string'
? matchingEntry.actions.split(',')
: Array.isArray(matchingEntry.actions)
? matchingEntry.actions
: [];
return {
level: matchingEntry.level || "不明",
actions: actions
};
} else {
return {
level: "不明",
actions: ["該当するデータがありません"]
};
}
} catch (error) {
console.error("SheetDBエラー: ", error);
return {
level: "エラー",
actions: ["SheetDBのエラーが発生しました"]
};
}
}
// 気温に基づいて寒さ対策を取得して表示
async function getColdActions() {
const temperature = parseInt(document.getElementById('temperature').value);
if (isNaN(temperature)) {
alert("正しい気温を入力してください！");
return;
}
// SheetDBからの結果を取得
const result = await getColdActionsFromSheetDB(temperature);
// 結果を表示
document.getElementById('result').innerHTML = `
<h2>気温: ${temperature}°C</h2>
<h3>寒さレベル: ${result.level}</h3>
<h4>推奨アクション:${result.actions}</h4>
`;
}
</script>
</head>
<body>
<h1>寒さ対応アクションを取得</h1>
<h1>今日の気温を入力してください</h1>
<label for="temperature">気温 (°C):</label>
<input type="number" id="temperature" placeholder="例: -5">
<button onclick="getColdActions()">取得</button>
<div id="result"></div>
</body>
</html>
これで寒暖対策APIが回せるようになると思います！
今回はデザインは独自で考えてみましたのでとくに参考物はありません！皆さんもぜひ適当にいじって作ってみましょう！
今回作成したものはこのように表示されました！
最後に
今回「寒暖対策API」の作成を通して、コーディングのmachingEntryからAPIのデータの範囲を指定するところが難しいと感じました。
また、このコーディングの経験を通じてさらにAPIの内容を学ぶことができ、さらに自分の成長を感じる良い機会になりました。ぜひ皆さんもAPIをたくさん触ってみてください！
ここまで読んでいただきありがとうございました！
ぜひSSSAPIとGoogleSpredshhetぜひ皆さんも活用してみてください！
またどこかで会える機会がありましたら！
バイバーイ！