キャンバス

キャンバスには、操作できる下書きがリアルタイムで表示されます。実際のページと同じように、クリック、入力、スクロールができます。キャンバスの上のバーに、このページで説明するツールがあります。

プレビューとコード

• ［プレビュー］では、動作する画面が表示されます。
• ［コード］では、キャンバス上のバージョンのReactコードが表示されます。読み取り専用です。［コードをコピー］を選択するとコピーできます。

デスクトップ、タブレット、スマートフォンの幅

3つのデバイスボタンを使うと、下書きを全幅、768ピクセル（タブレット）、390ピクセル（スマートフォン）で確認できます。これらのボタンは、キャンバスに十分な幅がある場合に表示されます。

スマートフォンの次にある［すべてのサイズ］ボタンを使うと、スマートフォン、タブレット、デスクトップの幅で下書きを並べて表示します。それぞれ実際に動くページを、収まるように縮小して表示します。ライトとダーク、プレビュー言語は3つすべてに適用されるため、ある言語をすべての幅で一度に確認できます。選択、測定、注釈を使うときは、1つの幅に戻してください。

間隔を測る

［間隔を測る］（定規のアイコン）を選ぶと、デザインツールと同じように間隔を確認できます。機能をオンにしなくても、キャンバスの上で Alt（Macでは Option）キーを押し続けると測定できます。

• 要素にポインターを合わせると、上下左右の4方向に赤い定規が、ピクセル単位の距離とともに表示されます。それぞれの定規は、その方向に並ぶ最も近い要素まで伸び、間に何もなければその要素を囲むコンテナーの端まで伸びます。要素の幅と高さも表示されます。
• 要素をクリックするとその要素から測定し、別の要素にポインターを合わせると2つの間の間隔が表示されます。コンテナーにポインターを合わせると、4方向の内側の余白がすべて表示されます。
• タッチスクリーンでは、要素をタップしてから別の要素をタップします。
• Esc キーを押すとクリックした要素が解除され、もう一度押すと測定が終了します。

距離は下書きのCSSピクセルで、枠線も含みます。そのため、キャンバスのサイズによって変わることはありません。測定中のクリックでは、ボタンが押されたりリンクが開いたりしません。

再読み込み

下書き内をクリックして操作した後、［再読み込み］を使うと最初の画面に戻ります。下書きを操作するまでは無効になっています。

バージョン

セッション内のすべての下書きはバージョンとして保持されます。バージョンが2つ以上あると、バーに 2/2 のようなカウンターと、元に戻す・やり直しのボタンが表示されます。

• ［元に戻す］で前のバージョン、［やり直し］で次のバージョンを表示します。入力欄で入力中でなければ、⌘+Zと⌘+Shift+Z（WindowsではCtrl）も使えます。ワークスペースを再読み込みせずにバージョンが切り替わります。
• 次のリクエストでは、キャンバスに表示されているバージョンが修正されます。前のバージョンに戻って、別の方向に進めることもできます。
• 保存したプロトタイプには、最新のバージョンが最大20件まで保持されます。

バージョンを比較する

［バージョンを比較］を選択すると、2つのバージョンがスライダーを挟んで並べて表示されます。両側は連動してスクロールします。

• ［変更前］と［変更後］の一覧で、任意の2つのバージョンを選びます。
• 区切り線をドラッグするか、区切り線にフォーカスして矢印キーを使います（Shiftを押しながらで大きく移動、HomeとEndで端に移動）。
• ［変更前に戻す］を選択すると、変更前のバージョンがキャンバスに表示され、次のリクエストではそのバージョンが修正されます。
• 終了するには、［完了］を選択するかEscを押します。

ライトとダークのプレビュー

下書きでカラーテーマを使っている場合は、［ダークモード］ボタンが表示され、両方のモードを確認できます。変わるのは下書きの表示だけで、Vibr自体の表示は変わりません。

別の言語でプレビュー

［プレビュー言語］ボタン（翻訳のアイコン）を使うと、下書きを別の言語で表示できます。実際に翻訳する前に、デザインがその言語でも崩れないかを確認できます。右から左に読むアラビア語やヘブライ語を含む、40以上の言語から選べます。下書きのテキスト、プレースホルダー、ラベルが切り替わり、ページの言語と方向もそれに合わせて設定されます。コードは変更されず、構築を続けている間も言語の設定は維持されます。

• 翻訳はモデルが行います。 Vibrは、下書きに表示されているテキストを、ご自身のキーを使って選択したモデルに数十件ずつ送信します。カウントの増加など新しく表示されたテキストも、その都度翻訳されます。各テキストの翻訳はセッションごとに1回です。
• 右から左。 新しい下書きでは、marginInlineStartのような自動で反転する論理プロパティが使われます。アラビア語またはヘブライ語を選択している間は、デザインレビューでleftやrightを使っているスタイルや反転しない矢印もチェックされ、下書きが表示される前に修復で修正されます。言語を切り替える前に作成された下書きには、代わりに通知と［右から左用に修正］ボタンが表示されます。
• ［疑似］はモデルを使いません。 すべての文字にアクセント記号を付け、ドイツ語やフィンランド語でよくあるようにテキストを約40%長くするため、切れてしまうラベルや固定幅の問題がすぐにわかります。
• サンプルにはキーが不要です。 サンプルはVibrのすべての言語で用意されているので、アラビア語やヘブライ語を含むそれらの言語でのプレビューはキーなしで使えます。それ以外の言語や、サンプルに追加したテキストはあなたのモデルが翻訳します。
• その言語でエクスポート。 言語を選択していると、［エクスポート］メニューに［（言語名）のアプリ（.html）］が追加されます。エクスポートしたページはその言語と方向で開き、ほかのタブやダイアログなど、下書き内のその他のテキストも翻訳されます。ほかの形式のエクスポートでは、下書きの元のテキストが使われます。
• フォント。 インポートしたフォントにその言語の文字がない場合は、不足している文字の例と、その文字を含む似た Google Fonts が通知に表示されます。［… を使う］を選ぶと、そのフォントがタイプランプの代替フォントとして追加され、キャンバスとエクスポートしたアプリで読み込まれます。
• 元に戻すには、［下書きの元のテキスト］を選択します。

キャンバス内のリンク

リンクをクリックしてもキャンバスから移動しないため、下書きが失われることはありません。代わりに、Vibrがリンク先を表示します。エクスポートしたアプリではリンク先に移動します。保存済みの別の画面を開くボタンは、［再生］で動作します。フローをご覧ください。

スマートフォンでの表示

小さな画面では、Vibrは［チャット］と［プレビュー］をタブとして表示します。［プレビュー］にドットが付いている場合は、まだ見ていない新しい下書きがあります。キャンバスの上に収まらないツールは、［アクション］メニューに移動します。 キャンバスの上のツールが収まりきらない場合は、横にスワイプしてください。