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

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

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

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

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

プロジェクトを作成する

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

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

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

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

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

Xcode_movie4

画面とファイルを整える

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

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

また、Main.storyboardは実際に、自分でデザインしていくことができるので、デザインしていきましょう。赤い部分をクリックして、全体像を見えるようにします。
Xcode_movie5
画面が大きいので、サイズを変更します。
赤い部分をクリックしてSizeを選択してください。
Xcode_movie6
Xcode_movie7

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

    • 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」へプログラムを記述していくことになります。
Xcode_movie10
工程としては、まず画面が表示されたときにボタンが現れます。

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

それでは、ボタンを画面の上に置いてみましょう。
Xcode_movie11
ボタンをおいたらボタンをダブルクリックして「動画再生」という名前に変えます。

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

右上の赤い箇所をクリックしてください。
すると、画面に対応したプログラム(この場合はViewController.m)が表示されます。
Xcode_movie12
次に、ボタンを選択したままキーボードのcontrolを押しながらプログラムへドラッグ&ドロップをしてみてください。
そして、名前は「tap」とします。nameにtapと記述します。
ここに「動画再生」ボタンがタップされたときに行いたい処理を記述していくことになります。
Xcode_movie13
Xcode_movie14
Xcode_movie15

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

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

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

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

赤い部分をそれぞれ押していき、MediaPlayerというフレームワークを探して「Add」と押します。
Xcode_movie16
Xcode_movie17
Xcode_movie18
このように「MediaPlayer.framework」が挿入されたら完了です。
Xcode_movie19

基本的な考え方

次に、プログラムで使うという準備をする必要があります。ViewController.mの先頭の箇所に
#import
と記述します。
Xcode_movie20
さらに、動画を再生してくれる画面を準備します。下記のように記述することで、準備が完了します。

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

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

後ほどやっていきます。
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は(自分の画面のフレームのサイズの高さ)となります。

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

動画ファイルはプロジェクトにドラッグ&ドロップするだけで取り込むことができます。
Xcode_movie22
Xcode_movie23
左側に「think_different.mp4」という動画ファイルが挿入できたかと思います。
さらに、この動画ファイルをプログラムに読み込ませてあげます。
Xcode_movie24
さらに、動画が始まって、終わったときの処理を書かなければなりません。
書き方は簡単で、
-(void)movieFinishedCallback{

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

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

シミュレーターで確認してみよう

それでは、Runボタン(左上かcommand + R)を押して見ましょう。
動画再生ボタンを押すと動画が再生され、動画が終了するともとの画面が現れると思います。
Xcode_movie25

まとめ:フレームワークを使うと色々なことができるようになる

いかがでしたか?

今回のように、フレームワークを使うと簡単にいろいろなことができるようになります。
また、今回はボタン1つにつき動画が1つでしたが、tapの中のコードを使いまわせば、ボタンの数だけいろいろな動画を再生できるようになります。

余裕のある方はどんどんチャレンジしてみてください!

この記事をかいた人

yuta

知識ゼロからプロのInstagram風画像加工iPhoneアプリを作る 特別クーポン配布中! 詳しくはこちらから! エンジニアでプロデューサー ピーターティールが大好きです! Twitter:Yuta Fujii 質問はお気軽にどうぞ!