【1日目】Youtubeアプリ開発日記(iOS) / 各種設定からYoutube API をアプリからリクエスト

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/714549/f7b3e8a9-5eaf-ff84-f421-1533b53c20e3.png" style="width:100%;">
# 概要
iPhoneアプリ開発を行う人のために、教材となればいいなと思い、この記事を書いていきます。
つくっていくアプリは、YoutubeのiPhoneアプリを開発します。

# この記事のゴール

- YoutubeのAPIを使えるようにする
- iPhoneアプリでYoutubeのAPIをリクエストできるようにする

# アプリの使用ライブラリを先に紹介

- Alamofire (API通信ライブラリ)
- Moya/RxSwift (Alamofire補完ライブラリ)
- RxSwift (リアクティブプログラミング)

# 準備

いきなりハードルが高くなりそうですが、まずはYoutube Data API を登録します。
https://developers.google.com/youtube/v3/getting-started?hl=ja

### 手順
1. Googleアカウントで、[Google Cloud Console](https://console.cloud.google.com/) へのアクセス
2. プロジェクトを作成
3. API Keyを[こちら](https://console.developers.google.com/apis/credentials?hl=ja)で作成
    4. API Keyは、アプリで使うのでメモしておきましょう。
4. Services から、YouTube Data API を検索して、ステータスをオンにする

#### 補足
##### Google Cloud Consoleで、プロジェクト作成
![スクリーンショット 2020-09-15 20.25.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/714549/5b8595a2-2337-73ae-c9ad-85671fd43ab7.png)
![スクリーンショット 2020-09-15 20.24.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/714549/9333239b-a243-c164-daec-af3c4df79636.png)


# API を試してみよう

API Keyを作成できたら、そのKeyを使ってAPIが実際に使えるのかを確認しましょう。
APIは、Youtube動画を検索できるAPI (`/youtube/v3/docs/search/list`) を使います。

### APIの構成

`https://www.googleapis.com/youtube/v3/search?part=snippet&q={検索キーワード}&key={自分のAPI KEY}`

### レスポンス例

```json
{
  "kind": "youtube#searchListResponse",
  "etag": "BaxNpbPgVkyQQVmx4qeEzGdzCTo",
  "nextPageToken": "CAEQAA",
  "regionCode": "JP",
  "pageInfo": {
    "totalResults": 1000000,
    "resultsPerPage": 1
  },
  "items": [
    {
      "kind": "youtube#searchResult",
      "etag": "MkmmQLdB1WA8Icy7XbfCfXQcdBI",
      "id": {
        "kind": "youtube#channel",
        "channelId": "UCZf__ehlCEBPop-_sldpBUQ"
      },
      "snippet": {
        "publishedAt": "2011-07-19T11:31:43Z",
        "channelId": "UCZf__ehlCEBPop-_sldpBUQ",
        "title": "HikakinTV",
        "description": "HikakinTVはヒカキンが日常の面白いものを紹介するチャンネルです。 ◇プロフィール◇ YouTubeにてHIKAKIN、HikakinTV、HikakinGames、HikakinBlogと ４つの ...",
        "thumbnails": {
          "default": {
            "url": "https://yt3.ggpht.com/-NFhw6-eus8Y/AAAAAAAAAAI/AAAAAAAAAAA/rtPbnb9gvAQ/s88-c-k-no-mo-rj-c0xffffff/photo.jpg"
          },
          "medium": {
            "url": "https://yt3.ggpht.com/-NFhw6-eus8Y/AAAAAAAAAAI/AAAAAAAAAAA/rtPbnb9gvAQ/s240-c-k-no-mo-rj-c0xffffff/photo.jpg"
          },
          "high": {
            "url": "https://yt3.ggpht.com/-NFhw6-eus8Y/AAAAAAAAAAI/AAAAAAAAAAA/rtPbnb9gvAQ/s800-c-k-no-mo-rj-c0xffffff/photo.jpg"
          }
        },
        "channelTitle": "HikakinTV",
        "liveBroadcastContent": "upcoming",
        "publishTime": "2011-07-19T11:31:43Z"
      }
    }
  ]
}
```

# Firebaseプロジェクトを設定

[Firebaseコンソール](https://firebase.google.com/?hl=ja)　にアクセスして、自分のアプリのプロジェクトを作成しましょう。
[ドキュメント](https://firebase.google.com/docs/ios/setup?hl=ja)のSTEP1 ~ STEP5までを行えば、基本的には問題ないですが、Firebaseは親切なので、以下の画像のように順番にやるべきことを指示してくれます。
![スクリーンショット 2020-09-15 21.22.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/714549/77ebd0d0-1c8e-00f0-f1d2-15e49a569494.png)

# アプリを作成
Xcodeをインストールして、アプリの初期画面を作成するというのは、[こちらの記事](https://qiita.com/pe-ta/items/8f474358d1dd789557f3#step1%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E7%AB%8B%E3%81%A1%E4%B8%8A%E3%81%92%E3%82%8B)などを参考にしてみてください。

# ライブラリをインストール

Firebaseの初期設定で、すでにcocoapodsで`Podfile`を作成していると思いますので、cocoapodsを使ってライブラリを追加していきます。`Podfile`の基本的な使い方は[こちらの記事](https://qiita.com/ShinokiRyosei/items/3090290cb72434852460)を参考にしてみると良いでしょう。

それでは、実際に`Podfile`に、前述のライブラリを追加しましょう。

```
target 'アプリ名' do
  pod 'Firebase/Analytics'
  pod 'Alamofire', '~> 5.2'
  pod 'Kingfisher', '~> 5.0'
  pod 'Moya/RxSwift', '~> 14.0'
end
```

これで、`pod install` をしてください。
`アプリ.xcworkspace`を開けば、インストールしたライブラリが使える状態になっています。

# ようやくコードが書けます！お疲れ様です！

## `UIViewController`にAPIリクエストを実装

```swift
import UIKit
import Alamofire

class ViewController: UIViewController {
    private let apiKey = "xxxxxxxxx"

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let keyword = "ヒカキン"
        let urlString = "https://www.googleapis.com/youtube/v3/search?part=snippet&q=\(keyword)&key=\(apiKey)"
        let request = AF.request(urlString)
        
        request.responseJSON { response in
            print(response)
        }
    }
}
```

### Youtube API の通信

ここでAPI通信処理を担うライブラリ`Alamofire`を使うためにインポートします。

```swift
import Alamofire
```

あとは簡単。↓で、リクエストするURLを生成します。

```swift
let keyword = "ヒカキン"
let urlString = "https://www.googleapis.com/youtube/v3/search?part=snippet&q=\(keyword)&key=\(apiKey)"
```

↓で、APIにリクエストします。

```swift
let request = AF.request(urlString)
```

最後に、受け取ったレスポンスを処理します。
ここでは、レスポンスをログに出力するのみにしています。

```swift
request.responseJSON { response in
    print(response)
}
```

## レスポンス
以下のように、コンソールにログが出力されたら成功です。

```json
success({
    etag = "1pYoINxiqsB91hilou77FGlS_1E";
    items =     (
                {
            etag = MkmmQLdB1WA8Icy7XbfCfXQcdBI;
            id =             {
                channelId = "UCZf__ehlCEBPop-_sldpBUQ";
                kind = "youtube#channel";
            };
            kind = "youtube#searchResult";
            snippet =             {
                channelId = "UCZf__ehlCEBPop-_sldpBUQ";
                channelTitle = HikakinTV;
                description = "HikakinTV\U306f\U30d2\U30ab\U30ad\U30f3\U304c\U65e5\U5e38\U306e\U9762\U767d\U3044\U3082\U306e\U3092\U7d39\U4ecb\U3059\U308b\U30c1\U30e3\U30f3\U30cd\U30eb\U3067\U3059\U3002 \U25c7\U30d7\U30ed\U30d5\U30a3\U30fc\U30eb\U25c7 YouTube\U306b\U3066HIKAKIN\U3001HikakinTV\U3001HikakinGames\U3001HikakinBlog\U3068 \Uff14\U3064\U306e ...";
                liveBroadcastContent = upcoming;
                publishTime = "2011-07-19T11:31:43Z";
                publishedAt = "2011-07-19T11:31:43Z";
                thumbnails =                 {
                    default =                     {
                        url = "https://yt3.ggpht.com/-NFhw6-eus8Y/AAAAAAAAAAI/AAAAAAAAAAA/rtPbnb9gvAQ/s88-c-k-no-mo-rj-c0xffffff/photo.jpg";
                    };
                    high =                     {
                        url = "https://yt3.ggpht.com/-NFhw6-eus8Y/AAAAAAAAAAI/AAAAAAAAAAA/rtPbnb9gvAQ/s800-c-k-no-mo-rj-c0xffffff/photo.jpg";
                    };
                    medium =                     {
                        url = "https://yt3.ggpht.com/-NFhw6-eus8Y/AAAAAAAAAAI/AAAAAAAAAAA/rtPbnb9gvAQ/s240-c-k-no-mo-rj-c0xffffff/photo.jpg";
                    };
                };
                title = HikakinTV;
            };
        }
    );
    kind = "youtube#searchListResponse";
    nextPageToken = CAEQAA;
    pageInfo =     {
        resultsPerPage = 1;
        totalResults = 577518;
    };
    regionCode = JP;
})
```