【動作環境】
Swift2.2 Xcode7.3
【対象レベル】
超初心者
【学習内容】
YouTubeのAPIを使ってビデオを表示させるアプリを作ります。
動画の音声の書き起こし
はい、それでは今回は動画再生アプリを作っていきたいと思います。
YoutubeAPIを使って一覧表示されている動画を表示するアプリにしていきたいと思います。
それでは、Xcodeの方を立ち上げます。FileのNEWのProjectですね、IOSのテンプレートの中からSingleViewアプリケーションを選択します。
Nextをクリックします。ProductNameは、このプロジェクトの名前ですね、今回は、MyYoutubeとします。LanguageはSwift、DeviceはiPhoneを選択して、この3にはチェックを入れないでください。
Nextをクリックします。好きな場所を選択して、Createすると新たなProjectが立ち上がります。MyYoutube2にしますね。
そうするとCreateします。これで新しいProjectが立ち上がりました。
それでは、まず画面のほうを作っていきたいと思います。
Main.StoryBoardを選択します。
まだこの段階では画面が正方形です。様々なデバイスに対応するために汎用的な形をしているんですけど、分かりやすくするために、サイズをiPhone5のサイズにしましょう。iPhone4inchにします。このような画面になりました。それでは、この画面にテーブルビューの方を配置していきたいと思います。これがテービルビューですね。ドラッグ＆ドロップで配置できます。このようになりました。ここにセルを配置していきます。ちょっと広げます。
ここにまず背景画像を配置していきます。このようにイメージビューをこのセルにピッタリ重なるようにおいていきます。
このイメージビューに表示する画像なんですが、本来だったら各画像のサムネイルを表示させたいのですが、今回はまだそこまでやりませんので、ダミーの画像を表示させたいと思います。
ダミーの画像をドラッグ＆ドロップでプロジェクトに取り込みます。CopyItemsにチェックが入ってることを確認してFinishします。これでこのプロジェクトに画像が取り込まれました。この画像をこのイメージビューに設定します。
イメージビューのイメージをこの画像に設定しますと、このように背景画像の設定ができました。
ここにラベルをいくつか配置していきたいと思います。まず、その動画のタイトルを表示するラベルですね。このように置いていきます。領域をちょっと広げます。中央に表示させるようにします。フォントの種類をちょっと変えたり色を変えたりします。今回は分かりやすくオレンジにしてみましょう。
同様にあと2つラベルを追加します。左下のラベルには、現在の視聴者にします。
そして画面右下のラベルには、配信者名、動画の配信者名を表示するようにしていきます。
セルですね、ここのセルにはIDを設定する必要があります。今回はシンプルにCELLセルというIDを設定します。そして、このラベルにはタグを振っていきます。このタグを使ってコード上でこのラベル、3つのラベルを識別することが可能になります。
左下のラベルには2ですね。右のラベルには3を表示させます。
それでは、コードの方を書いていきます。
まず、ViewController.Swiftですね、ここにコードの方を追加していきます。
このようなコードになりますね。
まずUIKitをインポートした後に、UIViewControllerを継承したViewControllerというクラスを宣言します。
で、このViewControllerはUITableViewDelegeteとUITableViewDataSorceという2つのプロトコルに準拠してます。このプロトコルに準拠することにより、このViewControllerの中に、かならず実装しなければならないメソッドが生じることになります。それが、このTableViewnumberOfRowsInSectionとTableViewcellForRowAtIndexPathメソッドですね。この2つにより、テーブルビューに表示すべきデータの設定を行いま
す。そのデータなんですけど、本来だったらYoutubeのAPIを使ってWebからとってくるはずなんですけど、まだそこまでいきませんので、ダミーのデータを使ってやりたいと思います。このような配列のダミーデータを用意します。
3つの配列要素がありまして、それぞれの要素に3つのディクショナリーが要素として入っています。
TitleとPVとNameという3つのKeyでそれぞれの値を管理していることになります。
そして、このTableViewnumberOfRowsInSectionなんですけど、ReturndataArray.Countでデータへのアカウントを返しています。DataArrayには3つの要素が入っていますので、3が返ることになります。
そして、ここですね、CellForRowAtIndexPathですね、これは、Cellの表示内容を指定します。テーブルビューから、先程のCELLというIDを使ってセルを取っていきます。このCELLに各種設定をしていきます。
まずこのCELLからタグを使って、UILabelをとっていきます。表示すべき内容をこのDataArrayの中からとっていきます。取り出すときは、Castが必要になります。後は、型を指定すべき必要があります。inexPath.row番目のタイトルという名前のKeyで取ってくることができます。で、PVですね。PVも同様ですね。UILabel型のラベルをとってきてテキストを指定します。そして、この場合PVで取ってきた文字列に人という文字列を追加して、何人という表示を行います。次にNameですね、配信者名ですね。ViewWithTagで、Tagを指定してラベルをとってきます。Nameという名前のラベルのテキストをこのように指定します。
同様ですね、String型を指定します。ReturnCell。CELLを返してやることによって、
そのCELLがテーブルビューに表示されることになります。
またこのメソッドですね。didSelectRowAtIndexPathですけど、これは、各CELLがタップされた時に呼び出されるメソッドですね。この中でSelfPerformSequewithIdentifierを実行してやります。ここでToMovieというIDを指定してやります。
これは、SegueのIDになります。Segueというのは、画面と画面を紐づけて画面遷移を実行するのに必要なものになります。その設定は後々行っていきますね。
それでは、もう一つViewControllerのほうを作っていきましょう。NewFileCoCoaTouchClassNext、
UIViewControllerを継承した、MoviewViewControllerというのを作っていきましょう。Nextですね、でクリエイトになります。
この中にコードを書いていきます。コードはこのようになります。
ViewDidLoadはその画面が読み込まれたときに実行される内容を書きますけど、このようにURLを指定して、WebViewに読み込むことで、その動画が表示されるという仕組みになります。
FuncCloseこのメソッドは、画面を閉じるメソッドですね。画面上のボタンを押すとこのクローズメソッドが呼ばれて、画面が閉じるという仕組みを作っていきます。
それでは、StoryBoardの方にもいくつか追加を行っていきます。
2番目の画面を追加しましょう。左上のViewControllerを画面上に追加します。
そして、カスタムクラスのところで、今作ったMoviewViewControllerを指定しまして、画面のサイズを4Inchにしておきましょう。このようになります。それでは、ViewControllerとViewControllerの間のSegueを設定していきます。
このViewControllerを選択しまして、次の画面までコントロールを押しながら引っ張っていきましょう。
プレゼントモーダリーを選択します。そうすると、画面と画面の間に、Segueが生じます。IDが設定できました。このSegueにIDをふっていきましょう。ToMovieですね。IDが設定できました。そして、この画面にボタンとWebviewを配置していきましょう。ボタンを1つ配置して、Closeという名前にします。そして、Webviewを1つ配置していきます。このようにしていきましょう。それでは、接続のほうを行っていきます。
Webviewは上ですね。Closeメソッドは、右上のクローズボタンと紐づけます。
タッチアップインサイドでボタンを置いてはなしたタイミングで画面が閉じるようにします。
それでは、実行してみましょう。今回は、iPhone5および、5Sに併せて画面を作っていきましたので、5Sを選択してみます。実行してみて、動作を確認してみましょう。
少々時間がかかりますが、シミュレータの方が立あがって、アプリの動作のほうを確認することができます。
データが表示されていませんね。これは、Delegeteのデータソースの設定を忘れたからですね。それでは今から設定を行っていきます。最初の画面のテーブルビューを設定して、Outletsの所をみますと、データソースをDelegeteという項目があります。この2つの項目をそれぞれViewControllerと紐づけていきますね。
再び実行を押してみます。この設定が無いと、このテーブルビューのデータがどこにあるか、テーブルビューのコントロールをどこで行うかが分からなくなってしまいます。これでデータが表示されましたね。
AMovie、TheMovie、TheGreatMovieと表示されているかなと思います。
では、各Cellをタップしてみます。少々時間がかかりますが、このように動画が表示されました。Youtubeからとってきた動画が表示されました。
表示まで少々時間がかかりますので、その間にインジケーターなどを表示させると、良いUXになるかなと思います。このようにボタンを押して動画を再生することができます。再生されていますね。
Closeボタンを押すと、この2番目の画面が閉じて、最初の画面に戻ります。
今回は、Youtubeを使った、動画再生アプリの大まかな枠の部分だけを作りました。
次回以降、YoutubeAPIをつかって動画のデータを取ってくる方法、そしてそれを一覧表示する機能、そして、さらにその対応する動画を再生する方法をやっていきたいと思います。また、今の段階ではiPhone5にしか画面サイズが対応しておりませんので、様々な画面サイズの機種に対応出来る方法などもやっていきたいと思います。
Tekuruプログラミングスクールでは、
動画だけでは伝わりきらない、アプリ開発の楽しさや、
気軽に質問できる雰囲気で、プログラミングを学ぶことができます。
もっと深く、プログラミングを理解したい方は、ぜひ無料体験にお越しください。
どこよりも楽しく学べるアプリ開発スクールを運営しています。
フォローしてしてくれると、とてもうれしいです☆
https://www.facebook.com/techool
https://twitter.com/TekuruSchool
YouTubeチャンネル
https://www.youtube.com/channel/UCpQfWE0TpewbXYnGyxxBkow
毎週土曜日の夜に動画のアップロードをしています。
よければ、チャンネル登録お願いします！
ソースコードや、操作の仕方、などなど、
なんでも気軽にコメントください。
コメントをお書きください