# 画像を動画に｜MP4のスライドショーを作る 画像の入ったフォルダを、1本の動画に変えます。 > JPG・PNG・WebP・AVIFの画像をMP4のスライドショー動画にします。無料で、処理はすべてブラウザの中。アップロードなし、登録なし、オフラインでも動きます。 これはhttps://abox.tools/ja/images-to-video/にあるブラウザー用の対話型ツールです。ファイルはそのブラウザーを実行する端末上で処理します。意図した共有や任意の通信機能はページ内で説明します。以下は文章による説明です。利用するにはアドレスを開いてください。 ## 画像は**ブラウザー内で処理**されます。処理のためのアップロードはありません。 すべてのフレームをエンコードするのはお使いのブラウザで、動画を組み立てるのはこの端末のメモリの上です。エンコーダーがネットワークに触れることはなく、仮に触れたとしても、このページの向こう側に画像を受け取るサーバーが存在しません。 - ✗ アップロードなし - ✗ 登録なし - ✓ オフラインで動作 - ✓ ソース公開 - ✓ ファイルは端末に残ります ## 画像を動画にする手順 1. **画像を選びます。** フォルダごと選択欄にドロップするか、ファイルを手で選んでください。ブラウザがディスクから直接読み出します。その間に何かがどこかへ送られることはありません。 2. **順番を決め、1枚をどれだけ映すかを決めます。** ドラッグで並べ替えられます。表示時間はフレーム数でも秒でも指定でき、全体まとめてでも1枚ずつでも設定できます。 3. **解像度とフレームレートを選びます。** 「いちばん大きい画像に合わせる」を選ぶと、最大の画像に従います。プリセットは4K、1080p、720p、正方形、縦長をそろえてあり、どれも合わなければサイズを自分で指定できます。 4. **動画を作ってダウンロードします。** エンコードは手元のハードウェアで動くので、かかる時間は順番待ちではなく端末の性能次第です。できあがったMP4は、そのままブラウザのダウンロードへ渡します。 ## 詳しい解説 [画像の入ったフォルダを動画にする方法](https://abox.tools/ja/guides/turn-images-into-a-video/): 写真からMP4のスライドショーを作る方法。フレームレートと表示時間が実際に何を決めているのか、形の合わない画像をどう扱うか、そして結果に音声が入らない理由。 ## 箱の中のほかのツール - [動画カットツール](https://abox.tools/ja/trim-video/): 再生しながら残す場所に印を付けるだけ。まとめて1本の動画で返します。 - [動画トリミングツール](https://abox.tools/ja/crop-video/): 肝心なところだけを残します。 - [動画の逆再生](https://abox.tools/ja/reverse-video/): 最後のコマから、音も一緒に。 - [タイムラプス作成ツール](https://abox.tools/ja/timelapse-video/): 1時間の素材が20秒に。 ## よくある質問 ### 画像はどこかにアップロードされますか？ されません。画像の読み込みも合成もエンコードも、お使いのブラウザが手元のハードウェア上で行います。このツールにサーバー側は存在しません。ページの`Content-Security-Policy`には接続してよいアドレスがすべて挙がっていますが、そのどれも当サイトのものではありません。唯一の例外は任意機能の「ウェブアドレスから追加」で、貼り付けた画像を取得しに行くため、そのサーバーにはこちらのIPアドレスが見えます。 ### どの画像形式が使えますか？ ブラウザがデコードできる静止画形式ならどれでもです。実際にはJPG、PNG、WebP、GIF、AVIF、そしてAppleの端末ではHEICです。ここに別途の対応表を作って保守する必要はありません。デコードは当サイトではなく、ブラウザの仕事だからです。 ### どの動画形式で書き出されますか？ H.264の映像を収めたMP4で、事実上どこでも再生できます。WebCodecsのないブラウザでは、代わりにWebMへの録画に切り替わります。同じ映像を、受け付ける編集ソフトがより少ない入れ物に収めたものです。 ### BlenderやAfter Effectsのレンダリング連番に使えますか？ 使えます。番号付きのレンダリング連番こそ、これが想定している用途です。レンダラーが書き出したフレームを追加し、表示時間を1フレームのままにして、フレームレートをレンダリングに合わせてください。「名前順に並べる」は期待どおりの数え方をするので、`frame_2`は`frame_10`より後ではなく前に来ます。\ \ 始める前に知っておく価値のあることがひとつあります。H.264にはアルファチャンネルがないので、透過は引き継がれず、背景色に合成されて平らになります。アルファを保ちたい場合は、お使いの編集ソフトでフレームを合成してください。 ### 写真からタイムラプスを作れますか？ 作れますし、レンダリング連番と同じ仕事です。各写真を1フレームだけ映すようにして、フレームレートを選んでください。30fpsなら写真30枚が動画1秒に、12fpsなら同じ写真が2.5秒になります。\ \ 「日付順に並べる」は、カメラの写真を撮影した順に戻します。ファイル名が0001に戻ってしまっているときに効きます。大きさの違う写真が混ざっていても問題はありません。「いちばん大きい画像に合わせる」を選べば、どれも縮小されない大きさで動画を作ります。 ### 画像の枚数や動画の長さに制限はありますか？ ツールに組み込まれた制限はありません。現実的な上限は端末のメモリです。できあがった動画をダウンロード前にそこで組み立てるからです。最初にそれを感じるのは、非常に大きな4Kのスライドショーです。 ### 無料ですか。アカウントは必要ですか？ 無料です。アカウントも、ログインも、試用期間もありません。このサイトには広告があり、それが費用を賄っています。広告に画像の情報が渡されることはありません。 ### オフラインでも動きますか？ 動きます。ページを一度読み込んでから通信を切っても、そのまま使えます。何もアップロードされていないことを示す、いちばん簡単な方法でもあります。処理のために画像をどこかへ送っている道具なら、線を抜いた瞬間に止まるからです。 ### 音楽やBGMを付けられますか？ まだできません。このツールが作るのは映像だけで、書き出すMP4には映像トラックが1本あるだけで、音声トラックはありません。必要な場合は、あとから動画編集ソフトで音を足してください。 ## この主張を確かめる方法 - **処理はこのブラウザー内で行います。** 入力と結果はブラウザー内で処理し、処理コードはそれらを処理用にアップロードしません。Content-Security-Policyは資源と接続先を制限しますが、許可済みの相手はリクエストを受け取れます。内容は検査せず、何も送られないことを単独で証明しません。具体的な操作の要求とソースを比較するか、切断中にローカル操作を完了してください。 - **エンコードは手元で行います。** WebCodecsが動くのはブラウザの中で、できあがったファイルはそのままダウンロードへ渡ります。このアプリにサーバー側は存在しません。 - **Googleが読み込むものと、渡されないもの。** 広告と計測のスクリプトはGoogleから来ています。そのどちらにも、画像に関する情報は渡されません。ファイルも、サムネイルも、名前も、サイズも、枚数もです。画像を読み、デコードし、合成し、エンコードするコードはすべてこのオリジンから配信され、リポジトリに載っています。 - **寄付ボタンが読み込むものと、渡されないもの。** ヘッダーの「Buy me a coffee」ボタンは、cdnjs.buymeacoffee.comのスクリプトが描き、書体をGoogle Fontsから取っています。これはリンク以上のものではありません。訪問を報告しませんし、閲覧者や画像に関する情報も渡されません。押さない限り何も起きませんし、押した先は他人のサイトです。 - **意図した例外がひとつあります。** 「ウェブアドレスから追加」を使うと、画像を取得するためにそのサーバーへ接続するので、相手にはこちらのIPアドレスが見えます。取りに行くのは貼り付けた画像だけで、向きは内側だけです。開いているのは`img-src`であって、`connect-src`ではありません。下のカウンターは、接続した外部オリジンをすべて列挙します。 - **オフラインで動きます。** 通信を切っても、ウェブアドレスからの読み込み以外はすべてそのまま動きます。これがいちばん単純な証明です。 **自分で確かめてください。**以上のどれも、鵜呑みにする必要はありません。このページは、リポジトリにあるテンプレートと設定から、誰でも読んで実行できるビルドスクリプトが生成しています。その結果は`dist`ブランチに置いてあるので、配信されているものと、ソースをビルドした結果とを差分で比べられます。 https://github.com/A-Box-of-Tools/website まず読むとよいのは、Content-Security-Policyについては`config/site.toml`、そしてネットワークに一切触れないエンコードのループについては`src/encoder.js`です。