LoginSignup
1
3

More than 1 year has passed since last update.

その① Swift OpenWeatherAPI 天気情報APIを取得して表示

Last updated at Posted at 2021-04-22

API情報をJSON式で表示すると見やすくて快適ですよね!
今回は「OpenWeather」のAPI(無料)を使用したコードを書いてみました。

制作理由
「明日雨が降るので服装は〜、交通手段は〜」などといった天候に応じての提案を前日に通知してくれれば便利だなと思って、天気APIとユーザー通知を組み合わせたIOSアプリを制作することにしました。

環境
Swift version 5.3
Xcode Version 12.0.1 (12A7300)

目的
1. OpenWeatherのAPIを場所を指定し取得、天気情報を表示
2. 現在時刻だけではなく、翌日の天気情報も同様に取得&表示できるようにする
3. APIで組み込んだ天気情報をユーザー通知で前日に通知できるようにする

手順
① Podfileに書き加え: AlamofireとSwiftyJSONライブラリをダウンロード
② workspaceからxcodeを開き、Alamofire、JSONライブラリをインポート
③ 地域毎の天気情報を取得できるようにコードを書き、ピッカーで動的に表示できるようにする

それでは早速取り掛かっていきましょう!

① Podfile書き換え
まずはXcodeを開き、アプリを作成します
とりあえず名前を付けるだけです。

次にFinderから先ほど作成したアプリのフォルダにアクセスし、同フォルダ内のPodfileを開きます。
Podfileの確認用スクショ.jpg

Podfileを書き換えられるので、以下の二行を付け加えます。

 pod 'Alamofire', '~> 5.2'
 pod 'SwiftyJSON', '~> 4.0'  

数字はバージョン名なので、順次最新のものをダウンロードすることを推奨します

Alamofireの最新ソースコード: https://github.com/Alamofire/Alamofire
SwiftyJSONの最新ソースコード:
https://github.com/SwiftyJSON/SwiftyJSON

上記リンクのGitHubソースコードから最新バージョンを確認しましょう

Alamofireの最新バージョン
Alamofireの最新バージョン確認用スクショ.jpg

SwiftyJSONの最新バージョン
SwiftyJSONの最新バージョン確認用スクショ.jpg
※上記は2021年1月時点での最新バージョンです

② workspaceからxcodeを開き、Alamofire、JSONライブラリをインポート

ここからXcodeでの作業です。
Finderからworkspaceを開く必要があるので、下のスクショ通りに開いてください
*projectで開くとインポートしたライブラリが使えないため
workspaceの確認用スクショ.jpg

次にAPIを取得するSwiftファイルに以下の二文を書き込みましょう

  import UIKit
+ import Alamofire
+ import SwiftytJSON

storyboardにcomponentから最低限度の機能(textFieldとbutton)をドラッグ&ドロップして制約を設定しましょう。

API情報が正確に取得できるかターミナルで確認します(事前にブラウザでも確認)

let apiKey = "(あなたのAPIキーをStringで書いてください)"
func getWeather(){
let baseURL = "https://api.openweathermap.org/data/2.5/
weather?appid=\(apiKey)&q=tokyo"
print baseURL
}

以上のコードで東京の天気情報のAPIが取得できたかターミナルで確認できます
取得、もしくはビルドできない場合は、①URLの間違い、②APIKeyの間違い、③ネットに繋がっていない、のどれかが原因なのでチェックしましょう。

以上APIの取得についてでした。
続きはStoryboardでの作業になります!

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3