Zenn
👑

Ajaxで天気を表示する(API)

2023/10/24に公開
Rails
API
JavaScript
プログラミング初心者
tech

この記事でわかること

  • APIの取得方法
  • Ajaxについて

前提条件

  • jQueryの導入済み

導入方法は以下の記事で解説
https://zenn.dev/tya0116/articles/e847b23e6a4ca3

よろしくお願いします。

APIとは

APIは、データの共有や機能の利用を可能にし、異なるアプリケーションが協力して動作できるようにします。簡単に言えば、APIはプログラム同士のコミュニケーションを可能にします。
例えば、LINEでChatGPTを使えるサービスを作りたいならば、LINEでChatGPTのAPIを取得することで実現できます。

Ajaxとは

例えば「X(Twitter)」でフォロワーのツイートを「いいね」したとしましょう。このとき、「X」を開くときのような通信は発生せず、ハートマークだけが変化すると思います。

このようにページを更新ぜずとも、リアルタイムでデータを読み込めるようにするために使用します。またAjaxはJavaScriptを使って動き、データはXMLまたはJSON形式で受け渡されます。

【Ajaxの動き】

  • クライアントでイベントが発生します。（ex: ボタンクリック）
  • クライアントはサーバに非同期リクエストを送ります。
  • サーバはリクエストを処理し、結果をJSON形式で返します。
  • クライアントは結果を受け取り、ページを動的に更新します。

実装手順

実装手順は以下の手順で行います。

  1. APIの登録
  2. Viewの作成
  3. JS(Ajax)の作成

実装方法

APIの登録

以下のサイトにアクセスしてアカウントを作成します。

https://openweathermap.org/

メール認証を終えたら完了です。

Viewの作成

今記事で実装する背景は以下の通りです。

  • railsでの実装
  • deviceが実装済み
  • jQueryがインストール、設定済み

表示させたいViewに以下のコードを記述します。

users/show
<h1>ようこそ<%= @user.name %>さん</h1>

<h3>日本の天気</h3>
    <label>都市名：</label>
    <input id="cityname" type="text" size="14" maxlength="14" placeholder="Tokyo">
    <button id="btn">検索</button><br>
    <span>場所 :</span>
    <span id="place"></span><br>
    <span>最高気温 :</span>
    <span id="temp_max"></span>
    <span> ℃</span><br>
    <span>最低気温 :</span>
    <span id="temp_min"></span>
    <span> ℃</span><br>
    <span>湿度 :</span>
    <span id="humidity"></span>
    <span> %</span><br>
    <span>風速 :</span>
    <span id="speed"></span>
    <span> m/s</span><br>
    <span>天気 :</span>
    <span id="weather"></span>
    <div id="icon"><img id="img"></div>
解説(idの設定について)

このIDの名前や設定は以下が理由です。
(https://api.openweathermap.org/data/2.5/weather?q=tokyo&units=metric&appid=取得したAPIキー)で検索します。

{"temp":18.6,"feels_like":17.85,"temp_min":17.01,"temp_max":19.79,"pressure":1019,"humidity":51},"visibility":10000,"wind":

上記は検索結果の一部を抜粋したものです。上記を確認すると("temp_max":19.79)と表示されています。これは最高気温が19.79という意味で、これをID設定して自身のブラウザに反映させます。

    "temp_max":19.79の記載を反映
    <span>最高気温 :</span>
    <span id="temp_max"></span>

この作業を全項目繰り返したものが完成したコードです。

JS(Ajax)の作成

今回はAjaxのコードは、先程のViewファイルと同じファイルに記述しました。

users/show
<h1>ようこそ<%= @user.name %>さん</h1>

## 天気のView
	
<script>
const API_KEY = "取得したAPIキー";

$(function(){
  $('#btn').on('click', function() {
    // 入力された都市名でWebAPIに天気情報をリクエスト
    $.ajax({
      url: "https://api.openweathermap.org/data/2.5/weather?q=" + $('#cityname').val() + "&units=metric&appid=" + API_KEY,
      dataType : 'jsonp',
    }).done(function (data){
      //通信成功
      // 位置
      $('#place').text(data.name);
      // 最高気温
      $('#temp_max').text(data.main.temp_max);
      // 最低気温
      $('#temp_min').text(data.main.temp_min);
      //湿度
      $('#humidity').text(data.main.humidity);
      //風速
      $('#speed').text(data.wind.speed);
      // 天気
      $('#weather').text(data.weather[0].main);
      // 天気アイコン
      $('img').attr("src","http://openweathermap.org/img/w/" + data.weather[0].icon + ".png");
      $('img').attr("alt",data.weather[0].main);
    }).fail(function (data) {
      //通信失敗
      alert('通信に失敗しました。');      });
  });
});
</script>
解説
$(function(){
$('#btn').on('click', function() {

btnIDで設定した検索をクリックすると以下の処理をしてください

$.ajax({
      url: "https://api.openweathermap.org/data/2.5/weather?q=" + $('#cityname').val() + "&units=metric&appid=" + API_KEY,
      dataType : 'jsonp',

$.ajaxでjQueryを介してAjaxのリクエストを行います。
url プロパティは、OpenWeatherMap APIに向けたリクエストのURLを指定します。
$('#cityname').val()は、idが "cityname" のHTML要素からユーザーが入力した都市名を取得します。

url プロパティは、OpenWeatherMap APIに向けたリクエストのURLを指定します。$('#cityname').val()は、idが "cityname" のHTML要素からユーザーが入力した都市名を取得します。そして、API_KEYはOpenWeatherMapのAPIキーです。ここでは、都市名、温度単位（摂氏）、およびAPIキーをURLに結合しています。

dataType プロパティは、Ajaxリクエストで受信するデータの形式を指定します。ここでは 'jsonp' と指定されており、JSONPというデータ形式を指定しています。JSONPはクロスドメインリクエストの一種で、異なるドメインからデータを取得できるようにするための手法です。

このコードは、ユーザーが入力した都市名を含むURLを作成し、OpenWeatherMap APIに対してリクエストを送信し、APIからの応答を受け取るためのものです。リクエストが成功すると、APIからの天気情報が取得され、その情報を使用してWebページ上に表示できます。

dataTypeでは、レスポンスとして取得したいデータの型を指定します。今回はJSONで受け取りたいので、 dataType : 'jsonp',と記述します。

.done(function (data){
.fail(function (data) {

上記は通信が成功した場合と失敗した場合で、処理内容を場合わけしています。

dataTypeプロパティ(種類)

'json': サーバーからのレスポンスがJSON形式である場合に適しています。JSONデータはJavaScriptオブジェクトに変換されます。

'xml': サーバーからのレスポンスがXML形式である場合に適しています。XMLデータはパースされます。

'html':サーバーからのレスポンスがHTMLである場合に適しています。

'text': サーバーからのレスポンスがプレーンテキストである場合に適しています。

'script': これは、JavaScriptコードを含むレスポンスを受信するために使用されます。外部のJavaScriptファイルをロードしたり、動的に実行したりするのに役立ちます。

まとめ

以上で今記事を終了します。Ajaxの知識を深められて楽しかったです。

Discussion