👏
WebApiをいろいろ試したbyVue3(随時更新)
はじめに
WebApi試してみた。
データが取れたことを確認することが目的になります。
前提
環境
- axios
- vue3
- firebase cloud functions
事前準備
- 環境設定の説明は割愛
- 各APIはログインできる状態
内容
天気予報(OpenWeather)
- 参考サイト
https://openweathermap.org/current - vueコード
<template>
</template>
<script>
import { onMounted } from "vue"
import axios from "axios"
export default ({
setup () {
onMounted(()=>{
getWeather()
})
const getWeather=()=>{
axios({
url:'************', //←cloud functions httpリクエスト
method: 'get',
headers: {
},
params:{
}
})
.then((res)=>{
console.log('成功',res)
weatherData.value=res.data
})
.catch((e)=>{
console.log('失敗',e)
})
}
return {
getWeather
}
}
})
</script>
- cloud functionsコード
const functions = require("firebase-functions");
const axios =require('axios')
exports.weather=functions.https.onRequest(async (req,res)=>{
res.set('Access-Control-Allow-Origin', '*');
axios({
url:'https://api.openweathermap.org/data/2.5/weather',
method: 'get',
headers: {
},
params:{
q:'Osaka-shi',
appid:'***************', //←ApiKey入力
}
})
})
- 結果(console.log)
Google Maps API
<template>
<div>
<h1>Google Map</h1>
<div id="map" style="height:500px;width:800px;"></div>
</div>
</template>
<script>
import { onMounted,ref } from "vue"
export default ({
setup () {
const map = ref()
const apiKey = "*******" //←ApiKey入力
const script =document.createElement('script')
script.src= `https://maps.googleapis.com/maps/api/js?key=${apiKey}&v=weekly&language=ja®ion=JP`;
script.async=true
onMounted(()=>{
document.head.appendChild(script)
const timer =setInterval(()=>{
clearInterval(timer);
map.value = new google.maps.Map(document.getElementById("map"), {
zoom: 8,
center: { lat: 34.70207, lng: 135.5244804 },
})
},500)
})
return {
map,
}
}
})
</script>
- 結果
lineで送信
- 参考サイト:https://notify-bot.line.me/doc/ja/
- 事前準備
- https://notify-bot.line.me/ja/ より、ログインして、アクセストークンを取得 - vueコード
<template>
<button @click="submit">line送信</button>
</template>
<script>
import axios from "axios"
export default ({
setup () {
const submit=()=>{
axios({
url:"http://*********",
})
}
return {
submit
}
}
})
</script>
- cloud functionsコード
const functions = require("firebase-functions");
const axios =require('axios')
exports.lineSubmit=functions.https.onRequest(async (req,res)=>{
res.set('Access-Control-Allow-Origin', '*');
LINE_TOKEN='****************' //←アクセストークン入力
axios({
url:"https://notify-api.line.me/api/notify",
method:'post',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': `Bearer ${LINE_TOKEN}`,
},
params:{
message: '送信',
},
})
.then(()=>{
console.log('成功')
res.send('成功')
})
.catch((e)=>{
console.log('失敗',e)
res.end(e)
})
})
- 結果
lineに送信
Discussion