レビュー

無料・広告なし・登録なしでスマホ・PCからブラウザで動画が編集できるウェブアプリ「Clip JS」を実際に使ってみた


ClipJS」はFFmpegのWebAssembly版であるffmpeg.wasmとNext.js、Reactの動画生成ライブラリであるRemotionで構築された動画編集ウェブアプリです。登録不要かつ無料で、PCやスマートフォンのブラウザから使うことができます。

ClipJS
https://clipjs.vercel.app/

今回はClipJSにPCのGoogle Chromeからアクセスしてみました。動画編集を行うには「Get started」をクリックします。なお、利用にはユーザー登録は必要なく、無料でも使うことができます。


プロジェクトを作成するため、「Add Project」をクリック。


プロジェクト名を入力し、「Create」をクリックします。


作成されたプロジェクトをクリック。


ClipJSのUIが表示されました。無料で使えるウェブアプリですが、広告は一切表示されていません。


左上にある「Add Media」をクリックし、読み込みたい動画を選択すると、動画がボタンの下に表示されました。ClipJSはウェブブラウザ駆動ですが、編集作業はすべてローカルで行われるので、別のサーバーに動画素材がアップロードされることはありません。


動画ファイル名の左にある「+」をクリックすると、タイムラインに動画素材が追加されます。


右カラムには動画のプロパティが表示され、動画素材の開始時点と終了時点、スクリーン内でのX座標、Y座標、透明度、幅、高さ、レイヤーの重なり順、透明度を変更できます。


タイムラインは4行で、上から動画、音楽、画像、テキストとなっています。動画や画像にレイヤーの概念は存在しますが、Z-indexで設定できるのみで、視覚的には表現されません。


タイムラインの左上には操作パネルがあります。「Split」は動画素材をプレビューの再生位置で切断します。「Duplicate」は選択した動画素材をコピーして下レイヤーに貼り付け、「Delete」は選択した動画素材を削除します。


UI左上にある「Text」では、字幕となるテキストレイヤーを生成できます。表示させたい内容は「Text Content」にある入力欄に入力します。


テキストレイヤーの表示開始時点と終了時点、X座標とY座標、フォントサイズ、Z-index、フォントカラーを選択し、「Add Text」をクリックすると、タイムラインのテキスト部分に指定したテキストレイヤーが配置されました。プレビュー画面には、指定した内容の字幕が表示されています。


ClipJSでできるのは動画のごく初歩的なカット編集とテキストレイヤーの追加のみ。細かなエフェクトやトランジションなどは設定できません。編集が終わったら、左上から「Export」をクリックし、解像度・画質・プロセス速度を指定して「Render」をクリック。


動画の書き出しが始まりました。今回は解像度1080p・画質High・プロセス速度Balancedに設定していますが、レンダリング自体はブラウザ上で行われているので、書き出しにかかる時間は使用しているPCのスペックによります。やや古めのノートPCだったので、46秒の動画を書き出すのにかかった時間はおよそ40分。通常の動画編集ソフトで書き出す場合のだいたい30~40倍もかかってしまっている状態で、実用性からはほど遠い印象。


動画の書き出しが終わったところ。「Save Video」をクリックして書き出した動画を保存します。実際に書き出した動画を見ると、プレビューではちゃんと日本語だったのが文字化けしており、どうやら日本語には対応していない模様。また、ClipJSはPCだけではなくスマートフォンでも使えますが、レンダリングがかなり遅いので、記事作成時の段階だと「その場で撮影した動画をさっと編集する」という使い方には期待できなさそうでした。


なお、ClipJSのソースリポジトリはGitHubに公開されています。

GitHub - mohyware/clip-js: online video editor built with nextjs, remotion and ffmpeg (web assembly port) for render.
https://github.com/mohyware/clip-js

この記事のタイトルとURLをコピーする

・関連記事
OBSのチャプターマーカー追加用のホットキーを増やして自動的にチャプター名を設定できるようにする拡張機能「Additional Chapter Hotkeys」レビュー、キル集やNG集などの切り抜き動画の作成に便利 - GIGAZINE

無料でAIによる動画生成&編集がウェブブラウザ上で可能なオープンソースエディターツール「AI Video Starting Kit」が登場 - GIGAZINE

ゆっくり解説動画を一瞬で作れるAIアプリ「NoLang」の使い方まとめ - GIGAZINE

4K画質&レイトレーシング対応で120FPSをたたき出すNVIDIA DLSS3対応のGeForce RTX 4090搭載グラボ「TUF-RTX4090-24G-GAMING」でゲームしたり動画編集したりしてみた - GIGAZINE

基本無料&ブラウザ上でサクッと動画編集や録画が可能なMicrosoftの「Clipchamp」を使ってみた - GIGAZINE

in レビュー,   ソフトウェア,   ウェブアプリ, Posted by log1i_yk

You can read the machine translated English article I actually tried out the web app 'Clip J….