ども、椎原です。今回はbootstapを使って体裁を整えてみようかなと思いました。まださわり始めなので、ヘボデザインになってます。
あ、急いで言っときますが私にデザインセンスがないとかは断じて違いますっ！ 昔は画を描いてましたし、昔作ったゲームは画面デザインが素晴らしいという評価だったのでっ！ ツールに慣れないとどんなもんでも下手くそにみえるもんです。
と、汗だらだらの言い訳はさておき。
で、前回はお天気アプリを作ってみました。今度は天気をタイル状に表示してみることにします。
rrr2.html
<!doctype html>
<html lang="jp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-with, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="content-type" content="text/html; charset = UTF-8">
<title>My first Bootstrap-Vue app</title>
<link rel="stylesheet" href="rrrstyle2.css">
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />
</head>
<body>
<div id="app" style="text-align: center;">
<h1 class="test">都市のお天気概況</h1>
<p><button @click="rel" class="btn btn-success">更新</button></p>
<div class="container">
<div class="row">
<div class="bg-primary powderblue; col-sm-3 col-md-4 border rounded " v-for="i in [0,1,2,3,4]">
<p class="test">{{ citys[i].city }}</p>
<p class="test">{{ citys[i].condition.main }}</p>
<p class="test">{{ citys[i].temp | roundUp }}°C</p>
<br></br>
</div>
</div>
</div>
<script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="rrrapp2.js"></script>
</body>
</html>
bootstrapで悩んだのは上記のコード中の
<div class="bg-primary powderblue; col-sm-3 col-md-4 border rounded " v-for="i in [0,1,2,3,4]">
です。classとv-forを一緒に書いていいものなのか。col-smが思い通りにならなくて、骨組みだけにしてなんども試しました。一目で作成できるジェネレーターがありますので、これ使うといいでしょう。
そんなことより、むしろ、Vue.jsで悩みました。関数への呼び出しとか値渡しとかどうするか。その結果が、以下のjsです。
rrrapp2.js
var app1=new Vue({
el: '#app',
data: {
citys: [
{
city: 'Tokyo',
temp: null,
condition: {
main: null
}
},
{ city: 'Nagoya',
temp: null,
condition: {
main: null
}
},
{ city: 'Osaka',
temp: null,
condition: {
main: null
}
},
{ city: 'Fukuoka',
temp: null,
condition: {
main: null
}
},
{ city: 'Okinawa',
temp: null,
condition: {
main: null
}
}
],
},
mounted: function(){
this.rel();
},
methods: {
rel: function() {
for(let i = 0; i <= 4; i++){
axios.get('https://api.openweathermap.org/data/2.5/weather', {
params: { q: this.citys[i].city, APPID: 'eb03e077c1aa28e1b305xxxxxxxxxxxxxx'}
})
.then(function(response){
this.citys[i].temp = response.data.main.temp- 273.15
this.citys[i].condition = response.data.weather[0]
}.bind(this))
.catch(function(error){
console.log(error)
})
}
}
},
filters: {
roundUp(value){
return Math.ceil(value)
}
}
}
)
あ、APIキーは自分の取ってね。
データーはもろ、配列にすればよかったかなぁとおもいましたけど、これでいきます。
mountedフックとmethodsオプションは別物です。なんとなく似ているので区別がつきませんでした。mountedフックはライフサイクルで、最初にmethodsを呼び出します。ボタンを押されたらmethodsを呼び出します。
computeとmethodsは関数みたいなもので引数がないか、あるかとか微妙に違います。
これに落ち着くまで、v-forの変数iをどうやってjsに渡すか悩んだりしました。SPAなんだから最初に一気に変数書き換えちゃって、それをまとめて表示すればよかっただけでした。
cssは追加しただけで、むしろbootstapに頼っているところが大きいです。
rrrstyle2.css
body {
background-image: url(kumori_x.jpg);
/* background: #000; */
/* background-size: cover; */
}
.test{
font-size: 36px;
color: rgb(250, 250, 250);
}
以上です。
2021.01.02