【API連携編】Qiitaクライアントアプリを作ろう

$ vim Cartfile

github "Alamofire/Alamofire" "4.8.2"
github "kean/Nuke" "7.6.3"

$ carthage update --platform iOS

/usr/local/bin/carthage copy-frameworks

$(SRCROOT)/Carthage/Build/iOS/Alamofire.framework
$(SRCROOT)/Carthage/Build/iOS/Nuke.framework

[
    {
        title: "title",
        url: "https://xxx"
        user: {
            id: "user_id"
            profile_image_url: "https://yyy"
        }
    }
]

import Foundation

struct QiitaUser: Codable {
    let id: String
    let imageUrl: String // ①

    enum CodingKeys: String, CodingKey {
        case id
        case imageUrl = "profile_image_url" // ②
    }
}

import Foundation

struct QiitaArticle: Codable {
    let title: String
    let url: String
    let user: QiitaUser // ⓵
}

import UIKit
import Alamofire // ➀importの追加

class ViewController: UIViewController {

    @IBOutlet weak var tableView: UITableView!
    private var articles: [QiitaArticle] = [] // ②取得した記事一覧を保持しておくプロパティ

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.dataSource = self
        tableView.delegate = self

        let nib = UINib(nibName: "QiitaTableViewCell", bundle: nil)
        tableView.register(nib, forCellReuseIdentifier: "QiitaTableViewCell")
        tableView.rowHeight = 80
        loadQiita() // 関数呼び出し
    }

    // loadする関数の定義
    private func loadArticles() {
        // ③Qiita APIを叩く
        Alamofire.request("https://qiita.com/api/v2/tags/iOS/items").response { response in
            guard let data = response.data else {
                return
            }
            let decoder = JSONDecoder()
            do {
                // ④レスポンスを[QiitaArticle]にデコード
                let articles: [QiitaArticle] = try decoder.decode([QiitaArticle].self, from: data)
                // ⑤取得した記事をarticlesに代入
                self.articles = articles
                // ⑥tableViewを更新
                self.tableView.reloadData()
            } catch {
                print(error)
            }
        }
    }
}

extension ViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // ⑦cell数をarticlesの数に設定
        return articles.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "QiitaTableViewCell", for: indexPath) as? QiitaTableViewCell else {
            return UITableViewCell()
        }
        // ⑧indexPathを用いてarticlesから該当のarticleを取得する
        let article = articles[indexPath.row]
        // ⑨cellへの反映
        cell.set(title: article.title, author: article.user.id)
        return cell
    }
}

import UIKit
import Nuke // ①Nukeをimport

class QiitaTableViewCell: UITableViewCell {

    @IBOutlet weak var iconImageView: UIImageView!
    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var authorLabel: UILabel!

    // ②引数にimageUrlを追加
    func set(title: String, author: String, imageUrl: String) {
        // ③Nukeを使用して画像を取得
        Nuke.loadImage(with: URL(string: imageUrl)!, into: iconImageView)
        titleLabel.text = title
        authorLabel.text = author
    }
}

extension ViewController: UITableViewDataSource {
    ...
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "QiitaTableViewCell", for: indexPath) as? QiitaTableViewCell else {
            return UITableViewCell()
        }
        let article = articles[indexPath.row]
        // ④imageUrlの引数にarticle.user.imageUrlを追加
        cell.set(title: article.title, author: article.user.id, imageUrl: article.user.imageUrl)
        return cell
    }
}

import UIKit
import WebKit

class WebViewController: UIViewController {
    private let webView = WKWebView()

    // ①表示するURLを持っておく
    var url: String!

    override func viewDidLoad() {
        super.viewDidLoad()
        webView.frame = view.frame
        view.addSubview(webView)

        // ②googleのページからプロパティのurlに変更
        let url = URL(string: self.url)
        let request = URLRequest(url: url!)
        webView.load(request)
    }
}

extension ViewController: UITableViewDelegate {
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        let storyboard = UIStoryboard(name: "WebViewController", bundle: nil)
        let webViewController = storyboard.instantiateInitialViewController() as! WebViewController
        // ③indexPathを使用してarticlesから選択されたarticleを取得
        let article = articles[indexPath.row]
        // ④urlとtitleを代入
        webViewController.url = article.url
        webViewController.title = article.title
        navigationController?.pushViewController(webViewController, animated: true)
    }
}