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

# 概要 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 へのアクセス
2. プロジェクトを作成
3. API Keyをこちらで作成
   4. API Keyは、アプリで使うのでメモしておきましょう。
4. Services から、YouTube Data API を検索して、ステータスをオンにする

補足

Google Cloud Consoleで、プロジェクト作成

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}

レスポンス例

{
  "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コンソール　にアクセスして、自分のアプリのプロジェクトを作成しましょう。
ドキュメントのSTEP1 ~ STEP5までを行えば、基本的には問題ないですが、Firebaseは親切なので、以下の画像のように順番にやるべきことを指示してくれます。

アプリを作成

Xcodeをインストールして、アプリの初期画面を作成するというのは、こちらの記事などを参考にしてみてください。

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

Firebaseの初期設定で、すでにcocoapodsでPodfileを作成していると思いますので、cocoapodsを使ってライブラリを追加していきます。Podfileの基本的な使い方はこちらの記事を参考にしてみると良いでしょう。

それでは、実際に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リクエストを実装

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を使うためにインポートします。

import Alamofire

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

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

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

let request = AF.request(urlString)

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

request.responseJSON { response in
    print(response)
}

レスポンス

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

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;
})