アプリ開発部屋リリースしたアプリの告知とかサポートとか、技術的なお話とか、そんな感じでつぶやきます。この広告は、90日以上更新していないブログに表示しています。フレンチトーストAppleTVのアプリ開発していたらお腹が空いた自宅でtvOS向けアプリの開発していたら、無性にフレンチトーストが食べたくなったので、ノリで作ってみました。これがまずまずの美味しさだったので、アプリ作りとフレンチトースト作りについて、備忘録を兼ねて解説していきたいと思います。Wikipediaちなみにアプリは、テレビ向けっぽく動画のアプリがよかったので、Youtube動画を再生できるアプリを作ってみます。用意したものはこちら今回用意したのはこちらです(※1人分)。Type-Cバニラエッセンスがあると尚良いらしいですが、最寄りのスーパーに売ってなかったので今回は見送りました。今回作成したアプリはこちらに置いてあります。github.com作ろうとしているアプリの概要は、こんな感じです。Applicationを選択し、アプリ名をYoutubeViewerとしておきます。cocoapodsでライブラリを入れようcocoapodsを使って、必要なライブラリを入れておきます。Podfileはこんな感じで設定してみました。'AlamofireImage'endHCYoutubeParserYoutubeのコンテンツに対して、AppleTVでも再生可能な形式のURLを生成してくれるライブラリ。UnboxJSONパーサ。ギャップロさんの記事を参考にしました。AlamofireImage画像の非同期取得ライブラリAlamofireを使うので、せっかくなのでこれも使おうUnboxの使い方については、ギャップロさんを参考にさせてもらっていますよ。www.gaprot.jpまた、フレンチトーストについては、こちらのサイトさんを参考にさせてもらっていますよ。food.kihon.jp卵液を作ろうパンに染み込ませるための卵液の作り方です。言っても、卵をよく溶いて、牛乳・砂糖(とバニラエッセンス)を加えて、しっかりと混ぜるだけです。パンを浸そう出来上がった卵液に、パンを浸します。箸でつまむと、卵液をよく吸います。卵液が全て吸われてなくなるまで、両面をしっかりと浸しましょう。このまま放置するのも良いと思います。それでも卵液が余るようなら、第2・第3のパンを投入しましょう。YouTube今回のアプリ内に並べるYoutubeのコンテンツは、プレイリストを作って用意することにします。適当なプレイリストを作成して、そのプレイリストのIDを控えておきましょう。ちなみに自分は、今回のアプリ用にこんな感じのプレイリストを作ってみました。昔よく聞いていたバンドや照井春佳さん出演コンテンツ、なにかと所縁のあるコンテンツなどを並べてみました。先頭の動画はとてもカッコよろしいです。こちらはURLを見るとわかります。YoutubeAPIを利用してプレイリストを取得するまずはアプリからYoutubeAPIを実行して、プレイリストのデータを取得してみましょう。YoutubeAPIの仕様については、この辺りの公式ドキュメントを参考にするとよさそうです。Keyは、各々で取得してください。あたりを参考に取得すれば、とりあえず動作可能です。DevelopersAPIの実行とJSONのパース(ViewController.swift)API通信部分は、Alamofireを使って、こんな感じでメソッドとして定義しています。completeHander)}viewDidLoad()あたりで、上記のメソッドを呼び出しています。}}JSONデータのパースのためのDTO(YoutubePlaylistModel.swift)受け取ったJSONデータの構造に対応するDTOを、ひたすら定義していきます。今回は、利用する項目が限られているので、不要な項目に対応する構造体やプロパティは、省略しております。NSURL}各DTOを、Unboxableプロトコルに準拠させます。}}CollectionViewで、画面上にサムネイルを表示するデータの取得が成功したら、CollectionViewを使って画面にサムネイルを並べていきます。Storyboardでは、UICollectionViewを画面いっぱいに広げて配置しています。CellのクラスはYoutubeCellに変更し、サイズいっぱいにUIImageViewを配置しています。接続なども忘れずに行いましょう。collectionViewの準備と表示処理(ViewController.swift)通信の取得後に、collectionViewを更新する処理を追加します。self?.collectionView.reloadData()}UICollectionView関連のプロトコルを、いい感じで実装しましょう。}}サムネイルの表示処理など(YoutubeCell.swift)セルのクラスでは、画像の非同期取得処理と、フォーカス時の拡大処理などを実装しておきました。}}アプリを起動してみようここまでくれば、画面上にプレイリストのサムネイルが表示されます。「お?このPV知ってっぞ」と思った方は、なかなかのおっさんです。パンを焼こうここまでくると、パンが卵液をしっかり吸い込んでいると思いますので、さっそくパンを焼いていきましょう。フライパンにバターを入れ、中火で溶かしていきます。溶けたら弱火にしましょう。弱火のまま、じっくりと焼いていきましょう。両面とも焼いていきます。きつね色の焦げ目がついたら、フレンチトーストは完成です!腹減ったね!画面遷移を実装してみようプレイリストが取得できて、コンテンツが表示されるようになりました。あとは動画が再生できれば目標達成です。「任意のコンテンツを選択したらその動画の情報を次の画面に渡す」という処理を実装してみます。遷移先の画面を作成(PlayerViewController.swift)プレイヤー用のViewControllerとしてPlayerViewControllerクラスを作成しておきます。AVKitをimportし、AVPlayerViewControllerを継承します。前の画面からコンテンツ情報を受け取る必要があるので、インスタンス変数としてVideoItemを定義しておきましょう。VideoItem?}storyboardで画面とsegueを追加storyboard上では、AVPlayerViewControllerを配置して、トップ画面からsegueをつないでおきます。segueのidentifierは、適当に設定しておきましょう。配置したAVPlayerViewControllerのクラスは、先ほど作成したPlayerViewControllerに変更しておきましょう。コンテンツが選択された際の挙動(ViewController.swift)トップ画面で任意のコンテンツを選択された際は、選択されたindexPathをもとにVideoItemを取得し、インスタンス変数として保持します。あとは、先ほど設定したsegueを呼び出して画面遷移を行います。}}遷移のタイミングで呼ばれるメソッドで、PlayerViewControllerに対してVideoItemを渡します。}}この辺りのロジックはいくらでもやりようがあるので、お好みで実装してくださいな。動画の再生を行うVideoItemを渡して再生画面まできたら、あとはURLをAVPlayerに渡せば再生開始となります。プレイリストに含まれるvideoIdから、AppleTVで再生可能なURLを生成するために、HCYoutubeParserというライブラリを利用します。iPhoneであれば、他にもWebViewを利用した再生も可能のなのですが、tvOSの場合はAVKitを使う必要があるため、この方法をで再生します。}}HCYoutubeParserのメソッドで、videoIdからコンテンツURLを取得しています。取得したURLをAVPlayerに渡して再生を開始します。再生できました!ちょっとわかりづらいですが、シークなども何もせずに利用可能になります。tvOS向けアプリに関しては、動画アプリとはとても相性がいいと思うので、こんな感じで動画ビューワアプリを作ってみるのもいいかもしれないですね。再生できない動画もあるみたい...?作成したプレイリストのうち、再生できない動画が一定数ありました。試行回数もそれほどではないので定かではありませんが、どうやら古めのコンテンツについては再生ができないみたいでした。アプリもフレンチトーストも完成した!というわけで、無事にアプリもフレンチトーストも完成しました。»Profileid:hoshi0523日中は勤め先で、帰宅後は自宅で、iOSアプリ作ったりしています。始まったので、広告を出稿してみた月別アーカイブはてなブログをはじめよう!hoshi0523さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。