# 画像表示ツール (Image Viewer) このツールは、OBS Studioの「ブラウザ」ソースとして利用することで、配信画面上に画像をビューアとして表示できます。 マシュマロや旅行の写真など複数の画像をソースとして追加することなく表示することができます。 ## 利用規約 本ツールを使用した際に本規約に同意したとみなします。 - 報告不要・クレジット表記不要で個人・法人・商用問わず使用いただけます。 - 表記いただける場合には「ももちょこの素材部屋」と記載していただけると嬉しいです。 - YouTubeやTwitch等での動画・配信（収益化における制限もございません）など様々な用途でご自由に使用可能です。 - 二次配布や公序良俗に反する行為・違法行為に利用することはお控えください。 - 編集や加工は自由に行えますが加工の有無による著作権の譲渡や移動はありません。 - ※配布物の著作権は放棄しておりません。 - このツールを利用したことでトラブルが生じても一切の責任を負いません。 ## 機能 - **フォルダ単位の画像表示**: 選択したフォルダ内の画像をサブフォルダごとにタブで分類し、一覧表示します。 - **インタラクティブな画像操作**: - **ズーム**: マウスホイールで画像の拡大・縮小が可能です。 - **パン**: 拡大した画像をマウスドラッグで自由に移動できます。 - **カスタマイズ可能な表示**: - **サイドバー**: ドラッグで幅を調整でき、サムネイル表示のON/OFFを切り替えられます。 - **豊富な配色テーマ**: Dark, Light, Blue, Pinkなど、多数のプリセットから好みのテーマを選択できます。 - **ビューア背景**: 透過画像の確認に便利な「市松模様」と、クロマキー合成などに使える「単色」を切り替えられます。 ## ファイル一覧 - `index.html`: メインファイル - `style.css`: デザイン - `script.js`: 動作 - `img`: 表示画像フォルダ - `README.md`: 説明書（このファイル） ## 使い方 1. **画像を追加**: - imgフォルダにsample001のように新規フォルダを作成し、表示したい画像を新規フォルダに追加する。 2. **OBSにソースを追加**: - OBSの「ソース」パネルで「+」をクリックし、「ブラウザ」を選択します。 - プロパティ画面で「ローカルファイル」にチェックを入れ、「参照」ボタンからこのツールの `index.html` を選択します。 - 「幅」と「高さ」を、`1920` x `1080`に合わせます。 3. **起動**: - 追加したブラウザソースを「対話(操作)」で起動します。 4. **フォルダの読み込み**: - ウィンドウ右上の歯車アイコンをクリックして設定パネルを開きます。 - 「フォルダを開く」ボタンをクリックし、画像が保存されている「imgフォルダ」を選択します。 - 選択したフォルダ内のサブフォルダが、上部のタブとして表示されます。 5. **画像の閲覧**: - **フォルダ切り替え**: 上部のタブをクリックすると、そのフォルダ内の画像が左のサイドバーに一覧表示されます。 - **画像選択**: サイドバーのファイル名をクリックすると、右側のビューアに画像が表示されます。 - **ズーム**: ビューア上でマウスホイールを上下にスクロールすると、画像を拡大・縮小できます。 - **移動**: 拡大された画像は、マウスでドラッグすることで表示位置を動かせます。 6. **クロマキー合成（任意）**: - 配信画面上で画像の背景を透過させたい場合、本ツールの設定画面で「ビューアの背景」を「単色」に設定し、クロマキーとして使用する色（例: 緑 `#00FF00`）を選択します。 - OBS側で追加した「ブラウザ」ソースを右クリックし、「フィルタ」を選択します。 - 「エフェクトフィルタ」から「クロマキー」を追加し、「キー色」をツールで設定した色と同じにします。 7. **その他**: - ウィンドウの「Image Viewer」と書いてあるウィンドウバーをドラッグすることでウィンドウを移動することができます。 - ウィンドウの縁をドラッグすることでウィンドウのサイズを変更することができます。 ## 注意事項 - このツールはブラウザの `File System Access API` を利用しています。 - フォルダ選択機能は `webkitdirectory` 属性に依存しているため、この機能をサポートするモダンなブラウザでの利用を推奨します。 ## 使用ライブラリ - **Font Awesome**: アイコン表示のために使用しています。 ## お問い合わせ ご不明な点などがありましたら、XのDMやホームページからお問い合わせください。 また、表示や配色の変更など軽微なものであれば対応致しますので、お気軽にご相談ください。 - **X**: https://x.com/momochoco_wld - **ももちょこの素材部屋（ホームページ）**: https://momochoco.net --- Copyright (c) 2026 momochoco