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再生をプレビューできる。