サムネ
スポンサーリンク

タイトルの通り、フリー素材の画像を提供してくれるAPIを使って、
自作の配列から2つのワードをランダムに取り出し、それらの組み合わせで画像を検索し、hitした画像の中からランダムに1つの画像を取得します。

使用するAPI

今回使用するのはpixabay.comが提供しているAPIで、無料です。

上記のURLから登録でき、仕様も確認することができます。

 

APIの仕様を簡潔に

 

APIから画像を取得

画像を受け取るには例えば、

https://pixabay.com/api/?key=13787747-8afd4e03ae250892260a92055&q=yellow+flowers&image_type=photo

このようなリクエストをAPI側に出します。

この場合、検索用語は「q=」以下の「yellow+flowers」になります。

 

API側からレスポンスが返ってくる

このリクエストに対してAPIが返すレスポンスが、以下のような辞書になります。

  • "total"  →    その検索ワードでpixabay.com内でhitした画像の総数
  • "totalHits"   → "total"のうち、APIがこちらに提供できる画像数(最大500件)
  • "hits"   →   その他の取得できる要素群を含んだ辞書名

その他の詳細は公式サイトで確認してください。

 

下準備(ワードを配列で準備)

WordsList.swift

検索をかけたいワードを集めた2つの配列をそれ用のファイルに作ります。

配列wordAから1つ、配列wordBから1つのワードをランダムに1つずつ選び、その2つのワードの組み合わせをAPIで検索します。

 

コードとUI

ではひとまず全体のコードとUIを載っけときます。

UI

4つのメソッドに分けて実装しました。一つずつ見ていきましょう。

 

getPixabayImages()メソッド

APIから画像を取得するメソッドです。

このメソッドでは、[String: Any]型の辞書parametersを定義しています。

キー値"key"にはユーザー独自のAPIキーが入った定数apiKey
キー値"q"には検索用語として語群の配列からランダムに値を取り出した組み合わせを
キー値"per_page"には数値の200をそれぞれ対応させています。

 

ひとつずつ説明します。

"key"に指定したAPIキーとは、各ユーザーに個別に与えられた「API側から画像を貰うのに必要な鍵」のようなもので、これが無いとAPIが利用できません。APIに登録すると確認できます。

"key"は必須のパラメータです。

APIキー

"q"には検索用の言葉を指定します。WordsList.Swiftの配列wordsAとwordsBからランダムに値を1つずつ取得しています。

.randomElement()を使うと配列からランダムに値を取り出すことができます。

"q"が無いと単語を指定して画像の検索が出来ないのでこちらも事実上必須のパラメータです。

 

"per_page"はデフォルトでは20に設定されています。つまり、画像が100件hitしたとしてもその内の20件しか取得できないということです。この問題は、"per_page"を最大値の200に指定することで解決します。

この辺のAPIのルール(仕様)はサイトで確認できます。

 

次です。

let headers:HTTPHeaders = ["Contenttype": "application/json"]ですが、これはAPI側に送るリクエストに対するAPI側から返ってくるレスポンスのフォーマットを指定しています。

「jsonで返してね」ということです。

 

次です。

self.fire(params: parameters, headers: headers)で次に書いているfireメソッドを呼んでいます。引数にparametersheadersを指定しています。

 

 

 

fire()メソッド

 

このメソッドではAlamofire.request()を使ってAPIにリクエストを出しています。

parameters: paramsparamsにはgetPixabayImages()メソッドの定数parametersが入り、headers: headersheadersにも同じくgetPixabayImages()メソッドの定数headersが入ります。

Alamofire.request()で出したリクエストに対するレスポンスの結果が、.responseData { (response) in }responseに入ってきます。

 

 

result()メソッド

このメソッドでは配列"hits"のcountを取得し、0件とそうでない場合で処理を分けています。

 

let json :JSON = JSON(response.data)

APIからのレスポンスのデータを定数jsonに代入します。

 

let totalHitsCount = json ["hits"].array?.count

jsonの配列"hits"の要素(検索してhitした画像)の数を定数totalHitsCountに代入します。

 

if totalHitsCount == 0 {
self.getPixabayImages()
return
}

検索結果が0件なら、もう一度getPixabayImages()メソッドを呼んでワードの組み合わせを変えて画像の取得を試みます。これを繰り返します。

 

switch response.result {
case .success:
guard let data = response.data else { fatalError() }
self.displayImage(data: data)
break

switc文でレスポンスのデータの取得が成功した時と失敗した時とで処理を分岐します。

成功した場合、response.dataに値があるなら定数dataに代入します。

そしてodaiImageViewに画像を反映するdisplayImage() メソッドの引数にdataを渡して呼びます。

 

失敗した場合はエラーを出します。

 

 

displayImage()メソッド

 

totalHitsCountからランダムの数値を出し、totalHitsCount番目の画像を取得してodaiImageViewに反映するメソッドです。

let json :JSON = JSON(data as Any)

APIからのレスポンスのデータを定数jsonに代入します。

 

let totalHitsCount = json ["hits"].array?.count

jsonの配列"hits"の要素(検索してhitした画像)の数を定数totalHitsCountに代入します。

 

let totalHitsRandomNumber = Int.random(in: 0..

totalHitsCountからランダムな数字を拾い、その数字を定数totalHitsRandomNumber に代入します。

 

guard let imageString = json ["hits"][totalHitsRandomNumber]["webformatURL"].string else { return }

jsonの配列"hits"totalHitsRandomNumber目の要素の"webformatURL"(画像を表すURL)を定数imageStringに代入します。

 

self.odaiImageView.sd_setImage(with: URL(string: imageString), completed: { (image, err, cacheType, url) in
print(err?.localizedDescription as Any)

取得した画像を、大喜利のお題を表示するImageView(odaiImageView)にセットします。

 

最後に、UIの「次へボタン」を押した時にgetPixabayImages()を呼びます。

これで完成になります。

Swift(iOS)が学べるオンラインスクール ランキング
CodeCamp
CodeCamp
7〜24時まで授業可能で働きながらでも学べる!!
料金
講師の質
コースの種類
転職サポート
ポイント1エンジニア経験2年以上のベテラン講師によるオンライン授業
講師は全員が現役のエンジニアで、他のスクールによく見られるアルバイト講師ではありません。マンツーマン指導で自分のレベルにあったカリキュラムが組め、満足度も高いです。また、自社開発企業への転職指導にも定評があります。

ポイント2無料レッスン体験&無料受講相談で事前に話が聞ける
事前にレッスンを体験して授業の雰囲気や学習ペースを確認できます。またエンジニア転職を目指す方にはどのコースが向いているかなどが聞けるカウンセリング(受講相談)も無料。エンジニアの生の声が聞けるので自分が働き出した時のことをイメージできます。

TechAcademy

授業型ではなく自習型なので自分のペースで学べる
料金
講師の質
コースの種類
転職サポート
ポイント1自習スタイルでチャット質問は何回でも無料
自分の分からないところを質問するスタイルなのでわかるところはサクッと、わからないところはじっくりと、無駄なく学べます。チャットの質問が無料なので、料金を気にせず何回でも聞けます。また、メンターがつくのでカウンセリングで学習の進捗やモチベーションの管理もしてくれます。
ポイント21週間の無料体験と無料カウンセリング、安心の返金制度も
無料体験の期間は1週間もあり、納得してから契約できるので安心です。事前の無料カウンセリングでは、その人にあったアドバイス等をもらうことができるので気軽に活用しよう。転職保障コースの場合、転職できなかったら全額返金!!
侍エンジニア塾
プログラミングスクールの老舗NO.1
料金
講師の質
コースの種類
転職サポート
ポイント1歴史があるからノウハウも豊富
日本で初めてオンラインのマンツーマンレッスン指導を導入した実績十分のスクール。講師も現役エンジニアでメンタリングもあるため転職のサポートも手厚く、面接対策や自己PRのフィードバックまで対応してくれます。

ポイント2転職成功率94.1%、挫折率8%
コースによっては転職成功で受講料が0円に!!  絶対にエンジニアになりたいという意思があれば超低額で転職できます。事前の無料体験で相談も可能なため、まずは話だけ聞いてみるのもあり。

おすすめの記事