メインコンテンツまでスキップ

コードエディター

WebTwizzのサイトはすべて、実際のコードでできたプロジェクトです。コードエディターでは、ファイルを直接確認したり変更したりできます。

コードの編集、ファイルのバージョン管理、ダウンロードは有料プランで利用できます。Freeプランではファイルツリーを確認できますが、コードは非表示で、読み取り専用です。

コードエディターを開く​

ツールバーのコード切り替えボタン（参照と編集の横にある<>）をクリックします。左側にファイルツリー、右側に開いているファイルが表示されます。もう一度クリックすると、キャンバスに戻ります。

ファイルツリーと開いているファイルが表示されたコードエディター

スマートフォンではコードエディターを利用できません。

プロジェクトの構成​

  • src/app/page.tsxはホームページです。他の各ページには、src/app/内に専用のフォルダがあり、その中にpage.tsxがあります。
  • src/app/layout.tsxは、すべてのページに共通するレイアウトです。
  • src/app/globals.cssには、全体に適用されるスタイルとテーマが入っています。
  • src/components/には、再利用できるコンポーネントが入っています。
  • src/lib/には、補助的な関数が入っています。
  • src/data/には、データファイルが入っています。
  • public/には、画像やフォントなどの静的ファイルが入っています。

ファイルの編集​

ファイルをクリックして開くと、編集できます。入力を止めると、少し後に変更がキャンバスに反映されます。⌘S / Ctrl+Sを押すと保存できます。

  • ⌘Z / Ctrl+Zで、入力やファイルの名前変更、削除などの操作を、行った順序の逆に取り消せます。
  • importを⌘を押しながらクリック（Mac）、またはCtrlを押しながらクリック（Windows）すると、参照先のファイルが開きます。
  • 画像ファイルはプレビューで開きます。

WebTwizzが管理する一部のファイルには、読み取り専用ラベルが表示されます。対象はsrc/app/layout.tsx、next.config、tsconfig.json、PostCSSとESLintの設定ファイル、.gitignore、src/types/cms.tsです。これらを変更する必要がある場合は、AIに依頼してください。

ファイルの管理​

  • ツリー上部のファイルを検索で、名前による絞り込みができます。
  • +ボタンで、新しいファイルや新しいフォルダを追加できます。
  • ファイルやフォルダを右クリックすると、名前を変更、複製、コピー、貼り付け、削除を選べます。フォルダでは、新しいファイルと新しいフォルダも選べます。
  • ツリー内でファイルやフォルダをドラッグすると、移動できます。
  • パソコンからファイルやフォルダをツリーにドラッグすると、アップロードできます。同じ名前がすでにある場合は、置き換え、両方を残す、キャンセルから選びます。
  • ⌘を押しながら行をクリック（Mac）、またはCtrlを押しながら行をクリック（Windows）すると、複数選択できます。その後、右クリックしてまとめて操作できます。

ファイルのバージョン​

ファイルを右クリックし、ファイルのバージョンにカーソルを合わせると、保存されたバージョンが日付ごとに表示されます。最新のバージョンには現在と表示され、公開されたものには公開時のバージョンが表示されます。

バージョンをクリックすると、そのファイルを以前の状態に戻せます。変更されるのはそのファイルだけです。⌘Z / Ctrl+Zで取り消すこともできます。メディアファイルと読み取り専用ファイルは、この方法では復元できません。

プロジェクト全体を以前の状態に戻すには、バージョン履歴を使います。

コードのダウンロード​

ファイルを開いた状態で、エディター上部のダウンロードをクリックします。

  • プロジェクトをダウンロードは、プロジェクト全体をzipファイルとして保存します。自分のパソコンで実行したり、好きな場所でホスティングしたりできます。
  • このファイルをダウンロードは、開いているファイルだけを保存します。

ファイルを開いていないときは、エディター中央のプロジェクトをダウンロードボタンでも、プロジェクトをダウンロードと同じ操作ができます。