動画→GIF・GIF→WebM変換

本ツールには二つの変換方向があります．MP4・WebM・Ogg動画からは指定時刻の映像フレームを抽出してGIFを作り，GIFからはimg表示の撮影ではなくgifuct-jsによるバイナリのdelayやdisposalの合成を行ってCanvasへ描き，無音のWebMとして記録します．

GIFからMP4を作る機能はありません．ファイル選択欄のaccept指定に加え，ドロップ時にも動画またはGIFかを確認しますが，拡張子が対応範囲でも内部コーデックをブラウザが解釈できなければ処理できません．入力・出力のオブジェクトURLは差し替え時やページ離脱時に解放し，GIF録画で使うMediaRecorder・MediaStream・描画ループも終了時に停止します．

ただし端末全体のメモリ状況やブラウザ実装まで保証するものではありません．

動画ファイルからGIFアニメーションを生成するプロセスは，HTMLVideoElementを用いた動画ストリームの制御と，Canvasを通じたピクセルデータのサンプリング，そしてJavaScriptベースのGIFEncoderによるバイナリ構築という段階を経て実行されます．

まず，ユーザーによって選択された動画ファイルはオブジェクトURLとしてメモリ空間に読み込まれ，DOMツリー上には表示されないバックグラウンドのvideo要素にマウントされます．このvideo要素のメタデータロードイベントを検知することで，動画の全体の長さ（duration）が秒単位で正確に取得されます．

取得された長さが0以下，あるいはNumber.isFiniteメソッドによる判定で正常な有限数値として認識されない場合は，メタデータが欠損した未対応の動画形式や破損したファイルとみなし，エラーメッセージを画面に表示して直ちに変換処理を中断する安全機構が働いています．

正常なファイルと判定され変換処理が開始されると，指定されたフレームレート（FPS）に基づいて，0秒から動画の終了時間までの間に取得すべき全フレームのタイムスタンプ配列が生成されます．ツールはvideo要素のcurrentTimeプロパティをプログラムから操作して再生位置をシークし，シーク完了を示すseekedイベントの発生を非同期で待機することで，指定時間のフレームを正確に画面上にレンダリングさせます．

シークが完了したフレームは，Canvasの2Dコンテキスト（ctx.drawImage）を用いて指定の縮尺サイズで描画され，そのピクセルデータがGIFEncoderのフレームスタックへと順次追加されていきます．この一連のシークと描画のループ処理が全タイムスタンプに対して完了すると，エンコーダーは収集したすべてのフレームデータを結合し，GIFフォーマットの仕様に準拠した単一のバイナリデータ（Blob）を出力します．

変換中は，全フレーム数に対する現在処理中のフレームの割合が計算され，進捗状況としてユーザーインターフェース上にパーセンテージでリアルタイムにフィードバックされるため，ユーザーは進行具合を視覚的に把握できます．なお，本処理は動画の開始位置から終了位置までの全体を対象としており，ユーザーが任意の時間範囲を指定して一部分だけをトリミングしたり切り出したりするような高度な編集機能は提供されていません．

また，処理はメインスレッド上で同期的に順次実行されるため，変換完了までには相応の計算時間を要する仕様となっています．

一方，GIFアニメーションから動画ファイルへの変換プロセスは，img要素による通常のブラウザ再生を撮影するのではなく，gifuct-jsを用いてGIFバイナリのdelayやdisposal（2および3）を解析・合成してCanvasへ描画し，そのストリームを標準APIであるMediaRecorderでキャプチャする手法を採用しています．

まず，入力されたGIFファイルはバイナリとして読み込まれ，画像の寸法やフレーム情報が解析されます（本ツールではファイルサイズ25MiB，一辺4096ピクセル，展開推計100MiBの上限が設定されています）．Canvasの解像度が設定された後，canvas.captureStreamメソッドを用いて30FPSを要求する動的な映像ストリームが生成されます．

このストリームを入力ソースとしてMediaRecorderが初期化され，MIMEタイプはvideo/webm;codecs=vp8が対応していれば優先され，非対応ならvideo/webmが選択され，両方とも非対応の場合は処理が拒否されます．録画期間中は，requestAnimationFrameではなくsetTimeout(1000/fps)による描画ループが実行されます．

このループ内では，毎回Canvas全体の領域が白色（#ffffff）の背景で塗りつぶされ，performance.nowによる経過時間に応じてバイナリから合成されたフレームが上書き描画されます．これにより，透過背景を持つGIF画像であってもデフォルトで不透明な白い背景が適用され，音声トラックのない無音のWebM動画として記録されます．

GIF内部のloop metadataは無視され，ユーザーによって指定された録画時間（2秒から15秒の範囲）に達すると，タイマーによる判定で録画プロセスは自動的に停止し，描画ループもキャンセルされてリソースが解放されます．変換中は入力ファイルや設定，タブ，保存操作が固定され，途中でページを離脱した場合は録画が中断（abort）されて古い更新が排除されます．

録画が停止すると，MediaRecorderを通じてメモリ上に蓄積されていたデータチャンクが単一のWebM形式のBlobオブジェクトとして結合され，ダウンロード可能な動画ファイルがブラウザ上に生成されます．なお，バイナリの遅延時間をもとに描画を行いますが，ブラウザ自体の描画性能やタイマー精度に依存するため，厳密な30FPSや完全なメモリ安全性が保証されるわけではありません．

動画からGIFではFPSを5〜20，縮尺を0.25・0.50・0.75・1.00倍から選びます．FPSを上げると抽出枚数が増え，縮尺を上げると1フレームの画素数が増えるため，生成時間・メモリ・出力容量も増えます．本ツールは最大600フレームかつ幅×高さ×フレーム数8000万画素までを処理条件とし，超過する場合は開始しません．

区間指定はないため，長い動画は先に短くするかFPS・縮尺を下げます．GIFからWebMではファイルサイズ25MiB，一辺4096ピクセル，展開推計100MiBの上限が適用され，元GIFの寸法をCanvasに使い，loop metadataを無視して30FPSを要求するストリームを2〜15秒記録します．

こちらは縮尺やFPSを変更できません．

動画からGIFへ変換すると，フルカラー映像はGIFの最大256色へ減色されるため，グラデーションの段差や色の変化が生じます．GIFには音声トラックがないため元動画の音声は含めず，GIFから作るWebMも白背景に描かれたCanvas映像だけの無音ファイルです．動画からGIFは区間指定を行わず先頭から末尾までを候補にしますが，600フレームまたは総画素処理量の上限を超える条件では処理を開始しません．

GIFからWebMは元GIFのloop metadataを無視し，gifuct-jsによってバイナリからdelayやdisposal（2/3）を解析・合成しながら指定した2〜15秒だけ記録します．どちらも元の色・音声・時間を可逆的に保持する変換ではありません．

生成後は，元ファイルを閉じる前に先頭と末尾の映像，総再生時間，速度，ループ境界，再生可否を確認してください．

動画からGIFへの変換では，動画を指定時刻へ順番にシークし，各フレームをCanvasへ描いてGIFエンコーダーへ渡します．変換中はbusy世代ガードによって重複実行を防ぎ，シーク前後の古い結果を排除するとともに入力・設定・タブ・保存操作が固定されます．ただしシークの即時取消や全メモリ安全が保証されるわけではありません．

長い動画，高いFPS，大きな縮尺を組み合わせるほど，処理するフレーム数と画素数が増え，CPU使用量，メモリ使用量，待ち時間も増えます．このページは処理前に必要メモリを予測しないため，まず短い動画・低いFPS・小さい縮尺で試し，端末の反応を確認してから条件を上げてください．

GIFからWebMへの変換は，通常の画像表示をキャプチャするのではなく，gifuct-jsを用いてバイナリからdelayやdisposal（2/3）を解析・合成してCanvasへ描画し，MediaRecorderで30FPSを要求して指定秒数（2〜15秒）記録します（ファイルサイズ25MiB，一辺4096ピクセル，展開推計100MiBの上限があります）．

loop metadataは無視され，離脱時には録画が中断（abort）されて古い更新が排除されます．元の遅延時間をもとに合成を行いますが，描画負荷やタイマー精度に影響を受けるため，厳密な30FPSや元GIFのループ境界と完全に一致するとは限りません．

MP4・WebM・Oggというファイル名でも，内部コーデックを現在のブラウザがデコードできなければ動画を読み込めません．GIFからのWebM出力もMediaRecorderとWebMエンコードの実装状況に依存します．本ツールはコーデックを追加インストールせず，失敗した動画を別方式で再エンコードする機能も持ちません．

変換後は実際にファイルを開き，長さ，映像，ループ範囲，音声がないことを確認してください．

選択ファイルのフレーム取得・Canvas描画・書き出しはこのページ上で行います．変換中は入力・設定・タブ・保存操作が固定され，離脱時には逆録画の中断（abort）や両処理での古い更新の排除が行われますが，シークの即時取消や全メモリ安全の保証はありません．ただし，サイト本体や処理用コードの取得に伴う通信，ブラウザ拡張，端末の同期・バックアップ等まで制御する説明ではありません．

機密性の高い素材は，利用しているブラウザと端末の管理状態も含めて判断してください．生成後は元ファイルを閉じる前に，先頭と末尾の映像，総再生時間，GIFの速度，WebMのループ境界を再生して確認してください．動画からGIFで上限を超えた場合は，縮尺またはFPSを下げるだけでなく，別の区間切り出しツールで必要部分を短くしてから読み込むと，画質と処理量のバランスを取りやすくなります．