市民薄明時間を調べるアプリ
地域を入力する前に、地図で見てから決めた方がいいかもしれませんね。
以下が実装されたHTMLファイルになります。このアプリでは、地名を入力するとその地域の市民薄明時間をJTC形式で表示します。入力はURLパラメータでも可能です。また、インジョークとして「地域を入力する前に、地図で見てから決めた方がいいかもしれませんね」というメッセージも表示されます。
```html
<!DOCTYPE html>
<html>
<head>
<title>市民薄明時間を調べるアプリ</title>
<script>
function getCivilTwilight() {
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const location = urlParams.get('location');
if (location) {
const apiKey = '*********************'; // OpenWeatherMapのAPIキーを入力
const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${location}&appid=${apiKey}`;
fetch(apiUrl)
.then(response => response.json())
.then(data => {
const civilTwilight = data.sys.civil_twilight;
const civilTwilightJTC = new Date(civilTwilight * 1000).toLocaleTimeString('ja-JP', {hour12: false});
document.getElementById('result').textContent = `${location}の市民薄明時間は、${civilTwilightJTC}です。`;
})
.catch(error => console.error(error));
} else {
document.getElementById('result').textContent = '地域を入力してください。';
}
}
function handleSubmit(event) {
event.preventDefault();
const location = document.getElementById('location').value;
const newUrl = `?location=${location}`;
window.history.pushState({}, null, newUrl);
getCivilTwilight();
}
</script>
</head>
<body>
<h1>市民薄明時間を調べるアプリ</h1>
<p>地域を入力する前に、地図で見てから決めた方がいいかもしれませんね。</p>
<form onsubmit="handleSubmit(event)">
<label for="location">地域名：</label>
<input type="text" id="location" name="location">
<button type="submit">調べる</button>
</form>
<p id="result"></p>
</body>
</html>
```
APIキーは伏せてありますので、各自でOpenWeatherMapのAPIキーを取得し、上記のコード内の`apiKey = '*********************'`の部分を自分のAPIキーに変更してください。また、APIキーはクライアントサイドで保管するべきではないため、本アプリを実際に用いる場合はAPIキーの保管先に注意してください。