JIZURA README

The project's README from github.com/852wa/JIZURA. As one markdown file: README.md.

JIZURA 字面 — 文字PV自動構成ツール

English edition: Open the app · English guide　／　Bahasa Indonesia：Buka · Panduan　Tiếng Việt：Mở · Hướng dẫn　繁體中文：開啟　简体中文：打开　한국어：열기 · 한국어 가이드

英語版 AE パネル：ScriptUI · CEP

歌詞を入れると、文字PV（リリックモーション）でよく使われる表現を組み合わせてカットを自動で組み立て、MP4 に書き出すブラウザアプリです。レイアウト・動き・装飾・つなぎ・仕上げを 860 の小さな部品（と 27 のスタイル）として持ち、その組み合わせを毎回変えるので、シードを変えれば何度でも別の構成になります。After Effects 用のパネル（スクリプト版と、ブラウザ版の画面をそのまま使える CEP 版）も付属しています。

バージョン：v0.9.0（変更の記録は CHANGELOG.md）

▶ ブラウザで使う：https://852wa.github.io/JIZURA/　／　AE パネル：JIZURA_AE.jsx（スクリプト版。リンク先を右クリック →「名前を付けてリンク先を保存」）・JIZURA_CEP.zip（CEP 版）

ファイル 中身
index.html ブラウザ版の本体（ビルド済み・1ファイル）。GitHub Pages ではこれが開きます。ダウンロードしてローカルで開いても使えます
JIZURA_AE.jsx After Effects 用のパネル・スクリプト版（ビルド済み）
JIZURA_CEP.zip After Effects 用のパネル・CEP 版（ビルド済み。展開してインストール用のファイルを実行）
src/ app/ ブラウザ版のソース（エンジン・表現パック・UI）
ae/ AE パネルの生成エンジンのソース
cep/ CEP 版パネルの外枠（manifest・AE との橋渡し・インストール用ファイル）
docs/EXPRESSION_PACKS.md 表現部品（パック）を追加する人向けのガイド

動作環境
  • MP4 書き出し：WebCodecs に対応したブラウザ（Chrome / Edge 推奨。Safari 16.4 以降・Firefox 130 以降も WebCodecs に対応していますが、H.264 で書き出せるかはブラウザと OS によります）。対応していない環境でも、プレビューと連番PNG書き出しは使えます。
  • スマホでも使えます（iPhone は iOS 16.4 以降の Safari、Android は Chrome）。長い曲を高い解像度で書き出すときは PC をおすすめします。
  • フォントは Google Fonts から、使う書体だけを必要なときに読み込みます（オフラインのときは PC のフォントで代用）。

利用について（出力物の権利とライセンス）
  • このツールで作った動画や画像（出力物）の権利は、作った人に帰属します。商用・非商用を問わず自由に使えます。
  • 使った歌詞や曲の権利は、それぞれの権利者に帰属します。
  • ツール本体は MIT ライセンスで公開しています。詳しくは LICENSE を見てください。
  • 入力した歌詞や曲は、ブラウザの中だけで処理され、サーバーには送信されません。
  • アプリ画面でも、右上の「利用について」ボタン（かんたんモードでは書き出しボタンの下のリンク）から同じ内容を確認できます。

おまかせ（かんたんモード）

右上の「かんたん / 詳細」で画面を切り替えられます。最初はかんたんモードで開きます（スマホでは「スマホ」モード。下の「スマホモード」を見てください）。

  • おまかせで作る（キーボードの R でも可）：押すたびに次をまとめてランダムに決め直し、頭から再生します。
    • スタイル（直前と同じものは出ません）
    • 雰囲気（グリッチ / しっとり / ポップ / グラフィック / エディトリアル / エモーショナル / 全部入り。「ホラーの演出も使う」がオンのときはホラーも）。雰囲気ごとに、動きの強さ・グリッチの量・使うレイアウトや登場・退場の手法が変わります。
    • 見出しや明朝枠の書体
    • 配色（ときどき、アクセント色とズレ色A/Bもランダムになります）
    • カット構成（シード）
  • ◀ 前の案 / 次の案 ▶：おまかせで出した案を行き来できます。気に入った案に戻ってから書き出せます。
  • ここだけ変える：今の案を活かしたまま、一部だけを振り直します。
    • スタイル / 配色（アクセント・ズレ色A/B）/ 雰囲気（動きと使う手法）/ 構成（レイアウトと動きの組み合わせ）
  • 歌詞・曲・タイミング・書き出し設定は、おまかせでは変わりません。行リストで鍵をかけた行もそのまま残ります。

ランダムで使う演出の範囲

おまかせボタンの下（詳細モードでは「手法」タブの上）にあるチェックで、おまかせ・シャッフル・行ごとの再抽選で選ばれる演出を決められます。

  • 追加分の演出も使う（初期状態：オフ）：オフのときは、最初の公開版の演出（356部品・スタイル12種）だけを使います。オンにすると、あとから追加した演出（351部品・スタイル12種・書体6種）も候補になります。
  • 和風の演出も使う（初期状態：オン）：提灯・はがき・障子・扇・家紋・青海波・桜の花びらなどの和風グラフィックと、和風のスタイル（サクラ・墨と朱）です。オフにすると選ばれなくなります。この判定は、追加分のチェックのあとに適用されます。
  • 文字PV系の部品を使う（初期状態：オン）：最初の公開版の部品から派生した、線・数字・字組みだけで見せる部品（50）です。絵やモチーフではなく、文字そのものを主役にします（大字挟み・見切れ大文字・十字組・ルビ振り・罫線組・級数上げ・幅揃え・断ち割り・行中強調・打ち直し・括弧が開く／閉じる・柱とノンブル など）。手法タブでは「文」の印が付きます。
  • キネティックの部品を使う（初期状態：オン）：語ごとに動く、動き重視の部品（51）です（積み上げ・直角ターン・入れ替わり・文字へ潜る・流れて整列・語のカット割り・歯車・正面衝突・語ごとスラム・蝶番おろし・語ごとの拍・読み追いカメラ・刻みカット など）。曲の拍があるときは、語の切り替わりを拍に合わせます。「キ」の印が付きます。
  • ホラーの演出も使う（初期状態：オフ）：不気味な雰囲気の部品（52）と、配色セット3つ（廃墟・深夜の録画・呪いの手紙）です（懐中電灯・扉の隙間・壁の落書き・監視モニター・降霊盤・尋ね人・一字だけ違う・黒塗り文書・砂嵐のテレビ・心霊写真・影が違う、瞬きの間に・飛び出し・鏡文字、引きずり込み・一字残る、痙攣・見つめる字、見ている目・魔法陣・ひび割れ、暗い廊下・広がる染み、怯えた手持ち、サブリミナル・横切る影、砂嵐カット・まばたき など）。オンにすると、おまかせの雰囲気に「ホラー」が加わり、半分ほどの確率でホラーの案になります。おまかせでは、ホラーの部品は雰囲気が「ホラー」のときだけ使います。「ホ」の印が付きます。血や傷などの残酷な表現は入れていません。
  • この3つは「追加分」とは別のチェックで、追加分がオフでも使えます。
  • どれも、行ごとに手動でレイアウトなどを指定した場合や、スタイルを自分で選んだ場合には関係なく使えます。
  • 「手法」タブとスタイル一覧では、追加分に「追加」、和風に「和」の印が付きます。いまの設定でランダムに選ばれないものは薄く表示されます。

スマホモード

スマホ（幅の狭い画面やタッチ操作の端末）では、右上が「スマホ / かんたん / 詳細」の3つになり、初めて開いたときはスマホモードになります。

  • おまかせボタンはヘッダーに固定：画面をスクロールしても、いつでも押せます。
  • プレビューは上に固定：スクロールしても再生画面が見えたままです。
  • 行はたたんで表示：行一覧は歌詞だけを1行ずつ並べ、行をタップするとその行のサイコロ・鍵・カット数などが開きます。見出しをタップすると、歌詞・行一覧・設定のまとまりごとにたたんだり開いたりできます。
  • 保存・開く・初期化などは「メニュー」にまとめています。ボタンは指で押しやすい大きさです。
  • 書き出しが失敗しにくい設定：スマホモードでは、最初の書き出し解像度を 720p にしています。1080p より大きい解像度を選んでいても、スマホモードでは 1080p で書き出します（大きな解像度は「詳細」モードで）。書き出し中は画面が消えないようにし、別のアプリに切り替えていた間は失敗扱いにしません。書き出しのあと、対応しているブラウザでは「共有して保存」から写真アプリなどに保存できます。

配色ランダム

「詳細」→「スタイル」タブの「アクセント・ズレ色」にあります。

  • ランダムに配色：アクセント色と、ズレ色A/B（色ズレの2色）を組み合わせで選び直します。
    • 半分弱は、補色どうしなどで相性を調整済みの組み合わせから選びます。残りは色相環から毎回新しく作ります。
    • 背景の明るさに合わせて明るさを自動で補正し、文字が読める濃さを保ちます（アクセントは背景とのコントラスト比 3 以上）。
  • 色を直接選ぶこともできます。「自分の色で上書き」を外すと、スタイル本来の色に戻ります。

ブラウザ版の使い方
  1. 歌詞：1行が1フレーズです。記法は次のとおりです。
    • 夜明けの色を/覚えてる … / でカットの切れ目を指定
    • *透明* … 強調（大きく・インパクトのある演出が選ばれやすくなります）
    • 行末の ! … フラッシュと揺れが入ります
    • 歌詞|注釈 … 注釈レイアウトに出す小さな文字
    • [01:23.45]歌詞 … LRC のタイムスタンプをそのまま使います
    • [間奏 8] … 8秒の間奏。歌詞は出さず、背景・装飾・画面効果だけが流れます（6秒以上なら曲名とアーティストを小さく表示）。秒数を省くと4秒で、タップ同期やマーカーで長さを合わせられます。[interlude] [间奏] [간주] でも同じです
  2. 曲とタイミング
    • 曲を読み込むと、BPM と拍を自動で検出し、カットの切れ目を拍に寄せます。読み込んだ曲はこのブラウザに保存され、ページを開き直しても自動で読み込み直されます（書き出しで音声が抜けないように）。
    • 「タップで同期」を押すと曲が流れます。各行が始まる瞬間に Space を押してください。押し間違えたら Backspace か「1つ戻る」。行一覧の ◎ を押すと、その行からタップし直せます（前の行の時刻はそのまま）。
    • 行リストの秒数を直接書き換えることもできます。
    • タイムライン：上の目盛り（行の区切り）を左右にドラッグすると、その行の開始時刻を変えられます（拍に吸着、Shift で自由に）。＋／−・ホイールで拡大縮小、Shift＋ホイールで左右に移動、「全体」で戻ります。
    • 歌詞・タイミングの変更は「元に戻す」（Ctrl+Z）で取り消せます。
  3. 行ごとに直す（かんたんモードでも使えます）
    • ✎（または歌詞をダブルクリック）で、その行の歌詞をその場で直せます。記法もそのまま使えます。
    • 「カット 自動 / 1〜6」で、その行を何カットに分けるかを決められます。
    • 行ごとのサイコロで、その行だけを再抽選します。鍵でその行の構成を固定し、レイアウトを直接指定することもできます（詳細モード）。鍵をかけた行は、ほかの行のサイコロ・シャッフル・おまかせをしても、レイアウト・動き・装飾・配色・カット割りまでそのまま残ります。
    • 「シャッフル」で全体を再抽選します。
    • カットごとに差し替える（詳細モード）：プレビューの下のカット情報（レイアウト・登場・保持・退場・装飾・加工・背景・カメラ・つなぎ）を押すと一覧が開き、そのカットだけを別の部品に替えられます。「自動」で元に戻ります。行一覧でも、行の下にカットごとのレイアウトを選ぶ欄が出ます。「このカットをシャッフル／おまかせ」で、そのカットだけを選び直せます。差し替えても、ほかのカットの抽選結果は変わりません。
    • ロック（詳細モード）：「手法」タブの分類ごとの鍵で、その分類の ON/OFF の選び方を、「演出」タブのスライダー・フラッシュ・コマ打ちの鍵で、その値を、おまかせのあとも変えずに残せます。ロックはプロジェクトファイルにも保存されます。
    • ループ：再生ボタンの横の「ループ」を押すたびに、全体 → 行 → カット → なし と切り替わります。行・カットのループ中は、タイムラインに繰り返す範囲が表示されます。
  4. スタイル：配色・書体・質感のセットが27種類あります（サクラ / 深海 / 夕焼けグラデ / 森の手帖 / ヴェイパー / 新聞 / シンセ80s / クラフト紙 / キャンディ / アシッド / 墨と朱 / 金夜、ホラー用の 廃墟 / 深夜の録画 / 呪いの手紙 などを含む）。1本の中でも、カットによって背景色が切り替わります。
    • 書体は Google Fonts の18ファミリー（Reggae One / Rampart One / Potta One / Kiwi Maru / Klee One / Shippori Mincho B1 を含む）から選ばれます。今の構成で使っている書体だけをその都度読み込むので、書体の数が増えても起動や動作は重くなりません。
    • フォントは次の方法で差し替えられます。
      • PC に入っているフォント名を入力する
      • .ttf / .otf ファイルを読み込む
  5. 演出と手法
    • 「演出」タブで、動きの強さ・グリッチ・色ズレ・装飾の量・カットの細かさ・質感・コマ打ちを調整します。
    • 「手法」タブで、10の分類（レイアウト・登場・保持・退場・装飾・文字の加工・背景・カメラ・画面効果・カット間のつなぎ）の部品を1つずつ ON/OFF できます（上の「追加分」「和風」のチェックと組み合わせて判定されます）。分類ごとに折りたたまれていて、「すべてON / すべてOFF / 反転」と名前での絞り込みが使えます。
  6. 書き出し
    • MP4（Chrome / Edge では H.264。曲も含められます）
    • 連番PNG（ZIP）
    • 透過PNG（ZIP・背景なし。AE などで合成する用）
    • 「背景」で グリーンバック / ブラックバック を選ぶと、白い文字と演出だけの合成用素材になります（詳しくは下の「合成用の背景」）。
    • 画面比は 16:9 / 9:16 / 4:3 / 3:4 / 1:1 / 4:5 / 21:9、解像度は 720p〜4K、フレームレートは 24 / 30 / 60fps から選べます（詳しくは下の「24 / 30 / 60fps での書き出し」）。
    • 選んだ行だけ書き出す：「書き出す範囲」で最初と最後の行を選ぶか、行一覧の ⇥ を押します（Shift＋クリックで範囲を広げる）。ファイル名に _L03-05 のように行番号が付きます。
    • 書き出しが失敗しにくく：動画を少しずつ書きながら作るようにし、長い曲や 1080p・1440p でもメモリをまとめて使わないようにしました。GPU のエンコーダーで失敗したときは、自動でソフトウェアのエンコーダーに切り替えて書き直します。
    • 大きな動画用（ファイルに直接保存）：Chrome / Edge では、先に保存先を選んで、そこへ直接書き込むボタンがあります。長い曲を高い解像度で書き出すときに使ってください。
    • 音声：ブラウザが AAC で書き出せない場合（Opus になる場合や音声を書き出せない場合）は、iPhone や QuickTime で音が出ないことがあるため、同じ長さの音声を WAV でも保存します。
  • 統一感（「演出」タブ／かんたんモードのチェック）：オンにすると、文字PVの定石で組み立てます。
    • パート（空行で区切ったまとまり）ごとに、レイアウト・動き・カメラ・装飾をそろえます。くり返す歌詞（サビなど）は、1回目と同じ見せ方で戻ってきます。
    • 動きの方向を交互にし（左→右、上→下）、強い動きはここぞという行に回します。
    • キメ：行末に ! を付けた行（なければ、くり返すパートの頭の行）を、1カットで大胆に見せます（大きな文字・フラッシュ・ズーム・揺れ）。
    • モーフ：同じ行の次のカットへ、同じ字は移動し、ほかの字は溶けて変わります。
    • 太さ：ときどき、細字から太字へ育つように表示します（Noto Sans / Serif JP の可変フォント）。
  • 文字整列（同じ場所のチェック）：かなの字間を詰めて塊で読ませ、助詞（は・が・を・に など）を小さく、行の頭の字を大きく、英字は少し大きくして日本語との間を少し空けます。文字は声より 0.2 秒先に出し、効果を重ねすぎないようにします（装飾は1つまで、画面効果はカットごとに1つまで）。
    • どちらも従来の組み方はそのまま残っていて、チェックを外せば今までどおりです。AE パネルには、選ばれたレイアウトや動き・タイミングが入ります（字間・字の大きさの調整、太さ、モーフは AE では近い表現になります）。
  • 中央を空ける（キャラクター用）：「書き出し」の設定にあるチェックです。中央にキャラクターなどを重ねる前提で、歌詞を2つに分けて、横長の画面では左右、縦長の画面では上下の帯に置きます（例：「花が」｜「咲いた」。帯は横長で幅の約36%、21:9 は30%、縦長で高さの33%）。左右（上下）は同じレイアウト・動き・装飾・カメラの1つの場面で、後ろ半分は少しだけ遅れて出ます。背景と画面効果は画面全体のままで、歌詞を大きく背景に描く背景（大きな一文字）は使いません。1語だけの短い行は両側に同じ語を出します。縦長の画面では「縦長のとき」で、上下に分けるか左右に分けるかを選べます（左右のときは帯が幅の34%）。プレビューには空ける範囲を点線で表示します（書き出しには入りません）。AE パネル（スクリプト版の「歌詞から」、CEP 版、JSON）でも同じ配置になります。
  • 画面の固定表示：横幅・高さが十分ある画面では、ページ全体はスクロールせず、中央のプレビューとタイムラインが常に見えたままになります。歌詞・行一覧（左）と設定（右）は、それぞれの列の中でスクロールします。再生中は、行一覧が今の行を自動で追いかけます（一覧をスクロールした直後は止まります）。狭い画面では、今までどおりページ全体がスクロールします。
  • 歌詞を消す／初期化：「歌詞を消す」（歌詞欄の右上）は、歌詞と、行ごとのタイミング・指定・書き出す範囲を消します。「元に戻す」か Ctrl+Z で戻せます。ヘッダーの「初期化」は、歌詞・曲（このブラウザに残していた分も）・設定・案の履歴・取り消しの履歴をすべて消して最初の状態に戻します（確認のあと実行。元に戻せません）。表示モード・音量・画面の言語はそのままです。
  1. AE用に書き出し：今の構成（タイミング・レイアウト・演出・配色）を JSON に書き出します。AE パネルで読み込むと、同じ構成のまま編集できるコンポになります。

はじめての案内（かんたんモード）

初めて開いたときに、歌詞 → 曲 → おまかせ → 再生 → 行ごとの修正 → 書き出し の順に、画面を指しながら案内します。上の「？」ボタンでいつでも見直せます（← → で移動、Esc で終了）。

画面の言語

画面は 日本語 / English / Bahasa Indonesia / Tiếng Việt / 繁體中文 / 简体中文 / 한국어 で表示できます（右上の言語メニュー）。プロジェクトの保存形式は共通で、どの言語の画面でも同じファイルを開けます。演出部品の名前は、日本語以外の画面では英語で表示します。

プレビューの音量

再生ボタンの並びにある音量スライダーで、プレビューの音量を変えられます。「音量」ボタンを押すと消音／解除。ブラウザに記憶されます。書き出す MP4 の音量は変わりません。

24 / 30 / 60fps での書き出し
  1. 「書き出し」タブ（かんたんモードでは右の「書き出し」欄）で、画面比・解像度・fps を選びます。
  2. 「MP4 を書き出す」を押します。選んだ fps のフレーム数でそのまま書き出されます（例：6秒なら 24fps で 144枚、60fps で 360枚）。
  3. 動きのカクつき具合は fps とは別に「演出」タブの コマ打ち で決まります。
    • 2コマ打ち（12枚/秒）：文字PVらしい、少しカクッとした動き。どの fps で書き出しても同じ見た目になります（既定）。
    • 3コマ打ち（8枚/秒）：さらに作画っぽい、止め気味の動き。
    • フル：出力 fps のまま毎フレーム動きます。60fps + フルが最もなめらか（カメラの動きや流れる帯がきれい）。
  4. グリッチや点滅のランダムな切り替わりは、fps を変えても 24fps 基準で同じ速さになるようにしてあります。60fps で書き出してもチラつきが倍速にはなりません。
  5. 目安：YouTube / MV なら 24fps（または 30fps）、SNS の縦動画でなめらかにしたいときは 30〜60fps + フル。60fps・4K は書き出しに時間がかかります。

AE パネルでは、パネルの「fps」（24 / 30 / 60）でコンポのフレームレートを選べます。JSON から作る場合は、ブラウザ版で選んだ fps のコンポになります。

合成用の背景（グリーンバック / ブラックバック）

実写やイラストの映像の上に歌詞だけを重ねたいときに使います。

  1. 「書き出し」タブ（かんたんモードでは右の「書き出し」欄）の 背景 で、次のどれかを選びます。
    • 通常：スタイルの配色・背景のまま（既定）
    • グリーンバック：#00FF00 の上に白い文字と演出だけ
    • ブラックバック：#000000 の上に白い文字と演出だけ
  2. プレビューにもそのまま反映されます（右上に「グリーンバック」などと表示されます）。MP4・連番PNG・透過PNG のどれで書き出しても同じ見た目になり、ファイル名の末尾に _greenback / _blackback が付きます。
  3. 合成のしかた
    • グリーンバック：動画編集ソフトのクロマキー（Premiere Pro の Ultra キー、DaVinci Resolve の 3D キーヤー、AE の Keylight など）で緑を抜きます。
    • ブラックバック：描画モードを スクリーン（または加算）にして重ねるか、輝度キーで黒を抜きます。
    • 透過PNG で書き出すと、最初から背景が透明な白い素材になります。

透過PNG 前景／後景（ZIP） では、1コマごとに2枚の透過PNGを、zip の中の別フォルダに書き出します。

  • back/：後景（背景のグラフィックと、歌詞の後ろに置かれる装飾）
  • front/：前景（歌詞、その周りの装飾・枠、色ズレのゴースト、HUD）
  • 画面全体の演出（フラッシュ・画面分割など）は両方に同じようにかかるので、front を back の上に重ねると通常の見た目になります（背景色・紙の質感・発光・走査線は入りません）。

透過PNG では、画面全体にかかる演出（反転・フラッシュ・ストロボ・色相シフト・画面分割・上下スライド・ブラウン管オフ・黒コマなど）も背景を塗りつぶさず、文字と装飾の部分にだけかかります（黒コマ・白コマのコマは空の透明フレームになります）。

  • 文字・装飾・演出はすべて白〜グレーの単色になります。スタイルの配色、背景の模様、紙の質感、粒子、周辺減光は入りません（構成・動き・演出の組み合わせは「通常」のときと同じです）。
  • 色ズレのゴーストや光のにじみはグレーで描かれ、キーで抜くと半透明になります。グリーンバックは「ブラックバックをスクリーン合成したとき」と同じ仕上がりになるように作っています。
  • フラッシュ・反転・ストロボなど画面全体にかかる演出は、そのまま白い光として残ります。不要なら「演出」タブでフラッシュをオフにしたりグリッチを弱めたりするか、「手法」タブの「画面効果」で個別にオフにしてください。
  • AE パネルでも、パネルの「背景」で同じ設定を選べます。「AE用に書き出し」の JSON にも背景の設定が入ります。

歌詞の言語（中国語・韓国語の歌詞）

各スタイルの書体は日本語フォントを前提にしているため、繁体字・簡体字・ハングルの歌詞では、字形のない文字だけ別の書体で表示されて1行の中で書体が混ざることがありました。歌詞欄の下の 歌詞の言語 で切り替えられます。

  • 自動判定（既定）：かなを含めば日本語、ハングルなら韓国語、漢字だけなら繁体字／簡体字に特有の字（們／们・說／说 など）から判断します。判定結果は欄の横に表示されます。
  • 日本語 / 繁體中文 / 简体中文 / 한국어 / English：判定がずれるときは手動で選んでください。
  • ほぼ英字だけの歌詞（英語・ローマ字）は English と判定します。English では、単語1つずつではなく2〜3語のまとまりでカットを分けます（/ で区切った場合はその通り）。
  • 言語を切り替えると、各書体を雰囲気の近いその言語の書体に置き換えて組みます（Google Fonts から自動で読み込み）。
日本語の書体 繁體中文 简体中文 한국어
Noto Sans JP・Zen Kaku Gothic New・IBM Plex Sans JP Noto Sans TC Noto Sans SC Noto Sans KR（IBM Plex Sans KR）
Noto Serif JP・Zen Old Mincho・Kaisei Tokumin・Shippori Mincho B1 Noto Serif TC Noto Serif SC Noto Serif KR
Dela Gothic One WDXL Lubrifont TC ZCOOL QingKe HuangYou Black Han Sans
M PLUS Rounded 1c Chiron GoRound TC ZCOOL KuaiLe Jua
Mochiy Pop One・Kiwi Maru Huninn ZCOOL KuaiLe Do Hyeon・Gowun Dodum
Klee One・Yuji Syuku LXGW WenKai TC ZCOOL XiaoWei・Ma Shan Zheng Gowun Batang・Nanum Brush Script
Reggae One・Rampart One・Potta One LXGW Marker Gothic ZCOOL QingKe HuangYou・Ma Shan Zheng Black Han Sans・Nanum Brush Script
  • DotGothic16 と IBM Plex Mono（小さな英数字）はそのままで、足りない字だけ各言語のゴシックで表示します。
  • ローマ字の注釈（かなから作る小さな文字）は、中国語・韓国語の歌詞では出ません（行番号・注釈・文字コードなどに置き換わります）。
  • AE パネルにも同じ設定（「歌詞の言語」）があり、「AE用に書き出し」の JSON にも言語が入ります。AE では上の書体がインストールされていればそれを使い、なければ OS の標準書体（繁体字：蘋方-繁／微軟正黑體、簡体字：苹方-简／微软雅黑、韓国語：Apple SD Gothic Neo／Malgun Gothic など）で組みます。
  • フォント欄の選択肢には「Noto Sans JP Black → Noto Sans TC 900」のように、実際に使われる書体が表示されます。

表現の部品（組み合わせて自動構成）

部品の総数は 860（最初の公開版の356 ＋ 追加分351 ＋ 文字PV系50 ＋ キネティック51 ＋ ホラー52。それぞれ「ランダムで使う演出の範囲」のチェックでランダムの候補になるかを決めます）。1カットごとに、各分類から1つずつ（装飾は0〜3個）が組み合わされます。

分類 数 例
レイアウト 184 中央、縦書き、画面突き抜け、下部テロップ、吹き出し、原稿用紙、文字の雨、トンネル、ネオン、エンドロール、雑誌の見開き、目次、新聞、レコード、カセット、ポラロイド、切手シート、絵馬、提灯、暖簾、短冊、おみくじ、掛け軸、障子、駅名標、立方体、円筒、はためく旗、振り子、積み木、文字風船、電光掲示板、看板、クロスワード、パズル、影絵、万華鏡、ジッパー、ステンシル…
登場 125 分解→集合、スライス、フリップ、ドミノ、アイリス、ブラインド、螺旋集合、ネオン点灯、スタンプ、バネ、パチンコ、バウンドボール、扇開き、円筒回転、コマ撮り、シール貼り、くしゃ戻り、手紙開き、パタパタ、ルーペ、フィルム送り、CRT電源、ローディング、ドラム回転、データ降下、筆払い、インク滴、カウントイン、一画ずつ…
保持 52 ジッター、ふわふわ、ゆらぎ、拍で脈動、鼓動、ゼリー、灯火のゆらぎ、突風、ぶら下がり、音圧で伸びる、拍で反転、光沢、時々裏返る、ピント送り、弦の振動…
退場 109 爆散、崩落、扉が閉まる、TVオフ、吸い込み、溶ける、バックスペース、ステッカー剥がし、丸めて捨てる、破り捨て、焦げて消える、黒板消し、砂になって飛ぶ、シュレッダー、風船で飛ぶ、ガラス割れ、竜巻、ひらひら落ちる、衝撃波、水没、一刀両断、吹き消す…
装飾 130 照準線、トンボ、レーダー、寸法線、紙吹雪、花びら、光漏れ、ボケ玉、筆の払い、落款、家紋、青海波、花火、提灯、注連縄、扇、紅葉、霞、回路、見当合わせ、ホチキス、クリップ、星空、月齢、蛍、メンフィス、再生ボタン、いいね、音符…
文字の加工 62 袋文字、縁取り、立体、長い影、発光、マーカー、網点、傍点、ネオン管、クローム、虹色、色版ズレ、多重影、ステンシル字、カラオケ、丸囲み、かぎ括弧、映り込み、シール縁、原稿用紙風、切り貼り文字…
背景 66 放射、同心円、スポットライト、巨大文字、レトロ格子、水玉、オーロラ、メッシュグラデ、青海波、麻の葉、千鳥格子、タータン、等高線、星空、月夜、街並み、夕日、海の波、雨の窓、花火、山並み、VHSノイズ、大理石、切り絵…
カメラ 36 ゆっくり寄る、パン、ダッチ、手持ち、拍でズーム、クラッシュズーム、周回、バレルロール、振り子、ピント合わせ、地震、めまい、渦ズーム、スナップパン…
画面効果 69 スライス/ブロックグリッチ、反転、フラッシュ、RGB分離、VHSロール、ストロボ、フィルム焼け、放射色収差、ブルーム、魚眼、ピクセルソート、1bitディザ、万華鏡、アナモフレア、砂嵐、フィルム傷、集中線、キラッ、カラーバー、ガラス割れ、シャッター…
カット間のつなぎ 27 エッジワイプ、斜め帯ワイプ、クロックワイプ、アイリスイン、プッシュ、カバー、ズームスルー、観音開き、ブラインド転換、市松転換、ブロック崩し、ホイップパン、インク、タイル崩落、キューブ、フラッシュ転換、モザイク転換…
  • 文字の加工は「装飾の量」が多いほど使われやすく、背景は行ごとに選ばれます（「背景の切替」で頻度が上がります）。
  • カット間のつなぎは、前のカットと続けて切り替わる所に、動きの強さに応じてときどき入ります（前のカットの最後の画と次のカットを合成して切り替えます）。
  • 部品ごとに雰囲気のタグ（グリッチ / しっとり / ポップ / グラフィック / エディトリアル / エモーショナル / ホラー）が付いていて、おまかせはその雰囲気に合う部品を中心に使います。

以下は基本セット（AE パネルにも入っている部品）の一覧です。

  • レイアウト（17種）：中央 / 大小ミックス / 縦書き / 流れる帯 / 敷き詰め / 散らし / 円環 / 波の軌跡 / 画面突き抜け / ラベル貼り / 縦長圧縮 / 注釈 / タイプ / 斜め帯 / 円窓 / 残像スタック / カプセル
  • 登場（13種）：分解→集合（字形を画や部品の単位に分解）/ スライス / タイプ / ポップ / 落下 / 伸縮 / ワイプ / ブラー / 回転 / 点滅 / スクランブル / ズーム / カット
  • 保持：ジッター / ドリフト / 呼吸 / ウェーブ / グリッチ
  • 退場（11種）：爆散 / 崩落 / 霧散 / スライス / ワイプ / 収縮 / ブラー / 伸縮 / 飛散 / グリッチ / カット
  • 装飾（15種）：枠マーク / 座標の円 / ドットの輪 / 矢印 / スラッシュ / スパーク / 引き出し線 / 波形 / バーコード / グリッド / ストライプ / インクの染み / 荒い帯 / 図形 / 大きな数字
  • 仕上げ
    • 時間差つきの色ズレ（RGB分離）
    • 画面全体のスライスグリッチ / ブロックグリッチ
    • 反転 / フラッシュ / ズームブラー / モザイク
    • 揺れ / 2コマ打ち / 粒子 / 紙の質感 / 走査線 / 光のにじみ / 周辺減光

After Effects パネルの使い方

AE パネルは2種類あります。どちらも中の生成エンジンは同じです。

  • スクリプト版（JIZURA_AE.jsx）：AE のスクリプトパネル。歌詞からの生成と、ブラウザ版の JSON の読み込みができます。
  • CEP 版（JIZURA_CEP.zip）：ブラウザ版の画面とプレビューを、そのまま AE の中で使えるパネルです。「AEでコンポを生成」を押すと、その場でコンポができます（下の「CEP 版」）。

入れ方
  1. JIZURA_AE.jsx を次のフォルダに置き、AE を再起動します。
    • Windows：C:\Program Files\Adobe\Adobe After Effects <版>\Support Files\Scripts\ScriptUI Panels\
    • Mac：/Applications/Adobe After Effects <版>/Scripts/ScriptUI Panels/
  2. メニューの「ウィンドウ」→「JIZURA_AE.jsx」でパネルが開き、ドッキングできます。
  3. 試すだけなら「ファイル → スクリプト → スクリプトファイルを実行」でも動きます（フローティングウィンドウになります）。

使い方

  • 歌詞から：歌詞・スタイル・サイズ・演出を決めて「コンポを生成する」を押します。

    • タイミングは次の3つから選べます。
      • 自動（文字数・BPM から計算）
      • 選択レイヤーのマーカー
      • コンポマーカー
    • おすすめの手順：曲のレイヤーを選択し、再生しながらテンキーの * で各行の頭にマーカーを打ちます。「選択レイヤーのマーカーを行頭に使う」を選んで生成します。

  • おまかせで生成：押すたびに、スタイル・雰囲気・演出の強さ・2コマ打ち/フラッシュ/HUD・シード・配色をランダムに決め、パネルの表示にも反映して新しいコンポを作ります。結果が気に入ったら、そこから値を調整して「コンポを生成する」で作り直せます。

  • 雰囲気（「演出」欄）：選ぶと、その雰囲気に合うレイアウト・登場・退場の手法に絞って組み立てます。どの手法に絞るかはシードで決まるため、同じシードなら同じ結果になります。

  • アクセント・ズレ色：「ランダム配色」でアクセント色とズレ色A/Bを選び直します。#RRGGBB 形式で直接入力もできます。「スタイルの色を上書き」にチェックが入っていると、生成するコンポの全シーンに適用します（明るさは背景に合わせて自動で補正します）。

  • 追加分・和風・部品セット・背景：ブラウザ版と同じ「追加分の演出も使う」「和風の演出も使う」「文字PV系の部品を使う」「キネティックの部品を使う」「ホラーの演出も使う」のチェックと、「背景」（通常 / グリーンバック / ブラックバック）を選べます。スタイルは27種類すべて選べます（一覧の〔追加〕〔和〕〔ホ〕が目印です）。ホラーがオンのときは、雰囲気に「ホラー」が加わります。

  • 対応している部品：ブラウザ版の 860 部品すべて（レイアウト184・登場125・保持52・退場109・装飾130・文字の加工62・背景66・カメラ36・画面効果69・カット間のつなぎ27。v0.9.0 で文字PV系・キネティック・ホラーの153部品も入りました）を、AE のテキストレイヤー・シェイプレイヤー・マスク・エフェクト・エクスプレッションで組み立てます。歌詞はどの部品でもテキストレイヤーのままなので、あとから打ち替えられます。

    • 語ごとに動くキネティックの部品は、AE では語ごとのテキストレイヤー（または1つのテキストレイヤーの文字ごとのアニメーター）で組み立てます。曲の拍に合わせる部分は、AE ではカットの長さを均等に割って動かします。
    • 3D の回転や紙がめくれる動き、ピクセル単位の加工（ピクセルソート・ディザなど）は、AE の標準エフェクトと 2D の変形で近い見た目に置き換えています。
    • パネルが知らない部品名が JSON に入っていた場合（今後ブラウザ版に追加される部品など）は、一番近い部品に置き換えて組み立て、パネル下のステータスに「置換あり」と表示します。

  • サイズ：1920×1080 / 1080×1920 / 1080×1080 / 3840×2160 / 1280×720 / 1440×1080（4:3）/ 1080×1440（3:4）、またはアクティブなコンポと同じサイズ。

  • JSONから：ブラウザ版の「AE用に書き出し」で作った JSON を読み込みます。ブラウザで決めた構成がそのまま AE で組み上がります。

  • フォント

    • Noto Sans JP / Noto Serif JP / Dela Gothic One などが入っていれば自動で使います（自動で選ぶのは AE 2024 以降）。
    • 入っていない場合は「フォント」タブで指定した書体を使います。既定は游ゴシック・游明朝です。

  • 軽量（AE での再生を軽く）：色ズレの複製・紙の質感・グロー・粒子・絵を複製する画面効果を省いて作ります。レイヤー数がおよそ4割減り、長い曲でも AE での再生が軽くなります。

  • 長い曲：コンポは少しずつ分けて作るので、作成中も After Effects が「応答なし」になりません。パネルに進み具合（％・カット数）が出て、中止 を押すと、そこまでに作ったカットでコンポを仕上げます（スクリプト版・CEP 版とも）。取り消しは細かく分かれるため、作り直すときはプロジェクトパネルでコンポと cuts フォルダを削除してください。

  • 診断レポート（「JSONから」タブ）：最後に作ったコンポのエクスプレッションを AE に計算させて、エラーや置き換えを JIZURA_report.txt にまとめて保存します。思ったとおりにできないときは、このファイルを添えて報告してください。

CEP 版（ブラウザ版の画面を AE の中で）
  1. JIZURA_CEP.zip をダウンロードして展開します。
  2. Windows は install_win.bat、Mac は install_mac.command を実行します（ユーザーの CEP エクステンションフォルダにコピーし、署名なしのパネルを読み込めるように設定します）。
  3. After Effects（2022 以降）を再起動し、ウィンドウ → エクステンション → JIZURA 字面 を開きます。
  • 歌詞・スタイル・演出の決め方はブラウザ版と同じです。AEでコンポを生成 で、今の構成のコンポがその場にできます。
  • 書き出す範囲で行を選んでおくと、その行だけのコンポを作ります（曲も同じ位置に合わせて入ります）。長い曲を何回かに分けて作りたいときに使えます。「AE用に書き出し」の JSON も同じ範囲になります。
  • AEで選択中の曲：AE で曲のレイヤーを選んでから押すと、その曲を解析して拍に合わせます。コンポにもその曲が入ります。
  • AEのマーカーを行頭に：選択レイヤー（無ければコンポ）のマーカーを、各行の開始時刻にします。
  • MP4・連番PNG の書き出しも、パネルからそのまま使えます（保存先はダイアログで選びます）。
  • 詳しい入れ方と、配布用の署名付き .zxp の作り方は、zip の中の README_CEP.md にあります。

生成されるもの
  • カットごとのプリコンポ（JIZURA <曲名> cuts フォルダ）
    • 部品によっては、カットの中にさらにプリコンポ（JZ … art など）や、色ズレ用のコピー（… ghost：紙や板などの背景物を除いた版）が作られます。
  • 作成が終わった時点で、使われていない非表示レイヤーはすべて削除します。残る非表示レイヤーはトラックマット（AE の決まりで、マットに使うレイヤー自体は表示されません）だけです。
    • 文字はテキストアニメーター（エクスプレッションセレクター）で動くので、文字を打ち替えても動きが保たれます。
  • 色ズレは、各カットを時間差で複製し、「色合い」エフェクトで着色したゴーストレイヤーで表現しています。
  • 最上段の JZ FX 調整レイヤーに以下がまとまっています。
    • 2コマ打ち（ポスタリゼーション時間）
    • 揺れ（トランスフォーム）
    • スライスグリッチ（波形ワープ）
    • ズームブラー / 反転 / グロー / ノイズ
  • JZ Flash・JZ Vignette・HUD（タイムコード・行カウンター）も生成されます。
  • 背景をグリーンバック / ブラックバックにした場合は、JZ Vignette の代わりに最上段へ JZ Key Mono（色合いで単色化する調整レイヤー）が入り、グリーンバックではさらに JZ Key Green（描画モード：スクリーン）が入ります。

注意
  • AE 2020 以降、エクスプレッションエンジンは JavaScript（新規プロジェクトの既定）を想定しています。
  • このパネルは、AE のオブジェクトモデルを模した環境で検証しています。707 部品それぞれを複数の文字数・画面比で組み立ててエラーがないこと、全スタイル × 複数シードのおまかせ生成でエラーがないこと、ブラウザ版の同じ構成と見比べて見た目と動きが揃っていることを確認しています。ただし実機の AE ではまだ動かしていません。エフェクトの設定などで想定外のことがあった場合は、生成後にその項目を一覧で表示し、他の部分の生成は続けます。
  • 部品の多いカットはレイヤーとエクスプレッションが多くなります。長い曲では生成とプレビューに時間がかかることがあります（プレビューの解像度を 1/2〜1/4 にすると軽くなります）。

開発・ビルド

 
python3 build.py              # src/ app/ vendor/ → index.html / en/index.html / ko/index.html
node tools/export_ae_data.js  # src/ を変えたとき：ae/data.json（AE パネルが使うスタイル・部品の情報）を更新
python3 build_ae.py           # ae/（本体 + 移植済みパック ae/p_*.jsx）→ JIZURA_AE.jsx
python3 build_cep.py          # index.html + ae/ + cep/ → build/com.852wa.jizura/ と build/JIZURA_CEP.zip（公開用は直下にコピー）

バージョンはリポジトリ直下の VERSION に書きます（ビルドのときに画面・AE パネル・CEP 版に入ります）。変えたときは CHANGELOG.md にも追記してください。README の見出しをたたむ形にするには python3 tools/fold_readme.py README.md を使います（新しい見出しは <details> の形で書き足してください）。

ビルドに必要なのは Python 3 と Node.js だけです（npm パッケージは不要）。AE パネルのテスト（AE のオブジェクトモデルを模した環境で全スタイルを組み立てる）は cd dev && npm install のあと node dev/ae_test.js で実行できます。表現部品を追加するときは docs/EXPRESSION_PACKS.md を参照してください（テスト用ツールは dev/）。

自分のリポジトリで公開する（フォークした場合など）
  1. index.html がリポジトリ直下にある状態で push します。
  2. Settings → Pages で Source を Deploy from a branch、Branch を main / / (root) にして保存します。
  3. 数分後に https://<ユーザー名>.github.io/<リポジトリ名>/ で開けます。

協力してくださった方
  • 繁體中文版の画面・部品名の翻訳、简体中文版の部品名、フォントや言語判定の修正、今の案の書体名の表示：Zaious（#5・#6・#7・#11・#21）
  • 한국어版の画面・部品名の翻訳：andongmin94（#8）
  • Bahasa Indonesia 版の画面の翻訳：auliaramadhann・enka25（#12）
  • 手法タブのループプレビュー、タップ同期の固定表示、行・カットのループ、カットごとの差し替え、詳細モードのロック：nocore-dtm（#18・#19・#22・#23・#24）
  • Tiếng Việt 版の画面の翻訳：phamhuulocforwork（#20）

ライセンス

MIT License。商用・非商用を問わず、使用・改変・再配布できます（著作権表示とライセンス文の同梱が条件です）。 このツールで作った動画や画像の権利は、作った人（と、その歌詞・曲の権利者）に帰属します。このソフトのライセンスは出力物には及びません。

同梱しているサードパーティ製ソフトウェアについては THIRD_PARTY_NOTICES.md を参照してください。

JIZURA (852wa/JIZURA)

Searching Database…

2K ·GitHub
JIZURA
Что это?JIZURA — браузерное приложение, которое превращает текст песни в автоматически собранный музыкальный ролик с кинетической типографикой: оно комбинирует пресеты раскладки, движения и декора из библиотеки сотен деталей, а затем экспортирует результат в MP4.
Это десктопная программа или то, что запускается в браузере?Оно работает целиком в браузере, установка не нужна. В комплекте также опциональные панели для After Effects (версия ScriptUI и версия CEP, переиспользующая браузерный интерфейс) для дальнейшего редактирования в AE.
Как начать делать видео?Откройте приложение, вставьте текст песни по одной фразе на строку (с простой нотацией для склеек, акцентов, вспышек и т.д.), загрузите аудиофайл, чтобы определились BPM и биты, затем нажмите кнопку автосборки (или клавишу R), чтобы случайно собрать склейку и посмотреть превью или экспортировать её.
Какой браузер нужен для экспорта в MP4?Для экспорта в MP4 нужен браузер с поддержкой WebCodecs — рекомендуются Chrome или Edge. Safari 16.4+ и Firefox 130+ тоже поддерживают WebCodecs, но экспорт H.264 там не гарантирован; без WebCodecs всё равно можно смотреть превью и экспортировать последовательность PNG.
На мобильных всё работает так же?Да, на iPhone (Safari, iOS 16.4+) и Android (Chrome), но для длинных песен в высоком разрешении рекомендуется ПК; мобильный режим к тому же по умолчанию экспортирует в 720p и ограничивает разрешение сверху 1080p, чтобы уменьшить число неудачных экспортов.
Моё аудио или текст песни куда-то загружаются?Нет, текст песни и музыка обрабатываются целиком внутри браузера и никогда не отправляются на сервер.
Что за 860 «деталей», которые он комбинирует?Это небольшие переиспользуемые элементы эффектов раскладки, появления, удержания, ухода, декора и переходов (плюс 27 полных стилей цвета и шрифтов), разложенные по 10 категориям; склейка собирается выбором одного элемента из каждой категории, поэтому смена случайного сида каждый раз даёт новую раскладку.
Можно ли заблокировать или отредактировать отдельные строки, а не отдавать всё на волю случая?Да, у каждой строки есть свой кубик для перегенерации только её, замок, фиксирующий её раскладку/движение/декор, ручной выбор числа склеек и раскладки, а также опция «перетасовать только эту часть» — наряду с полностью автоматическим режимом омакасэ.
Какие форматы экспорта доступны помимо MP4?Можно экспортировать нумерованные последовательности PNG, прозрачные PNG-слои переднего/заднего плана для композитинга или рендеры на зелёном/чёрном фоне для кеинга в другие кадры — в разрешениях от 720p до 4K и с 24/30/60 fps.
Поддерживает ли он тексты песен на языках, кроме японского?Да, он сам определяет тексты на японском, корейском, традиционном/упрощённом китайском или английском и подменяет шрифты каждого стиля на подходящие Google Fonts для этой письменности, а сам интерфейс доступен на японском, английском, индонезийском, вьетнамском, традиционном/упрощённом китайском и корейском.
What are similar projects?floorplan-3d, huashu-art-motion, effectcraft, pdfcraft, html-video, VibeOffice, PCB_lightgraph_Portable, framefields
Which topics is it in?adobe, mp4, procedural-generation, japanese, font, typography, music, video-generation, multilingual, json, video, offline
Creator
852wa
Size
46.1 MB
Stars
2K
Updated
CommitOct 01
Age
25d
Commits · 90 Days