しかし Blocs 構築中に最終的なサイトを非常に正確に表現しますが、他のデザイン面をチェックしてテストするためにサイトをすばやくプレビューする必要がある場合があります。 相互作用, FXをスクロール と アニメーション. Blocs より自然で包括的な方法でサイトをテストできるように設計されたさまざまなプレビューオプションが組み込まれています。
のプレビューモード Blocs HTMLをローカルでプレビューできるだけでなく、PHPのプレビューもサポートしています。 ページに ファイルの種類 でPHPに設定 ページ設定、プレビューは、を介して追加されたPHPコードをレンダリングします コードウィジェット リアルタイム。
アプリプレビュー内
アプリ内プレビューでは、単一のワークスペース内で複数の画面サイズでウェブサイトをプレビューできます。プレビューモードに入るには、 左クリック 再生ボタン ⏵ ブレークポイントコントロールの右側にあるか、キーボードショートカットを使用します。 ⌃V.
プレビューツールバー
プレビュー モードでは、プレビュー ツールバーがメイン アプリケーション ウィンドウの上部に表示されます。このツールバーには、Web サイトのテストとプレビューに役立つさまざまな機能が含まれています。
ビューポートを追加
プラスボタン + ツールバーの左端にあるを使用すると、一般的なコンピューター、モニター、タブレット、電話の画面サイズの寸法に基づいて、追加のビューポートをすばやく簡単に追加できます。
ビューポート 関連するデバイスのオペレーティング システムの特性をシミュレートします。デバイスの画面サイズに合わせて拡大縮小されたブラウザー ウィンドウにすぎません。
ビューポートを描く
ボタンの 鉛筆 アイコンが切り替わります 描画モードを使用すると、カスタムサイズのビューポートを手動で描画できます。この機能は、 D キー。
編集モード
ツールバーの左から3番目のボタンは 編集モード編集モードを有効にすると、プレビューキャンバス上でビューポートを移動したり配置したりできるようになります。ビューポートが ロック解除編集モード中にビューの幅と高さのサイズを変更することもできます。この機能は、Shiftキーを押したままにすることでも有効にできます。 ⇧ キー。
ページの選択
ツールバーの中央にあるコントロールを使用すると、すべてのプレビュー ビューポートに読み込まれている現在のページを選択できます。
リロード
ボタンの ↻ アイコンは再読み込みボタンです。このボタンを使用すると、すべてのプレビュー ビューポートを再読み込みできます。
放送コントロール
この Blocs プレビュー サーバーには同じネットワーク上の他のデバイスからアクセスできます。ツールバーの最後から 2 番目のボタンを使用すると、ローカル ネットワーク ブロードキャスト オプションにアクセスできます。
AirDrop プレビュー
このオプションを使用すると、AirDrop を介して同じローカル ネットワーク上の他のデバイスとプレビュー URL をすばやく簡単に共有できます。AirDrop を使用して共有された URL は、受信側デバイスの Web ブラウザーで自動的に開かれ、実際のデバイスでサイトをプレビューしてテストできます。
AirDropオプションが利用できない場合、またはデバイスが利用可能として表示されない場合は、 この専用のトラブルシューティング ガイド 問題の解決に役立つ可能性があります。
プレビュー URL をコピー
コピー プレビュー オプションは、ローカル ネットワーク URL をデバイスのペーストボードにコピーします。同じネットワークに接続されている任意のデバイスの Web ブラウザーにこの URL を入力すると、デバイス上でサイトをプレビューしてテストできます。
停止/終了
停止ボタン ◼ ツールバーの右端にあるシンボルは、プレビュー モードを終了するために使用されます。
ビューポートの名前を変更
各プレビュー ビューポートの左上隅にはラベルがあります。このラベルの内容は、ラベルをクリックしてテキストを変更するだけで編集できます。
ビューポートオプション
プレビューキャンバス上の各ビューポートの右上隅にはメニューボタンがあります ☰このメニューを使用すると、関連するビューポートに固有の機能にアクセスできます。
検査する
このオプションは、関連するビューポートのWebKit開発者インスペクタツールを開きます。インスペクタツールは、サイトのコードを検査し、発生している潜在的な問題をデバッグするのに最適な方法です。 便利なガイド ウェブサイトのエラーを検査するのに役立ちます。
リロード
このオプションは関連するビューポートを再読み込みします。
スクリーンショットを共有する
このオプションを使用すると、関連するビューポートのさまざまなスクリーンショット共有オプションにアクセスできます。 Blocs 現在のビューポートのスクリーンショットを共有する機能があります ローカルストレージ, email, メッセージ 以上 AirDrop.
削除
このオプションは関連するビューポートを削除します。
フォーカスモード
プレビューキャンバス上の任意のビューポートをダブルクリックすると、 フォーカスモードフォーカスモードを有効にすると、他のすべてのビューポートは非表示になり、プレビューキャンバスは選択されたビューポートがウィンドウの空きスペースに収まるように拡大表示されます。フォーカスされたビューをもう一度ダブルクリックするか、 脱出 キーを押すとフォーカス モードが終了し、他のすべてのビューポートが表示されます。
パンキャンバス
Apple Magic Mouseまたはトラックパッドを使用すると、プレビューキャンバスの空きスペースで指を任意の方向にスクロールすることで、メインのプレビューキャンバスをパンすることができます。または、 スペース キーボードの をクリックし、空のキャンバス領域で任意の方向にドラッグします。
キャンバスオプション
また、さまざまなオプションにアクセスすることもできます。 右クリック プレビュー キャンバス上の空きスペースの任意の場所。
すべてのビューポートを再読み込み
このオプションはすべてのビューポートを再読み込みします。
ワークスペースを中央揃え
このオプションは、現在のワークスペースを中央揃えにします。ワークスペースは、デザイン キャンバス上のすべてのビューポートでカバーされる領域です。
ワークスペースにフィット
このオプションは、すべてのビューポートがプレビュー ウィンドウのフレーム内に収まるようにプレビュー キャンバスのズーム レベルを調整します。
プレビューキャッシュをクリア
このオプションは、プレビュー キャンバス上のすべてのビューポートのキャッシュをクリアし、再ロードします。
すべてのビューポートを削除
このオプションを選択すると、プレビュー キャンバス上のすべてのビューポートが削除されます。
ブラウザでプレビュー
アプリ内プレビューだけでなく、 Blocs また、Macにインストールした任意のブラウザでサイトをすばやくプレビューすることもできます。 ブラウザでサイトをプレビューするには、 右クリック プレビューボタンを押して、ポップアップメニューからブラウザを選択します。
ブラウザでのプレビューについて詳しく読むことができます こちら.
プレビューモードで問題が発生した場合、または単に機能しない場合は、これを読むことをお勧めします トラブルシューティングガイド.