WEB制作

Vue.jsを使って天気ウィジェットを実装してみました

 

こんにちは、寿研究所のすぎです。

TOPページで天気を確認できるようにしてほしい

社内からこんな要望が！

ChatGPTをフル活用して実装してみました。

最近Vue.jsの勉強をしています。

せっかくなのでVue.jsを使って天気ウィジェットを実装していく方法をご紹介します。

この記事では、OpenWeatherというAPIサービスを利用して、世田谷区の天気を表示するウィジェットを作成していきます。

YouTubeではより詳細に説明しておりますのでぜひチェックしてみてください。

天気ウィジェットの概要

まず、今回の天気ウィジェットは、OpenWeatherという無料のAPIサービスを利用して、指定した地域（今回は世田谷区）の天気情報を表示します。APIキーを事前に取得し、それを使ってデータを取得します。

OpenWeatherからAPIキーを取得

  1. OpenWeatherの公式サイトにアクセスし、アカウントを作成します。
  2. アカウントを作成したら、APIキーを発行します。このAPIキーを使って、天気情報を取得するリクエストを行います。

HTMLでの天気情報の表示

最初に、HTMLを使って天気情報を表示する方法を試しました。以下は、天気情報を表示する簡単なHTMLコードです。

<div id="app">
<p>天気: Clear Sky</p>
</div>

 

この段階では、天気の情報が英語で表示されていたため、次に日本語化するためのコードを追加しました。

Vue.jsでの天気ウィジェットの実装

HTMLで基本的な表示が確認できた後、今回はVue.jsを使って、天気ウィジェットを実装しました。以下は、Vue.jsでの天気ウィジェットの基本的な構造です。

Vue.jsでの基本的なコード

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<div id="app">
<p>{{ weather }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
weather: 'Clear Sky'
}
});
</script>

このコードでは、weatherというデータプロパティに天気情報を格納し、Vue.jsでリアルタイムに表示しています。

天気アイコンの追加

OpenWeatherは、天気に応じたアイコンも提供しています。そこで、天気アイコンを表示するために、以下のようなコードを追加しました。

<img :src="`http://openweathermap.org/img/wn/${icon}.png`" alt="Weather Icon">

 

アイコン名を動的に設定することで、天気に応じたアイコンが表示されます。

デザインの改善

天気ウィジェットをよりおしゃれにするために、CSSでデザインを調整しました。背景を暗くし、夜の雰囲気を演出するスタイルに変更しました。

#app {
  background-color: #2c3e50;
  color: white;
  padding: 20px;
  border-radius: 10px;
}


気温表示の改善

気温が小数点で表示されていたため、整数にするコードも追加しました。

computed: {
  roundedTemperature() {
    return Math.round(this.temperature);
  }
}

これで、表示される気温が整数になり、より見やすくなりました。

WordPressへの実装

最後に、この天気ウィジェットをWordPressに組み込む方法について説明します。Vue.jsのスクリプトをWordPressテーマに追加し、天気ウィジェットを表示します。CSSの調整や配置の問題が発生しましたが、ChatGPTで解決策を見つけ、うまく表示できるようにしました。

今回は以上です。ご覧いただきありがとうございました。

RELATED POST