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

• 参考
  https://developers.google.com/maps/documentation/javascript/overview?hl=ja#maps_map_simple-javascript
• vueコード

<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&region=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に送信