Google Chromeブラウザだけで動作する画像ビューアアプリを作ってみました。
以下のWebフォルダにある「ImageViewer.html」をダウンロードして、任意のローカルストレージに保存し、ダブルクリックして開くだけで利用できます。

BOX共有フォルダ
https://app.box.com/s/brb4smy5b5d6snu7fvrgjbp5zh1agd5v

1. このアプリは何をするもの？

選択したフォルダ内の画像ファイルを、サムネイル一覧で表示するローカル画像ビューアです。
サムネイルをクリックすると、画像を

• 新しいタブで表示（原寸表示）
• ページ内で拡大表示（モーダル表示）

のどちらかで開けます。

さらに、ブラウザの大きさに合わせて

• サムネイルのサイズ
• 1ページに表示する最大枚数

を自動計算して切り替えます。

---

2. 動作環境

• Windows 11
• Google Chrome（推奨） または Microsoft Edge
  • フォルダ選択機能（File System Access API）に対応している必要があります。

注意：Safari/Firefoxなどではフォルダ選択が動かない場合があります。

---

3. 対応画像形式（拡張子）

以下の画像ファイルを表示対象とします。

• .png
• .jpg / .jpeg
• .bmp
• .gif
• .webp
• .avif

---

4. 画面の見方（主なUI）

上部（ヘッダー）

• 📁 フォルダを選択：画像フォルダを選びます
• 表示方法：画像の開き方を選びます（新タブ / ページ内拡大）
• 並び順：画像一覧の順序を選びます（ファイル名 / ファイルサイズ）
• ❓ ヘルプ：取扱説明書（この内容）をアプリ内で表示します

中央（ギャラリー）

• サムネイル一覧が表示されます

下部（ページャ）

• ◀ 前へ / 次へ ▶ と ページ番号 が表示されます

---

5. 基本操作（使い方）

5.1 起動

1. ImageViewer.htmlファイルをChrome/Edgeで開きます（ダブルクリック or ドラッグ＆ドロップ）

5.2 フォルダを選んでサムネイル表示

1. 📁 フォルダを選択 をクリック
2. 画像が入ったフォルダを選択
3. 画像がサムネイルで一覧表示されます

---

6. 画像の開き方（表示方法）

ヘッダーの 「表示方法」 で選択できます。

A. 新しいタブで表示

• サムネイルをクリックすると、新しいタブで画像を表示します（ブラウザの標準表示）

B. ページ内で拡大表示

• サムネイルをクリックすると、ページ上に**拡大表示（モーダル）**します

拡大表示の閉じ方

• 画像をクリック
• 背景（黒い部分）をクリック
• ×ボタン
• Escキー

---

7. 並び順（ソート）

ヘッダーの 「並び順」 で切り替えできます。

• ファイル名順（標準）
• ファイルサイズ順（小さい順）
  • サイズが同じ場合は、ファイル名順で並びます

並び順を変えると、通常は先頭ページから表示されます。

---

8. ページ表示とページ移動

8.1 サムネサイズと1ページ表示枚数（自動）

• サムネイルの横幅は ブラウザ横幅の 1/10 を基準に自動計算します
• そのサムネサイズで「横に何列」「縦に何行」入るかを計算し、1ページの最大表示枚数を決めます
• ブラウザをリサイズすると、サムネサイズとページ枚数も自動で変わります

8.2 ページ移動の方法

ボタン

• ◀ 前へ
• 次へ ▶

キーボード

• PageUp / ↑（上矢印）：前のページ
• PageDown / ↓（下矢印）：次のページ

マウスホイール（ギャラリー上）

• ホイール上：前のページ
• ホイール下：次のページ

注意：ギャラリー上ではスクロールではなく「ページ送り」に割り当てられています。
連続で回しすぎたときに暴れないよう、短時間の連打は抑制されます。

---

9. ヘルプ機能（アプリ内取扱説明）

ヘッダーの ❓ ヘルプ を押すと、取扱説明がページ内に表示されます。
閉じ方は以下の通りです。

• ×ボタン
• 背景クリック
• Escキー

---

10. よくある質問（FAQ）

Q1. 「フォルダを選択」が押せない／反応しない

A. ブラウザが未対応の可能性があります。Chrome/Edgeの最新版を使ってください。

Q2. 画像が一部出ない

A. 対応拡張子か確認してください（png/jpg/jpeg/bmp/gif/webp/avif）。
また、ファイルが壊れている場合や読み込みエラーの場合、スキップされることがあります。

Q3. ファイルが大量で重い

A. 画像が極端に多いと表示が重くなる場合があります。
対策：

• フォルダを分割する
• ブラウザを少し小さくして 1ページ表示枚数を減らす（描画負荷を下げる）

Q4. Windowsの既定アプリ（フォト等）で直接開ける？

A. ブラウザのセキュリティ制限のため、このHTMLアプリから既定アプリを直接起動することはできません。
代わりに「新しいタブ」または「ページ内拡大表示」を使ってください。

---

11. セキュリティ・プライバシー

• このアプリはローカルの画像をブラウザ内で読み込んで表示します
• 画像を外部へアップロードしたり送信したりはしません
• 表示のために一時的なURL（Blob URL）を使います

12. TIPS

• フォルダ画像ビューアをブックマークしておくと、次回からはブックマークからアプリを呼び出せるようになり、便利です。

13. カンパウェア

• このアプリはカンパウェアといたします。
• 画面右下の「by terrysaito.com」をクリックするとカンパ画面へ遷移します。