ありがとう演出メーカー

チャンネル登録・スーパーチャット・メンバーシップ・メンバーギフト・ジュエルのお礼モーションを作って、動画（WebM / MP4）や静止画（PNG）で書き出せるブラウザツールです。index.html をブラウザで開くだけで使えます。わんコメのテンプレートとして OBS に置けば、スパチャなどが届いたときに自動で演出を流せます。

• 種類ごとにアイコン（ベル・コイン・王冠・プレゼント・宝石）と色が変わります。スパチャは金額に合わせて色が自動で変わります
• 名前・金額・ひとことを入れられます
• キャラ画像（透過 PNG がおすすめ）、効果音（内蔵 5 種＋アップロード音）、テーマ色を選べます
• わんコメにつなぐと、届いたスパチャ・メンバー・コメントの名前（と金額）をクリックで入れられます
  • 公開ページ（github.io）から使うときは、わんコメの「設定 → API」に kodadadada.github.io を登録してください。ダウンロードした index.html を直接開く場合は登録なしでつながります
• 背景は「透過」「グリーンバック」「パステル」「画像」から選べます
  • 透過：Chrome / Edge で書き出すと背景が透明な WebM になります（OBS のメディアソースにそのまま置けます）
  • グリーンバック：編集ソフトのクロマキー用。MP4 でも書き出せます

Mac / Windows アプリ

Releases から、Mac 用（.dmg）と Windows 用（.exe）をダウンロードできます。署名していないので、そのままでは開けなかったり警告が出たりします。

Mac のインストール

ダウンロードした .dmg をそのまま開くと「破損しているため開けません」と出ます（ファイルは壊れていません。Apple の署名がないアプリを macOS が止めているだけです）。

1. 「ターミナル」で次の1行を実行し、ダウンロードした .dmg から「インターネットから来た」という印を外します（何も表示されなければ成功）

   xattr -d com.apple.quarantine ~/Downloads/arigatou-maker-*-mac-*.dmg
   

2. .dmg を開き、「ArigatouMaker」を「Applications」フォルダにドラッグします
3. 「アプリケーション」フォルダの「ありがとう演出メーカー」を起動します

アプリを入れたあとで「破損している」と出た場合は、xattr -dr com.apple.quarantine /Applications/ArigatouMaker.app を実行してから開き直してください。

Windows のインストール

.exe を開き、「Windows によって PC が保護されました」と出たら「詳細情報」→「実行」を押します。

• 「わんコメに保存」を押すと、テンプレートと設定がまとめてわんコメのフォルダに入ります（settings.json を手で移す必要はありません）
• わんコメの「設定 → API」に何も登録しなくても、わんコメにつながります

開発用メモ：npm install → npm start で起動、npm run dist:mac で Mac 版を作成。v1.0.0 のようなタグをプッシュすると、GitHub Actions が Mac 版と Windows 版を作って Releases に置きます（package.json の version もタグに合わせて上げてください）。Mac 版は、中の名前を英字（ArigatouMaker）にしないと起動しないため、日本語名は build/ja.lproj の表示名で出しています。

ブラウザからアプリとして入れる（PWA）

公開ページ https://kodadadada.github.io/arigatou-maker/ はアプリ（PWA）として入れられます。一度開けば、ネットにつながっていなくても起動できます。公開ページを更新すると、次に開いたときアプリも新しくなります。

• Chrome / Edge：ページ右上の「アプリとして入れる」ボタン、またはアドレスバー右の「インストール」アイコンを押す。入れたアプリは Launchpad や「アプリケーション」フォルダに入ります。起動中に Dock のアイコンを右クリック →「オプション」→「Dock に追加」で常に Dock に置けます
• Safari：メニューの「ファイル」→「Dock に追加」

わんコメテンプレートとして使う（自動で流す）

1. わんコメ →「テンプレート」→ カスタムテンプレートのフォルダを開き、arigatou-maker フォルダ（index.html と template.json）を置く
2. ブラウザでこのツールを開き、見た目や音を整えて「わんコメテンプレートとして使う」→「設定を保存（settings.json）」を押す
3. 保存した settings.json を arigatou-maker フォルダに入れる
4. OBS に「ブラウザ」ソースを追加し、URL に http://localhost:11180/templates/custom/arigatou-maker/?overlay を入れる（幅 1920・高さ 1080）

• 初期設定では、スパチャ・スパステ（名前と金額）とメンバーシップギフト（贈った人の名前）で自動再生します。メンバー加入・ジュエルもチェックで追加できます
• 続けて届いたときは 1 件ずつ順番に流れます。OBS につないだ時点より前のコメントでは流れません
• 設定を変えたら settings.json を上書き保存するだけで、次の演出から反映されます
• テスト再生：OBS でソースを右クリック →「対話」→ 画面をクリック（または T キー）。URL の末尾に &test を付けると、読み込んだときに 1 回流れます
• 設定を直したいときは「設定を読み込む」で settings.json を開くと、前の状態から編集できます