iPhoneアプリ「マイクラTube」をリリースしました！

#iPhone

田宮宙比己

2015.12.07

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

アプリのご紹介

underscoreより、iPhoneアプリマイクラTube をリリースいたしました。

このアプリは、マインクラフトの YouTube 動画を気軽に効率的に見ることの出来るアプリです。

マインクラフトは iOS 向けにも出ており、とても人気があります。 Minecraft: Pocket Edition

App Store でダウンロードする

対応機種・OS

iPhone, iPad (iOS 8.4以上)

使い方

タブ名	機能
人気	人気の動画を表示
カテゴリ	カテゴリ（ジャンル）別に動画を表示
検索	フリーワードで動画を検索
お気に入り	お気に入りに登録した動画を観る
その他	開発者にメールを送ったりできる

カテゴリタブ

トーナメント、スピードランなど、カテゴリ（ジャンル）名を選択して、動画を見られます。

検索タブ

フリーワードを入力して自由にマインクラフト動画を検索出来ます。

お気に入りタブ

お気に入りに追加した動画を再生出来ます。

その他タブ

ご質問や意見等をメールで送信頂いたりすることができます。

技術的な話

YouTube 動画を再生するのは比較的簡単

今回、YouTube の一覧データ取得には、YouTube Data API v3を使用しています。また、実際に動画を再生する画面では、Github - youtube/youtube-ios-player-helperを使用しています。これらを使い、比較的簡単に動画一覧を表示したり、動画を再生できます。

[NSString stringWithFormat:@"https://www.googleapis.com/youtube/v3/search?maxResults=%ld&order=viewCount&part=snippet&publishedAfter=%@&q=%@&key=%@",(long)kResultsPerPage, formattedDateString, encodedSearchTerm, kYouTubeKey];

例えばこんな形で、各種パラメータ付きのURLを生成し、データを取得します。

コレを NSURLSessionを使い、NSDataとして結果を取得し、JSON として解釈したうえで、各動画のデータが入ったNSDictionary型の値が集まったNSArray型のオブジェクトに変換しています。最終的に、動画毎に、各種パラメータを取得しています。この辺の話は、以下の記事で解説をしています。よろしければご参照下さい。

schoo で iOS の授業をしてきました [Web API で曲名一覧を取ってくる編] ｜ Developers.IO

ユーザーがある動画を選択したら、その動画のIDを使って、動画再生します。 Storyboard 上で UIView を生成し、Custom Class として、YTPlayerViewを指定。

// self.playerView: YTPlayerView型のオブジェクト    
[self.playerView loadWithVideoId:@"xxxxxxxxx"];

詳細は割愛しますが、このように、ごく簡単に動画を再生できます。

また、他にも、YTPlayerViewクラスでは、例えば以下のような定義がされており、各種イベントと組み合わせることで、簡単に動画の操作をすることが出来ます。

// 動画の一時停止
- (void)pauseVideo {
  [self notifyDelegateOfYouTubeCallbackUrl:[NSURL URLWithString:[NSString stringWithFormat:@"ytplayer://onStateChange?data=%@", kYTPlayerStatePausedCode]]];
  [self stringFromEvaluatingJavaScript:@"player.pauseVideo();"];
}

// 動画の停止
- (void)stopVideo {
  [self stringFromEvaluatingJavaScript:@"player.stopVideo();"];
}

// 指定した位置へのシーク
- (void)seekToSeconds:(float)seekToSeconds allowSeekAhead:(BOOL)allowSeekAhead {
  NSNumber *secondsValue = [NSNumber numberWithFloat:seekToSeconds];
  NSString *allowSeekAheadValue = [self stringForJSBoolean:allowSeekAhead];
  NSString *command = [NSString stringWithFormat:@"player.seekTo(%@, %@);", secondsValue, allowSeekAheadValue];
  [self stringFromEvaluatingJavaScript:command];
}

検索画面

検索画面で、すぐにワードを入力出来るように、タブを選択した時点でキーボードを表示させる機能を実装しました。ただし、この場合問題が発生します。キーボードはタブを覆い尽くしてしまいます。キーボードを消さない限り、他のタブを選択することができません。これは不便です。この問題に対処するため、下記の通りのコード実装をし、キーボードのすぐ上のスペースに存在する、Table View をタップするだけで、キーボードが引っ込むようにしました。

// hideKeyboard: キーボードを引っ込めるメソッド
self.tapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(hideKeyboard)];
[self.tableView addGestureRecognizer:self.tapGestureRecognizer];

また、既に動画一覧が表示されているときは、このジェスチャーが、動画を選択する動作と被ってしまいますので、このコードが発動しないようにしています。