プレビューモード

しかし Blocs 構築中に最終的なサイトを非常に正確に表現しますが、他のデザイン面をチェックしてテストするためにサイトをすばやくプレビューする必要がある場合があります。 相互作用, FXをスクロール と アニメーション. Blocs より自然で包括的な方法でサイトをテストできるように設計されたさまざまなプレビューオプションが組み込まれています。

アプリプレビュー内

アプリ内プレビューでは、単一のワークスペース内で複数の画面サイズでウェブサイトをプレビューできます。プレビューモードに入るには、 左クリック 再生ボタン ⏵ ブレークポイントコントロールの右側にあるか、キーボードショートカットを使用します。 ⌃V.

プレビューツールバー

プレビュー モードでは、プレビュー ツールバーがメイン アプリケーション ウィンドウの上部に表示されます。このツールバーには、Web サイトのテストとプレビューに役立つさまざまな機能が含まれています。

ビューポートを追加

プラスボタン + ツールバーの左端にあるを使用すると、一般的なコンピューター、モニター、タブレット、電話の画面サイズの寸法に基づいて、追加のビューポートをすばやく簡単に追加できます。

ビューポートを描く

ボタンの 鉛筆 アイコンが切り替わります 描画モードを使用すると、カスタムサイズのビューポートを手動で描画できます。この機能は、 D キー。

編集モード

ツールバーの左から3番目のボタンは 編集モード編集モードを有効にすると、プレビューキャンバス上でビューポートを移動したり配置したりできるようになります。ビューポートが ロック解除編集モード中にビューの幅と高さのサイズを変更することもできます。この機能は、Shiftキーを押したままにすることでも有効にできます。 ⇧ キー。

ページの選択

ツールバーの中央にあるコントロールを使用すると、すべてのプレビュー ビューポートに読み込まれている現在のページを選択できます。

リロード

ボタンの ↻ アイコンは再読み込みボタンです。このボタンを使用すると、すべてのプレビュー ビューポートを再読み込みできます。

放送コントロール

この Blocs プレビュー サーバーには同じネットワーク上の他のデバイスからアクセスできます。ツールバーの最後から 2 番目のボタンを使用すると、ローカル ネットワーク ブロードキャスト オプションにアクセスできます。

AirDrop プレビュー

このオプションを使用すると、AirDrop を介して同じローカル ネットワーク上の他のデバイスとプレビュー URL をすばやく簡単に共有できます。AirDrop を使用して共有された URL は、受信側デバイスの Web ブラウザーで自動的に開かれ、実際のデバイスでサイトをプレビューしてテストできます。

プレビュー URL をコピー

コピー プレビュー オプションは、ローカル ネットワーク URL をデバイスのペーストボードにコピーします。同じネットワークに接続されている任意のデバイスの Web ブラウザーにこの URL を入力すると、デバイス上でサイトをプレビューしてテストできます。

停止/終了

停止ボタン ◼ ツールバーの右端にあるシンボルは、プレビュー モードを終了するために使用されます。

ビューポートの名前を変更

各プレビュー ビューポートの左上隅にはラベルがあります。このラベルの内容は、ラベルをクリックしてテキストを変更するだけで編集できます。

ビューポートオプション

プレビューキャンバス上の各ビューポートの右上隅にはメニューボタンがあります ☰このメニューを使用すると、関連するビューポートに固有の機能にアクセスできます。

検査する

このオプションは、関連するビューポートのWebKit開発者インスペクタツールを開きます。インスペクタツールは、サイトのコードを検査し、発生している潜在的な問題をデバッグするのに最適な方法です。 便利なガイド ウェブサイトのエラーを検査するのに役立ちます。

フォーカスを切り替える

このオプションはフォーカスモードを切り替えます。フォーカスモードの詳細については、こちらをご覧ください。 下のセクションで.

リロード

このオプションは関連するビューポートを再読み込みします。

スクリーンショットを共有する

このオプションを使用すると、関連するビューポートのさまざまなスクリーンショット共有オプションにアクセスできます。 Blocs 現在のビューポートのスクリーンショットを共有する機能があります ローカルストレージ, email, メッセージ 以上 AirDrop.

削除

このオプションは関連するビューポートを削除します。

フォーカスモード

プレビューキャンバス上の任意のビューポートをダブルクリックすると、 フォーカスモードフォーカスモードを有効にすると、他のすべてのビューポートは非​​表示になり、プレビューキャンバスは選択されたビューポートがウィンドウの空きスペースに収まるように拡大表示されます。フォーカスされたビューをもう一度ダブルクリックするか、 脱出 キーを押すとフォーカス モードが終了し、他のすべてのビューポートが表示されます。

一時的なサイズ変更

ビューポートがフォーカスモードのときは、一時的な幅のサイズ変更コントロールが 右側 ビューポートの幅。フォーカス モードが終了すると、ビューポートは元の幅の値に戻ります。

事前に定義されたブレークポイントの幅に素早く切り替えることもできます。 右クリック サイズ変更コントロールをクリックし、コンテキスト メニューから使用可能なオプションの 1 つを選択します。

ブレークポイントコントロール

ビューポートがフォーカスモードの場合、ブレークポイントコントロールは ビューポートの下部これらのコントロールを使用すると、フォーカスされたビューポートの現在のブレークポイントの幅を一時的に変更できます。

次のキーボード ショートカットを使用して特定のブレークポイントに切り替えることもできます。

• LGブレークポイント – ⌘1
• MDブレークポイント – ⌘2
• SMブレークポイント – ⌘3
• XSブレークポイント – ⌘4

パンキャンバス

Apple Magic Mouseまたはトラックパッドを使用すると、プレビューキャンバスの空きスペースで指を任意の方向にスクロールすることで、メインのプレビューキャンバスをパンすることができます。または、 スペース キーボードの をクリックし、空のキャンバス領域で任意の方向にドラッグします。

キャンバスオプション

また、さまざまなオプションにアクセスすることもできます。 右クリック プレビュー キャンバス上の空きスペースの任意の場所。

すべてのビューポートを再読み込み

このオプションはすべてのビューポートを再読み込みします。

ワークスペースを中央揃え

このオプションは、現在のワークスペースを中央揃えにします。ワークスペースは、デザイン キャンバス上のすべてのビューポートでカバーされる領域です。

ワークスペースにフィット

このオプションは、すべてのビューポートがプレビュー ウィンドウのフレーム内に収まるようにプレビュー キャンバスのズーム レベルを調整します。

プレビューキャッシュをクリア

このオプションは、プレビュー キャンバス上のすべてのビューポートのキャッシュをクリアし、再ロードします。

すべてのビューポートを削除

このオプションを選択すると、プレビュー キャンバス上のすべてのビューポートが削除されます。

ブラウザでプレビュー

アプリ内プレビューだけでなく、 Blocs また、Macにインストールした任意のブラウザでサイトをすばやくプレビューすることもできます。 ブラウザでサイトをプレビューするには、 右クリック プレビューボタンを押して、ポップアップメニューからブラウザを選択します。

ブラウザでのプレビューについて詳しく読むことができます こちら.

時間と日付のシミュレーション

あなたのウェブサイトが カスタムインタラクション 依存しているのは 時間 or dateプレビューモードの 時間と日付のシミュレーション 機能を使用してテストできます。これにより、特定の時間または日付で Web サイトをプレビューし、インタラクションの動作を確認できます。

日付と時刻のシミュレーション機能にアクセスするには、 クロック 下部のアイコン 左の角 メインプレビューキャンバスの。