@potato4d が@tomoaki.hirabayashi に2つのキャプチャ画像を比較する社内ツール『ASIS-TOBE Maker』について、開発の経緯、利用している技術、Webで動画編集を行うモチベーションなどを聞いてみました。
編集画面
出力される動画
@potato4d
こんにちは、uitのpotato4dです。ユーザーインターフェースとテクノロジーを愛する開発者のための Weekly Podcast『UIT INSIDE』、今週も始めていきたいと思います。 今回はですね。フロントエンドエンジアの平バヤシさんをゲストにですね。社内で開発している。動画出力ツールについて、色々お話を伺いたいなと思って、。ご招待しました。
@potato4d
本日はよろしくお願いいたします、お願いします。
tomoaki.hirabayash
LINEに所属している平林と申します。役職はフロントエンドエンジニアで、 普段はLINE証券の開発に携わっております。お願いします
@potato4d
よろしくお願いいたします。 では、早速本題に入っていきたいと思うんですけど。今回ですねえ。動画出力回りをフロントエンド技術でやってるっていうのを、お見かけしてお話いただこうかなと思ったところなんですけど、まずは社内で開発しているツールがどんなものかっていうのを簡単に紹介していただいてもよろしいでしょう。
tomoaki.hirabayash
私はあのLINE証券の中で、ビフォーアフターの動画を 比較的lsittobメーカーというものを作っています。どんなツールかをあの簡単に紹介させていただくと、2つのあの 動画を簡単に比較できる、ウェブアプリケーションと思っています。例えば、あのウェブサイトを同時パフォーマンスめっちゃあれたぞ。みたいな時に、
tomoaki.hirabayash
ビフォーアフターの動画を作りたい時ってあると思うんですけど、そういうのは、簡単に2つのあの ビフォーとアフターの動画を1本ずつ読み込んだら、自動的に比較動画を作ってくれるといった感じのソフトになっています。
@potato4d
なるほど、なるほど、あれですね、結構あの画像だけ画像とかで、これまでとこれからで変わったやつとかを こう貼るっていうのは、結構ギッtハブのプルliクとかに貼るとかもよくあるかなと思うんですけど、それだと、あのパフォーマンスとかだと、違いが分からないんで、ま。動画化して見せられるようにしたっていう風なツールっていう。
tomoaki.hirabayash
そうですね、動くビフォーアフターみたいな感じです。
@potato4d
いいですね、 あれですもねひらヒラバヤシさん以前の。UIT Meetupでも、お話いただけたかなと思いますけど、結構パフォーマンス改善をあの業務で行っているっていうところから、結構需要が だまって、作ったっていう風なとこ。そうです
tomoaki.hirabayash
すね、ですかね、前回のUIT Meetupでもお話させていただいた、パフォーマンスランキングっていうののために作ったツールなので。そんな感じですね、
@potato4d
ありがとうございます。せっかくですし、なんか簡単に見られた方がいいかなと思いますので、SHow Note のほうに GIF か何かを貼っていこうかなと思いますので。ぜひ、このエピソードを聞きにられながら、どんなツールかっていうのを見ていただければなと 思います。次きたい、行きたいと思います では、次ですね、今少し触れてしまったんですけど、制作のモチベーションであったり、なんか、詳しいところ、開発の経緯についてお聞きしたいなと思ってるんですけど、そもそもこれがえー。なぜ必要になったかみたいなのお伺いしてもよろしいでしょうか。
tomoaki.hirabayash
先ほど説明しちゃったんですけど、LINE証券のパフォーマンスランキングっていうページが あるんですけれど、このページのAPI曜ビlシュをキャッシュ化した時に、あのその実装についてブログをし したんですけれど、その記事の中であのキャッシュがあるのとないので、どのくらい体感速度が違うのかっていうのはま、文章だけじゃわかりにくいかなと思って、
tomoaki.hirabayash
直感的に示す動画を作りたかったから作りました。でも、あの動画編集ソフトをちょっと持っていなくて、ちょっとどうやって作ろうかなっておも たところで、せっかくなら、あのビフォーアフターに特化した動画編集ソフトを自分で作ってしまおうかなと思って作成しました。おお、
@potato4d
そこでこう自作するかってなのがすごい……
tomoaki.hirabayash
いいですね。個人開発とかは結構好きだったので、結構楽しんで作りました。
@potato4d
なるほど、なるほどいいですね、 じゃこれ元々モチベーションとしてはあれなんですね。その対外的に発表するにあたって、ちゃんとこう動画になった方がいいかなっていうところがきっかけだったんですね。うん、
tomoaki.hirabayash
そうですね、うん、うん、うん、うんうん。
@potato4d
結構なんか車内でもそれこそこれをリクエストにあったりとかで使えるのかな。みたいな気持ちもありましたけど、なんか当時はまチーム内では時間測ったら十分に伝わるし、 以下みたいな感じだった。
tomoaki.hirabayash
そ、そうですね、あの風リクエストとかにも、それこそあのランキングのキャッシュ化を実装した風、リクエストとかに出力した動画を貼ったりして使いました。なので、あの社内でも結構チームの人に こんな感じになったよってぱってわかるように使うには便利かなと思います。おお、
@potato4d
素晴らしいですねです。なるほど、なるほど、ちなみに今その需要があって、自分で個人開発とかも好きだし、作ってみたって話があったんです。あったと思うんですけど、結構動画の人 くとかってなるとこうウェブ技術だと、そんなに馴染みのない領域かなと思うんですけど、今回ウェブベースで作ろうとした。なんか、きっかけみたいなのってあったりするんです
tomoaki.hirabayash
すか、そうですね、LINEでの開発業務では、普段マックを使ってんですけど、あのー、マックネイティブのアプリで 開発した経験がなかったもんで、ウェブベースでワンチャン行けないかな。みたいな感じにやったのが、ウェブで作ろうかなって思ったきっかけですね。割とhtml5とかになってから、lAPIとか使って、あの パソコンの中のファイル読み込んだりするのも楽になりましたし、キャンバスとかもあれば、できるかなって思ったのがきっかけです。
@potato4d
なるほど、でまやってみたら、本当にできちゃったから、ああま良かったかみたいな感じですかね。いいですね、なんか、そうやって挑戦して実際できたっていうのは、こう後にも繋がりますし、
@potato4d
すごい挑戦で良いですね。
@potato4d
結構私とかだったらこうなんかこう。動画関連のやつってなると、ウェブでなんかできやるやれなくはなさそうだけど、ちょっと大変かもなみたいなんで、尻込みしちゃうんで、すごい
tomoaki.hirabayash
いいなとありがとうごしざいたます。
@potato4d
ちなみに、これって開発しよう。いけるんじゃないかと思ってやってみたっていうことなんで、多分やってみてから、なんかこう。工数というか、どれぐらいかかるかみたいなのがわかった形になるかなと思うんですけど、実際開発するのってどれぐらいかけたんです
tomoaki.hirabayash
かね。そうですね、こんな感じに作るかなみたいに、もうあの喉ド書きながら進めちゃったんで、なんかそのまんま一晩で作りました。ただ、 スピーディに作りすぎて、汚くなっちゃって、んで、それはちょっとリファクタリングしたいなと思ってます。
@potato4d
なんか、技術的には何かいReact使ったりとか、なんかスタックワーどいう感じでや
@potato4d
おお。なるほど、じゃ、初期はもう完全に index.html だけから始まったみたいなツールなんですね。いいですね、そのスピード感めっちゃ今なんかじゃ細ぼと今も回収を続けてるみたいな、はいところですかね。今、あの
tomoaki.hirabayash
ウェブmでしか出力できないんですけれど、ちょっと それだと使い勝手が悪いかなということで、最初から自負で出力できるように回収しているところです。
@potato4d
そうなんですね、それはなかなか楽しみなところでは。ありますね、ありがとうございます ではですね、今ちょっと自フの話とかもえー出たんで、えー。できれば、仕組みの方にえーついて聞いていきたいかなと思うんですけど、 結構こう。動画関連の入力し力。特に今回の場合だと、2つ以上の動画っていうのをこう取り込んだ上で1つの動画に固めて出力するみたいなのが必要になるかなと思うんですけど、これってどんな感じで実装してるんですかね。
tomoaki.hirabayash
と、まず、あの比較する2つの動画をモバiAPIで ファイルを選択して、読み込んだものを、あの video tag のソースに入れる感じで、動画を読み込んでいます。あー、
@potato4d
インプットファイルから受け取ってま。それをブログに変換して、 video tag のsrcにつくみたいなです。感じはいですかね。
tomoaki.hirabayash
あと、それをあの読み込んだ後にの動画をキャンパスにレンダリングしています。リアルタイムに video tag をあの 2つの動画を同時に再生始めてれは、あの30fpsとかで、キャンパスつの方にレンダリングすることで、2つの動画を結合している感じです。
@potato4d
なるほど、一旦ビデオからキャンバスに行って、そのキャンバスの中身をあのし、動画化しているっていう風なそうですことなんです
tomoaki.hirabayash
出力する際は、あのキャンバスをMedia Recorder APIっていうのがあるんですけれど、それをつか たあのキャンバスを結構簡単に録画することができて、それをすることで出力しています。なので、あのリアルタイム出力になっていますね。
@potato4d
そうなんですね、結構そこってもう、ほんと数行でできたりするんですか。
tomoaki.hirabayash
結構割とそうですね、aziztobメーカー自体も全部の ボード合わせて500両いかないくらいなので、録画も結構簡単にできたりします。
@potato4d
そんなシンプルなんですね、全然知らなかったです。なるほど。
@potato4d
じゃあもう一旦ビデオにもう取り込んで、それを結合して、こう出力するまでが結構こうなんでしょう。hmlとかドムプラス、そのjsのAPIの範囲でできちゃう感じな
tomoaki.hirabayash
あね。バックエンドとか全く使わずに、htmlファイル1個でローカルでダブルクリックして、開くだけで動いちゃう感じなので、結構その辺はお手軽かなと思います。いいですね、 ありがとうござい、
@potato4d
全然然然知りませんでした。ちなみに、その出力の部分って、ちょっと技術的なとこで、えっと伺いしたいんですけど、今、ウェブエームだけで出力してるみたいな話があったと思うんですけど、なんか、これって、拡張子とかってこういろんなものやろうと思えばできるようになってるんですか。
tomoaki.hirabayash
それは今んところウェブmだけなんですね。それはあのビリアレコードエフェア いっていうのが今現状で、主要なブラウザではウェブmでしか収録できないようになってて、これがmp4とかに対応すればけ こう簡単にできるんだけどなだところです。ただ、あのffエペグのウェブアセンぶり版が今出てると思うんですけど、それを使えば、割と
tomoaki.hirabayash
いろんなオデックで出力したりすることもできるかなと思うので、そこはちょっと要検討かなと今思っています。確か
@potato4d
たり、最近ffmpgであったりだとか、例えば、イメージマジックとかもそうですけど、こうなんか、 あのマシン内で使うことが想定されてるようなこう編集、画像や動画の編集系もどんどんこう カズムに移植されてきてるんで、ちょっと期待がそう持てそうですね。出力周りでもう1つ聞きたいんですけど、さっきあの仕組みのところで、あの2つの動30fpsで同時で再生してみたいな話をしてたかなと思うんですけど、なんかこう。
@potato4d
Media Recorderーにしつ出力する時って、そのfpsみたいなものは、自分で設定して、こう動かすみたいな感じそうです。
tomoaki.hirabayash
あれですかね、自分で設定して、fpsは1自在にできます。
@potato4d
なるほど
@potato4d
や結構あれですね、今後自負化するとかってなると、30とかだとちょっとこう。大きすぎるファイルになるからま、15とかでもいいかなみたいな感じで、調整は結構好きやすい
tomoaki.hirabayash
ねジあのですか、簡ね単に再生周りと、あのMedia Recorderーの 方のfps出力がオド的にバラバラになっているので、そこはあのちゃんと合わせる必要はあるんですけど、普通にジフとかな。5fpsとか、自fpsにすることもできるかなと思います。
@potato4d
いいですね、なんか、ちょっと色々まだまだ回収の違いがありそうなのがす。楽しみですね。自負にすると、ほんといろんなところで使えますし、なんかこう。今後 さっきのmtp放出力とかすると、最近ギッtハブも動画埋め込みとかも対応してるのもありますから。なんか動画にしろ、自分にしろ、使える範囲が今後
tomoaki.hirabayash
させていただきたいなと思います。
@potato4d
最後にえ。できれば聞きたいんですけど、今後、このあの動画の出力ツール、えーを開発していくにあたって、なんか、mp4対応以外にこういうのもやってみたいなみたいなんがあったら、お伺いしてもいいですか。
tomoaki.hirabayash
そうですね、企画動画を作る上であのやらないといけないことが1つあって、それはあの2つの動画の 視点を合わせることだと思うんですけれど、比較の開始時間を動画の撮り始めの時間とは 違う時間になると思うので、そこを合わせるのは、手動でやらないといけないと思うんですけれど、そこはあの自動でできるようにしたいなと思ってい
@potato4d
ます。確かに、なんかあの頭を揃えるって結構手動でやるとめんどくさいですけど、なんか機械的にやれそうなきも
@potato4d
ちょっとしますもんね。
tomoaki.hirabayash
画像認識のライブラリがJavaScript。結構充実まではしてないですけど、いくつかあるので、それを使えば結構実現できるのかなと思っています。
@potato4d
確かに、それが できると、より作るの効率的になりますし、なんかなかなかもっといいツールになっていきそうですね。では、一旦こんなところで閉めて、エディングの方に行こうかなと思います。 はいわけで、今回は平イバヤシさんをゲストにですね。動画のしる出力ツールの。フロントエンダーの実装について話を聞いていきました。
@potato4d
思っております。また、このポッドキャストに関する。ご意見やご感想があれば、。ぜひぜひソーシャルで拡散していただければなと思います。ハッシュ、タグハッシュ、uit、アンダースコアインサイトに手つぶいていただきます。とスタッフが 修理拾って拝見させていただきますので、ぜひぜひツイートいただければと思います。えーというわけで、今回は平林さんをゲストに。動画の編集するクすのフロントエンドについて話していきました。ありがとうございましたました。
