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

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

[APIを使って、Qiitaの記事を表示する。Part.1](https://qiita.com/shun6934/items/f4600c2a2e8b45d1219e)

[APIを使って、Qiitaの記事を表示させる。Part.2](https://qiita.com/shun6934/items/64d5d44ffa98b12858d4)


## 記事の表示

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

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

### 1.API通信
まず、記事を格納するための、Dictionary型の変数を宣言します。

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

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

```swift:ViewController.swift
import Alamofire
import SwiftyJSON
```

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

```swift: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に`title`と`userId`を表示します。

詳しくは、以下参考。
[SwiftでTableViewを使ってみよう](https://qiita.com/TD3P/items/cafa8e20029047993025)


```swift: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`を書きます。

```swift:ViewController.swift
    override func viewDidLoad() {
        super.viewDidLoad()
        
        getArticles()  // API通信でとってきたものをViewに表示
    }
```

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

<img width="375" alt="image.png" src="https://qiita-image-store.s3.amazonaws.com/0/179470/08cd75cf-b93c-44f8-7242-8ec670384010.png">

## サイトに飛ばす
これで記事を表示することができましたが、詳細を見ることができません。

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

### 1.次の画面の作成
`Main.Storyboard`でもう一つ`ViewController`をおきます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/179470/e33d6f6a-0434-3dc0-adcd-c92bc54cbd31.png)

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/179470/f3cee515-3120-05d7-a5c7-37866e0591c8.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/179470/ffa58cb6-fb5c-25e1-dad7-c845f8ca7d2a.png)


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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/179470/0a505bbd-4489-6074-be9e-0166e9d3148d.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/179470/1a86fd8b-4d42-f97d-ff23-4c7cbd00f984.png)

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/179470/7be1eac2-1496-f031-bf02-56c3e68dd0f6.png)

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

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

```swift:ViewController.swift
    var selectUrl: String!
```

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

```swift: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に以下のコードを書きます。

```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を起動したら、無事動くと思います。