ビジュアルエフェクトを付与できるマルチカラム対応画像ビューア
A multi-column image viewer that lets you apply visual effects.
このアプリは MITライセンス のもとで公開されているフリーソフトウェアです。 アプリ本体の機能は、以下の条件の範囲でどなたでも自由にご利用いただけます。
このアプリには画像やシナリオなどのコンテンツは一切含まれていません。あなたが用意したコンテンツを表示・活用する際の権利は、すべてあなたに帰属します。
- 商用利用： このアプリを商用作品（有償ゲーム、有料コンテンツなど）のビューアとして利用したり、アプリを同梱して配布したりできます。
- SNSへの公開： アプリを使用している様子をスクリーンショットや動画でSNS（X/YouTube等）に投稿・配信できます。
- 個人利用・改変： 趣味の範囲での利用や、プログラムを自分好みに作り変えることができます。
- 自己責任での利用： このアプリを使用したことで発生したいかなるトラブルや損害（データの破損、PCの不具合、表示内容に関する権利侵害など）について、制作者は一切の責任を負いません。
- 素材の権利： アプリ内で読み込む画像や文章などの著作権は、利用者自身で管理してください。万が一、読み込んだ素材に関して第三者との間で紛争が生じた場合も、制作者は関与いたしません。
- 保証の欠如： アプリは「現状渡し」で提供されます。将来的なアップデートや、特定の環境での動作、バグの修正を保証するものではないことをご了承ください。
| OS | ファイル |
|---|---|
| Windows | .exe |
| macOS (Apple Silicon) | _arm64_.dmg |
本アプリはApple Developer証明書による署名がないため、そのままではmacOSのGatekeeperにブロックされます。
初回のみ、以下のいずれかの方法で開いてください。
※コマンドはファイル名にあわせて書き換えてください
xattr -d com.apple.quarantine ~/Downloads/WhiteRoom.for.Mac_arm64_v*.dmgその後、通常どおりDMGを開いてアプリをApplicationsフォルダにドラッグしてください。
- ダウンロードしたDMGをFinderで右クリック（または Control+クリック）
- 「開く」を選択
- 警告ダイアログで「開く」をクリック
| カテゴリ | エフェクト | 説明 |
|---|---|---|
| フィルター | カラーフィルタ | シンプルなオーバレイカラーフィルタ |
| トーンフィルタ | 画像の彩度・コントラスト・輝度を強調するエフェクト | |
| ビネットエフェクト | 周辺減光エフェクト | |
| ブラーエフェクト | ぼかしエフェクト | |
| モーション | シェイクエフェクト | 揺れを表現するエフェクト |
| ズームエフェクト | 拡大縮小エフェクト | |
| ブリージングエフェクト | 呼吸を表現するエフェクト | |
| エコーエフェクト | 波紋を表現するエフェクト | |
| デコレーション | アセットエフェクト | アセットを浮遊させるエフェクト |
| フラッシュエフェクト | 画像を一時的にオーバレイ表示するエフェクト | |
| スクイッシュエフェクト | おしつけを表現するエフェクト | |
| フォグエフェクト | 霧状の効果を描画するエフェクト | |
| スパイラルエフェクト | 螺旋状エフェクト | |
| テキストエフェクト | 指定テキストをランダム位置に浮遊させるエフェクト |
- グリッド設定: 右パネル「グリッド」タブで列・行数を設定
- 画像フォルダの割り当て:
- セルをクリックして選択 → 「フォルダを選択」ボタン
- またはフォルダをキャンバスにドラッグ&ドロップ
- スライドショー: セル選択後、グリッドタブでON
- エフェクト: セル選択後、エフェクトタブで設定（一覧は上記「適用できるエフェクト」に記載）
- タイマー: タイマータブでON・位置設定
- エフェクトのタイマー同期機能: タイマーの残り時間に応じてエフェクトを適用する機能
- 終了時オーバレイ画像: タイマー終了時にあわせて指定した画像をオーバレイ表示する機能
- テキストリーダー: テキストファイル(.txt)を読み込んでRPGツクール風にテキストを閲覧する機能
- ストーリーボード機能: テキストの読み進めに合わせて画像・エフェクトを自動切り替えするタグをファイルに埋め込む機能
- 外観設定:
- UI言語: ja/en
- 背景色: カラー(色指定) / ダイナミック(表示中画像のブラー背景)
- フルスクリーン/ウィンドウモード切り替え
- UI非表示切り替え
- プロファイル保存: プロファイルタブでJSON保存/読み込み
- スタッシュ: 現在のグリッド・セル・タイマー・背景・テキストリーダー状態などをスロットに退避し、あとから復元できる機能
表示中のエフェクトを画像ごとに保存する機能です。
表示中画像の右下にカーソルを近づけると [Save] ボタンが表示されます。
すでに画像に対する設定が存在する場合は上書きされるのでご注意ください。設定ファイルは表示中の画像と同じフォルダに whiteroom_effects.json として保存されます。
意図しないエフェクトが勝手に適用される場合は、このファイルを削除してください。
現在の作業状態をスロットに一時保存し、別の構成に切り替えたあとでも長押しで戻せる機能です。保存内容はメモリ上に保持されます。
- 背景色・背景モード（ダイナミック含む）、グリッド、全セル（フォルダ・エフェクト・スライドショー等）、タイマー設定
- テキストリーダーの表示・フォント設定、開いているテキストファイルのパス、現在のページ位置
次の項目はスタッシュには含まれません。フルスクリーン／UI 表示・ウィンドウサイズ／言語／画像ごとのエフェクトプロファイルキャッシュ本体は保存されませんが、POP（復元）時にローカル各フォルダの whiteroom_effects.json （画像毎エフェクト保存ファイル）はバックグラウンドで読み込まれます。
- 左上の折りたたみアイコンにマウスを乗せる: 折りたたみ状態から再表示します。
- ショートカットキー
[s]: 直近のマウス位置付近（画面内に収まるよう調整）にパネルを開きます。 - 画像グリッド上で右ボタン長押し: 押し下げた位置を基準に開きます。エフェクト中心の
[p]ピック中やスクイッシュの色ピック中は無効です。
パネルはドラッグ可能です。ウィンドウからマウスが離れると小さなアイコンに折りたたまれ、しばらくすると薄く表示されます（ホバーで再表示）。
- スタッシュは最大 15 件まで。
- 空の行（「空のスタッシュ」）にマウスを乗せると「スタッシュする」に変わり、クリックで保存。保存直後にアプリは初期状態へリセットされます（確認ダイアログはありません）。
- 保存済みの行（絵文字付きラベル）にマウスを乗せると「取り出す」に変わり、ラベルを長押しするとその内容に復元します。復元後もスロットは消えません（POP は消費しません）。
- 右端の × は 長押しでそのスロットだけ削除します。
スタッシュに中身がある状態でアプリを閉じようとすると、ネイティブの確認ダイアログが表示されます。
テキストリーダーで読み込んだ .txt ファイルにストーリーボードタグを埋め込むことで、テキストのページ進行に合わせて画像やエフェクトを自動的に切り替えることができます。
[[C:\Users\Pictures\photo.jpg]]
- 画像パスを
[[と]]で囲むだけ - テキストに直接書き込んで使用
- 表示中の全セルの画像を切り替えます（エフェクトは変更しない）
[WR:1.5.0:{"image":"C:\\path\\image.jpg","effects":{...},"progress":{"enabled":true,"pages":5},"timer":{"enabled":false}}]
- アプリのストーリーボード機能が自動生成するタグ
- 画像・エフェクト・エフェクト徐々に適用・タイマー自動開始を一括指定できます
共通ルール: タグは必ず行全体をタグのみにしてください。テキスト中の空行は改ページとして認識されます。
- テキストタブでテキストファイルを開く
- 「ストーリーボード」ボタンをクリックしてツールパネルを表示
- テキストリーダーを読み進め、タグを挿入したい位置で以下の操作を行う
- そのとき全セルに表示中の画像とエフェクト設定をタグとして保存します
- 画像URL / パス欄に入力した値をタグに保存できます。空欄の場合は現在表示中の画像を使用します
- 「相対パスで保存」を有効にすると、ローカル画像パスは読み込んでいるテキストファイルからの相対パスとして保存されます
- 再生時、そのページに到達すると画像とエフェクトが自動的に切り替わります
「エフェクトを徐々に適用」オプション
チェックを入れると、タグが適用された後のページ進行に比例してエフェクト適用率が上昇します。
- 「N ページで適用完了」に指定したページ数に達した時点でエフェクトが 100% になります
- タイマー同期機能と同じ仕組みで各エフェクトに適用されます
- 現在の画像・エフェクト設定に加えて、タイマー自動開始の指示を含むタグを挿入します
- 再生時、タグのページに到達するとタイマーが自動的にリセット・開始されます
- タイマー動作中は「Auto（自動ページ送り）」が一時停止し、タイマー完了後に自動再開します
- ボタンを押した時点の以下の設定をファイル先頭に保存します
- ウィンドウサイズ
- テキストウィンドウの表示設定（位置・幅・方向・画像重ね表示など）
- フォント設定（フォント・フォントサイズ・背景不透明度）
- 速度設定（テキスト速度・ページ送り速度）
- UI表示・非表示状態
- 次回このファイルを開いたとき、これらの設定がすべて自動的に復元されます
- 設定はファイルの1行目に
[WR-RC:...]タグとして保存されます（既存タグがあれば更新） - 保存後は「ファイルを保存」でテキストファイルに書き出してください
- 現在の編集内容（挿入したタグを含む）を新しいファイルとして保存します
- ファイル名:
{元のファイル名}_WhiteRoom_{yyyymmdd-hhmmss}.txt
ストーリーボードタグの画像には、ローカルパス、テキストファイルからの相対パス、file://、data:、http(s):// の画像URLを指定できます。
- 同じURLを複数セルで同時に表示する場合、通信は1回にまとめられます
- 一度取得したURLはアプリ起動中にキャッシュされるため、同じURLへ何度切り替えても再通信しません
- WebページURLを指定した場合、ページ内のメタ画像を検出できる場合はその画像を表示します
- pixiv系ドメインの画像は、サービスへの負荷を抑えるため、アプリ起動中に読み込める異なる画像URLを10件までに制限しています
- 11件目以降のpixiv系画像URLは読み込み前にブロックされ、画面下部に警告が表示されます
- この制限とカウントはWhiteRoomを再起動するとリセットされます
- テキストタブ下部の
pixiv requests: n/10で、現在のカウントを確認できます
テキストを前のページに戻した場合、タグが適用される前の状態（ファイル読み込み時点のスナップショット）に自動的に復元されます。
- Node.js v18以上（推奨: v22）
- npm v9以上
- Windows 11 / macOS / Linux
- Electron v30 — クロスプラットフォームデスクトップアプリ
- React v18 + TypeScript — UI
- PixiJS v8 — WebGL描画エンジン
- Zustand + immer — 状態管理
- GSAP — アニメーション制御
- electron-vite — ビルドツール
# プロジェクトフォルダに移動
cd C:\develop\WhiteRoom
# 依存関係インストール
npm installnpm run dev# Windows インストーラー生成
npm run build
npm run package出力先: release/ フォルダ
src/
├── main/ # Electronメインプロセス
│ └── index.ts # ファイルI/O、ダイアログ、IPC
├── preload/ # IPC ブリッジ
│ └── index.ts
├── shared/ # 型定義（main/renderer共有）
│ └── types.ts
└── renderer/ # React + PixiJS フロントエンド
├── index.html
├── App.tsx
├── main.tsx
├── appInfo.ts
├── i18n.ts
├── global.css
├── css.d.ts
├── globals.d.ts
├── window.d.ts
├── stores/
│ └── appStore.ts # Zustand グローバル状態
├── hooks/
│ ├── usePixiStage.ts # PixiJSアプリ初期化
│ ├── useDropHandler.ts # D&D処理
│ └── useTimer.ts # タイマー
├── utils/
│ ├── CellRenderer.ts # セルごとの描画クラス
│ └── pixiEffects.ts # エフェクトユーティリティ
└── components/
├── layout/
│ ├── MasterCanvas # PixiJSキャンバスホスト
│ ├── TopBar # 上部ツールバー
│ └── CellNavigationOverlay # セル移動オーバーレイ
├── controls/
│ ├── ControlPanel # 右サイドパネル
│ ├── GridControls # グリッド・セル操作
│ ├── UIKit # 共通UIコンポーネント
│ ├── AppearanceControls
│ └── ProfileControls
├── effects/
│ └── EffectsPanel # エフェクト設定
├── reader/
│ ├── TextReaderPanel # テキスト読込と操作パネル
│ ├── TextReaderWindow # テキスト表示ウィンドウ
│ └── StoryboardPanel # ストーリーボード編集
└── timer/
├── TimerOverlay # タイマー表示
├── TimerControls # タイマー設定
├── TimerPreOverlay # タイマー前オーバーレイ
└── TimerEndFlashOverlay # 終了フラッシュオーバーレイ