paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

ブラウザだけで高度な動画編集を実現するWebサービス「Flixier」が無償公開中なので使ってみた!

f:id:paiza:20190612130748p:plain
どうも、まさとらん(@0310lan)です!

今回は、ブラウザからアクセスするだけですぐに動画編集ができるWebサービスをご紹介します。

最新のWeb技術を駆使して構築されており、非常に軽快な動作で動画をバリバリ編集していくことが可能になっています。

まだベータ版ということもあり、現在はすべての機能を無償で利用できるのでご興味ある方はぜひ参考にしてみてください!

Flixier

f:id:paiza:20190612130832p:plain
 

■「Flixier」の使い方

それでは、まず最初に基本的な使い方から見ていきましょう!

Flixierのサイトにアクセスしたら、画面上部にある【Sign Up Free】と書かれたボタンをクリックします。

f:id:paiza:20190612131009p:plain

ユーザー名・メールアドレス・パスワードを入力してユーザー登録をしましょう。

f:id:paiza:20190612131027p:plain

すると、自分専用のダッシュボードが表示されます!

f:id:paiza:20190612131039p:plain

この画面で各種設定やプロジェクトの管理などができるようになっています。

また、サンプルデモが用意されているので、どのような動画編集ができるのかを確認するのに最適でしょう。

■基本的な動画編集をやってみよう!

ここからはFlixierを使ってどのような動画編集ができるのか、もう少し詳しく見ていくことにしましょう。

編集をするにはダッシュボード画面から【Create your first project】と書かれたボタンをクリックします。

f:id:paiza:20190612131108p:plain

すると動画編集用のエディタがブラウザ上に起動します。

f:id:paiza:20190612131119p:plain

エディタは4つのウィンドウで構成されています。

それぞれの概要は以下の通りです。

  • リソース:動画・画像・音楽ファイルなどの管理
  • プレビュー:作成中の動画をプレビューで確認
  • インスペクタ:ファイルの詳細情報、調整
  • タイムライン:複数の動画・画像・音楽などを配置


編集をする前に、まずは何でもよいので手持ちの動画をインポートしてみましょう。リソースウィンドウにある【Import】ボタンをクリックして動画ファイルを選択します。

f:id:paiza:20190612131148p:plain

ファイルがインポートされたら、プレビューウィンドウにドラッグ&ドロップで自由に配置することが可能です。

f:id:paiza:20190612131202p:plain

動画を拡大・縮小・回転・反転など、まるでパワーポイントでスライド資料を作っているように細かく調整できるので便利です。


タイムラインでは複数の動画を並べたり、任意のタイミングでトリミングしたりなど基本的な編集をおこなうことが可能です。

f:id:paiza:20190612131215p:plain


フォルダ構造のようなものを作成することもできるので、メインとなる動画や音楽ファイルなどを区別することで使いやすいタイムラインを構築できるでしょう。

f:id:paiza:20190612131232p:plain

1つずつの動画は、インスペクタウィンドウからエフェクトを適用させたりカラーバランスを整えることも可能です。

f:id:paiza:20190612131243p:plain

このインスペクタから調整できる設定項目は以下の通りです。

  • カラーバランス:Brightness,Contrast,Saturation,Hueなど
  • ガンマ値:Red, Green, Blue
  • フィルター:Polaroid,Sepia,BlackWhite,Vintage,Sharpenなど
  • エフェクト:Blur,Noise,Pixelate
  • ポジション:水平、垂直
  • トリミング:Left,Top,Width,Height
  • パースペクティブ:SkewX,SkewY
  • 透明度:Opacity
  • 音量:Volume

など…


また、リソースウィンドウには高解像度のフリー画像を提供するサービスUnsplashと連携し、キーワード検索も可能な画像を取得して活用することもできます。

f:id:paiza:20190612131319p:plain

これらの基本的な機能を利用していくことで、誰でも簡単に動画を編集していくことができるわけです。

■便利な機能を使いこなそう!

Flixierには動画編集に欠かせないもっと便利な機能も提供されているので、いくつかピックアップしてご紹介しておきます。

まずはトランジションです。

これは動画と動画の切り替え時につなぎ目をスムーズにする効果があるわけですが、いくつかのエフェクト効果が用意されています。

f:id:paiza:20190612131401p:plain

これらのトランジションは動画クリップにドラッグ&ドロップするだけで適用することができます。

f:id:paiza:20190612131425p:plain

トランジションの長さはドラッグ操作で調整することもできます。


また、テロップを自由自在に挿入することも可能!

f:id:paiza:20190612131442p:plain

テキストのカラーや枠線、フォント、拡大・縮小、回転など、動画の表示させたい箇所へ自由に配置できるので非常に便利です。もちろんテキストもタイムラインから編集できるように設計されています。


さらに、動画を自在に配置できる特徴を生かして、複数の動画を同時に表示させるピクチャーインピクチャーも簡単に実現可能です。

f:id:paiza:20190612131500p:plain

マウスで好きな箇所に配置できるので、直感的な操作で実現することができます。

このようにFlixierを利用すると、ブラウザ上で動いているとは思えないくらい軽快な動作で動画の編集を完結することができるわけです。

■動画の書き出しについて

ある程度、動画が完成したら次に書き出し作業をおこなってみましょう。

方法は簡単で、画面上部にある【Export】ボタンをクリックします。

f:id:paiza:20190612131529p:plain

動画の書き出し用ウィンドウが表示されるので、確認して問題なければ【Export】ボタンをクリックします。

f:id:paiza:20190612131539p:plain

少し待つと動画ファイルとして書き出されたことが通知されます。

ちなみに、現状は以下の品質で書き出すことができます。

  • SD 480p
  • HD 720p
  • Full HD 1080p


さらに、Flixierの特徴としてWebを活用したシェア機能が提供されています。

【Share】ボタンから以下の項目を選択します。

f:id:paiza:20190612131612p:plain

シェア用の設定ウィンドウが表示されます。

f:id:paiza:20190612131622p:plain

リンクは自分で任意の英文字に置き換えることもできます。

また、期限付きリンクにすることも可能で、事前に日付を設定しておけば自動的に期限が切れてリンクが機能しなくなる設定ができます。(メールで招待した人だけが閲覧できるプライベートリンクにすることも可能)


そして、リンクをシェアするだけで相手側はブラウザから作成した動画をすぐに閲覧することができるというわけです。

f:id:paiza:20190612131651p:plain

さらに、動画内の好きな箇所でコメントを挿入することができます。

f:id:paiza:20190612131722p:plain

社内やチームで動画のレビューをネット上で手軽にできるので便利です。

またプライベートリンクにして、会員特典のように限られた人だけが閲覧できるように公開するのも面白いかもしれませんね。

■動画でプログラミングが学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。

■まとめ

今回は、ブラウザから気軽に動画編集を実現するWebサービスについてご紹介しました!

Flixierはまだベータ版(早期アクセス段階)のため、現在はすべての機能を無償で利用することができるのでご興味ある方は早めにアクセスしておくのがオススメです。

今後もバージョンアップが実施されていくので、さらに便利な機能がどんどん追加されていくはずです。

みなさんもぜひオリジナルの動画作りに挑戦してみてはいかがでしょうか?


<参考リンク>





paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら

paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら

paizaのスキルチェック





※このブログで紹介しているキャンペーンやイベント、およびサイト内の情報については、すべて記事公開時の情報となります。閲覧されたタイミングによっては状況が変わっている場合もございますのでご了承ください。

ITプログラマー・エンジニア転職・就活・学習のpaiza

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編AI機械学習入門

エンジニアのためのプログラミング転職サイト|paiza転職

プログラミング スキルチェックエンジニア求人一覧

未経験からエンジニアを目指す人の転職サイト|EN:TRY

プログラミング スキルチェックエンジニア未経験可求人一覧

エンジニアを目指す学生の就活サイト|paiza新卒

プログラミング スキルチェックエンジニア求人一覧

ブラウザを開くだけで エディタ、Webサーバ、DB等の開発環境が整う|PaizaCloud