Skip to main content

お天気

目標#

今月のお天気を取得して、アイコンを表示しよう

サンプルコード#

  1. HTMLのコードを、Glitchの index.html に追加しよう！
<h2>明日の天気</h2><div id="whether_icon"></div>

2.CSSのコードを、Glitchの style.css に追加しよう！#

#whether_icon {    text-align: center;    margin: 0 auto;    color: orangered;}

3.JavaScriptのコードを、Glitchの script.js に追加しよう！#

まずは、以下のリンクをクリックしてみましょう！！

https://www.jma.go.jp/bosai/forecast/data/forecast/130000.json

天気の情報がずらっと見えましたか？これは、気象庁が更新している情報です。 このデータをもらって、上手に自分のウェブサイトに表示することに挑戦してみましょう！！

ここから下のコードは、受け取ったデータを表示できる形に変換しています！

const WEATHER_FORECAST =    "https://www.jma.go.jp/bosai/forecast/data/forecast/130000.json"
fetch(WEATHER_FORECAST)    .then(function (response) {        return response.json()    })    .then(function (weather) {        let tokyo = weather[0].timeSeries[0].areas[0]        // tokyo.weathers: [今日, 明日, 明後日]の天気        // tokyo.winds: [今日, 明日, 明後日]の風向き        // tokyo.waves: [今日, 明日, 明後日]の風速
        // 画面に書き出す        console.log(tokyo.weathers[1])        console.log(tokyo.weathers[1].split(" "))        get_weather(tokyo.weathers[1])    })
function get_weather(weather_txt) {    let icon_area = document.getElementById("whether_icon")
    if (weather_txt === "晴れ") {        icon_area.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-sun" viewBox="0 0 16 16">        <path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>      </svg>`    }    // (TRY!)else if(条件) {} で新たな条件とsvgファイルを追加しよう    else if (/* weather_txtが????だったら */) {        icon_area.innerHTML = `svgのコード`    } else {        // その他        // サイズの変更：width="50" height="50" の数字を変える        // 色の変更：fill="currentColor" のcurrentColorの部分を色の名前(か色コードに変える)        icon_area.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-cloud-moon" viewBox="0 0 16 16">        <path d="M7 8a3.5 3.5 0 0 1 3.5 3.555.5.5 0 0 0 .625.492A1.503 1.503 0 0 1 13 13.5a1.5 1.5 0 0 1-1.5 1.5H3a2 2 0 1 1 .1-3.998.5.5 0 0 0 .509-.375A3.502 3.502 0 0 1 7 8zm4.473 3a4.5 4.5 0 0 0-8.72-.99A3 3 0 0 0 3 16h8.5a2.5 2.5 0 0 0 0-5h-.027z"/>        <path d="M11.286 1.778a.5.5 0 0 0-.565-.755 4.595 4.595 0 0 0-3.18 5.003 5.46 5.46 0 0 1 1.055.209A3.603 3.603 0 0 1 9.83 2.617a4.593 4.593 0 0 0 4.31 5.744 3.576 3.576 0 0 1-2.241.634c.162.317.295.652.394 1a4.59 4.59 0 0 0 3.624-2.04.5.5 0 0 0-.565-.755 3.593 3.593 0 0 1-4.065-5.422z"/>      </svg>`    }}

4.(TRY!) と書いてある箇所を書き換えて、コードを完成させよう！#

天気予報は、以下の予報が多いです

  • 晴れ
  • くもり
  • 雨
  • 晴れ　時々　くもり

それぞれ、どの予報だったらどの画像を表示するか、コードを書いてみましょう！

別の地域の天気を表示#

東京以外の天気も知りたいですね！

const WEATHER_FORECAST =    "https://www.jma.go.jp/bosai/forecast/data/forecast/130000.json"

script.jsに書いた内容の中には、上のようなリンクが書いてあります。

実は、ここの130000.jsonの番号で、どの地域のデータがほしいかを指定しています！！ぜひ、他の地域の番号変えてみましょう！

他の地域の番号は、こちらの表を参考にしてください！

画像の探し方#

ここで表示するアイコンは、このサイトがおすすめです！このサイトの好きなアイコンを選んでクリックすると、以下の画面になります

ここの、「HTMLをコピー」にある、コピーマークをクリックしましょう！

コピーできたはずなので、あとはscript.jsの適切な位置にペーストすればOK!

ヒント#

Hacking-Timeでやった、if文の書き方を参考にしてみよう