LoveLiverのLive Photo切り出し専用UIをつくった
3月に更新するつもりだったが月末に東京ドームでラブライブ！をみていたので遅くなった。
前回の残された課題のうち，いくつかを完了させ，LoveLiver 1.2.0 としてリリースした。
- [ ] 3秒以外の長さを指定する
- [x] 切り出しをプレビューする
- [x] UIをなんとかする
- [x] Sketchを体験版から正式版にする(31日以内)
出来上がりイメージ
LoveLiver 1.2.0のダウンロードはこちら
Release Dedicated UI for Live Photos Trimming · mzp/LoveLiver · GitHub
今回のUIによって狙い通りのLive Photoを次々生成できるようになり，Photos.appにLive Photoがたくさん登録されるようになった。 せっかくなので作成したUIについて解説したい。
動画のOverview
開いた動画のプレイヤーの下に，サムネイル付きシークバー(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の動画部分とする。
実際の動画には，カメラ・シーン切り替え等があり，切り出し位置を調整したいことがよくある。 そこで，さらに前後1.5秒まで，切り出し位置をスライドできるようにする。スライド位置によって切り出される動画は変わるが，最初に選んだベストショットであるポスターフレームは必ず含まれる。
ここでもシークバーとして作ったOverviewを再利用することができる。さらにスコープを設けて，選択されている3秒間を明るく表示する。明るい部分を左右にスライドして調整する操作になる。 動画の最初や最後に，意図しないシーンチェンジ前後のフレームが入っているか確認しやすいように，最初と最後のフレームは最下段に別に表示している。 最上段をクリックすることで，調整後の切り出しでのLive Photo再生をプレビューできる。
不要になったもの
メインウインドウでの動画プレイヤー + ポスターフレームの2枚表示UI
今回のUIフローでは最初の画面は動画プレイヤーのみでよくなり，すっきりした。
Command Line Interface
GUIが便利すぎるので，Swift 2.2対応するときにフェードアウトした。 GUIはCLIの上位互換ではないが，コアのJPEG.swiftとQuickTimeMov.swiftがあるので，必要なら細かいこともできるはず。
UIこぼれ話
- 動画ファイルの全体から1点を決める
- → 周辺6秒が拡大表示され，そのなかから3秒をどこにするか決める
- → 切り取られた3秒がPhotos.appに読み込まれ，iPhoneで再生できる
というフローは，全体からみえる一点，その拡大，という一方向のズーミングなインターフェースになっている。 もし先に切り出し開始・終了位置を決めるフローになると，そうではなくなる。 ズーミング感を出すために，Popoverの吹き出し位置はポスターフレームの位置に合わせている。
せっかくiPad ProとApple Pencilがあるので，今回はメモアプリで絵を描いてから作ってみた。
おわりに
LoveLiverを使えば動画からすぐにLive Photoを作成できるので，ロック画面を1枚絵だけではなくLive Photoにして楽しんでほしい。卯月はピンクなので，ローズゴールドのiPhoneのロック画面によく合う。背景も揃うとなお良い。
movファイルからLive Photoを生成するLoveLiverにGUIをつけた
Release OSX GUI Application · mzp/LoveLiver · GitHub
インドアLive Photo業界には mzp/LoveLiver というLive Photo生成ツールがある。
これを使って下記のような手順を踏めば，好きな動画の一部をiPhoneのLive Photo壁紙に設定できて便利。
#デレステ で縦MV録ってQuickTimeで3秒選んでLoveLiverに渡してPhotosで開いてロック画面に設定するとネイティブ解像度のLivePhotoロック画面が簡単にできる https://t.co/wVQ0I0giHB pic.twitter.com/GWJ4QCc00p
— ばんじゅん(!!) (@banjun) 2015, 11月 26
しかし何度もやっていると，QuickTimeで3秒選んでトリムして保存して，LoveLiverのコマンドライン引数を書いて，というのが意外と手間に感じる。 というわけでOSXアプリケーションにすべく，GUIをつくった。
リリースしたGUIアプリはここの LoveLiver-1.0.0.zip からダウンロードできる。
Release OSX GUI Application · mzp/LoveLiver · GitHub
GUIにより，3秒動画を切り出して保存する必要はなくなり，単に使いたい動画をGUIで開けばよくなった。 Live Photoを生成するには，ポスターフレームを設定し，Live Photoを開始したい位置へシークし， Create Live Photoする。 コマンドライン版と同じようにLive Photo用のJPGとMOVを保存したあとは，Photos.appで自動的に開くようにしたので，Photos.app側でImportを押せばフローが完了するようになっている。
これで日々溜まっていく手持ちの動画のLive Photo化が捗るはずだ。
今後の課題
just worksな感もまだあるので，ざっくりと考えていること:
- 3秒以外の長さを指定する
- 切り出しをプレビューする
- UIをなんとかする
- Sketchを体験版から正式版にする(31日以内)
開発ネタ・雑感
今回のぶんのPull Requestはこちら。
github.com
- もともとiOSで開発した NorthLayout と ※ikemen をOSXアプリに適用してみた。
- デフォルトのMainMenu.xibの編集は，メインウインドウの削除のみ。xibはあまり触りたくないがデフォルトのメニューは殺したくなかった。
- 動画ファイルごとにウインドウを出すのであれば，NSDocumentControllerに任せてしまうのが早そう。ウインドウを閉じずにアプリを終了したときのResumeで再オープンも自動的に対応する。
- NSDocumentControllerに登録するDocument Typesについては，Swiftクラス名はモジュールプレフィックスが必要だった。アプリ側ターゲットにいると意識しないが，
LoveLiver.MovieDocumentとする必要がある。あるいは@objc(MovieDocument) class MovieDocumentとかにしてobjcに同名でエクスポートする。 - 最近はNSWindowControllerとNSViewControllerがある程度いけるので，ドキュメントごとのxibは不要で，NorthLayoutのみでいけた。
- AVPlayerViewとAVAssetExportSessionのおかげで，再生と切り出しはわりと簡単にできた。
- キャプチャは
requestedTimeToleranceBefore = kCMTimeZerorequestedTimeToleranceAfter = kCMTimeZeroしないとずれたフレームのキャプチャになる。デフォルトだとダメ。 - fastlane/gym はOSXアプリでも使えた。
- アプリアイコンはSketchで描いてみた。色はデレステのデフォルトステージ衣装から拾った。操作に慣れたい。
WeakStreaks カンスト
退職のお知らせと2015年振り返り
退職
banjunです。 新卒から5年目になる会社を退職しました。ここ4年くらいはiOSアプリをやっていました。2014年には念願のWWDCにも参加していました。 小さい会社ではないのですが，そこでのiOSエンジニアとしてはトップレベルになってしまったこと，そういう状況において組織のなかでのポジションや展望が5年経って見えてきてしまったことから，新しいチャレンジをすることにしました。
就職
年明けから東京にある会社で働きます。iOSアプリをやる予定です。
ほしいものリストはこちらです。就職祝いいただけると嬉しいです。 http://www.amazon.co.jp/registry/wishlist/NRGJ2Y9E71GR
引越し・無職期間
転職にともない，長野県から東京都へ引越しました。 有給もそれほど残っていなかったこともあり，2週間ほど準備期間ということで無職になってみました。 国民健康保険に加入する等の，就職していると普段はできない手続きとかができました。 いくつかのスケジュール制約から，長野と東京を何往復かしていて，さらに最後には車も手放したので，ばたばたしているうちに暮れになってしまいました。
2015年はなにをしていたのか(で，誰？)
メインプロダクトとしては，iOS用SKK入力キーボードのFlickSKKのバージョンアップの続きを。
サブでAsakusaSatelliteのiOSアプリを書いていたのですが， https://github.com/codefirst/AsakusaSatellite-ios
ちょうどそこで使っているsocket.ioの公式Swiftライブラリが出たので，CocoaPods対応を。 https://github.com/socketio/socket.io-client-swift/pull/7
iOSアプリでコードでレイアウトするときの最速のプラクティスをpod化。 https://github.com/banjun/NorthLayout
今年後半はコードでのautolayoutが再度活発化してきてますが，制約をひとつひとつ書くよりVisual Format Languageで一気通貫に書くのがラクです。 これは洞爺湖で天体のメソッド巡礼をしつつSHIROBAKO一挙をみながらやりました。ちなみにSHIROBAKO巡礼のほうは松本近辺はほぼ自力で特定して行きました。
ちなみにNorthLayout方式はtvOSでもほぼそのまま動くのですが，tvOSのUIとしていいのかどうかはまだこれからです(これはtvOS発表日にやりました)。 https://github.com/banjun/PartyPlay-ios/pull/1
前職でGitBucketを導入・担当していたのでbugfixとか。 https://github.com/gitbucket/gitbucket/pull/697
CocoaPodsのレガシーソースコード対応とか・・・。 https://github.com/CocoaPods/Xcodeproj/pull/239
Apple Watchではgithub contributionを描くグランスを作りました。 私には通常のstreaksを伸ばすのは難易度が高かったので(プロデューサー業もあるので・・)，日数のstreaksではなく週単位のstreaksであるweak streaks(弱者の)を導入してカウントしました。49週まで続いたのでそろそろカンストできそうです。
他に今年行った開発合宿先，イベントなど
それから，ここ10年くらいはブログ書かない暮らしだったのですが始めました。
