こんにちは。椎原です。弊社ではAmazon IVSを使ってライブ配信のアプリを作っているのですが(2020/11)、今作っているのとは別に、APIを使ってサービスを展開できないか検討中です。
APIそのものは協力会社さんに作って貰っています。それを使ったアプリをフロントエンドで開発できないかと。Blade、Angular、Reactを検討してみたところ、学習コストが低いVue.jsが有力となりました。
で、私も本を読んだりして、勉強してみました。
簡単に、APIを叩けるものは……そうだ。天気情報サービスを使おうと思いましたのですよ。
ググってみるとよさげなサイトが。
コピペするだけかと思いきや、仕様で一都市しか出てこない。都市名URLに埋め込みなんです。セレクトボックスで選択できるようにするでしょ、フツー。
というわけで、作ってみたのが今回のアプリ。半分ぐらい改造しました。背景とか天気によって変えたかったのですが、HTMLとCSSの知識があんまりないので固定。まあ、実際のアプリ作成時は弊社にデザイナーさんがいるので大丈夫でしょう……。今回はVue.jsでAPI叩くのが目的です。
じゃあ、相違点を
- 都市名をセレクトボックスで選択できるようにした。
- DOMという技術で変数が変わったらHTML側に反映されるようになるので、ライフサイクルフックをbeforeUpdateにした(updatedとどう違うのか理解してません)。そんなこと買った本には載ってなかったので、しばらく悩みました。
- 元サイトにCSSが無かったので、自作。
できたサンプルはこちらからどうぞ。

rrr.html
<head> <meta charset="utf-8"> <link rel="stylesheet" href="rrrstyle.css"> </head> <body> <div id="app" style="text-align: center;"> <h1 class="test">都市のお天気概況</h1> <select v-model="city"> <option disabled value="">天気を見たい都市を指定してください</option> <option>Tokyo</option> <option>Osaka</option> <option>Fukuoka</option> <option>Okinawa</option> </select> <div class="weather_info"> <p v-bind:class="{'test': isON}">{{ city }}</p> <p v-bind:class="{'test': isON}">{{ condition.main }}</p> <p v-bind:class="{'test': isON}">{{ temp | roundUp }}°C</p> </div> </div> <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="rrrapp.js"></script> </body>
rrrapi.js
// var app = new Vue({ new Vue({ el: '#app', data: { city: null, temp: null, condition: { main: null }, isON: true }, beforeUpdate: function(){ axios.get('https://api.openweathermap.org/data/2.5/weather', { params: { q: this.city, APPID: 'xxxxxxxxxxxxxxxxxxxxxxxx'} }) .then(function(response){ this.temp = response.data.main.temp- 273.15 this.condition = response.data.weather[0] }.bind(this)) .catch(function(error){ console.log(error) }) }, filters: { roundUp(value){ return Math.ceil(value) } } })
rrrstyle.css
body { background-image: url(kumori.jpg); background-size: cover; } .test{ font-size: 36px; color: rgb(255, 250, 250); }
コメントを書く