プレビューの使用

Novaのプレビュー機能を使用すると、作業中のファイルのプレビューをレンダリングでき、コードへの変更を保存すると同時にプレビューをライブで自動的にリロードする機能をサポートしています。これらのプレビューを提供するために、Novaには静的なHTMLコンテンツやMarkdownファイルを配信するための内蔵HTTPサーバが含まれていますが、他の種類のコンテンツについては独自の開発サーバをNovaに指定することもできます。

Novaのプレビューは、macOSに含まれるAppleのWebKitエンジンに基づいており、これはSafariで最も一般的に使用されています。また、他のレンダリングエンジンとの互換性をテストするために、外部ブラウザでプレビューを開くことも選択できます。

プレビュータブを開く

書類のプレビューを開くには、エディタのパスバーの右端にあるプレビューアイコンをクリックします。タブを開いてプレビューするか、現在のビューの右または下に分割ビューでプレビューを開くか、ブラウザを指定してプレビューするかを選択するように求められます。

注: ツールバーの 新規タブボタンをクリックしプレビューを選択するか、書式 > プレビューにあるメニュー項目を使用することもできます。

プレビューでファイルを開く方法

ファイルでプレビューを使用すると、Novaはファイルの場所と種類に基づいて、可能な限りリッチなプレビューを提供しようとします。以下の情報は、Nova独自のプレビュータブでプレビューを開く場合と、外部ブラウザでプレビューを開く場合の両方に適用されます。

内蔵ウェブサーバ

デフォルトでは、Novaは内蔵HTTPサーバを使用して、ローカルプロジェクト内のローカルHTMLおよびMarkdownファイルを配信します。内蔵サーバは、HTML、CSS、JavaScriptで構築された静的サイトや、Markdownドキュメントのシンプルなレンダリングビューを表示するのに最適です。内蔵サーバを使用すると、入力中の自動リロードや、リンクされたファイル（CSSやJavaScriptなど）が変更されたときのHTMLページのリロードなど、プレビュータブでの追加の便利な機能もサポートされます。

より詳しい情報:

• 内蔵プレビューサーバの使用

他のサーバの使用

Node.jsなどのサーバサイドフレームワークや、PHPなどのインタプリタ言語を必要とするプロジェクトの場合 プロジェクトメニュー > プロジェクト設定でカスタムサーバURLを設定する必要がある場合があります。この設定により、プロジェクトのプレビューを特定のサーバ（Mac上で実行されているか、別のマシンで実行されているかに関わらず）に指定できます。設定すると、Novaはプロジェクト内のローカルファイルのURLをサーバ上のURLに自動的にマッピングし、そのURLをプレビュータブに使用します。

その他のローカルファイル

プロジェクト外で開かれたローカルファイルの場合、NovaはMac上のfile://パスから直接ファイルを開くだけです。これらの場合、入力中のプレビュータブのリロードなど、内蔵ウェブサーバの使用を必要とする機能は利用できません。

リモートファイル

リモートURLが 設定されたサーバ でホストされているリモートファイルの場合、プレビューはサーバ上のURLから直接ファイルを自動的にロードします。これにより、サーバがユーザや訪問者に提供するのとまったく同じようにファイルをプレビューできます。

リモートURLが設定されていないサーバでホストされているリモートファイルの場合、Novaはファイルをローカルの一時フォルダにダウンロードしてキャッシュし、ファイルのfile:// パスからプレビューを提供します。この方法でプレビューを使用すると、Novaは画像、スタイルシート、スクリプトなどのリンクされたファイルをダウンロードしないため、可能な場合はサーバにリモートURLを設定することを強くお勧めします。

ナビゲーションバー

プレビュータブの上部には、ナビゲーションバーがあります。ナビゲーションバーには 戻る・進む ナビゲーションボタン、プレビュー中のURLを表示するアドレスバー、リロードボタンなど、ほとんどのウェブブラウザに見られる一般的なコントロールが収められています。さらに、プレビューの動作をカスタマイズしたり、プロジェクトを検査したりするためのいくつかのオプションがあります。

フォーカスのロック

ファイルのプレビュータブを開くと、デフォルトではプレビューはそれが開かれたドキュメントにロックされます。つまり、エディタで別のファイルにフォーカスを合わせても、プレビューは元々開かれていたのと同じファイルを表示し続けます。

フォーカスロックアイコンをクリックすることで、ファイルを切り替える際のプレビュータブの動作を変更できます。選択を現在の書類に変更を選択すると、Novaで別のファイルに切り替えるたびに、プレビュータブが自動的に現在フォーカスされているファイルを反映するように変更されます。

アドレスバーを使用して特定のURLに手動で移動すると、Novaは自動的にフォーカスモードを選択をカスタムURLに固定に設定します 。これにより、現在Novaで開いているどのファイルにも直接関連付けられていなくても、プレビュータブが指定したURLに留まるようになります。選択を書類に固定メニューを使用して、既存のプレビュータブを元々作成されたファイルとは別の開いているファイルに関連付けることもできます。

環境オーバーライド

一部のサイト（このサイトなど！）は、ユーザのシステムがライトモードかダークモードかに応じて外観を変更することがあります。これらの場合、 環境オーバーライドメニューを使用すると、自身のシステム設定を変更することなく、プレビューを強制的にライトモードまたはダークモードで表示できます。

リンクされたファイル

Novaの内蔵プレビューサーバでHTMLファイルを開くと、Novaは外部のJavaScriptやCSSファイルなど、関連するリンクされたファイルを自動的に検出します。リンクされたファイルを変更すると、ドキュメント自体を変更したかのように、Novaは自動的にプレビュータブをリロードします。これにより、ページで使用されているスタイルやスクリプトをすばやく変更し、手動でプレビューをリロードすることなく、変更が反映されるのを確認できます。現在のページで検出されたリンクされたファイルのリストを表示するには、 リンクされたファイルボタンをクリックするだけです。

ウェブインスペクタ

プレビュータブは、WebKitエンジンのウェブインスペクタへのフルアクセスも提供します 。これは、現在のページのHTML要素を検査したり、ソースコードを表示したり、JavaScriptをデバッグしたり、サイトのネットワーク使用量を測定・監視したりできる強力なウェブ開発ツールです。ナビゲーションバーの をクリックしてウェブインスペクタを開くことができます

ウェブインスペクタの機能の完全な説明は、この記事の範囲外です。ウェブインスペクタの公式ドキュメントは、WebKit project’s website (webkit.org) で確認できます。

次へ → 内蔵プレビューサーバの使用