🎃

Ajax/外部API

2023/09/14に公開

Ajaxとは

Ajaxは簡単に説明するとJavaScriptを使って、非同期にサーバー間での通信を行うことです。
たとえば、TwitterやFacebookで「いいね」ボタンを押すと画面遷移せずに表示が変わります。
このような「非同期通信」では、サーバにリクエストを送ったときに、サーバからの結果を待たずに画面が書き換えられます。

Ajaxの仕組み

Ajaxは以下のような流れで行われます。

イベント（ボタンのクリックなど）がクライアント側で発生する。
「WEBAPI」を使って、サーバにリクエストを送信する（非同期通信）。
リクエストされた情報の処理をサーバ側で行う。
処理の結果を、「JSON」形式でクライアントに送信する。
レスポンスの結果でページが更新される。

Web APIとは

まずAPIとはサービス提供者がそのサービスを利用するためのインタフェースです。
「Web API」は、WebサーバやWebブラウザ用のAPIです。
AmazonやGoogleなどがサービスを公開しており、Web APIを利用することでAmazonの商品情報を表示させたり、Googleマップをサイト内に表示させたりできます。

JSONとは

JSON（JavaScript Object Notation）は、テキストベースのデータ交換フォーマットです。
クライアントとサーバ間で「リクエストとレスポンス」を行うには、クライアント（人間）もサーバ（マシン）も互いに理解できるデータ形式にする必要があります。
その際に利用されているのが、JSONです。

「OpenWeatherMap」でプログラムを作成

今回は、特定の都市の天気予報を取得できる無料のAPIサービス「OpenWeatherMap」を使用して天気予報が表示されるようにします！

APIキーを取得する

「APIキー」は、そのAPIの使用に必要な認証用の鍵です。
取得方法は以下の通りです。

OpenWeatherMapにアクセスし、「Sign UP」をクリックする
ユーザ登録を行う
タグの中のAPI keysをクリックしてAPIキーを取得する
「Key」をコピーする

この「APIキー」が取得できれば公式サイトでの作業はOKです。
ついでにこのWEBAPIが利用できるか確認しておきます。
以下のURLにアクセスして情報が取得できるか確認します。
＊事前にGoogleChromeのJSONを整形してくれるプラグインJSONViewをインストールしています。
https://api.openweathermap.org/data/2.5/weather?q=tokyo&units=metric&appid=取得したAPIキー

ちなみに、私は新規登録してすぐアクセスしたので、表示されないエラーが発生してしまったのですが、ただ反映に時間がかかっていただけみたいで少し時間をおいたらアクセスできました。

HTMLに検索フォームを作成する

index.htmlファイルを作成して検索するための枠組みと検索結果を表示できるようにします。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>世界の天気</title>
  </head>
  <body>
    <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>
    <script src="jquery.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

spanタグにidを指定してAPIから取得した値を表示できるようにしておきます。

Ajaxを実装する

script.jsファイルを作成して、検索ボタンがクリックされたときの処理を記述します。
空欄部分にはあとで天気情報を取得する処理を記述します。

script.js

$(function(){
  $('#btn').on('click', function() {

  });
});

次に天気情報を取得する処理を記述します。

script.js

// （API_KEY には、"取得したAPIキー" を記述）
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',
    })  });
});

$.ajax()は、Ajaxを実装するメソッドです。
オプション（パラメータ）も設定できます。今回は、urlとdataTypeの2つを設定しています。

url：APIにリクエストするURLを指定
dataType：レスポンスとして取得したいデータの型を指定

$('#cityname').val()で#citynameの値を受け取り、URLを結合させています。（val()は、HTMLのvalue属性を取得するメソッド）

最後に通信が成功したときと失敗したときに行う処理を記述します。

// （API_KEY には、"取得したAPIキー" を記述）
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('通信に失敗しました。');      });
  });
});

順番に説明していくと、
.done()は通信に成功した場合、.fail()は失敗した場合に記述するメソッドです。
それぞれの処理に天気情報を表示する場合と通信に失敗する場合を記述します。
$('#id名').text(JSONから欲しい値)の形で指定すると、指定したidのテキストを、JSONから受け取った値に変換されます。

たとえば、最高気温（temp_max）を取得したい場合は、"data.JSONのオブジェクト名.プロパティ名"で取得しています。

Googleサービスを利用するには

基本的な流れは「OpenWeatherMap」と一緒ですが、認証するためにすることが多いみたいです。
大まかには

Googleアカウントの用意
プロジェクトの用意
APIを有効化
OAuth同意を構成
アクセス認証情報を作成

とりあえず流れだけは知っておきたくて調べてみました！
ポートフォリオに導入できそうなサービスがあればチャレンジしてみようと思います。
図解が多くてとてもわかりやすく解説してくれているサイトがあったので参考に張っておきます。

まとめ

明日はハローワークとか証明写真とか外でやらないといけない用事が盛りだくさんなので、隙間時間を作りたいと思います、、、。
こっそりとGitHubの草を毎日はやす計画を実行中なので継続学習意識！！