サーバーもインストールも要らない。「1枚のHTML」だけで専用アプリを作る、という選択肢
きっかけは「フォルダの中の写真を見たいだけ」だった
ある日、動画と写真がまとめて入ったフォルダを整理していて、ふと思った。
「このフォルダ、開いたら中身がパッと一覧表示されて、拡大も見られて、要らないものは仕分けできたら便利じゃないか」と。
わざわざ専用の写真管理ソフトをインストールするほどではない。クラウドに上げるのも面倒。求めているのは、もっと軽くて、その場限りで使えるものだった。
そこで試しに、AIに頼んで「HTMLファイル1枚」でそれを作ってみることにした。結果として、最終的にできあがったのは、当初の想像を超える機能を持つ「ミニ写真・動画管理アプリ」だった。
この記事では、その過程で見えてきた「単独完結HTMLアプリ」というものの可能性と限界、そして公開後に実際に使い込んで見つかった不具合とその修正について書いてみたい。
単独完結HTMLアプリとは何か
普通、「アプリを作る」と聞くと、開発環境を整えて、ライブラリをインストールして、サーバーを立てて……という工程を思い浮かべる人が多いと思う。
だが今回作ったものは違う。
ファイルは .html が1つだけ
サーバーは不要
インストールも不要
ダブルクリックでブラウザが開けばそれで動く
中身はJavaScriptとCSSだけで完結していて、ブラウザ標準の機能（File System Access APIやCanvas API、IntersectionObserverなど）だけを使っている。外部のライブラリにすら依存していない（一部のファイル形式のプレビューを除く。後述する）。
これはつまり、1つのテキストファイルがそのままアプリになるということだ。USBメモリやSDカードにコピーしておけば、別のPCに持って行ってもブラウザさえあればそのまま動く。
実際に作ったもの:「メディアツールボックス」
最終的にできあがったのは、以下のような機能を持つファイル管理アプリだった。
フォルダを選択すると、中の画像・動画・PDF・HTML・Word・Excel・Markdownをサムネイル一覧表示
画像／動画／ドキュメントのフィルタ、ファイル名検索、更新日時順の並び替え
サムネイルサイズを自由に調整するスライダー
クリックで拡大表示、矢印キーで前後移動、スライドショー自動再生
ファイルをクリックで選択（iPhoneの写真アプリのように、選ぶと枠が光る）、Shiftキーで範囲選択
選択したファイルを、別フォルダへコピー＆リネームして保存
画像フォーマットの一括変換（PNG⇔JPEG⇔WebP）
削除ではなく「疑似ゴミ箱」フォルダへ移動する仕組み、後から復元も可能
ファイルパスの表示・コピー、対応形式でのブラウザ新規タブ表示
画面上部の操作パネルと下部の一覧表示を分割し、境界をドラッグして比率調整可能
メモリ使用量のリアルタイム表示
大量のファイルがあっても重くならないよう、画面に映った分だけ読み込む「遅延読み込み」処理
正直なところ、専用のファイル管理アプリと比べても遜色ない使い勝手になった。それでいて、フォルダに1ファイル置いておくだけでいい身軽さは、専用アプリにはない魅力だ。
「かゆいところに手が届く」の正体
こうしたアプリのいちばんの強みは、自分の使い方だけに最適化できることだと思う。
市販のアプリは「多くの人に使いやすいように」作られているぶん、自分にとっての「ちょっと不便」がなかなか解消されない。一方で自分専用のツールなら、「ここはこうしてほしい」と思ったその場で機能を足していける。
実際、今回の開発は次のような順序で進んだ。
まず「フォルダの中身を一覧表示したい」
「クリックしたら拡大表示したい」
「サムネイルの大きさを変えたい」
「選んだファイルを別フォルダにコピーしたい」
「チェックボックスじゃなくて、ファイル自体をクリックして選びたい（iPhone風に）」
「削除じゃなくて、ゴミ箱に移動して、後から戻せるようにしたい」
「画像・動画以外にPDFやWord、Excel、Markdownも見られるようにしたい」
「画面レイアウトを分割して、境界をドラッグできるようにしたい」
一つ要望を伝えるたびに、それに応じて機能が積み重なっていく。まるで対話しながらアプリを育てていくような感覚だった。
できないことも、はっきりしている
もちろん、万能というわけではない。ブラウザという環境で動く以上、いくつかの明確な壁がある。
OSの「ゴミ箱」には直接移動できない（そのためのAPIがブラウザには存在しない。今回は「_trashフォルダへ移動」という疑似的な仕組みで代替した）
実際のファイルパスを取得できない。ブラウザの設計上、JavaScriptにはディスク上の場所が一切渡されない。パスを表示するには、起点フォルダの絶対パスを一度手入力してもらう必要がある
外部プログラム（テキストエディタなど）を直接起動できない
バックグラウンドでは一切動かない。ページを閉じたら処理も止まる
ブラウザによって使える機能が違う。コピー・ゴミ箱機能はChromeやEdgeでは使えるが、Firefoxでは対応していない
重い処理（動画のエンコードなど）には向かない。あくまで軽い作業向き
つまり、「ファイルの閲覧・軽い加工・簡易的な整理」までは十分実用に耐えるが、「OSに深く入り込む処理」や「常駐して監視する仕組み」が必要になったら、素直に別の方法（ローカルサーバーやデスクトップアプリ）を検討したほうがいい。この境界線を知っているかどうかが、無駄なく作るコツだと感じる。
応用範囲は思っている以上に広い
今回は画像・動画・各種ドキュメントだったが、この仕組みは応用が利く。たとえば、
フォルダ内の重複ファイルを検出して整理するツール
大量の写真をExif情報から日付ごとに自動仕分けするツール
2つのフォルダを比較して差分だけを一覧表示するバックアップ確認ツール
日本独自のCADデータフォーマットである「SFC」ファイルをブラウザ上で表示するビューア
など、「特定のファイル形式を、専用アプリを入れずに、その場で確認・整理したい」というニーズがある限り、応用先はいくらでも広がる。
キッチンタイマー（アナログ・デジタル切り替え、時計機能付き）や、QRコード作成アプリのような、ファイル操作を伴わない日用ツールも、同じ発想で気軽に作れる。ブラウザという実行環境そのものが「ちょっとした専用アプリの土台」として、想像以上に懐が深いということだ。
【訂正・追記】公開後に判明した不具合と、その修正について
記事公開後、実際に自分で使い込む中で、無視できない不具合が2つ見つかった。正直に追記しておきたい。
1. メモリリーク
ゴミ箱パネルとフォーマット変換タブで、画像プレビュー用に発行していたBlobURL（ブラウザ内の一時的な参照）が、パネルを閉じても解放されず溜まり続けていた。開閉を繰り返すほど少しずつメモリを消費する、典型的なメモリリークだった。
2. 大量ファイルのフォルダでフリーズ
ファイル数が非常に多いフォルダ（数千〜数万件規模）を選択すると、ブラウザがしばらく完全に応答しなくなる不具合があった。原因は、フォルダの中身を読み込む処理が「非同期」の体裁を取りつつも、実質的に一つの巨大な処理として実行され、ブラウザが画面描画に戻るタイミングを失っていたためだった。
この2つは、実際にヘッドレスブラウザを使った自動テストで負荷を再現し、修正の前後でどれだけ改善したかを実測した。参考までに、大量ファイル（20,000件）を開いた際の「ブラウザが応答を返せない最大時間」の比較は以下の通り。
修正前: 約15秒間、完全に応答不能
修正後: 最大でも0.2秒程度
体感の改善ではなく、実測データとして裏付けが取れている。
なお、Firefox向けの読み込み経路については、処理自体は分割できたものの、ブラウザがファイルを内部的に読み込む段階そのもの（コード側では制御できない領域）に時間がかかることが分かっている。数万件規模の巨大フォルダをFirefoxで一度に開く場合は、サブフォルダ単位で分けて開くことを推奨する。この点はアプリ内の注意書きにも明記した。
「動くものを作って終わり」ではなく、「実際に使ってみて、負荷をかけて、直す」というサイクルを経て初めて実用に足るものになる、というごく当たり前のことを、身をもって実感した。
おわりに
「アプリを作る」というと大げさに聞こえるが、実際には「自分の困りごとを、ブラウザの標準機能だけでどう解決するか」という、意外と身近な工作に近い。
サーバーもインストールも要らず、1つのHTMLファイルとして持ち運べる。この軽さは、ちょっとしたツールを量産するにはうってつけだと感じている。
次は何を作ろうか、と考えるのも含めて、このやり方の楽しさなのかもしれない。
付録1: 機種(OS)は問うか
結論から言うと、OS自体は問いません。Windows・Mac・Linuxのどれでも、ブラウザさえあれば同じHTMLファイルがそのまま動きます。
ただし、機能によってはブラウザの種類に依存します。
一覧表示・拡大表示・検索・スライドショーなどの「見るだけ」の機能は、Chrome・Edge・Firefoxいずれでも動作
「フォルダへ直接コピー」「疑似ゴミ箱への移動・復元」は、File System Access APIという比較的新しい技術を使っており、これはChrome・Edgeなど一部ブラウザのみ対応（Firefox・Safariは非対応）
スマートフォンのブラウザではこの種のAPI対応がまだ不安定なため、基本的にはPCでの利用を前提にしたほうがよい
つまり「OSは問わないが、フル機能を使うにはブラウザを選ぶ」というのが正確なところだ。
付録2: AIへの指示文(抜粋・要約)
実際の開発は、次のような短いやり取りの積み重ねだった。一字一句このままではないが、流れが伝わるように要約して掲載する。
「フォルダの中の写真・動画をHTMLで表示したい」
「フォルダを開いたら、そのフォルダ内の動画・画像を自動で全部表示したい」（→ ブラウザの制約上、フォルダ選択ボタン方式に落ち着いた）
「画像か動画を選択すると拡大表示され、また一覧に戻れるようにしたい」
「ソート順(名前順・更新日時順)を変更できるようにしたい」
「選択した写真・動画を別フォルダにコピーする機能。コピー先のファイル名も変更できるようにしたい」
「サムネイルの大きさを自由に変更できるようにしたい」
「ファイル数が多いフォルダを開くと重くなる。メモリをなるべく使わない方法は?」
「画像フォーマットの変更機能がほしい」
「画像・動画関係の機能を1つのアプリにまとめたほうがよい」
「チェックボックスではなく、マウスで選択した写真の色が変わるようにしたい。iPhoneのようなイメージで、連続選択にも対応してほしい。また、選択した写真をゴミ箱に移動する機能もほしい」
「疑似ゴミ箱に移動したファイルを、元のフォルダに復元する機能もほしい。複数ファイルに対応してほしい」
「PDF・Word・Excel・HTML・Markdownにも対応したい」「画面レイアウトを分割し、境界をドラッグできるようにしたい」「ファイルパスの表示・コピー、新しいタブで開く機能がほしい」
（公開後）「ファイルの多いフォルダを指定するとフリーズする」「メモリ使用率を表示してほしい」「BlobURLが解放されていない箇所を直してほしい」
一つ動くものができるたびに、次の「ここが気になる」が見つかり、それをそのまま伝えるだけで機能が足されていく。設計書を最初にすべて書き上げるというより、育てていく感覚に近かった。
付録3: アプリ本体・使い方説明書のダウンロード
完成した単一HTMLファイル「media_toolbox.html」と、機能を一通りまとめた使い方説明書「media_toolbox_manual.html」をこの記事に添付した。ダウンロードして展開し、それぞれダブルクリックで開けばすぐに使える。コピー＆ペーストの手間は不要。
ここから先は
¥ 300
この記事が気に入ったらチップで応援してみませんか？
