初めに
vue.jsを初めて使用してアプリを作ってみました。ボタンをクリックすると各地域のリアルタイム天気が表示される予定でした。
作ったもの
長野県のボタンのみ実装された長野地域限定のWEBアプリが完成？しました。長野県の現在の様子を画像と共に教えてくれます。
使用したフレームワーク・ライブラリ
Vue.js
axios
bootstrap
OpenWeatherMap API
デモ
無料の天気予報APIでWEBアプリを作りました。リアルタイムで長野の天気がわかります。#protoouthttps://t.co/PkSGddeAyU https://t.co/SHlSgotm8V pic.twitter.com/8uY0q5OfHX
— Toshiki (@Hirasawa1987) August 5, 2020
ディレクトリ構成図
root/
├ img/
│ ├ Rain.png
│ ├ cloudy.jpg
│ └ sunny.jpg
├ app.js
├ index.html
└ style.css
ソースコード
index.html
<!DOCTYPE html>
<html>
<head>
<title>Nagano weather</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>
<body>
<div id="app" class="weather_box">
<button v-on:click="upCount" type="button" class="btn btn-outline-primary">長野</button>
<div class="weather_info">
<ul v-if="city" id="samp">
<li>{{ city }}</li>
<li>{{ condition.description }}</li>
<li>{{ temp }}°C</li>
</ul>
</div>
<p v-if="condition.main == 'Rain'"><img src="img/Rain.png" alt="Rainy"></p>
<p v-else-if="condition.main == 'Clouds'"><img src="img/cloudy.jpg" alt="Cloudy"></p>
<p v-else-if="condition.main == 'Clear'"><img src="img/sunny.jpg" alt="Sunny"></p>
</div>
<div class="twitter"></div>
<a href="https://twitter.com/Hirasawa1987?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @Hirasawa1987</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<script src="app.js"></script>
<link href="style.css" rel="stylesheet">
</body>
</html>
style.css
ul {
list-style: none;
}
.weather_box {
position: relative;
}
.weather_box ul {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
margin-top: 10px;
margin-bottom: 10px;
padding:0;
font-size: 60px;
line-height: 3;/*行高は1に*/
font-family: sans-serif;
font-weight: bold;
color: #000;
-webkit-text-stroke: 1px #FFF;
}
.weather_box img {
width: 100%;
}
.twitter{
margin-top: 10px;
}
app.js
const app = new Vue({
el: '#app',
data: {
city: null,
temp: null,
condition: {
main: null
}
},
methods: {
upCount: async function (event) {
let response;
try {
response = await axios.get(
'https://api.openweathermap.org/data/2.5/weather?q=Nagano,jp&units=metric&lang=ja&appid= APIkey '
);
this.city = response.data.name
this.temp = response.data.main.temp
this.condition = response.data.weather[0]
this.iconPath = `img/${response.data.weather[0].icon}.svg`;
} catch (error) {
console.error(error);
}
},
},
});
参考にした記事・サイト
APIを使用する際に参考にさせていただきました。
無料天気予報APIのOpenWeatherMapを使ってみる
vue.jsを書く際に参考にせていただきました。
Vue.jsを100時間勉強して分かったこと
お天気アプリで学ぶVue.jsのAPI連携
ありがとうございました。
反省点
自分の作りたかったアプリがあったので、理想と現実に劣等感を感じました。
今回は長野限定になってしまった。
とりあえず動いたこととアウトプットできたことを良しとしたいと思います。