02マニュアル
mp3 を読み込むだけで、BPM に合わせた2色の VJ 風動画（1080×1080）を作ります。曲の情報を文字にして、最初と最後に全情報を表示します。MP4 で書き出して SNS にそのまま使えます。
2.1準備するもの
- mp3 ファイル。最初と最後が1小節ずつ空白（無音）の mp3 を用意してください。動画は1小節目の4拍目から始まり、最後の拍で全情報表示に切り替わります。
- BPM。mp3 に BPM のタグがあれば自動で入ります。なければ手で入力します。
- ジャケット画像（あれば）。PNG または JPG。2色にして映像に使います。
- ブラウザ。PC の Google Chrome または Microsoft Edge をおすすめします（動作環境）。
2.2基本の流れ
- MP3 を読み込む。枠にドロップするか、クリックして選びます。
- BPM を確認・設定。違うときは手で直します。
- 画像を読み込む（あれば）。
- シャッフルで表現を選ぶ。押すたびに表現の組み合わせが変わります。
- Tab キーで展開を設定。小節ごとに刻み・濃淡・モーション・BPM・カラーを変えられます。
- MP4 で書き出す。1080×1080 の動画として保存されます。
TIP迷ったら Tab キー。設定の画面（HOME）と展開の画面を行き来できます。mp3 を読み込んだあとの「展開をつける」ボタンでも切り替わります。
2.3HOME 画面
設定ファイル
「設定を保存（.zido）」「設定ファイルを開く」で、作業の状態をまるごと保存・復元します。くわしくは 設定ファイル。
DEMO ファイル
「DEMOファイルを開く」で、サンプルの曲（Higher Hook (Demo)）と設定を読み込みます。まず雰囲気を見たいときに。mp3 や設定ファイルを読み込むと、このボタンは消えます。
mp3 の読み込み
読み込むと枠が2つに分かれ、左が「mp3を変更」（クリックかドロップで曲を差し替え）、右が「展開をつける（TABで切替可能）」になります。枠の下には、動画の開始位置・終わりの全情報表示の開始位置・動画の長さが出ます。
BPM・先頭オフセット
BPM は 20〜400（小数可）。先頭オフセット（ミリ秒）は、mp3 の先頭のわずかなズレを補正するためのものです。
COLOR A / B
動画に使う2色を16色のパレットから選びます。「A⇄B」で入れ替え、「ランダム」で見やすい組み合わせを選びます。ロゴの色もこの2色に合わせて変わります。
ジャケット画像（2色化）
「画像を選ぶ」で追加、「外す」で取り外します。2色にするスタイルを選べます（ジャケット画像）。mp3 に埋め込まれた画像は使いません。
SEED・シャッフル・FPS
SEED は表現の組み合わせを決める番号です。同じ SEED なら同じ映像になります。「シャッフル」で新しい SEED に。FPS は 15・30・60 から選びます。
表示する情報（編集可）
ファイル名・日付・ID3 タグ・音声の情報などを一覧にしています。チェックを外した行は映像に出ません。文字はそのまま書き換えられ、「＋ 項目を追加」で自由な行も足せます。
- 「すべてのチェックを外す」：すべての行を非表示に（もう一度で全部表示）。
- 「タグ情報を非表示」：既定の行を隠し、空の行を1つ置きます。VJ 素材のように、自分の文字だけで作りたいときに。
2.4再生・音量・HUD
- 再生バー：Vol → 先頭へ → 再生 → 経過時間 → シークバー → 長さ → 最後へ → HUD → MP4 書き出し。
- Vol：5段階。クリック・ドラッグ・ホイール・矢印キーで変えられます。ダブルクリックでミュート、もう一度で元の音量へ。プレビューだけに効き、書き出す動画の音量は変わりません。
- HUD：映像の四隅の BPM・経過時間・小節などの表示を ON/OFF。最初と最後の全情報表示の HUD も切り替わります。
2.5展開（Tab の画面）
曲の途中で表現の刻み方などを変えるための画面です。Tab か「展開をつける」で開きます。左に映像、上にタイムライン、右に展開の一覧と操作ガイドが並びます。
展開を追加する
「＋ 現在の小節から新しい展開」（Shift ＋ N）で、再生位置の小節から新しい区間を作ります。刻みは4分音符から始まります。行の「×」で削除。
展開の列
| 列 | 内容 |
|---|
| 開始・小節・拍 | 区間が始まる位置。最初の行は「最初から」で固定です。 |
|---|
| BPM | 1/2・標準・倍速。映像のテンポだけを変えます（画面に出る BPM はそのまま）。 |
|---|
| 刻み | 4分・8分・16分音符。表現が切り替わる間隔です。 |
|---|
| 濃淡 | 刻みの中での濃さの変化（フェードアウト・固定・フェードイン・固定暗転・ランダム・良い感じ・詳細設定に従う）。 |
|---|
| モーション | 動きの強さ（なし・弱め・標準・強め）。 |
|---|
| カラー | A・B の色、⇄ 入れ替え、R ランダム。最初の行は HOME の COLOR A/B と同じ設定です。ほかの行は、変えるまで前の区間と同じ色（点線で薄く表示）。 |
|---|
タイムライン
- クリック・ドラッグで再生位置（赤い線）を動かします。
- 区間の上の数字が刻み、下のアイコンが濃淡、下の小さな棒がモーションの強さです。色が変わる区間には小さな色見本が出ます。
- 黄色い帯：最初と最後の全情報表示。端をドラッグして長さを変えます（最大2小節）。最初の帯は、左端で最初の空白へ最大3拍、右端で曲側へ伸ばせます。
- 白いバー（小節番号の上）：MP4 の書き出し範囲。両端を1拍単位でドラッグ、ダブルクリックで全体に戻ります。
- ZOOM（右上）：小節バーを拡大・縮小。再生中は再生位置を追いかけます。Shift＋ホイール（トラックパッドなら横スクロール）で左右に移動。
操作ガイド・ショートカット
画面右下の見出しをクリックすると折りたためます。たたんだ状態はブラウザが覚えています。
2.6MP4 書き出し
- 必要なら Tab の画面で書き出し範囲を指定します（初期状態は全体）。
- 「MP4 書き出し」を押すと、進み具合と残り時間が表示されます。「中止」で止められます。
- 完了すると「曲名_1080x1080.mp4」が保存されます。範囲を指定したときは、ファイル名に長さ（秒）が入ります。
NOTE映像を H.264 で書き出せないブラウザでは、VP9 形式になる前に確認が出ます。X など多くの SNS は VP9 の動画を受け付けないため、Chrome か Edge での書き出しをおすすめします。
2.7設定ファイル（.zido）
- 保存：「設定を保存（.zido）」で「曲名.zido」をダウンロードします。mp3・ジャケット画像・すべての設定が入ります。
- 開く：「設定ファイルを開く」で選ぶか、mp3 の枠に .zido ファイルをドロップします。保存したときの状態に戻ります。
- 保存できないとき：展開が99個、または表示する情報が50項目を超えていると保存できません（減らしてから保存してください）。
- mp3 が再生できないとき：注意が出たあと mp3 を選ぶ画面になります。選んだ mp3 は音声だけを使い（ID3 タグは読みません）、設定はファイルの内容で戻します。
注意.zido には mp3 そのものが入っています。人に渡すときは、曲の権利にご注意ください。
2.8詳細設定
- 最初と最後の全情報表示のレイアウト：6種類から選ぶか、SEED で自動。最初と最後は常に同じレイアウトです。
- 最初の全情報表示の長さ：1〜4拍（1小節目の4拍目で終わるように前へ伸びる）。曲側への延長は Tab の画面の黄色い帯で。
- 最後の全情報表示の長さ：1〜8拍。
- 刻みごとの濃淡：展開で「詳細設定に従う」にした区間の濃淡。
- 最大レイヤー数：1〜4。重ねる表現の数の上限です。
- 要素の ON/OFF：153 の表現をひとつずつ ON/OFF。停止中に行へマウスを乗せると、その作例をループ表示します。
2.9アンドゥ／リドゥ
BPM・色・SEED・展開・表示する情報・ジャケット・詳細設定・書き出し範囲など、編集できる設定はすべて戻せます（最大300手）。続けて入力した文字は1回分にまとめます。再生位置・音量・画面の切り替えは対象外で、mp3 を読み込み直すと履歴は消えます。
2.10ショートカット
- Space
- 再生／停止
- Tab
- 設定の画面（HOME）と展開の画面の切り替え
- Shift＋←／→
- 1小節移動（連打で続けて戻る）
- Shift＋↑／↓
- 1拍移動（連打で続けて戻る）
- Shift＋N
- 現在の小節から新しい展開（展開の画面）
- ⌘＋Z／Ctrl＋Z
- アンドゥ（macOS／Windows など）
- ⌘＋Shift＋Z／Ctrl＋Y
- リドゥ（macOS／Windows など）
03仕様と仕組み
3.1全体の仕組み
ZIDOEIZO は1枚の Web ページだけで動きます。mp3 も画像もサーバーには送らず、読み込みから書き出しまでをすべてお使いのブラウザの中で行います。
| 工程 | 使っているもの |
|---|
| mp3 の読み込み | ID3 タグと MPEG の情報は独自の解析で読み、音声はブラウザの Web Audio でデコード。 |
|---|
| 映像の描画 | 1080×1080 の Canvas に、1コマずつ描画。表現の選び方や動きは、BPM・音量・SEED から計算します。 |
|---|
| エンコード | ブラウザの WebCodecs で映像（H.264）と音声（AAC）を圧縮。AAC が使えないブラウザでは内蔵の AAC エンコーダを使います。 |
|---|
| MP4 の組み立て | 独自の MP4 書き出し処理で1つのファイルにまとめます。 |
|---|
| 文字 | Google Fonts の書体を使います（初回の読み込み時に取得）。 |
|---|
3.2時間の決まり方
- 1小節目は無音の前提です。動画は1小節目の4拍目から始まり、ここが最初の全情報表示になります（最初の空白へ最大3拍伸ばせます）。
- 2小節目の頭から、BPM に合わせた表現が始まります。最初の全情報表示を曲側に伸ばした場合は、その分あとから始まります。最初の全情報表示は、全体で最大8拍（2小節）です。
- 曲の最後の拍から数えて、指定した拍数（1〜8拍）前から最後の全情報表示になります。
- 先頭オフセットを入れると、拍の位置がその分ずれます。
3.3展開の各設定
刻み
表現が切り替わる単位です。4分音符なら1拍ごと、8分なら半拍ごと、16分なら4分の1拍ごとに次の表現へ進みます。
濃淡
| 種類 | 動き |
|---|
| フェードアウト | 刻みの頭が濃く、だんだん薄く。 |
|---|
| 固定 | ずっと濃いまま。 |
|---|
| フェードイン | 薄い状態からだんだん濃く。 |
|---|
| 固定暗転 | 濃いまま、刻みの半分で一気に消える。 |
|---|
| ランダム | 4分音符ごとに上の3つを割り当て。 |
|---|
| 良い感じ | 文字・要素などひとつずつ別々に割り当て（隣どうしは違うものに）。 |
|---|
モーション
動きの速さの倍率です。なし（止まった完成形を表示）・弱め（1/2）・標準・強め（2倍）。
BPM（1/2・倍速）
その区間の拍・刻み・動きの速さをまとめて1/2倍か2倍にします。動きは区間の境目でつながったまま速さだけが変わり、画面に出る BPM の数字は変わりません。
3.4表現と SEED
- 表現は全部で 153。メイン表現 121・重ねる要素 7・最下層の図形 9・画面全体の効果 16 です。
- 刻みごとに、SEED をもとにメイン表現と重ねる要素を選びます。同じ SEED・同じ設定なら、毎回同じ映像になります。
- 重ねる数は最大レイヤー数まで。超える場合は、散らし文字 → 最下層の図形 → 波形のワイプの順に省きます。
- 表示する文字が1つもないときは、文字を使わない図形の表現だけを選びます。
- OFF にした要素は選ばれません。
3.52色と色の切り替え
- 映像は常に2色だけで描きます。2色は4分音符ごとに入れ替わります（最初と最後の全情報表示では入れ替えません）。
- 展開ごとにカラーを変えると、その区間の頭から新しい2色になります。
- てんかん防止のルール：色の変更は、前の色の変更（なければ動画の開始）から1小節（4拍）以上あいている区間だけ有効です。足りない区間はカラーを変えられず、書き出しでも反映しません。
- ランダムの組み合わせは、色どうしの明るさの差（コントラスト比）が一定以上のものから選びます。
- アプリのボタンなどの部品は色が固定で、ロゴだけが COLOR A/B に合わせて変わります。
3.6表示する情報
- ID3v2・ID3v1 のタグ（曲名・アーティスト・アルバムなど）と、ファイル名・日付（ファイルの更新日時）・長さ・BPM・小節数・形式・ビットレート・サンプリング周波数・チャンネル・ファイルサイズ・音量のピーク／RMS などを自動で並べます。
- タグがない基本の項目（TITLE・ARTIST など）は空の行として用意され、入力するとその文字が映像に出ます。
- 文字は映像の中で、メインの大きな文字・散らした文字・最初と最後の全情報表示などに使われます。
3.7ジャケット画像
読み込んだ画像を正方形に切り抜き（正方形でなければ中央）、2色に変換して表現の1つとして使います。スタイルは次の8種類と、それらを混ぜる「ランダム」です。
ドット（規則ディザ）・ドット（誤差拡散ディザ）・網点（ハーフトーン）・ラインスクリーン・モザイク・文字（ASCII アート）・2値（ハイコントラスト）・等高線（ポスタライズ）
3.8書き出しの形式
| コンテナ | MP4 |
|---|
| 映像 | 1080×1080・15／30／60fps・H.264（High → Main → Baseline の順に使えるもの）。ビットレートは 15fps 8Mbps／30fps 10Mbps／60fps 14Mbps。H.264 が使えない場合は VP9（事前に確認あり）。 |
|---|
| 音声 | AAC-LC・256kbps。ブラウザに AAC がない場合は内蔵エンコーダ（モノラルの mp3 は 160kbps）。 |
|---|
| 長さ | 動画の開始（1小節目の4拍目）から曲の終わりまで。書き出し範囲を指定した場合はその範囲。 |
|---|
| 音量 | mp3 のまま（Vol の設定は反映しません）。 |
|---|
3.9.zido の中身
.zido は ZIDOEIZO 専用の設定ファイルです。先頭の目印「ZIDO」、形式の番号、設定（JSON 形式の文字）、mp3 本体、ジャケット画像本体の順に入っています。大きさはおおよそ「mp3 ＋ 画像 ＋ 数KB〜数十KB」です。
- 入るもの：BPM・オフセット・COLOR A/B・SEED・FPS・詳細設定・要素の ON/OFF・HUD・展開（カラー含む）・全情報表示の長さ・書き出し範囲・表示する情報・ジャケットのスタイル、mp3、ジャケット画像。
- 入らないもの：再生位置・音量・画面の状態・アンドゥの履歴。