【動作環境】
Swift2.2 Xcode7.3
【対象レベル】
超初心者
【学習内容】
YouTubeのAPIを使ってビデオを表示させるアプリを作ります。
動画の音声の書き起こし
はい、それでは前回の続きを行っていきます。
まず、JSONを取得するところですけど、ここを一部変えていきますね。
この行、GetJSONの中のこの行ですけど、このように書き換えます。今回、YouTubeのプレイリストの方を取得しますので、ここをプレイリストItemという記述に変更します。
そして、contentDetails,snippetplaylistID既述にします。でキーは前回取得したAPIキーですね。
リクエストの方を作ります。で、リクエストを送りましてJSONを取得しましたら、この2行を書きます。DataArrayとTableViewのreloadデータですね。で、このself.tableviewなんですけど、このように前のほうで宣言しておきます。そして、IBOutletでStoryBoard上でStoryBoard上のTableViewと紐付けを行っておきます。DataArrayなんですけど、これは先頭で宣言しておきます。DataArrayこれですね。
前回まで宣言したDataArrayはダミーのデータを入れてましたけど、それはコメントアウトするか、消しておきます。
そして、NSArray型にしておきます。中身を空にしておきます。で、DataArrayの中にJSONの中身を入れるんですけど、Itemsというキーで各動画の情報が入っています。で、それをNSArray型にCastしてDataArrayに入れておきます。
なお、今回通信を行いますが、その中でこのブロックがありますね、クロージャーがありますね。クロージャーの中では、DataArrayにアクセスする時にSelfをつけないといけません。TableViewも同様ですね。
Selfをつけておきます。リロードデータでTableが更新されることになります。
つまり、JSONを取得して、取得が完了したタイミングで、JSONデータを配列変換して、
DataArrayに入れてそれに伴い、TableViewの更新をおこなうということを行っていきます。
そして、TableViewの中身の設定についても、既述を追加していきます。
まず、itemDicというのを作りますね。DataArrayの中のIndexPathに対応した要素をNSDictionary型
にCastして取り出します。でTitleですね、Titleの方は、ItemDicのほうから取り出しますね。snippetTitleというキーワードで取り出します。
オプショナル型ですので？マークとかをつけるのを忘れないようします。PVですね、今回ちょっとPVをとるのは難しかったですので、代わりに、その動画を投稿された日時を取得して表示することにします。SnippetとPublishedAtというキーでとりだします。
で、Nameですね、投稿者今回は、プレイリストですので、チャンネル名が投稿者になります。チャンネルタイトルという名前でこのNameを取り出すことが出来ます。で、次背景画像ですね。背景画像はサムネイルを使って表示させることができます。まず、背景をViewWithTagを使って取り出します。そして、VideoIDですね。
VideoID、ContentDetailsとVideoIdを使って取り出します。で、CatheDicというのがここででてきます。CatheDicというのは、一度表示した画像はCatheの中に入れておいて、次回以降はそのCathe内にあるデータを使うために用います。
1回1回ネットワークの通信を行うと通信が発生してしまい、表示に時間がかかってしまい、またネットワークに負担をかけるという問題がありますので、このCatheを上手く使っています。
で、このCatheの中にこのVideoIdのデータがあれば、そのデータを背景画像として使えます。
また、そのCatheの中にVideoIdのデータが無ければ、新しくネットワーク通信を行い、データをとってくることを行います。で、まずURLの文字列ですね。このSnippetの中のThumbnails、High、URLというところにあります。
このURLが、NSURL型に変換します。そのNSURL型のURLを使ってイメージデータを取り
出します。で、ちょっとオプションの設定などが必要になります。まだTryをつけてエラー処理を行わないといけません。取り出したあと、画像なんですけど、イメージデータを使って、UIImage型に変換しますね。
ImageDataというこれは、このデータですね、背景にこのイメージを設定します。
そして、CatheにこのVideoIDを使ってイメージを格納しておきます。
このような仕組みで背景画像の表示を行いますね。そして、TableViewがタップされた際の処理ですね。ここでデータの受け渡しを行います。データ受渡しをするための受け渡し場所が必要ですね。AppDelegeteの中にそれを書きます。このWindowの下に、VideoIdという名前の文字列をプロパティとして宣言しておきます。
そうすることで、このVideoIdを使って最初の画面と次の画面でVideoのIdのやりとりができます。
TableViewの各セルがタップされた時に、そのVideoのIdをこのDelegeteに渡してやります。
Delegete=UIApplication,sharedApplication().Delegeteですね、AppDelegeteでCastしておきます。
またVideoIdですね、VideoIdはこのようにIndexPathContentDetailsVideoIDというキーで取り出しま
す。で、VideoIdを渡してやりますね。で、画面遷移を実行します。
で次の画面ですね。VideoIdが渡されたら、同じくDelegeteを使ってデータの取り出しを行います。
DelegeteにあるVideoIdを使って新しく動画のURLを作ってやります。そしてその再生を行います。
それでは実行してみて動作を各印してみます。今シミュレータのほうを立ち上げます。
WindowのサイズはWindowScaleで調整できますね。これぐらいにしておきましょうか。
はい、アプリが立ち上がりましたね。タイトルと、パブリッシュDate、投稿者名が表示されています。
また、背景には各動画のサムネイルが表示されていることが分かります。そして、各動画のセルをタップするとこのように次の画面が開きまして、インジケーターが表示された後に各動画のページが表示されることがわかります。再生ボタンをタップするとこのように動画が再生されますね。
今シミュレーターの方で落ちちゃいましたけど、本番環境ではうまくいきます。
このように、今回は、タイトル、YouTubeのAPIを使ってタイトルとパブリッシュデイト名前を取得して表示すること、および背景画像を表示すること、そして各セルをタップするとセルの内容に応じた動画が次の画面で表示されると言う機能を実装していきました。今回は以上になります。
応するために、AutoLayoutを使うことを、勉強していきたいと思います。
それでは、まずJSONの取得方法について勉強していきます。ViewController.Swiftを開きます。
そして、以下のようなCodeの技術を行います。
GetJSONという名前のメソッドを書きまして、そのメソッドをViewDidLoadの中から呼び出すようにします。
GetJSONの中では、JSONを取得するためのコードがかかれています。
まず、Letid、プレイリストのIDでプレイリストのIDをIDという変数に入れます。
でプレイリストのIDなんですけど、YouTubeのプレイリストから簡単に取得することができます。
プレイリストのURLを開きまして、URLの中にある、ここですね、プレイリストのIDになります。
この内容をコピーして、ここに貼りつけて頂ければ、そのプレイリストを再生することができます。
APIキーなんですけど、これは、GoogleのDeveloperConsoleを使って取得することができます。
DeveloperConsoleは、このような画面をしております。このDeveloperConsoleにログインするためには、Googleアカウントが必要になります。DeveloperConsoleの中にYouTubeAPIがありますので、
YouTubeAPIのデータリンクにいっていただいて、そこで認証手続きを行えば、APIキーを取得することができます。取得したAPIは、ここにコピー&ペーストをします。
そして、URLの文字列を作るのですが、このように書きまして、playlists?Part=contentDetails,snippetと書いてチャネルIDにこのIDを入れます。そして、キーにこのAPIを入れてやります。そして、このURLStringを使って、NSURL型のURLを作ります。そして、これをNSURLリクエストを使って、NSURL型に変換してやります。これでリクエストができました。そして、この後セッションを使って、APIとの接続を行うのですが、まずConfigurationを設定します。今回は標準的な接続ですので、デフォルト、セッションConfigurationを使います。
そしてセッションを作ります。NSURLセッションを使って作るのですが、その際にこのConfigurationの設定を行います。特に接続状態にかんする通知を行わなくて良いので、DelegeteをNilにします。
そして、DelegeteQueueに関しては、NSOperationQueueのメインQueueを指定します。
そしてタスクですね、タスクを使って接続を行います。セッションのdataTasWithRequestで、このリクエストを設定して、completionhandlerで接続後の処理をします。
Docatchの中に、このJSONの変換処理を行います。データをNSJSONSerialization、JSONwithObjectdataで文字列に、NSDictionary型のDictionaryに変換します。
オプションは、NSJSONleadingoptionAllowfragmentを選択します。Asを使ってCastを行います。
そして、取得したJSONをプリントでコンソールに出力してみます。
DoCatchに囲まれていますので、JSONに正しく変換できなかった場合は、このcatchの中の、
JSONerrorという出力がおこなわれることになります。
そして、このtask.resumeでこのタスクの内容が実行されることになります。
それでは、実行してみて正しくJSONがゲットできるか確認してみたいと思います。
なお、今回、APIは基本的に他人に公開しない方が良いので、今回は別ファイルにあるプレイリストIDとAPIキーをこの動画では使用します。
それでは、実行してみて動作を確認します。無事、JSONが取得できれば、右下のこのエリアにそのJSONの内容が表示されるはずです。シミュレータが起動するまで少々時間がかかります。
無事JSONが取得できましたね。このように自身のAPIキーと、チャンネルIDを使ってJSON形式で動画の一覧のリストを取得することができました。これをTableViewに反映するのは次回以降行います。
それでは、次にさまざまなデバイスに対応するためのAutoLayoutの機能を使ってみたいと思います。
このTableviewに対して、まずAutoLayoutの設定を行っていきます。まずこのTableViewを選択しまして、画面右下のピンを選択します。ここですね。ConstrainT0Marginのチェックを外しまして、上下左右の壁からの距離を0に設定します。これでOKですね。次に、セルの中の背景画像ですね、これも同様にチェックを外しまして、上下左右のConstrainを設定します。AddForConstraintsですね。4つの制約が加わりました。次このラベルですね、これは左右の壁からの距離を一定にします。そして、高さを一定にします。この3つの制約を加えます。そして、次、アラインですね、アラインで垂直方向の中央に置きます。これでOKですね。右下のラベルに関しては、ピンで下と左からの距離を一定にします。4つの制約を加えます。
このラベルも同様ですね。右下の距離を一定にして、高さと幅の制約を加えます。まだCautionが出ていますので、設定をUpdateしましょう。このContentView、親Viewを選択しまして、UpdateFramesを選択します。そうすると、位置の微妙なズレが修正されまして、Cautionが消えました。
最初の画面のAutoLayoutの設定はこれでOKですね。では、次の画面です。右上のCloseボタンから設定してみましょう。このチェックを外しまして、上と右からの距離が一定、幅と高さ一定にして、AddForConstraintsを選択します。これでOKですね。
次にWebviewに関しても、このチェックを外しまして、上下左右からの距離を一定にします。
この距離の3というのは、Closeボタンからの距離になります。で、4つの制約を加えますね。
2番目の画面に関しては、Cautionが発生しませんでした。
それでは、この画面がどのように見えるか、Preview機能を使って確認してみましょう。
画面をなるべく広く取ります。そして、Previewですね、そして右側のほう、Automaticと書かれているのをPreviewのStoryBoardに変更します。2番目の画面がiPhone4inch、iPhone5や5Sでどのように表示されるかを見れます。他の機種も追加してみましょう。
3.5inchはこのように見えます。4.7inch、5.5inchですね。このように2番目の画面に関しては、どの
機種でも問題無く見えていることが分かります。
では、最初の画面を選択してみましょう。このように最初の画面に関しても、どの機種の画面でも問題無くUIが表示されていることが分かります。
今回は、APIを使ってYouTubeのAPIを使ってJSONを取得すること、およびAutoLayoutを使って画面のレイアウトを正しく行うことを勉強しました。
次回以降、実際に動画の一覧を最初の画面に表示させてその動画を再生すると言うことをやっていきたいと思います。
Tekuruプログラミングスクールでは、
動画だけでは伝わりきらない、アプリ開発の楽しさや、
気軽に質問できる雰囲気で、プログラミングを学ぶことができます。
もっと深く、プログラミングを理解したい方は、ぜひ無料体験にお越しください。
どこよりも楽しく学べるアプリ開発スクールを運営しています。
フォローしてしてくれると、とてもうれしいです☆
https://www.facebook.com/techool
https://twitter.com/TekuruSchool
YouTubeチャンネル
https://www.youtube.com/channel/UCpQfWE0TpewbXYnGyxxBkow
毎週土曜日の夜に動画のアップロードをしています。
よければ、チャンネル登録お願いします！
ソースコードや、操作の仕方、などなど、
なんでも気軽にコメントください。
コメントをお書きください