頭と尻尾はくれてやる!

パソコンおやじのiPhoneアプリ・サイト作成・運営日記


iMovieで縦長動画を作成したい

「赤ちゃんの成長グラフ」というiOSアプリのアップデートで、子供の身長をARKitを使って計測するって機能を追加する予定。



↑そのためアプリ内のヘルプから見られる動画を作ってみた。文字で説明するより動画の方がわかりやすいかなってことで。iPhoneから見ることを想定してるので縦長だ。
埋め込んでもMacのブラウザで見ても上のように左右に黒い部分ができちゃうが、iPhoneで見ると自動的に(スタートボタンのみで)iPhoneのディスプレイにきっちりしたサイズで再生された。


今回初めて縦長動画をiMovieで編集したのでそのあたりの手順をメモ。

(1) iPhone 7 Plus実機で動画を撮影
動画サイズは1080x1920。

オリジナル動画

↑iOS 11の画面録画機能を使っているので録画時にステータスバーが赤くなる。

(2) 動画を回転
編集ソフトのiMovieは縦長動画を出力できない(はず)のでまずはffmpegで90度回転させる。
ffmpeg -i input.mp4 -vf transpose=2 output.mp4
transpose=2は反時計回り。

(3) ステータスバー部分を削除
なんでステータスバーが赤いの?ってユーザーが思うかもしれないのでその部分をffmpegでカットすることに。
ffmpeg -i input.mp4 -vf crop=1868:1080:52:0 output.mp4
↑ざっと測るとステータスバーの高さが52pxくらいだったのでこの値でやってる。

(4) iMovieで編集
上の動画、タイトル画像やキャプションの画像などをiMovieで読み込み編集。

編集中動画

↑90度回転させているのでキャプションなども90度回転させた画像を準備してる。
編集完了後に動画を出力。1280x720の横長動画ができる。

(5) 動画を回転
時計回りに90度回転させて縦長にする。
ffmpeg -i input.mp4 -vf transpose=1 output.mp4
これで720x1280の縦長動画になる。

(6) YouTubeにアップロード
普通にアップロードする。縦長だからといって特にどうこうしなかった。

なお、iOSアプリではUIWebViewを使って動画を表示してる。
{
    UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 100, w, h)];
    [self.view addSubview:webView];
    
    NSURL* url = [NSURL URLWithString:@"https://www.youtube.com/embed/uyRx7XrNHxQ"];
    NSURLRequest* request = [NSURLRequest requestWithURL:url];
    [webView loadRequest:request];
}
*version
iOS 11 beta 10
iMovie 10.1.6
ffmpeg 3.2.2



AVSpeechSynthesizerの声を録音したい

AVSpeechSynthesizerあたりを使ってiPhoneに喋らせたりできるわけだけど、それを録音して音声ファイルを作成、それを動画で使おうとしたんだわ。

AVSpeechSynthesizerとAVAudioRecorder・AVAudioPlayerを一緒に使おうとしたら躓いた - たくあんおいしいのブログ
↑このあたりを参考に。
出力は音声ファイルとして得るようにして、それをiMovieなどの動画編集ファイルで使うつもりで。
確かに音声ファイルを得ることができたんだけど、、、これ、iPhoneのマイクで拾った音を録音するので当然周りの音も拾うしとても使えたもんじゃないんだわ。え?やる前に気付けよ?おっしゃる通りでございます。

それじゃあ面倒だけど、、、iOS 11だと画面を録画できるからiPhoneで喋らせてるところを動画として録画、それをffmpeg使って音声ファイルを分離、というのをやってみたんだけど、あああ、AVSpeechSynthesizerで出力した音声は録音してくれないっぽい。そういや、何でもかんでも録画できるわけじゃないってリファレンス(?)かどこかで見たなあ(今探したけど見つからない)。ほら、映画とかは確か録画できないようにしてるんだよな。あああ、無念。
なお、従来通りMacのQuickTime PlayerでiPhoneの画面を録画してやればできなくもない。んー、、、どうしたものか。


休暇村竹野海岸のキャンプ場に行ってきた

【キャンプ場についてのメモ】

休暇村竹野海岸
↑ここのキャンプ場。軟弱一家なのでオートサイトを予約。フリーサイトは駐車場から登ったりして大変そうだな、オートサイトでよかったなって感じ。
水道、電源付きだしお隣とも距離がある。お風呂は休暇村本館へ行ったんだけど、歩いていける距離なのがありがたい。

夏なのに蚊などに悩まされることなかった。トイレにはダンゴムシの死骸とかはあったけど。Gも見なかったな。朝夕はひぐらしの鳴き声がよく聞こえた。

ゴミは分別して管理棟へ持っていけばおじさんが処理してくれた。

と、まあなかなか快適なところでした。やっぱり休暇村のキャンプ場はいいね。

休暇村竹野海岸キャンプ場の広場

↑あまり平らな広場はないのでボール遊びはやめた方がいい。写真じゃわかりにくいけど結構な斜面。


【近くで遊べるところ】

・庵蛇浜
歩いてすぐのところに庵蛇浜(あんじゃはま)ってプライベートビーチ(?)があって行ってみたんだけど、先の台風の影響で木屑などがいっぱいで泳ごうかなという気にはならなかった。それでも大量の流木などを取り除いた後だったそうで、水そのものは綺麗で、実際泳いでる人もいた。


・竹野スノーケルセンター
竹野スノーケルセンター 公式サイト|山陰海岸国立公園がある兵庫県・竹野でスノーケル(シュノーケル)するなら竹野スノーケルセンターへ
↑ここ。休暇村のカヌー体験が予約できなかったので、こちらで予約してカヌー体験に挑戦してみた。
私、妻、小学4年生の息子の三人。みんな初挑戦。

カヌーのコース

↑このコースに挑戦(画像は鬼伝説コース|たけのジオカヌーより)。
このコース子供は4年生以上が対象。ウチの息子は果敢にもタンデムを拒否、独りでやりたい!と言い大人と同じように独りで乗ることに。最後まで頑張って戻ってくることができた。いや、よく頑張ったよ。
眺めも良くカヌーを操作する感覚が楽しくいい経験になった。

カヌーの出発するあたりではスノーケル体験をしてる人がいたので、カヌー体験終了後に「スノーケルのレンタルはありますか?」と聞いてみたところ、使っていいよとスノーケル一式を親子三人分無料で貸してくれた!海岸からすぐのところでも魚がいっぱいで水が綺麗だしかなり楽しめた。


・竹野浜海水浴場
竹野浜海水浴場
↑キャンプ場から車ですぐのところにあるこの辺りで一番メインの(?)海水浴場に行ってみた。

海上アスレチック

↑こういう海上アスレチックの宣伝に息子が食いついたからだ。
大人は1時間1500円かあ、、、息子に遊ばせて外でのんびりしてるかなあ?と一瞬思ったけど、息子一人じゃつまらんかなと思い結局家族三人で参加したんだが、、、
これが超絶楽しかったぞ。思う存分飛び込んだりしたわ。
最初は1時間じゃ短いんじゃね?と思っていたけどすぐにへとへとになる。
すでに今シーズンの営業は終わってるみたいだけど、、、
それにしても竹野海岸の水はキレイだったなあ〜


・コウノトリの郷公園
兵庫県立コウノトリの郷公園
帰る時に寄った。駐車場、入場料とも無料。

コウノトリ

↑近くで(そうでもないか)コウノトリを見ることができた。飛んでるとこも見たかったけど見られなかったのが残念。色々な展示もあるので結構な時間楽しめる。


・生野銀山
生野銀山
こちらも帰る時に寄った。
坑道内はいつも13℃らしく、Tシャツ短パンじゃ寒い。とにかく着られるものはなんでも着たいってほどだった。個人的にはこういうところ好きなので楽しめた。

別子銅山でもやった記憶があるけど、すくい採り体験をここでもやったよ。大量の砂から金銀錫を探すって恒例のあれね。腰が痛かった。

生野銀山のすくい採り体験の結果

↑俺の成果。息子はこの容器にほぼ満タンまで見つけてたな。



【私的メモ】

イオンの豆炭は火力がイマイチ、二度と買わない。

ナビは最初iPhoneのApple MapだったけどGoogle Mapsだと新しい道路が反映されてて結局そちらを頼りにすることに。相変わらず渋滞情報もApple Mapは表示してくれない(iOS 11 beta 6)。
今度からドライブにはGoogle Mapsをメインに使う。

行きは5号湾岸線を尼崎末広で降りて下道を北上、宝塚から中国道に入った。湾岸線と中国道がもっとすんなりつながればいいのにな。

帰りは中国道を神戸三田で降りて六甲北有料道路、六甲有料道路を使って湾岸線を目指した。
途中あわや阪神高速7号北神戸線に乗りそうになった。ドライブは予習大事よね。
神戸あたりで海沿いの道から住吉浜出5号湾岸線に入るのには左車線にいないとだめ!道なりだと六甲アイランドに行っちゃうという罠。空いてるからって右車線に行くと後で割り込んで左車線に入れてもらうことに。

細野渓流キャンプ場
↑GWにここ行ったけどブログに書いてない。


Harry Potter全巻読み終えた

ついにHarry Potter and the Deathly Hallowsを読み終えた。

iPhone/iPadでHarry Potterを読んでみる
↑1巻目の the Philosopher’s Stone を読み始めたのが2013年の初め頃、、、全部読むのに4年半かかったか、、、

映画は映画館で見たけどストーリーをすっかり忘れてたこともあって楽しめたなあ。

次はやっぱり Fantastic Beasts and Where to Find Them を読もう!と思ってたんだけど、いざ買おうとpottermore.com見たらこれ、The Original Screenplay って書いてある。
Amazonで少し見たらやっぱり小説ではなく脚本形式になってるやつだ。こういうの読みにくいんだよなあ。「呪いの子」は日本語のを読んだけどそれでも読みにくかったしな。さてどうしたものか。


SceneKitでマスクをしたい

ARKitを使ってごにょごにょしてるんだけど、どこでもドア的な表現をSceneKitでしようとしてふと固まってしまった。SceneKitでマスクってどうやるんだ?

どこでもドアの向こう側には別な世界があって、それらがドアの入り口形状の長方形でマスクされれば表現できるわけだけど、、、

いろいろ調べたつもりなんだがマスクのやり方がわからない。

Metalのステンシルバッファでマスクしてみる
↑Metalでステンシルバッファ使ってやったことはあるけど、、、超絶めんどくさい。天下の(?)SceneKitなんだからもっとサクッとできそうな気がしてならない。

結局、、、ステンシルバッファは使わずに、SceneKitでオフスクリーンレンダリング、つまり最初にマスクしたいオブジェクト(どこでもドアの向こうにあるオブジェクト)をMTLTextureに出力し、次にドアのこちら側のオブジェクトとドア入り口の長方形をディスプレイに表示する。その長方形の色はフラグメントシェーダーでMTLTextureから選んで表示してやる、という流れでやることにした。

オブジェクトの位置関係

↑位置関係はこんなの。黄色い四角形がドア入り口に相当。

↑床面がドアの向こうにも表示されてるのはご愛嬌(手抜き)。

GitHub - lachlanhurst/SceneKitOffscreenRendering: Using SCNRenderer to render a scene offscreen to a texture that's then displayed in another scene
↑すごく参考になったのがこちらのコード。不要な部分を排除してすんごい理解しやすいコード。感謝、感謝。SCNRendererクラスって初めて使ったわ。

上のサンプルコードと異なる部分だと、、、
出力するテクスチャの設定。
{
	MTLTextureDescriptor *textureDescriptor = [MTLTextureDescriptor texture2DDescriptorWithPixelFormat:MTLPixelFormatBGRA8Unorm width:width height:height mipmapped:NO];
	offscreenTexture = [device newTextureWithDescriptor:textureDescriptor];
}

ドア入り口の長方形の表示にシェーダーを設定する。ここでシェーダーに渡してやるテクスチャ画像をoffscreen renderingの出力画像に設定してる。
-(void)setupShaderForNode:(SCNNode *)node
{
    SCNGeometry *geometry = node.geometry;
    
    SCNMaterial *material = geometry.firstMaterial;
    
    SCNProgram *program = [SCNProgram program];
    program.vertexFunctionName = @"myVertex";
    program.fragmentFunctionName = @"myFragment";
    material.program = program;
    
    SCNMaterialProperty *imageProperty = [SCNMaterialProperty materialPropertyWithContents:offscreenTexture];
    [material setValue:imageProperty forKey:@"offscreenTexture"];
}

こんな感じでマスクできそうだけど、、、
うーーーーん。やっぱりそのうちSceneKitでしれっと実装される気がする。




Copyright ©頭と尻尾はくれてやる!. Powered by FC2 Blog. Template by eriraha.

FC2Ad