【Xcode】お気に入り動画iPhoneアプリを開発してみよう

みなさんこんにちは。Yuta Fujii(@HofuCamera)です。

今回は「お気に入り動画iPhoneアプリ」を開発していきたいと思います。ボタンを押すと自分が設定した好きな動画を表示するというアプリになります。

それでは作っていきましょう！

↓Xcodeの環境構築がまだの方はこちら↓

目次閉じる

プロジェクトを作成する
画面とファイルを整える
- ファイルを1セット準備する
動画を表示する準備をする
- 基本的な考え方
シミュレーターで確認してみよう
まとめ：フレームワークを使うと色々なことができるようになる

目次へ

プロジェクトを作成する

プロジェクトの作成方法はこちらに記載されています。

今回は「myMovie」としてプロジェクト名を設定しましょう。右下「Next」をクリックして次に進みます。次に右下の「Create」をクリックします。これでプロジェクトの作成は完了です。

まずはじめに、画面中央赤い部分「Device Orientation」と書かれた箇所があるかと思います。

これはiPhoneやiPadアプリを作る際に、画面を「縦だけに対応されたアプリなのか、横だけか、それとも両方か」などを設定する箇所になります。

今回は縦のみに対応したいと思うので、下の2つのチェックを外します。「Portrait」のみにチェックが入っている状態を確認してください。

画面とファイルを整える

それでは次にいきましょう。画面をデザインしていきます。
左側に「Main.storyboard」という箇所があるので、そこをクリックします。

これは主に画面の遷移図(どのような順番で画面を表示していくかなど)や、パーツ(ボタンやラベルなど)を直感的に置いていく、全体図を見渡せる箇所になります。

また、Main.storyboardは実際に、自分でデザインしていくことができるので、デザインしていきましょう。赤い部分をクリックして、全体像を見えるようにします。

画面が大きいので、サイズを変更します。
赤い部分をクリックしてSizeを選択してください。

iPhone6の大きさに画面を合わせるために、iPhone4.7-inchを選択します。

それぞれ、

- iPhone6Plus→iPhone5.5-inch
- iPhone6→iPhone4.7-inch
- iPhone5→iPhone4-inch
- iPhone4→iPhone3.5-inch

ファイルを1セット準備する

今回は、動画を再生するのですがMain.storyboardの画面にはすでに、ViewControllerというファイルがはじめからセットされています。

原則として、画面に1つにつき「ViewController.h」と「ViewController.m」が1セットということになります。

加えて、今回は「ViewController.m」へプログラムを記述していくことになります。

工程としては、まず画面が表示されたときにボタンが現れます。

その次に、ボタンを押すと予め設定してあった動画ファイルを再生するという2つとなります。また、動画はYoutubeのような画面で実際に動画を再生していきたいと思います。

それでは、ボタンを画面の上に置いてみましょう。

ボタンをおいたらボタンをダブルクリックして「動画再生」という名前に変えます。

それでは、実際にボタンを押したときに何をしたいのかの準備をしていきたいと思います。

右上の赤い箇所をクリックしてください。
すると、画面に対応したプログラム(この場合はViewController.m)が表示されます。

次に、ボタンを選択したままキーボードのcontrolを押しながらプログラムへドラッグ＆ドロップをしてみてください。
そして、名前は「tap」とします。nameにtapと記述します。
ここに「動画再生」ボタンがタップされたときに行いたい処理を記述していくことになります。

動画を表示する準備をする

動画を再生する準備をしていきましょう。

動画を再生するには、動画を再生する道具が詰まったフレームワークというものを使用します。
ここにはいろいろな道具がはじめから準備されていて、テンプレート(書き方)に従って書くと、「動画を再生する」という動作をしてくれます。

それでは、動画を再生するためのフレームワークを取り込みます。

赤い部分をそれぞれ押していき、MediaPlayerというフレームワークを探して「Add」と押します。

このように「MediaPlayer.framework」が挿入されたら完了です。

基本的な考え方

次に、プログラムで使うという準備をする必要があります。ViewController.mの先頭の箇所に
#import
と記述します。

さらに、動画を再生してくれる画面を準備します。下記のように記述することで、準備が完了します。

これは、「今から、MediaPlayerというフレームワークの中の動画再生画面を使いますよ！」という意味になります。

この作業をしてはじめて動画を再生する画面をプログラム上で使う準備が完了します。
ただ、動画を再生する画面の位置や大きさを決定していません。

後ほどやっていきます。
tapを押したときに動画を再生するというテンプレートを記述します。
tapの中に記述するコードは以下のようになります。

self.moviePlayer = [[MPMoviePlayerController alloc] initWithContentURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@”動画名” ofType:@”拡張子“]]];
[self.moviePlayer.view setFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
[self.view addSubview:self.moviePlayer.view];
[[NSNotificationCenter defaultCenter] removeObserver:self
name:MPMoviePlayerPlaybackDidFinishNotification
object:self.moviePlayer];
[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(movieFinishedCallback:)
name:MPMoviePlayerPlaybackDidFinishNotification
object:self.moviePlayer];
[self.moviePlayer prepareToPlay];
[self.moviePlayer play];

重要なのは、動画ファイルの名前と、動画の拡張子です。
この場合、動画の名前は「think_different」、拡張子は「mp4」
となります。
また、動画を再生する画面のサイズを決定している箇所も重要になってきます。
それ以外は全てテンプレートで、
「動画を再生する際はこういうふうに書くのだな」程度に思って頂いてかまいません。
動画を再生する画面の大きさを司っている場所は、
[self.moviePlayer.view setFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
です。
この箇所の
CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)はそれぞれ、(xの位置,yの位置,幅,高さ)を意味します。

xの位置とyの位置は画面左上からの計算になります。

xはプラスになるほど右に、yはプラスになるほど下にいきます。そして、self.view.frame.size.widthは(自分の画面のフレームのサイズの幅)、self.view.frame.size.heightは(自分の画面のフレームのサイズの高さ)となります。

つまり、目一杯広げてくださいという意味ですね！ご自身で動画を準備して試してみてください。

動画ファイルはプロジェクトにドラッグ＆ドロップするだけで取り込むことができます。

左側に「think_different.mp4」という動画ファイルが挿入できたかと思います。
さらに、この動画ファイルをプログラムに読み込ませてあげます。

さらに、動画が始まって、終わったときの処理を書かなければなりません。
書き方は簡単で、
-(void)movieFinishedCallback{

[self.moviePlayer stop];
[self.moviePlayer.view removeFromSuperview];

}
と書きます。これもテンプレートとなります。
この箇所は、動画が終了したときに呼ばれ、
まず
[self.moviePlayer stop];
で動画をとめています。
次に
[self.moviePlayer.view removeFromSuperview];
で、動画の画面を取り除いています。