SwiftUIを使用してYouTube検索アプリを作成する

拙著「SwiftUIではじめるiPhoneアプリプログラミング入門」では、最後のChapterのサンプルとして「Swift UIを使用したYouTube検索アプリ」を作成しています。

GitHub Webのサンプル

次のURLより、Xcode 11で作成したプロジェクトをダウンロードできます
https://github.com/makotoo2/YoutubeSearch1

作成するYouTube動画検索アプリについて

作成するYouTube動画検索アプリでは、YouTubeの提供する「YouTube Data API v3」を叩いてJSONファイルを取得し、それをリストに表示します。上部のテキストボックスに検索文字列を入力して「検索」ボタンをクリックすると、検索結果が一覧表示されます。

APIキーを取得する

YouTubeの動画検索を行うには、「YouTube Data API v3」のAPIキーが必要です。また、APIキーを取得するにはGoogleアカウントが必要になります。

  1. Webブラウザで、GoogleアカウントでログインしGoogle Developers Console(https://console.developers.google.com/apis/library)を開きます。
  2. 「YouTube Data API v3」ページを開き「有効にする」ボタンをクリックします。
  3. ライブラリ」ページで「作成」ボタンをクリックしてプロジェクトを作成します。
  4. 認証情報」ページで情報を設定し「必要な認証情報」ボタンをクリックします。
  5. APIキーが表示されます。

ファイル構成について

YouTube検索アプリで、は次の様な5つのswiftファイルを用意しています。

  • ContentView.swift メインのコンテンツビュー
  • YoutubeSearcher.swift YouTube APIを検索するYoutubeSearcherクラスを定義しています。ObservableObjectプロトコルを実装し検索結果を通知します。searchメソッドにより検索を実行します。
  • YoutubeView.swift UIViewRepresentableプロトコル適合したYoutubeView構造体を定義しています。WKWebViewビューを使用して、選択したYouTubeビデオのWebページを表示します。
  • YoutubeJsonModel.swift Youtube Data APIの検索結果のJSONデータに対応した構造体を定義しています。
  • VideoRowView.swift 検索結果をリストの行として表示するVideoRowView構造体を定義しています。

URLImageライブラリの読み込み

ビデオのサムネール画像の表示には、外部ライブラリ「URLImage」を使用しています。