AIコードを貼り付けて動作を確かめるためのWeb開発入門

📋 使い方手順

1. 左側のサイドバーにある `🤖 AI Paste` ボタンをクリックします。
2. 開いた画面に、AIのチャット画面（説明テキストなどが入っていてもOK）をそのまま貼り付けます。
3. `✓ 自動貼り付けして適用` ボタンをクリックします。
4. HTML、CSS、JS の各エディタにコードが自動で分類して配置され、右側のプレビュー画面にアプリが即座に描画されます。

💡 ココが親切（ホスピタリティ設計）： AIがHTMLの中に記述した <style> や <script> は、取り出せる範囲で各タブへ分けます。説明文が混ざった出力も受け取れますが、すべてのコメントやBOMを必ず消すわけではありません。

⚙️ 使い方手順

1. 右上の `⚙️ Tools` ボタンをクリックして、プレビュー設定パネルを開きます。
2. パネルの中ほどにある `📦 外部ライブラリ (CDN)` から使いたいライブラリを選択するか、`➕ カスタムライブラリ (URL)` に任意のJS/CSSのCDN URLを貼り付けて「追加」を押します。
   • Tailwind CSS: 🎨 チェックするだけでモダンなデザインが瞬時に適用されます。
   • Lucide Icons / Font Awesome: 🌟/🚩 AIが多用する便利なアイコンを読み込みます。
   • 任意のCDN: 📦 好きなCSSフレームワークやJavaScriptライブラリを自由に追加してプレビューに反映できます。
3. チェックを入れる、あるいはURLを追加すると自動的にプレビューが更新されます。

💡 ココが親切（ホスピタリティ設計）： 複数のライブラリを読み込んでも、ツールが内部で「jQueryなどの基礎的なライブラリを先に読み込む」といった順序制御を自動で行うため、読み込み順によるエラーが起きません。 Lucide Icons は、読み込み後に描画処理を1回呼びます。表示されないときは、プレビューを再実行してください。

⚙️ 使い方手順

1. 右上の `⚙️ Tools` ボタンをクリックして、プレビュー設定パネルを開きます。
2. パネルの中央付近にある `🔍 エディタ文字サイズ` スライダーを左右に動かします。
3. スライダーを動かすと、HTML、CSS、JS、JSON、PHPの各エディタの文字サイズ（12px〜24px）が連動して切り替わります。

💡 ココが親切（ホスピタリティ設計）： 変更したフォントサイズはブラウザに自動で記憶されます。次回ツールを開いた際にも、自動的に前回と同じ好みのフォントサイズでエディタが立ち上がります。

🔎 よくあるエラーとアドバイスの例

• ❌ Cannot read properties of null (reading 'addEventListener')
  💡 JSで指定したHTML要素が存在しない可能性があります。HTML側のidやclass名と、JavaScriptで指定しているID名（document.getElementById("要素名") 等）が一致しているか確認しましょう！
• ❌ ReferenceError: XXX is not defined
  💡 変数や関数 "XXX" が定義されていないか、スペルミスがあります。定義する前に使用していないか、または綴りを確認しましょう！
• ❌ Assignment to constant variable.
  💡 const（再代入不可の定数）で宣言された変数に、新しい値を代入しようとしています。値を後から変更したい場合は、宣言を let に書き換えましょう！

💡 ココが親切（ホスピタリティ設計）： JavaScriptのエラーが発生すると、右下の「Logs（コンソール）」が自動的にスライドして開き、警告マークでお知らせします。 さらに、エラー発生時にはLogsパネルのヘッダーに `🤖 AI質問` ボタンが出ます。押すと、エラー文と現在のHTML/CSS/JSをまとめた質問文をクリップボードへコピーします。AI Paste に流し込んではいけません。コピーした文を、別のAIチャットへ貼ってください。

📋 使い方手順

1. 基本的には、ブラウザの優先言語設定を自動的に判別し、最適な言語（日本語または英語）で初期表示されます。
2. 手動で切り替えるには、右上の `⚙️ Tools` ボタンをクリックしてプレビュー設定パネルを開きます。
3. パネルの最上部にある `🌐 言語 / Language` セレクトボックスから、`日本語 (Japanese)` または `English` を選択します。
4. 選択すると即座に、サイドバー、エディタ、設定パネル、モーダルなど、すべてのUIテキストが指定した言語に切り替わります。

💡 ココが親切（ホスピタリティ設計）： 言語を切り替えると、前述の「エラーお助けアドバイザー」のアドバイス文言も、選択した言語に合わせて動的に（日本語／英語）自動切り替えされます！ また、選択した言語はブラウザ(LocalStorage)に自動で保存されるため、次回ツールを開いた際も設定を引き継いで開発をスムーズに再開できます。

📋 使い方手順 ＆ コメントアノテーションの書き方

JSエディタ内で、以下のようにアノテーションコメントを記述して実行します：

• 数値スライダー: let speed = 5; // @slider(1-20, 0.5)
  (最小値1、最大値20、0.5刻みのスライダーを自動生成します)
• カラーピッカー: let textColor = "#3b82f6"; // @color
  (カラーピッカーを生成し、直感的に色を選択できます)
• ON/OFF スイッチ: let isGlow = true; // @switch
  (ON/OFFを切り替えるトグルスイッチを生成します)

コメント記述後に実行すると、右上に 🎛️ パラメータボタン が出現します。これをクリックして調整ツマミを動かすと、プレビューを再読み込みすることなく、即座に変数の中身が書き換わって画面に反映されます。

💡 ココが親切（ホスピタリティ設計）： エディタのヘッダー右側にある 「🎛️ パラメータ挿入」 セレクトボックスから使いたいツマミを選ぶと、同じ行のコメント形式ならツマミになります。複数行の初期化やオブジェクトはそのままでは対象外です。
さらに、エディタ上の @slider や @color、@switch といったキーワードにマウスカーソルを合わせる（ホバーする）だけで、アノテーションの役割や詳細な書き方を説明する「日本語ポップアップヘルプ」がその場に出現します。

📋 使い方手順

1. プレビュー上の編集したい文字（例: 「送信」ボタンや、「タイトル」文字など）を ダブルクリック します。
2. 選択した要素の周りに 青い点線の枠 が表示され、文字の真上に ミニ操作ツールバー が浮かび上がります。
3. 好きな文字に書き換えるとともに、ツールバーのボタンを操作してデザインを微調整します：
   • `【 B 】` ボタン: 文字の太さを太字(Bold)と通常サイズで切り替えます。
   • `【 A- 】 / 【 A+ 】` ボタン: 文字の大きさを1pxずつポチポチ縮小・拡大します。
4. ツールバーの `【 ✓ 】` ボタン をクリックするか、Enterキー を押すと、編集内容が確定します。（Escapeキー を押すと、文字もサイズも太さもすべて元の状態にキャンセルされます）
5. エディタ側のHTMLコードが対象箇所だけ置換され、既存の style="..." がある場合は必要な部分を統合してプレビューへ反映されます。

💡 ココが親切（ホスピタリティ設計）： この機能は、HTML内に直接記述された「静的なテキスト」を対象とします。JavaScriptでプログラムによって後から動的に表示された文字（スコアや現在の時刻など）は誤爆を防ぐために対象外となります。
また、Monaco Editorの「履歴(Undo)を壊さない行の丸ごと置換処理」を採用しているため、ダイレクト編集をした後でも、エディタ上で Ctrl + Z を押せばすぐに元のコードへロールバックできます。

📋 各種表示機能の使い分け

• 💻 📟 📱 PCでのデバイスシミュレート:
  プレビューヘッダーの左側にあるシミュレーターボタンから、PC、タブレット、スマホのサイズをワンクリックで切り替えられます。美しい外枠（ベゼル）が表示され、実際のスマートフォンの画角でデザインを確認できます。
• ↔️ スマホ用左右端スワイプ切り替え:
  スマートフォンで開発を行う際、エディタとプレビューの両方を一度に画面に出すと窮屈になります。そこで、画面の左右両端15%をスワイプするだけで「エディタ画面 ↔ プレビュー画面」をスムーズに行き来できるジェスチャー機能を実装しました。
• 🖼️ ピクチャー・イン・ピクチャー (PiP) プレビュー:
  スマホでエディタ画面を表示している間、右下に「ミニ窓プレビュー」が自動的に浮かび上がります。コードを打ち込みながら、リアルタイムで変化をその場で把握でき、ミニ窓をタップするだけで瞬時に全画面プレビューへ復帰できます。

💡 ココが親切（ホスピタリティ設計）： スマホの端スワイプの際、エディタの通常のドラッグ操作やスクロールと干渉しないよう、画面中央部のスワイプ操作は無視される仕組みになっています。また、ローディング中は表示を重ね、完了時に色を変えることで処理状態を確認できます。

⌨️ CodeStudio 専用ショートカットキー

操作内容	キー入力
▶ プレビュー実行	Ctrl + Enter
🎨 HTML エディタに切り替え	Alt + 1
👗 CSS エディタに切り替え	Alt + 2
⚡ JS エディタに切り替え	Alt + 3
⛶ エディタ全画面(Zen Mode)トグル	Alt + Z
✨ コード自動整形 (Format)	Alt + Shift + F
💾 コードの手動保存	Ctrl + S
↶ / ↷ 元に戻す / やり直し	Ctrl + Z / Ctrl + Y

⚙️ 使い方手順

1. 右上の `⚙️ Tools` ボタンをクリックして、プレビュー設定パネルを開きます。
2. パネルの中央付近にある `🕰️ 履歴から復元` セクションを確認します。
3. ドロップダウンから、戻したい時点の履歴（保存された時刻とコードの一部が表示されます）を選択します。
4. `復元` ボタンをクリックし、確認ダイアログで「OK」を選択します。
5. エディタのコードが選択した状態に書き換わり、プレビューが自動で再実行されます。

💡 ココが親切（ホスピタリティ設計）： ▶ 実行 ボタンを押した瞬間のコードが、裏で自動的に最大10件までセーブデータ（履歴）として保存されます。手動でこまめに保存する手間を減らし、必要なときは直近10件の履歴からコードを戻せます。大切なコードは、別途バックアップも残してください。