ココフォリアのお部屋を作るのにお手伝いができないかと、ふと思い立って作ってみたお部屋レイアウトメーカーです！ 【デモ版を作成しました】 https://bri-daikon.github.io/ijigenpocket/CcfoliaLayoutMaker_NoSave.html こちらから触ってみることが出来ます。 製品版は、保存機能とグリッドオンオフが存在しますが、デモ版はそれ以外全部試してみることが出来ます。 触ってみてください。 【できること】 1. キャンバス（作業スペース）設定 ・サイズ変更: 部屋のベースとなるキャンバスサイズを 1280 x 720 または 1920 x 1080 （いずれも 16:9）から選択できます。 グリッド表示: キャンバス上に配置の目安となるグリッド線を表示/非表示にできます。 ・グリッドスナップ: パネルやフレームをドラッグ移動・リサイズする際、グリッド線（24px単位）へ自動で吸着（スナップ）させ、きれいに整列できます。 ・作業スペースの色変更：透明、白、グレー、黒にスペースを変更できる。 2. 操作履歴（一つ戻る）機能 ・元に戻す (Undo): パネルやフレームの追加、削除、移動、サイズ変更、順序入れ替え、非表示化、サイズ設定変更など、キャンバス上で行ったほぼすべての操作を1ステップ前に戻すことができます（最大30件まで保持）。 ・画面左側の「一つ戻る」ボタン、またはキーボードショートカットの 翻訳不可：[Ctrl+Z] （Macでは 翻訳不可：[Cmd+Z]）で実行できます。 3. フレーム画像（全景/前景）の配置と編集 ・画像のアップロード: 透過推奨のフレーム（部屋枠）画像を1枚読み込んで配置できます。 ・位置・サイズ調整: キャンバス内でドラッグして移動したり、枠の右下にある青いツマミをドラッグしてサイズを自由に変更できます。 Shiftキーを押しながらリサイズすることで、元画像のアスペクト比（縦横比）を維持したまま拡大縮小できます。 ・フレーム画像の編集（部分透明化）: 「フレーム画像を編集」ボタンから専用の透過エディタを起動できます。 自由描画（フリーハンド）、長方形、円・楕円の3種類の選択ツールで範囲を指定し、「選択範囲を透明にする」ことで画像の一部を透過（ピクセル消去）させることができます。 編集画面内での個別Undoや、初期状態リセット、キャンセルの操作も可能です。 ・フレームのクリア: 「フレームをクリア」ボタンで瞬時にフレーム画像を消去できます。 4. パネル画像の追加と操作 ・複数パネルの追加: キャンバス上に、重なり合う複数のパネル画像を読み込んで追加できます。 ・クイックツールバー（パネル選択時に表示）: 重ね順（レイヤー）の変更: パネルの重なり順を「最前面へ」「前面へ」「背面へ」「最背面へ」の4段階で細かく調整できます。 ・反転機能: パネル画像を「左右反転」および「上下反転」させることができます。 ・画像差し替え: 選択しているパネルの位置（座標）とサイズを完全に保ったまま、別の画像ファイルに差し替えることができます。 複製（コピー）: 選択中のパネルをまったく同じ状態で複製し、少しずらした位置に生成します。 [Ctrl+C] でコピー、翻訳不可：[Ctrl+V] でペーストのキーボードショートカットにも対応しています。 ・非表示化: パネルを削除することなく、一時的にキャンバス上および出力画像から非表示にできます。 ・削除: 選択中のパネルを即座にキャンバスから削除します。 5. 配置済みパネルリスト（サイドバー） ・パネル一覧の確認: 現在キャンバス上に配置されているパネルの総数と一覧を表示します。 ・リストからの選択: リスト内の項目をクリックすることで、キャンバス上の該当パネルを選択状態にできます。 ・リストからの直接操作: リストのボタンから直接「前面/背面への移動」、「表示/非表示の切り替え」、「複製」、「削除」を行えます。 6. パネル画像の整列・配置 ・横列：選んだパネルを上、中央、下合わせができます。 ・縦列：選んだパネルを左、中央、右合わせが出来ます。 ・水平均等：横列の中央値に合わせるのと同じ。 ・垂直均等：縦列の中央値に合わせるのと同じ。 ７.ワークスペースのズームコントロール ・表示倍率の拡大・縮小: 画面右下のボタンから、作業スペースの表示スケールを 10% から 200% の範囲（10%刻み）で自由に拡大・縮小できます。 拡大して画面からはみ出た場合も、スクロールして全体の細部を確認しながら編集できます。 ・自動フィット（フィット）: ワンクリックで、お使いのブラウザのウィンドウサイズに合わせた最適な倍率（自動フィット）に戻せます。 8. 高解像度画像出力（PNG保存） PNG画像として保存: キャンバスに組み立てたレイアウトを、グリッド線や操作用ツールバーを除いた状態で、設定した元のキャンバス解像度（1280px または 1920px）のまま、高画質な1枚の透過PNG画像として出力・保存します。 非表示設定にしているパネルは出力画像から正しく除外されます。 透過処理を行ったフレームや、反転したパネル、レイヤー順もすべて忠実に出力画像へ反映されます。