Canvasを開く
Canvasは、Replit Designで最初に目にするものです。プロジェクト内でヘッダーのDesignを選ぶとペインいっぱいにCanvasが表示され、Buildを選ぶと実行中のアプリに戻ります。
Canvas上にあるもの
- フレーム：ボード上のすべてのタイル。フレームはデザインモックアップ、Webアプリ、モバイルアプリ、スライド、画像、動画、ベクターグラフィックのいずれかです。チャットのプロンプト、ツールバーのGenerateメニュー、ライブラリパネルから生成できます。フレームに対して行うことはすべて — Build、Focus、提案など — フレーム自体を通じて行われます。詳しくはフレームを参照してください。
- 描画とメモ：Drawツールで追加するマークアップで、スケッチ、矢印、図形、付箋などです。Agentはあなたのマークアップを読み取るので、問題の箇所を丸で囲んで変更を依頼できます。
- チャットパネル：Canvasの隣にドッキングされたAgentチャット。メッセージを送る前にフレームを選択すると、スナップショットとして添付されるので、Agentがビジュアルなコンテキストを持てます。
ボードを移動する
パン、ズーム、選択は、特に断りがない限りどのツールからでも行えます。 パン：- トラックパッド：2本指ドラッグ。
- マウス：中クリックドラッグ、またはスペースキーを押しながら左クリックドラッグ。
- Panツール：左マウスボタンでクリックしてドラッグ。
- トラックパッド：ピンチ操作。
- マウス：
Ctrl（macOSではCmd）+ スクロールホイール。 - キーボード：
Cmd/Ctrl++でズームイン、Cmd/Ctrl+-でズームアウト、Cmd/Ctrl+0でズームをリセット。
- 単一フレーム：Interactツールでクリックします。
- 複数選択：
Shiftを押しながら各フレームをクリックするか、ボード上でマーキー（範囲選択）をドラッグします。 - 選択解除：空いている領域をクリックするか、
Escapeを押します。
キーボードショートカット
右クリックメニュー
ボード上の任意の場所を右クリックすると、コンテキストメニューが開きます。このメニューはコンテキストに応じて変化し、カーソルの下にあるものに合わせてアクションが変わります：フレームの上ではフレーム用のアクションが、空のCanvas上ではボードレベルのアクションが表示され、アプリのフレームではRefresh artifactが追加されます。 選択したフレームの上では、メニューに以下が含まれます：
選択したフレーム上の右クリックメニュー。
フレームをPNGとしてエクスポートする
任意のアーティファクトまたはデザインフレームをPNG画像として保存できます。ドキュメントやチャットでプレビューを共有したり、さらに反復する前のスナップショットを取ったり、チームメイトにスクリーンショットを送ったりするのに便利です。1
フレームを選択する
エクスポートするアーティファクトまたはデザインフレームを選択し、読み込みが完了するまで待ちます。
2
Exportを選ぶ
フレームのアクションバーでExportを選びます。フレームを右クリックしてExport as… > PNGを選ぶこともできます。フレームの名前を元にしたファイル名で画像がコンピューターにダウンロードされます。
Cmd+Shift+C（Windows、LinuxではCtrl+Shift+C）を押します。
エクスポートされたPNGは、Canvas上でフレームが現在表示しているものと一致します。アプリやデザインがまだ読み込み中の場合は、エクスポートする前に完全にレンダリングされるまで待ってください。
Canvasと実行中のアプリ
Canvasと実行中のアプリのプレビューは同じペインを共有しており、いくつかのモードが両者を橋渡しします：- フォーカスモード：選択したフレームのFocusアクションで、そのフレームをビュー全体に拡大表示します。ボード上部のExit focusを選ぶとCanvasに戻ります。
- 読み取り専用モード：Canvasがバックグラウンドタスクのコンテキスト内でロックされている場合、反復操作は非表示になり、Focusのみが残ります。
Designフレームから新しいアプリをビルドするにはCoreまたはProプランが必要です。その他のCanvas機能はすべてのプランで利用できます。プランの詳細は請求を参照してください。
- コンポーネント概要：構成要素とその組み合わさり方。
- フレーム：フレームの種類、フレームごとのアクションバー、BuildとFocus。
- 要素：フレーム内の個々のパーツ。
- ツールバー：ツールの全カタログ。
- 提案を探索する：選択したフレームから新しい方向性を派生させ、勝ち残ったものをアプリに適用します。
- DesignとBuildの違い：どちらのサーフェスをいつ使うか。