LoginSignup
1

More than 5 years have passed since last update.

APIを使って、Qiitaの記事を表示させる。Part.3

Last updated at Posted at 2018-12-14

前回の記事

この記事を見ていない人は、前回の記事を見てください。

APIを使って、Qiitaの記事を表示する。Part.1

APIを使って、Qiitaの記事を表示させる。Part.2

記事の表示

前回で、TableViewを表示しました。

ここからはTableViewにQiitaのAPIから取ってきた記事を表示していきます。

1.API通信

まず、記事を格納するための、Dictionary型の変数を宣言します。

ViewController.swift
   var articles: [[String: String?]] = [] 

次に、APIをおこなうメソッドを書いていきます。
このメソッドを書く前に、ライブラリをimportしなくてはいけません。

ViewController.swift
import Alamofire
import SwiftyJSON

Alamofireを使用して、記事を持ってくるAPI https://qiita.com/api/v2/itemsを叩いて持ってきます。
持ってきたJSONをSwiftyJSONでパースし、
JSONからtitleurluseridforEachでまわしながら変数に格納します。

ViewController.swift
   func getArticles() {
        let _ = Alamofire.request("https://qiita.com/api/v2/items")
                .responseJSON { reponse in
                    guard let object = reponse.result.value else {
                        return
                    }

                    let json = JSON(object)
                    json.forEach { (_, json) in
                        let article: [String: String?] = [
                        "title": json["title"].string,
                        "url": json["url"].string,
                        "userId": json["user"]["id"].string
                        ]
                        self.articles.append(article)
                    }

                    self.table.reloadData()
        }
    }

2.TableViewに反映

TableViewの雛形です。cellにtitleuserIdを表示します。

詳しくは、以下参考。
SwiftでTableViewを使ってみよう

ViewController.swift

    // TableViewに表示させるもの
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return articles.count
    }

    // TableViewCellの内容
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = UITableViewCell(style: .subtitle, reuseIdentifier: "cell")
        let article = articles[indexPath.row]
        cell.textLabel?.text = article["title"]!
        cell.detailTextLabel?.text = article["userId"]!
        return cell
    }

これではまだ何も表示できないため、viewDidLoadに先ほど書いたgetArticlesを書きます。

ViewController.swift
    override func viewDidLoad() {
        super.viewDidLoad()

        getArticles()  // API通信でとってきたものをViewに表示
    }

一度、コンパイルして見ましょう。。。
下のように起動したら、うまくいけています。

image.png

サイトに飛ばす

これで記事を表示することができましたが、詳細を見ることができません。

そこで、WebViewで一つ一つの記事の詳細を見せるようにします。

1.次の画面の作成

Main.Storyboardでもう一つViewControllerをおきます。

image.png

画面遷移したいため、記事を表示しているViewControllerから新しく作成したViewControllerへ
Controlを押しながら引っ張っていきます。今回は、Showを選択します。
この時、矢印を選択してStoryboard SegueIdentifier
toNewsViewControllerとします。

image.png

image.png

新しくViewControllerを作成したため、それに応じて新しいFileを作成しなくてはなりません。
File -> New -> Fileを選択し、Cocoa Touch Classを選択。
名前をNewViewControllerにして、作成します。

image.png

image.png

続いて、新しいViewControllerとファイルを関連付けする必要があるため、
Main.storyboardで先ほど作成したViewControllerにClassを与えます。

image.png

これで画面が作成され、コードも紐づいてため、コードを書いていきます。

2.URL表示

JSONにURLがあるため、これを格納するための変数を宣言してあげます。

ViewController.swift
    var selectUrl: String!

続いて、TableViewのCellがタップされた時の処理を書いていきます。ここで先ほど設定したIdentifierを使用して画面遷移をします。
この時に、取得したselectUrlをNewViewControllerに値渡しをします。

ViewController.swift
    // cellがタップされた時
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        let newArticle = articles[indexPath.row]
        selectUrl = newArticle["url"]!
        performSegue(withIdentifier: "toNewViewController", sender: nil)
    }

        // 画面遷移した際
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        let NVC: NewViewController = (segue.destination as? NewsViewController)!
        NVC.url = selectUrl
    }

3.WebViewの使い方

記事を表示する画面の処理が終わったため、記事の詳細を表示する画面の処理を書いていきます。

先ほど作成したNewViewController.swiftに以下のコードを書きます。

NewViewController.swift

import UIKit
import WebKit

class NewsViewController: UIViewController, WKUIDelegate {

    var webView: WKWebView!
    var topPadding:CGFloat = 0
    var url: String!

    override func loadView() {
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.uiDelegate = self
        view = webView
    }

    override func viewDidAppear(_ animated: Bool){

        let screenWidth:CGFloat = view.frame.size.width
        let screenHeight:CGFloat = view.frame.size.height

        if #available(iOS 11.0, *) {
            let window = UIApplication.shared.keyWindow
            topPadding = window!.safeAreaInsets.top
        }

        let rect = CGRect(x: 0,
                          y: topPadding,
                          width: screenWidth,
                          height: screenHeight - topPadding)

        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: rect, configuration: webConfiguration)

        let webUrl = URL(string: url)!
        let myRequest = URLRequest(url: webUrl)
        webView.load(myRequest)

        self.view.addSubview(webView)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

}

完成!!

これでSimulatorを起動したら、無事動くと思います。

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