小さな困りごとを解決！ブラウザで動く「SF-OS」が私のPC環境を救った話
この記事はQiita Advent Calendar 2025
身の回りの困りごとを楽しく解決！ by Works Human Intelligence
の12/3の参加記事です。
💡 はじめに：「PC難民」だった私を救ったブラウザデスクトップ
皆さん、新しいOSへの移行や古いPCの活用で困った経験はありませんか？
2024年以降、私はある大きな「困りごと」に直面しました。それは、Windows 10のサポート終了に備え、手持ちの古いPCでまずは、ChromeOS Flex、最近ではLinuxのZorinOS 18といった代替OSへの移行を試みたことです。
しかし、そこで見つけた新たな壁…それが「アプリ不足」と「環境の不統一」でした。
この問題を、私は自作のWebアプリ群、通称「SF-OS（Simple Fake Desktop OS）」を継続して維持開発することで「楽しく」解決しました。本記事では、SF-OSがどのようにして私の、そして多くのユーザーのPC環境の困りごとを解決したのかを、その開発経緯とともにご紹介します。
💻 困りごと①：OS移行の不安と「アプリがない」問題
1-1. 開発の原点：8インチタブレットの制約
SF-OSのアイデアは、約5年前、ストレージ容量が極めて限られた8インチWindowsタブレットを使っていた時の「ちょっとした作業のためのソフトがインストールできない」という切実な困りごとから生まれました。
「ちょっとしたメモ、画像リサイズ、簡単なコード実行…それだけのために大がかりなソフトはいらない！」
1-2. 2024年の決定的な課題：Windows 10サポート終了
2024年10月以降、私は実際にChromeOS Flexのみでの個人用PC生活を始めました。古いPCを延命できた喜びの裏で、以下の具体的な「困りごと」に遭遇しました。
| 遭遇した困りごと | なぜ困るか | SF-OSでの解決アプリ |
|---|---|---|
| ファイル管理 | Linux的なTarファイルをGUIで手軽に展開できない。 |
TARアーカイブ・展開ツールを生成AIで作成。 |
| 業務対応 | 日本特有の電子印鑑が使えず、業務プロセスが継続できない。 | 電子みとめ印を生成AIで作成。 |
| Webデザイン | アイコン検索サイト（iconhunt.site）が突如サービス停止し、デザイン作業が滞る。 | アイコン検索アプリを緊急追加して対応。 |
| 日本語文書 | PDF結合や変換ツールはあっても、日本語フォントに対応しておらず文字化けする。 | PDF結合など日本語対応のPDFツールを生成AIと会話しながら開発。 |
1-3. もう一つの困りごと：作業の継続性（ウィンドウ復元機能への挑戦）
SF-OSはWebサイトとして動作するため、ブラウザを閉じたり、PCを再起動したりすると、開いていたアプリのウィンドウは消えてしまい、作業を中断せざるを得ませんでした。これは「疑似OSもどき」としての大きな弱点でした。
この問題を解決するため、最近「ウィンドウ復元機能」の開発に着手しました。SF-OS終了時にウィンドウの状態を記録し、次回起動時に前回終了時の状態を再現することで、作業の継続性を確保します。
テスト動画
🛠️ 技術解説：jsPanelとlocalStorageによるウィンドウ状態の復元
SF-OSは、jsPanelというJavaScriptライブラリを利用して、ブラウザ上に自由な移動・サイズ変更・最大最小化が可能な「ウィンドウ」を生成しています。このライブラリが、OSのようなデスクトップ環境の土台です。
このjsPanelとブラウザのlocalStorageを組み合わせ、以下の手順で復元を実現しています。
【状態の取得と永続化】
まず、すべての開いているパネル（ウィンドウ）のID、位置、サイズ、コンテンツURL、そしてZ-Index（重なり順）などの情報を取得し、5秒おきにlocalStorageへ保存します。
// ウィンドウの状態をlocalStorageに保存する処理（抜粋）
function getActivePanelInfo() {
const activePanels = jsPanel.getPanels();
const panelInfoList = [];
activePanels.forEach(panel => {
// Z-Index（重なり順）や最小化状態も取得するのがポイント
const zIndex = panel.style.zIndex ? parseInt(panel.style.zIndex) : 0;
const isMinimized = panel.status === 'minimized'; // 最小化状態
panelInfoList.push({
// ... 位置、サイズ情報など ...
zIndex: zIndex,
isMinimized: isMinimized
});
});
// localStorageに保存
// savePanelStatesToLocalStorage(panelInfoList);
}
setInterval(getActivePanelInfo, 5000); // 5秒ごとに実行
【復元時の工夫とコアロジック】
復元時には、単にウィンドウを再表示するだけでなく、OSの挙動を模倣するための工夫を施しています。
function restorePanelsFromLocalStorage() {
const jsonString = localStorage.getItem('sfos_panel_states');
if (!jsonString) return;
let savedStates = JSON.parse(jsonString);
// 🌟 1. 技術的ポイント：Z-Indexの昇順で並べ替え
// パネルを重ねた順序（重なり順）を再現するため、zIndexの小さい順にソートして生成します。
savedStates.sort((a, b) => a.zIndex - b.zIndex);
// 2. 各状態を反復処理し、パネルを復元
savedStates.forEach(state => {
// 🌟 2. 技術的ポイント：最小化パネルの復元回避策
if (state.isMinimized) {
// 最小化パネルは、ライブラリの制限で元の位置(-9999pxなど)に復元すると画面外になるため、
// あえてランダムな可視位置で復元し、ユーザーに情報を提供
var randomLeft = Math.floor( Math.random() * 11 ) * 10 + 20;
var randomTop = Math.floor( Math.random() * 11 ) * 10 + 70;
// jsPanel.create(ランダム位置設定) ...
} else {
// 通常表示のパネル: 元の位置・サイズ・Z-Indexで正確に復元
const panelConfig = {
// ... 元の位置・サイズ設定 ...
zIndex: state.zIndex,
};
// jsPanel.create(panelConfig) ...
}
});
}
このアプローチにより、SF-OSはOSのような「セッション管理」の機能を実現し、ユーザーの「困りごと」である「作業の中断」を防いでいます。
🚀 解決策：生成AIを活用した「SF-OS」の開発加速
これらの具体的な「困りごと」を乗り切れた最大の要因は、2024年に爆発的に普及した「生成AI」でした。
2-1. 開発プロセスの劇的な変化
以前は「既存のスニペット紹介サイトのコードを地道に改変・統合」してアプリを作っていましたが、生成AIの登場でプロセスが一変しました。
現在の開発プロセス：
「Tarファイルを展開するGUIツールをJavaScriptで」とAIに指示
→ AIがコードスニペットを生成
→ SF-OS環境に統合し、即座にテスト
この「困りごと発生」→「AIに要件定義」→「アプリ化」というサイクルが確立した結果、SF-OSのアプリ数は爆発的に増加しました。
| 日付 | アプリ数 | 増加の背景 |
|---|---|---|
| 2022/08/30 | 60個 | コア機能の確立期 |
| 2024/11/09 | 148個 | 生成AIによる生産性向上とOS移行支援の本格化（困りごとの集中解決） |
| 現在 | 239個 | かなり広いジャンルの困りごとの網羅を達成し、今後も機能追加を継続 |
2-2. SF-OSのコアコンセプト：Anywhere, AnyDevice, AnyOS
SF-OSが目指すのは、OSやデバイスに縛られず、どこでも同じ環境で困りごとを解決できることです。
- Anywhere: インターネットがあればどこでもアクセス可能。
- AnyDevice: PC、タブレット、スマホ、どのデバイスでも使える。
- AnyOS: Windows、Linux、ChromeOS Flex… どのOSのブラウザ上でも動作し、環境の違いによる混乱をなくす。
✨ 困りごとの種類別に見るSF-OSの豊富な機能
SF-OSは、現在239個のアプリを搭載し、あらゆる分野の「ちょっとした困りごと」を解決します。
3-1. 【開発・学習の困りごと】を解決
代替OSへの移行時、環境構築で困る開発者のために、複雑な設定なしにコードが動く環境を提供します。
- Monaco新エディタ（高機能なWeb版VS Code）
- Pythonエディタ / JS簡易実行環境
- Mermaid図（コードから図を生成）
- CodePenアプリ / Repl.itアプリ（外部SaaSへの窓口）
3-2. 【画像・PDF処理の困りごと】を解決
プロ用ソフトや外部サービスに頼らなくても、手軽に処理できるようにします。
- WebP⇒Jpeg や SVG⇒画像変換
- 画像超解像処理（AI活用）
- OGP画像切抜 / BG-Image-Remover（Web/SNS特化）
- 見開きPDFビューワ / 簡易PDF結合（日本語対応）
3-3. 【ニッチな日常の困りごと】を解決
日常生活で突発的に発生する困りごとにも対応します。
- シンプル家計簿 / 割り勘
- ストップウォッチ / タイマー付きカメラ
- あみだくじ生成 / ビックリマンシール風画像（楽しさも追求）
3-4. 【未来の困りごと】にも備えるAI統合
SF-OSは、単なるツール集ではなく、WEBGPUなど最新技術を統合するデスクトップを目指しています。
- 軽量WebLLM：ブラウザ内AIチャット
- SF-OS-AI検索：アプリの使い方をAIが説明
- EasyMemo：AIによる翻訳機能を統合
結び：困りごと解決のキーは「自立」と「生成AI」
SF-OSの開発は、「他者のサービスに依存せず、必要な機能は自前のプラットフォームに内包する」という哲学に基づいています。Canvaのような巨大なサービスは内包できませんが、「日常の作業の90%」はブラウザ内で完結させ、残りの10%をスムーズに外部サービスへ繋ぐ「ブリッジ」の役割を果たすことを目指しています。
Windows 10サポート終了、新しいOSへの移行、外部サービスの停止、日本語対応の壁、そして作業継続性の課題——これらの身の回りの困りごとは、生成AIによる高い生産性とSF-OSの自立的なワークスペース戦略によって、楽しく、そして実用的に解決することができました。
皆さんも、ご自身のPC環境の困りごとを、身近なWeb技術と生成AIを使って解決する喜びを体験してみませんか？
【デモサイト等はこちら】
Happy Coding!