monycorp

JsCodeEditor HTML/JS 結合・分離マネージャー ■ 概要 ・JsCodeEditorは、HTMLファイルと、 　フォルダ内の複数のJavaScriptファイルを 　ボタン一つで**「結合（インライン化）」したり、 　「分離（外部ファイル化）」**したりできる開発支援ツールです。 ・「開発中は管理しやすいようにファイルを分けておきたいが、 　配布時やテスト時は1つのHTMLファイルにまとめたい」 　といったニーズに最適です。 ・結合時にはES Modules (import/export) の記述も自動判別し、 　適切な属性を付与します。 ■ 主な機能 ・結合 (Merge): 　指定フォルダ内の全JSファイルを 　HTML内の <script> タグとして埋め込みます。 ・分離 (Split): 　HTMLに埋め込まれたJSコードを抽出し、 　再び個別のファイルとして復元します。 ・プロジェクト管理: 　作業対象のHTMLとフォルダのパスを 　プロジェクトファイルとして保存・読込できます。 ・バックアップ機能: 　ワンクリックで現状のファイルを 　丸ごとバックアップ・復元できます。 ・安全設計: 　ツールが管理するコード以外 （CDNや外部ライブラリのタグなど）は変更せず、 　そのまま維持します。 使い方 (ユーザーマニュアル) 1. 準備・プロジェクト設定 HTMLファイルの選択: 　　 ・対象となる .html ファイルを選択します。 JSフォルダの選択: ・JavaScriptファイルが格納されている 　（または格納したい）フォルダを選択します。 ヒント: ・HTMLファイルを選択済みの場合、 　JSフォルダ選択時に 　自動的にHTMLと同じ階層が開かれます。 プロジェクトの保存: ・メニューの [ファイル] > [名前を付けて保存] で、 　現在のパス設定を保存しておくと、 　次回から [開く] で素早く作業を再開できます。 ・前回終了時の設定は自動的に記憶されます。 2. 結合 (Merge) ・複数のJSファイルをHTMLの中に埋め込みます。 1.メニューまたはボタンから [結合 (Merge)] を実行します。 2.JSフォルダ内のすべての .js ファイルが読み込まれ、 　HTMLファイルの </body> 直前（または元の位置）に埋め込まれます。 3.【重要】 結合が完了すると、 　元のJSファイルはフォルダから削除されます。 　（HTML単体で完結する状態になります） 4.結合された部分はエディタ上で色分け表示されます。 3. 分離 (Split) HTML内のJSコードをファイルに戻します。 1.メニューまたはボタンから [分離 (Split)] を実行します。 2.HTML内に埋め込まれているコード 　（// @@start_js マーカーがある箇所）が抽出されます。 3.JSフォルダ内に .js ファイルとして復元・保存されます。 4.HTML内の記述は <script src="..."> 形式に戻ります。 4. バックアップと復元 ・作業に不安がある場合は、 　こまめにバックアップをとることを推奨します。 作成: ・メニューの [バックアップ] > [バックアップ作成] をクリックすると、 　現在の日時でファイル一式のコピーが保存されます。 復元: ・[バックアップ] > [管理画面を表示] から、 　過去の状態を選択して [復元] を押すと、 　現在のファイルを削除してその時点の状態に戻します。 5. その他の機能 ・Undo/Redo: エディタ上の変更や、 　結合・分離操作は [編集] > [元に戻す (Ctrl+Z)] で 　取り消すことができます。 ・手動編集: 　画面右側のエディタでコードを直接編集できます。 　編集内容は自動保存されます。 ・右クリックメニュー: 　左側のツリービューで、 　ファイルの追加・削除・リネームなどが可能です。 ※ 注意事項 ・このツールは // @@start_js [ファイル名]@@ という 　コメントマーカーを使用して結合箇所を管理しています。 ・この行を削除すると分離できなくなるためご注意ください。 ・結合順序はファイル名のアルファベット順です。 ・読み込み順序が重要な場合は、ファイル名の先頭に 　01_main.js, 02_sub.js のように番号を振ることをお勧めします。