Web IDE『Wazamono-Editor』RDD

Transcript

1. ​ Web IDE『Wazamono-Editor』要件定義書​ ​ © 2026 kanata_yurufuwa All Rights Reserved.​
2. ​ MVP（Minimum Viable Product）要件定義​ ​ 　利用フロー​ ​ 　　⒈開始プロセス​ ​ 　　　　・環境適合性チェック​ ​ 　　　　　　⒈アプリの起動時にユーザーのブラウザがOPFS（Origin Private File System）とIndexedDBに対応しているか自動判定する。​ ​ 　　　　　　　非対応の場合は『AlertModal』を表示し、利用を制限する。​ ​ 　　　　・Welcome&契約締結​ ​ 　　　　　　⒈対応ブラウザの場合は『WelcomeModal』を表示。​ ​ 　　　　　　⒉ユーザーが『はじめる』ボタンを押下することで、利用規約に同意（クリックラップ契約）したものとみなし、『MainEditor』へ遷移する。​ ​ 　　　　　　　ここでユーザー登録やログインは一切求めない。​ ​ 　　⒉開発プロセス​ ​ 　　　　・コーディング（綴）​ ​ 　　　　　　⒈ユーザーはソフトウェアキーボードと拡張キーボードバーを使ってコードを記述する。​ ​ 　　　　・プレビュー（試）​ ​ 　　　　　　⒈ユーザーは任意のタイミングでプレビューを実行できる。​ ​ 　　　　・その他（診／操／遷）​ ​ 　　　　　　⒉ユーザーは必要に応じてデバッグ（診）、ターミナル（操）、Git管理（遷）ヘモードを切り替え、​ ​ 　　　　　　　詳細な検証やバージョン管理などを行う。​ ​ 　　⒊データ管理プロセス​ ​ 　　　　・自動保存／手動保存​ ​ 　　　　　　⒈入力停止後、自動的にOPFSヘデータを保存する。​ ​ 　　　　　　⒉ユーザー操作による手動保存も可能。​ ​ 　　　　・エクスポート（ZIP出力）​ ​ © 2026 kanata_yurufuwa All Rights Reserved.​
3. ​ 　　　　　　⒈ブラウザのキャッシュクリア対策として、ユーザーは定期的にプロジェクト全体（Gitデータ含む）を​ ​ 　　　　　　　ZIP形式でダウンロードする。​ ​ 　　　　・終了時の警告​ ​ 　　　　　　⒈未保存もしくは未エクスポートの状態でブラウザを閉じようとした際、beforeunloadイベントで警告を表示。​ ​ 　　　　　　⒉『Save』ボタンと『SaveAs』ボタンの右上に通知ドットを重ねて表示。赤は「重大な問題」、黄は「未保存」、緑は「問題なし」。​ ​ 　プロダクトポリシー​ ​ 　　⒈transparency-first（透明性第一）​ ​ 　　　　・ユーザーのコードやデータはすべてユーザーのブラウザ内（クライアントサイド）に保存し、サーバーレスで動作する。​ ​ 　　　　・外部（アプリ外）との通信はユーザーの任意の操作（CDNの利用など）によってのみ発生する。​ ​ 　　　　・本アプリ開発に使用するライブラリやフレームワークなどは、脆弱性がなく、トラッキングやテレメトリーを含まない​ ​ 　　　　　（もしくはオフにできる）ものだけを採用する。​ ​ 　　⒉hospitality-driven（ホスピタリティ優先）​ ​ 　　　　・インストール不要で、すべての機能を無料で提供する。ユーザーはブラウザさえあれば即座にコーディングを行える。​ ​ 　　⒊noiseless-experience（ノイズの徹底排除）​ ​ 　　　　・ユーザー登録、クラウド連携、課金、広告、AIサジェスト、トラッキング、テレメトリーをすべて排除。​ ​ 　オンボーディング機能​ ​ 　　⒈環境チェック​ ​ 　　　　・アプリ起動時にユーザーのブラウザでOPFSとIndexedDBが利用可能かチェックを行う。​ ​ 　　　　　非対応ブラウザなら『AlertModal』で警告し、最新ブラウザの使用を促す（例：「最新のChromeやEdgeを使用してください」）。​ ​ 　　⒉『WelcomeModal』​ ​ 　　　　・環境チェック後、対応ブラウザなら毎回『WelcomeModal』を表示。​ ​ 　　　　・アプリのロゴ、『はじめる』ボタン、利用規約／使い方／公式サイトへのリンクを表示。​ ​ 　　　　・免責事項にはキャッシュクリア対策としての定期的なZIPエクスポートを促す文を含める。​ ​ © 2026 kanata_yurufuwa All Rights Reserved.​
4. ​ 　　　　・和紙のような背景。​ ​ 　　⒊クリックラップ契約​ ​ 　　　　・『はじめる』ボタンを押すと『MainEditor』へ遷移。​ ​ 　　　　・クリックラップ契約を採用し、『はじめる』ボタンを押すと利用規約に同意してアプリを使うものとする。​ ​ 　　　　　「『はじめる』ボタンを押すと、利用規約に同意したものとみなされます。」という注釈を、『はじめる』ボタンの近くに表示。​ ​ 　入力支援エンジン​ ​ 　　⒈解析エンジンの利用​ ​ 　　　　・Code Mirror 6の標準言語パッケージによる静的解析を利用し、メインスレッド内で動作させる。​ ​ 　エラーハンドリング​ ​ 　　⒈エラー境界​ ​ 　　　　・各コンポーネントを独立したエラー境界で囲み、アプリの一部でエラーが起こってもアプリ（特に未保存のデータ）がクラッシュするのを防ぐ。​ ​ 　　⒉『ErrorModal』​ ​ 　　　　・アプリが動作しなくなり、再起動が必要な場合は、「予期せぬエラーが発生しました。アプリを再起動してください。」と​ ​ 　　　　　『ErrorModal』を表示する。​ ​ 　モード切り替え機能​ ​ 　　⒈『綴 - tsuzuru -（MainEditor）』モード​ ​ 　　　　・デフォルトのモード。他のモード時に『Close』ボタンを押しても遷移可。​ ​ 　　⒉『試 - tamesu -（Preview）』モード​ ​ 　　　　・『MainEditor』モード時に『試』ボタンを押すと遷移。『Close』ボタンを押すと『MainEditor』モードに戻る。​ ​ 　　⒊『遷 - utsurou -（Git）』モード​ ​ 　　　　・『遷』ボタンを押すと遷移。『Close』ボタンを押すと『MainEditor』モードに戻る。​ ​ 　　⒋『診 - miru -（Debug）』モード​ ​ © 2026 kanata_yurufuwa All Rights Reserved.​
5. ​ 　　　　・『診』ボタンを押すと遷移。『Close』ボタンを押すと『MainEditor』モードに戻る。​ ​ 　　⒌『操 - ayatsuru -（Terminal）』モード​ ​ 　　　　・『操』ボタンを押すと遷移。『Close』ボタンを押すと『MainEditor』モードに戻る。​ ​ 　ユーティリティ​ ​ 　　⒈PWA（Progressive Web Apps）対応​ ​ 　　　　・通信が不安定な環境でも動作を保証するために、Service Workerを利用。​ ​ 　　⒉処理状態の表示（『ProgressSplash』）​ ​ 　　　　・何らかの処理が行われている間は、通知バー（『ProgressSplash』）を表示する。画面外からフレームインさせる。​ ​ 　　　　　通知バーには「ダウンロード中」などの処理内容を表示する。処理が完了したら、画面外ヘフレームアウト。​ ​ 　『MainEditor』モード機能​ ​ 　　⒈対応言語​ ​ 　　　　・HTML、CSS、JavaScript、TypeScript、Markdownに対応。​ ​ 　　⒉入力支援​ ​ 　　　　・シンタックスハイライト機能、オートコンプリート機能、エラー検知機能（波線でエラー箇所を明示）を搭載。​ ​ 　　　　・オートコンプリート機能は、入力予測、インテリセンス、単語拾い、スニペット、エメットで構成される。​ ​ 　　⒊誤操作防止​ ​ 　　　　・OSやブラウザに搭載されている拡大／縮小、ジェスチャーなどの機能を無効化。​ ​ 　　⒋『HeaderBar』​ ​ 　　　　・『SideDrawer（左端）』、『Undo』、『Redo』、『Search』、『Save』、『試』、『Transform』、『More（右端）』のボタンを搭載。​ ​ 　　　　・『SideDrawer（左端）』ボタンを押すと、『SideDrawer』を表示。​ ​ 　　　　・『Undo』も『Redo』もそれぞれ50件まで保持。​ ​ 　　　　・『Search』ボタンを押すと、『SearchAndReplaceBar』を表示。拡張キーボード列のエリアを使って表示する。​ ​ © 2026 kanata_yurufuwa All Rights Reserved.​
6. ​ 　　　　　『Search』ボタンをもう一度押すと終了。​ ​ 　　　　・『試』ボタンを押すと、『PreviewModal』へ遷移。​ ​ 　　　　・『Transform』ボタンを押すと、『TransformMenu』を表示。ドロップダウンメニュー。​ ​ 　　　　・『遷』、『診』、『操』のボタンを搭載。​ ​ 　　　　・『More』ボタンを押すと、『MoreMenu』を表示。ドロップダウンメニュー。『SaveAs』、『Settings』、『License』のボタンを搭載。​ ​ 　　　　・『Settings』ボタンを押すと、『SettingModal』へ遷移。​ ​ 　　　　・『License』ボタンを押すと、『LicenseModal』へ遷移。​ ​ 　　⒌『TabSelectionArea』​ ​ 　　　　・複数ファイルを並行して編集できるタブ切り替え機能を搭載。​ ​ 　　⒍『EditorArea』​ ​ 　　　　・コーディングに使うエリア。user-scalable=noに加え、CSSの overscroll-behavior：none; およびtouch-action：pan-x pan-y; を適用し、​ ​ 　　　　　スワイプ操作によるブラウザバックやリロード、画面全体のバウンス動作を完全に無効化する。​ ​ 　　⒎『SideDrawer』​ ​ 　　　　・ヘッダーには、『CreateFile（左端）』、『UploadFile』、『CreateFolder』、『UploadFolder』、『Close（右端）』のボタンを搭載。​ ​ 　　　　・ファイルツリーでは、各ファイル名の横に『Rename』、『Delete』のボタンを表示。​ ​ 　　　　　各フォルダ名の横に『Rename』、『Delete』のボタンを表示。​ ​ 　　　　・フッターには、『DownloadZip』、『UploadZip』のボタンを表示。​ ​ 　　⒏『ExtendedKeyboardBar』​ ​ 　　　　・ソフトウェアキーボードのすぐ上に搭載。必ずその位置に表示されるようにソフトウェアキーボードに追従させる。​ ​ 　　　　・Tab（左端固定）、{、}、(、)、;、'、"、<、>、[、]、,、.、:、/、\、?、!、#、$、%、&、|、^、~、_、↑、↓、←、→を横スクロールで選択可。​ ​ 　　　　・Visual Viewport APIを用いて画面上のキーボード占有領域を監視する。エディタ領域をリサイズし、​ ​ 　　　　　カーソルや『ExtendedKeyboardBar』が隠れないように制御。​ ​ 　　　　・横向き（Landscape）かつ、エディタフォーカス時にVisual Viewportの高さが著しく減少しない場合（外付けキーボード使用と推定される場合）、​ ​ 　　　　　『ExtendedKeyboardBar』を非表示にし、エディタ領域を広く確保する。​ ​ © 2026 kanata_yurufuwa All Rights Reserved.​
7. ​ 　　　　　この挙動はwindowのresizeイベントおよびVisual Viewportのresizeイベントで動的に判定する。​ ​ 　　⒐『SettingModal』​ ​ 　　　　・テーマ（SAMURAI／UTAKATA／KASUMI／USUYOU／SAKURA／MATCHA）（デフォルトはSAMURAI）、文字のサイズ（デフォルトは14）、​ ​ 　　　　　Tab（デフォルトはスペース2個分）、自動保存（オフ、任意の秒数（デフォルトは3秒））。​ ​ 　　⒑『LicenseModal』​ ​ 　　　　・サードパーティーライセンスの全文を表示するモーダル。​ ​ 　『Preview』モード機能​ ​ 　　⒈モーダル​ ​ 　　　　・『PreviewModal』として表示。​ ​ 　　⒉『HeaderBar』​ ​ 　　　　・右端に『Close』ボタンを搭載。​ ​ 　　⒊サンドボックス実行​ ​ 　　　　・iframeには sandbox="allow-scripts allow-popups allow-modals" 属性を付与し、​ ​ 　　　　　親ウィンドウ（エディタ本体）へのアクセス（window.parent操作など）を物理的に遮断する。​ ​ 　　⒋ログ表示​ ​ 　　　　・iframe内のconsole.log、console.errorをフックし、window.postMessage APIを用いてエディタ本体（親ウィンドウ）ヘログデータを送信する。​ ​ 　　　　　エディタ側はこれを受信してコンソールエリアに表示する。​ ​ 　『Git』モード機能​ ​ 　　⒈モーダル​ ​ 　　　　・『GitModal』として表示。​ ​ 　　⒉『HeaderBar』​ ​ 　　　　・右端に『Close』ボタンを搭載。​ ​ © 2026 kanata_yurufuwa All Rights Reserved.​
8. ​ 　　⒊『TabSelectionArea』​ ​ 　　　　・機能なし。​ ​ 　　⒋『EditorArea』​ ​ 　　　　・Gitログ／コミット画面として使用。コミットメッセージ入力、コミット実行、ログリスト表示を行う。​ ​ 　　　　・Staged Changes／Changesのファイルリスト表示。各ファイル横に『Stage（+）』、『UnStage（-）』のボタンを搭載。​ ​ 　　⒌『SideDrawer』​ ​ 　　　　・機能なし。​ ​ 　　⒍自動initialize​ ​ 　　　　・isomorphic-gitを使用し、.gitフォルダをOPFS内で管理する。プロジェクト作成時に自動でinitする。​ ​ 　『Debug』モード機能​ ​ 　　⒈モーダル​ ​ 　　　　・『DebugModal』として表示。​ ​ 　　⒉『HeaderBar』​ ​ 　　　　・『Run』、『Clear』、『Close』のボタンを搭載。​ ​ 　　⒊『TabSelectionArea』​ ​ 　　　　・機能なし。​ ​ 　　⒋『EditorArea』​ ​ 　　　　・ログとグローバル変数をダンプして抽出表示するだけの簡易的なデバッグ機能。​ ​ 　　⒌『SideDrawer』​ ​ 　　　　・機能なし。​ ​ 　『Terminal』モード機能​ ​ 　　⒈モーダル​ ​ © 2026 kanata_yurufuwa All Rights Reserved.​
9. ​ 　　　　・『TerminalModal』として表示。​ ​ 　　⒉『HeaderBar』​ ​ 　　　　・右端に『Close』ボタンを搭載。​ ​ 　　⒊『TabSelectionArea』​ ​ 　　　　・機能なし。​ ​ 　　⒋『EditorArea』​ ​ 　　　　・xterm.jsの全画面表示。Visual Viewport APIで高さを動的に制御。​ ​ 　　⒌『SideDrawer』​ ​ 　　　　・機能なし。​ ​ 　　⒍実行基盤​ ​ 　　　　・OpfsShellを用いた簡易的な仮想シェル（コマンドエミュレーター）の実装。​ ​ 　　　　・Atomics APIとSharedArray Bufferを活用し、Workerスレッドの一時停止による同期Ｉ／Ｏ（ユーザー入力待ち）を実装。​ ​ 　データ管理機能​ ​ 　　⒈保存／永続化​ ​ 　　　　・Persisted Storage APIのリクエストを行い、ブラウザやOSによるデータの自動削除を防止。​ ​ 　　　　・ブラウザの『閲覧履歴データを削除』の操作でOPFSやIndexedDBが保持していたデータはすべて消える（透明性の確保）。​ ​ 　　⒉OPFS利用​ ​ 　　　　・サーバーにデータを送らず、完全ローカル管理する。​ ​ 　　　　・手動保存：Ctrl+Sまたは『Save』ボタン押下時にOPFSへ書き込み。​ ​ 　　　　・自動保存：ユーザー設定でオン／オフを切り替え可能（デフォルトはオン）。オンの場合、入力停止（debounce）から一定時間経過後に保存。​ ​ 　　⒊状態管理（IndexedDB）​ ​ 　　　　・最後に開いていたファイル、タブの順序、カーソル位置をIndexedDBに保存し、再起動時に復元する。​ ​ 　　　　・ユーザー設定もIndexedDBで保持する。​ ​ © 2026 kanata_yurufuwa All Rights Reserved.​
10. ​ 　　⒋プロジェクト単位でのZIPインポート／エクスポート​ ​ 　　　　・『DownloadZip』ボタン押下時に、OPFSが保持しているデータとIndexedDBが保持しているデータとGitのデータを​ ​ 　　　　　ひとつのZIPにまとめて出力する。​ ​ 　　　　　　user-project.zip​ ​ 　　　　　　　.wazamono-editor/​ ​ 　　　　　　　　┣ .git/　//isomorphic-gitリポジトリデータ​ ​ 　　　　　　　　┣ src/　//ユーザーコード​ ​ 　　　　　　　　┣ package.json　//依存関係​ ​ 　　　　　　　　┣ status.json　//状態管理（開いていたタブ、カーソル位置など）​ ​ 　　　　　　　　┗ settings.json　//ユーザー設定​ ​ 　　⒌フォルダ／ファイル単位での追加インポート。​ ​ © 2026 kanata_yurufuwa All Rights Reserved.​
11. ​ 　非機能要件​ ​ 　　⒈メニューアイコン​ ​ 　　　　・SVG形式とする。​ ​ 　　　　・和風のメニューアイコンを制作し、それを採用する。必ずaria-labelを付与する。​ ​ 　　⒉アプリアイコン​ ​ 　　　　・PNG形式とする。ファビコンとアプリロゴもPNG形式とする。​ ​ 　　⒊フォント​ ​ 　　　　・デザイン性を優先する部分にはShippori Minchoを使用する​ ​ 　　　　　（『AlertModal』、『WelcomeModal』、『ErrorModal』、『ProgressSplash』、『HeaderBar』、『SettingModal』、『LicenseModal』）。​ ​ 　　　　・視認性を優先する部分にはM PLUS 1 Codeを使用する​ ​ 　　　　　（『TabSelectionArea』、『EditorArea』、『SideDrawer』、『ExtendedKeyboardBar』、『PreviewModal』、『GitModal』、​ ​ 　　　　　『DebugModal』、『TerminalModal』、aria-label）。​ ​ 　　⒋セキュリティヘッダー（COOP／COEP）​ ​ 　　　　・SharedArrayBufferを有効化するため、本アプリを配信するサーバー（CDN／ホスティング）は、 Cross-Origin-Opener-Policy：same-origin​ ​ 　　　　　および Cross-Origin-Embedder-Policy：require-corp のHTTPレスポンスヘッダーを返す必要がある。​ ​ 　　　　　これに伴い、外部画像などのリソース読み込みにはCORS設定が必須となることを考慮する。​ ​ © 2026 kanata_yurufuwa All Rights Reserved.​
12. ​ 　データ定義​ ​ 　　⒈ユーザープロジェクトデータ​ ​ 　　　　・ユーザーが作成・編集するソースコードおよび関連ファイル。これらはOPFS上で管理される。​ ​ 　　　　・ソースコード：HTML、CSS、JavaScript、TypeScript、Markdown形式のテキストファイル。​ ​ 　　　　・アセット：プロジェクトに含まれる画像などの静的リソース。​ ​ 　　　　・依存関係定義：package.json等のパッケージ管理ファイル。​ ​ 　　　　・保存トリガー：自動保存（入力停止（debounce）から一定時間（デフォルト3秒）経過後）。手動保存（Ctrl+Sまたは保存ボタン押下時）。​ ​ 　　⒉バージョン管理データ​ ​ 　　　　・Git連携機能により生成されるリポジトリデータ。​ ​ 　　　　・Gitリポジトリ：.gitフォルダ配下に格納されるオブジェクト、参照、インデックス情報。​ ​ 　　　　・管理方式：isomorphic-gitを使用し、OPFS内で直接管理する。​ ​ 　　⒊アプリケーション状態データ​ ​ 　　　　・エディタのUI状態やユーザー設定。これらは高速な読み書きが求められるため、IndexedDBで管理する。​ ​ 　　　　・ユーザー設定（settings.json相当）：テーマ（SAMURAI／UTAKATA／KASUMI／USUYOU／SAKURA／MATCHA）、文字サイズ、タブ幅、​ ​ 　　　　　自動保存設定（オン／オフ、秒数）。​ ​ 　　　　・セッション状態（status.json相当）：最後に開いていたファイルパス、タブの表示順序、各ファイルのカーソル位置。​ ​ 　　⒋ランタイム／一時データ​ ​ 　　　　・メモリ上でのみ保持され、ブラウザリロードやタブクローズで破棄されるデータ。​ ​ 　　　　・Undo／Redoスタック：各ファイル最大50件の操作履歴。​ ​ 　　　　・ターミナルコマンド履歴：最大10件の入力履歴。​ ​ 　　　　・解析キャッシュ：TypeScriptコンパイラ等が生成する解析データ。タブクローズ時に破棄。​ ​ 　　　　・プレビューログ：iframe内からのconsole.log出力内容。​ ​ © 2026 kanata_yurufuwa All Rights Reserved.​