ちょっとしたiPadアプリを作った話

2012-11-26 00:08 #ios

シンプルなBGMアプリほしい

— なおてぃーさん (@naoty_k) 11月 23, 2012

好きな曲のyoutubeのリンクをHerokuとかにアップしておいて、iPadでそれらをリストを取得してエンドレスで聞けるようにしたい

— なおてぃーさん (@naoty_k) 11月 23, 2012

↑というのを思いつき、2日間でプロトタイプを作ってみた。

ジョジョOPでテンション上げながら。

サーバー側をRails on Herokuで作って、そっからデータを取得までできた。

アプリとサーバーのコードはこちらで公開してます。

YouTube再生プレイヤー

YouTubeの再生プレイヤーはUIWebViewにiframeを埋め込んで実装した。MPMoviePlayerControllerというのでもできそうな感じがするけど、時間かかりそうなので、とりあえずUIWebViewを選択。

iframeはYoutubeの動画の下のところから取ってこれるものを使う。↓こんなの。

<iframe width="560" height="315" src="http://www.youtube.com/embed/UqFvrjhbO8c?rel=0" frameborder="0" allowfullscreen></iframe>

あとは、UITableViewで選択した動画のIDをUIWebViewに渡してリロードすることで、動画を切り替える。

サーバーとの通信

サーバーとの通信はAFNetworkingという便利ライブラリを使って実装した。外部ライブラリのインストールにはCocoaPodsを初めて使ってみた。RailsのBundlerに慣れると、iOSの外部ライブラリの管理がしんどく感じるけど、これでだいぶ楽になれる。

platform :ios, '6.0'
pod 'AFNetworking'

↑のようなファイルをPodfileという名前でプロジェクトのルートディレクトリに置いて（Gemfileっぽい）

$ pod install

して、できた*.xcworkspaceを方を使うと簡単に外部ライブラリを使えるようになる。

自動再生

ここまではそんなに時間がかからなかったけど、ここから

HTMLがロードされたら自動で動画を再生する
動画が終了したら自動で次の曲に移る

の2つを実装するのに、相当手こずってる（現在進行形）。

YouTubeのiFrameプレイヤーをJavaScriptで制御するYouTube Player APIというものがあるので、これを使ってプレイヤーのロード時、動画再生終了時のイベントを受け取る。詳しい実装方法はリンク先のとおりだけど、ポイントは以下のところ。

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
        document.location = "api://didEndedMovie";
    }
}

これで再生終了時のイベントを受け取って、api://didEndedMovieをロードすることができる。

UIWebViewでのロードはUIWebViewDelegateでキャッチすることができるので、これをうまく使うことでJSからアプリ側への通知を実装する。

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSString *requestString = [[request URL] absoluteString];

    if ([requestString isEqualToString:@"api:didEndedMovie"]) {
        // 再生終了時の処理をここに実装する

        return NO;
    }

    return YES;
}

このデリゲートメソッドの返り値をYESにするとUIWebViewはページ遷移するが、NOにするとページ遷移しない。リクエスト先を見てapi://didEndedMovieであれば、再生終了時の処理を実行しNOを返す。

これで再生終了時に次の動画に自動的に移すことが可能

…かと思いきや、なぜかうまくいかないorz

デバッグをしてみると、どうやらJSのonPlayerStateChangeが呼ばれていないっぽい。ブラウザではうまくいっていたので、UIWebViewのみで起きる現象のようだけど、原因がよくわからない…。というところで、今週の土日が終わりました。

以下のページを参考にさせていただきました。ありがとうございました。