22日 10月 2016

初心者から始めるYouTube動画表示アプリの作り方（2/4）

【動作環境】

Swift2.2　Xcode7.3　

【対象レベル】

超初心者

【学習内容】

YouTubeのAPIを使ってビデオを表示させるアプリを作ります。

動画の音声の書き起こし

はい、それでは前回の続きを行っていきます。

今回は、YouTube API を使って、Json の一覧を取得する機能、及び様々なデバイスの画面に対応するために、AutoLayoutを使うことを、勉強していきたいと思います。

それでは、まず JSON の取得方法について勉強していきます。ViewController.Swift を開きます。

そして、以下のような Code の技術を行います。

GetJSON という名前のメソッドを書きまして、そのメソッドを ViewDidLoad の中から呼び出すようにします。

GetJSON の中では、JSON を取得するためのコードがかかれています。

まず、Let id、プレイリストの 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 を入れてやります。そして、この URL Stringを使って、NSURL 型の URL を作ります。そして、これを NSURL リクエストを使って、NSURL 型に変換してやります。これでリクエストができました。そして、この後セッションを使って、API との接続を行うのですが、まず Configuration を設定します。今回は標準的な接続ですので、デフォルト、セッション Configuration を使います。そしてセッションを作ります。

NSURL セッションを使って作るのですが、その際にこの Configurationの設定を行います。特に接続状態にかんする通知を行わなくて良いので、Delegete を Nil にします。

そして、DelegeteQueue に関しては、NSOperationQueue のメイン Queue を指定します。

そしてタスクですね、タスクを使って接続を行います。セッションの dataTasWithRequest で、このリクエストを設定して、completionhandler で接続後の処理をします。

で、Do catch の中に、この JSON の変換処理を行います。データを NSJSONSerialization、

JSONwithObjectdata で文字列に、NSDictionary 型の Dictionary に変換します。

オプションは、NSJSONleadingoptionAllowfragment を選択します。As を使って Cast を行います。

そして、取得した JSON をプリントでコンソールに出力してみます。

Do Catch に囲まれていますので、JSON に正しく変換できなかった場合は、この catch の中の、

JSON error という出力がおこなわれることになります。

そして、この task.resume でこのタスクの内容が実行されることになります。

それでは、実行してみて正しく JSON がゲットできるか確認してみたいと思います。

なお、今回、API は基本的に他人に公開しない方が良いので、今回は別ファイルにあるプレイリスト ID と APIキーをこの動画では使用します。

それでは、実行してみて動作を確認します。無事、JSON が取得できれば、右下のこのエリアにその JSON の内容が表示されるはずです。シミュレータが起動するまで少々時間がかかります。

無事 JSON が取得できましたね。このように自身の API キーと、チャンネル ID を使って JSON 形式で動画の一覧のリストを取得することができました。これを TableView に反映するのは次回以降行います。

それでは、次にさまざまなデバイスに対応するためのAutoLayoutの機能を使ってみたいと思います。

この Tableview に対して、まずAutoLayoutの設定を行っていきます。まずこの TableView を選択しまして、画面右下のピンを選択します。ここですね。Constrain T0 Margin のチェックを外しまして、上下左右の壁からの距離を 0 に設定します。これで OK ですね。次に、セルの中の背景画像ですね、これも同様にチェックを外しまして、上下左右の Constrain を設定します。Add For Constraints ですね。4つの制約が加わりました。次このラベルですね、これは左右の壁からの距離を一定にします。そして、高さを一定にします。この3つの制約を加えます。そして、次、アラインですね、アラインで垂直方向の中央に置きます。これで OK ですね。で、右下のラベルに関しては、ピンで下と左からの距離を一定にします。4つの制約を加えます。

このラベルも同様ですね。右下の距離を一定にして、高さと幅の制約を加えます。まだ Caution が出ていますので、設定を Update しましょう。この ContentView、親 View を選択しまして、UpdateFrames を選択します。そうすると、位置の微妙なズレが修正されまして、Caution が消えました。

最初の画面のAutoLayoutの設定はこれでOK ですね。では、次の画面です。右上の Close ボタンから設定してみましょう。このチェックを外しまして、上と右からの距離が一定、幅と高さ一定にして、Add For Constraintsを選択します。これで 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を使って画面のレイアウトを正しく行うことを勉強しました。

次回以降、実際に動画の一覧を最初の画面に表示させてその動画を再生すると言うことをやっていきたいと思います。

1 2 3 4

Tekuruプログラミングスクールでは、

動画だけでは伝わりきらない、アプリ開発の楽しさや、

気軽に質問できる雰囲気で、プログラミングを学ぶことができます。

もっと深く、プログラミングを理解したい方は、ぜひ無料体験にお越しください。

どこよりも楽しく学べるアプリ開発スクールを運営しています。

フォローしてしてくれると、とてもうれしいです☆