LoveLiverのLive Photo切り出し専用UIをつくった

3月に更新するつもりだったが月末に東京ドームでラブライブ!をみていたので遅くなった。

banjun.hatenablog.com

前回の残された課題のうち,いくつかを完了させ,LoveLiver 1.2.0 としてリリースした。

  • [ ] 3秒以外の長さを指定する
  • [x] 切り出しをプレビューする
  • [x] UIをなんとかする
  • [x] Sketchを体験版から正式版にする(31日以内)

出来上がりイメージ

vimeo.com

LoveLiver 1.2.0のダウンロードはこちら
Release Dedicated UI for Live Photos Trimming · mzp/LoveLiver · GitHub

今回のUIによって狙い通りのLive Photoを次々生成できるようになり,Photos.appにLive Photoがたくさん登録されるようになった。 せっかくなので作成したUIについて解説したい。

動画のOverview

f:id:banjun:20160419004030j:plain

開いた動画のプレイヤーの下に,サムネイル付きシークバー(MovieOverviewControl)を新規に作って置いた。動画の各位置の絵がなんとなく分かるコントロールなので,Overviewと呼んでいる。下記のような動機からつくった。

  • AVPlayerViewの標準コントローラではシークにその他の操作に限界があるので,独自のコントローラビューが必要
  • 主にデレステの縦MVをコンテンツとして使っているので,動画ウインドウ自体が縦長でも,それより横長のシークバーを出したい
  • QuickTime PlayerのTrimはわりとかっこいい(あとiOSの写真の動画再生とか)

プレイヤーウインドウの移動についてくるために親子のウインドウにしたが,リサイズあたりは少し不思議な動きをするかもしれない。

Live Photo切り出しフロー

動画から(3秒の)切り出しを指定するUIはいくつか考えられるが(前回バージョンもそのひとつではある),ここでは 「ベストショットのフレームを指定する」 を第一に考えることにした。

まずはAVPlayerViewでベストショットのフレームをシークして探す。その位置で止めて, Live Photo With This Frame ボタンを押す。 するとそのフレームをポスターフレームとするLive Photoの作成用のPopoverが表示されるので,そこで切り出し位置を調整してPhotos.appに書き出す,というフローになる。

Live Photo切り出しPopover

ポスターフレームを決めると,Live Photo生成用のPopoverが表示される。これをSandboxと呼んでいる。 Live Photoは標準で3秒なので,ポスターフレームを決めた場合,デフォルトでは前後1.5秒をLive Photoの動画部分とする。

f:id:banjun:20160419004110j:plain

実際の動画には,カメラ・シーン切り替え等があり,切り出し位置を調整したいことがよくある。 そこで,さらに前後1.5秒まで,切り出し位置をスライドできるようにする。スライド位置によって切り出される動画は変わるが,最初に選んだベストショットであるポスターフレームは必ず含まれる。

ここでもシークバーとして作ったOverviewを再利用することができる。さらにスコープを設けて,選択されている3秒間を明るく表示する。明るい部分を左右にスライドして調整する操作になる。 動画の最初や最後に,意図しないシーンチェンジ前後のフレームが入っているか確認しやすいように,最初と最後のフレームは最下段に別に表示している。 最上段をクリックすることで,調整後の切り出しでのLive Photo再生をプレビューできる。

不要になったもの

メインウインドウでの動画プレイヤー + ポスターフレームの2枚表示UI

今回のUIフローでは最初の画面は動画プレイヤーのみでよくなり,すっきりした。

Command Line Interface

GUIが便利すぎるので,Swift 2.2対応するときにフェードアウトした。 GUICLIの上位互換ではないが,コアのJPEG.swiftとQuickTimeMov.swiftがあるので,必要なら細かいこともできるはず。

UIこぼれ話

  • 動画ファイルの全体から1点を決める
  • → 周辺6秒が拡大表示され,そのなかから3秒をどこにするか決める
  • → 切り取られた3秒がPhotos.appに読み込まれ,iPhoneで再生できる

というフローは,全体からみえる一点,その拡大,という一方向のズーミングなインターフェースになっている。 もし先に切り出し開始・終了位置を決めるフローになると,そうではなくなる。 ズーミング感を出すために,Popoverの吹き出し位置はポスターフレームの位置に合わせている。

f:id:banjun:20160419004131j:plain

せっかくiPad ProとApple Pencilがあるので,今回はメモアプリで絵を描いてから作ってみた。

おわりに

LoveLiverを使えば動画からすぐにLive Photoを作成できるので,ロック画面を1枚絵だけではなくLive Photoにして楽しんでほしい。卯月はピンクなので,ローズゴールドのiPhoneのロック画面によく合う。背景も揃うとなお良い。