GIF結合

以下の6章は並列モードの説明です．連続モードはGIFを一覧順に1周ずつつなぎ，元のフレームの表示時間を引き継ぎます．連続モードでは出力時間やFPSを直接設定できません．

本ツールは，選択された各メディアを一覧の順序に従って，左から右へ，続いて次の行へとグリッド上の各セルに描画します．再生中のキャンバスの各フレームをブラウザ上で順次キャプチャし，GIFアニメーションまたは動画としてエンコードします．元の動画に含まれる音声トラックや撮影日時などのメタデータは引き継がれず，映像のみが出力ファイルに記録されます．

アップロードできる素材は各25 MiB以内で，最大16件まで追加可能です．各素材の寸法は各辺4096ピクセル以下である必要があります．これらの素材をブラウザ上で展開する際，使用される展開メモリの目安が合計100 MiBを超えないように厳格な制限が設けられています．

この100 MiBという値は，GIFのパッチデータと合成済みフレーム，および画像や動画の1フレーム相当のRGBAピクセルデータから算出した保守的な見積もり値であり，ブラウザ全体の実際の総メモリ使用量を厳密に保証するものではありません．とくにGIFファイルについては，内部でgifuct-jsを用いてバイナリをパースおよび解凍し，論理画面の寸法（幅・高さ）とフレームごとの配置情報（disposal method 2や3など）を解釈して表示用に合成を行います．

この入力側の合成方法に関する説明において，出力されるGIFファイル自体の背景が透明になることを保証するものではない点にご注意ください．実際の出力時の背景は，単色または時間経過で変化する虹色（レインボー）で埋められます．また，入力されたGIFに設定されているループ（loop）回数のメタデータは再現されず，代わりにツール側で指定された出力秒数の範囲内で単純にフレームを繰り返し再生し続ける仕様となっています．

内部的な展開処理では，各フレームの差分更新を隠しキャンバス上でシミュレートすることで，最終的な表示状態を正確に構築していますが，特殊なフレーム間最適化が施されたファイルでは，元のオーサリングアプリでの表示結果と完全な一致を見せない場合もあります．

合成するキャンバスのレイアウトは，行数と列数をそれぞれ1〜4の間で指定することで決定されます．指定したグリッドの枠数（行数×列数）を超える数の素材を配置しようとすると書き出し時にエラーとなるため，素材数に応じた十分な枠を確保するか，不要な素材の数を減らす必要があります．

出力されるキャンバスの解像度は，各辺の長さが最小64ピクセルから最大1280ピクセルまでの範囲で指定でき，かつ，キャンバス全体の総画素数（幅×高さ）が100万画素以内となるように同時に制限されています．たとえば，1280×1280ピクセルの指定は163万8400画素となるためこの条件を満たさず，設定エラーとなります．

正方形（1:1）や横長（16:9），縦長（9:16）などのプリセットボタンを利用することで，アスペクト比を維持したまま適切なサイズを素早く入力することも可能です．各セル間には「すき間（Gap）」を，キャンバスの外周には「外枠余白（Padding）」を0〜40pxの範囲で設定でき，計算上のセル幅が0以下にならない範囲で調整します．

背景色はカラーピッカーによる16進数指定のほか，時間経過で連続的に色が変化する虹色設定も可能です．素材をセル内にどのように収めるかについては，余白を残して全体を表示する「Contain」，領域いっぱいに広げてはみ出した部分を切り取る「Cover」，アスペクト比を無視してセルの縦横に合わせて変形させる「Stretch」の3種類のフィッティング方式から選択して制御できます．

これにより，異なるアスペクト比の素材が混在していても，統一感のあるグリッドレイアウトを構築できます．

書き出し時の再生時間とフレームレート（FPS）は，出力ファイルの品質，ファイルサイズ，およびブラウザの処理負荷を決定する重要な設定項目です．再生時間は1，2，3，5，7，10，15秒のいずれかから選択でき，FPSは10，12，15，20，24，30 FPSから選択します．

設定した再生時間に到達するまで合成処理が継続され，元メディアの長さに関わらず指定した時間で録画が自動的に終了します．ユーザーがプレビューを一時停止している状態であっても，書き出し処理を実行した際のGIFや動画は，常に0秒の位置を起点として新たに再構成されます．

動画素材のシーク（再生位置の移動）処理を行うseekVideoFrame関数は，指定された要求位置が現在の再生位置と同位置であり，かつ現在データがすでに存在する場合は即座に解決されます．別の位置へ移動する場合のみ，ブラウザのseekedイベントまたはloadeddataイベントの発生を待機し，10秒が経過しても完了しない場合はタイムアウトとしてエラーを発出し処理を中断します．

同位置を含むこの厳密なシーク処理は，GIF出力処理中において動画素材の該当時刻のフレームを正確に捕捉するために利用されます．一方，動画として出力する際は，各素材を開始位置へシークした後に実時間で再生するアプローチをとります．ファイルの読み込み中や書き出し処理中（isExporting または isLoading状態）は，意図しないデータの不整合を防ぐため，レイアウトや時間に関するすべての設定項目および素材の追加・削除操作が強制的に固定（disabled）されます．

サンプルGIFの追加ボタンを用いることで，実際の素材を用意しなくても操作感を確認できます．配列更新時にObject URLが早期に解放されてしまう問題への対策も適用されています．

出力フォーマットとしてGIFアニメーション（.gif）を選択した場合，キャンバス上の描画内容はgifencライブラリを使用してエンコードされます．この処理では，各フレームのRGBAピクセルデータを最大256色のカラーパレットに量子化（減色処理）する計算が行われます．

GIF出力には専用の厳格な制限が設けられており，総フレーム数が300フレーム以下，かつ（幅×高さ×総フレーム数）の処理画素数が5,000万画素以下に収まるように設定する必要があります．この条件を超過した場合は書き出し前の事前のバリデーションでエラーとなるため，出力寸法や再生時間，FPSを下げるなどの調整が不可欠です．

量子化処理の性質上，元素材の豊かな色味や細かいグラデーションが失われ，バンディング（階調の縞模様）が発生することがあります．さらに，GIFフォーマットの仕様として，各フレームの遅延時間（ディレイ）は100分の1秒（10ミリ秒）単位での指定が必須となります．そのため，指定したFPSに基づく理想的なフレーム間隔が10ミリ秒の倍数でない場合，出力時の遅延丸め処理によって実時間と比較してわずかな差異（再生速度のズレ）が生じることがあります．

GIFのエンコード処理は，1フレームずつキャンバスを描画し，そのピクセルデータを抽出・減色してバイナリを構築する重い演算処理であるため，設定した解像度や長さによっては完了までに数十秒程度の時間を要します．長時間の待機を伴うため，処理の進行状況はパーセンテージでプログレスバーとして画面上に表示されます．

出力フォーマットとして動画（MP4またはWebM）を選択した場合，CanvasのcaptureStreamメソッドを呼び出して映像ストリームを取得し，MediaRecorder APIを用いてリアルタイム録画を行います．この機能は実行環境（OSやブラウザの種類・バージョン）に強く依存しており，すべてのブラウザでMP4（H.264など）の出力がサポートされているわけではありません．

書き出し開始時にMediaRecorder.isTypeSupportedを用いてブラウザの対応形式を確認し，指定されたフォーマットに対応していない場合は，利用可能なWebM形式のコーデック（VP9やVP8）へ自動的にフォールバック（切り替え）を行います．

この際，実際に出力されるデータの実MIMEタイプとダウンロードされるファイルの拡張子が一致するように調整され，ユーザーがMP4を選択したにもかかわらず環境起因でWebMとして保存された場合は，その旨が完了ステータスとして画面上に明確に通知されます．動画録画は無音の実時間録画として進行するため，たとえば15秒の動画を作成するには，書き出し処理自体にも同等の実時間（および前後の初期化・終了処理にかかる時間）が必ずかかります．

終了後は生成されたBlobから自動的にダウンロードプロセスが開始されます．実時間でのキャプチャであるため，書き出し中にブラウザのタブをバックグラウンドに移動させると，ブラウザ側のリソース節約機能によって描画フレームレートが極端に低下し，出力された動画がカクつくなどの影響を受ける可能性があります．