ライブプレビューとは
ライブプレビューは、エディタでの編集内容をブラウザ上でリアルタイムに確認できる機能です。発行されたライブプレビューURLを共有することで、チームメンバーなどと編集内容の確認が行えます。
ライブプレビュー画面では、プレビュー中であることを示す通知が画面右下に表示されます。
ライブプレビューを表示する
注意：カスタムコードで追加した編集内容は、ライブプレビューには反映されません。
画面右上の[ライブプレビュー]
（矢印アイコン）ボタンをクリックします。
ライブプレビューを初めて利用する場合は、[スタート]をクリックします。
ランダムなライブプレビューURLが自動発行されます。
例：
preview.studio.site/live/{ランダムな文字列}/パネル上のURLをクリックして、ライブプレビュー画面を開きます。
ライブプレビューでレスポンシブデザインを確認する
レスポンシブデザインをライブプレビューで確認する際は、ライブプレビューを表示しているブラウザのウィンドウ幅を調整してください。
エディタ上のブレイクポイント設定とライブプレビューの表示は対応していません。
例：タブレット用のレスポンシブデザインを確認したい
OK：PCでライブプレビューを開き、ウィンドウ幅を840px以内にする
OK：タブレット上のブラウザでライブプレビューを開く
NG：エディタのブレイクポイント設定を「タブレット」にした上で、ライブプレビューを開く
ライブプレビューを共有する
ライブプレビューのURLを共有することで、他のメンバーもリアルタイムにサイトを確認できます。
共有方法は、URL共有とQRコードの2種類があります。
URLを共有する
[URLをコピー]をクリックして、ライブプレビューURLをコピーします。チャットツールやメールなどで共有する際に利用できます。
QRコードを活用する
ライブプレビューパネルに表示されているQRコードをモバイル端末で読み込むと、読み込んだ端末のブラウザでライブプレビューが開きます。
スマートフォンやタブレットでの動作確認に利用できます。
ライブプレビューのURLを削除する
使用済みのライブプレビューURLは削除できます。
削除後は、そのURLでのアクセスが無効になるため、削除後に再度プレビューを共有したい場合は、新しいURLを発行してください。
画面右上の[ライブプレビュー]をクリックします。
[ライブプレビューURLを削除]をクリックします。
ライブプレビューでコメントを追加する
共有されたプレビュー上に、コメントとしてデザインの確認やフィードバックを追加できます。
Tips：ライブプレビュー画面左下のコメントバーは、ドラッグで四隅に移動できます。
コメント機能の仕様
コメントを追加できるのは、Studioにアカウント登録済みで、該当のプロジェクトに参加しているユーザーのみです。（招待方法はこちら）
コメントを追加する際は、Studioアカウントへのログインが必要です。
デザインエディタで追加されたコメントも、ライブプレビューに表示されます。
コメントした箇所は、ページ上にピンとして表示されます。
コメント機能の利用環境
コメント機能は、PC・モバイルのどちらでも利用できます。
対応する利用環境は、Studioで作成したWebサイトの閲覧環境 に準じます。
コメント機能を有効化する手順
コメント機能を有効化するためには、ライブプレビュー上での再ログインが必要です。
ライブプレビューを表示します。
プレビュー画面左下の[Login]をクリックします。
該当プロジェクトに参加中のStudioアカウントにログインをします。
ログインが完了すると、プレビュー画面左下バナー上の表示が、コメントアイコンとユーザーアイコンに切り替わります。
コメントを追加する手順
ライブプレビューバナー上のコメントアイコンをクリックし、プレビュー上でコメントを残したい箇所をクリックします。
新規コメント入力フィールドにコメントを入力し、上矢印ボタンをクリックしてコメントを送信します。
コメントを確認する手順
コメントアイコンをクリックすると、追加済みのコメントが一覧で表示されます。デザインエディタで追加されたコメントも同様にリストされます。
コメントをクリックすると、コメントされた箇所に移動してコメントのスレッドが表示されます。
コメントスレッド右上部の[×]をクリックすると、コメントスレッドが閉じます。
コメントを編集する手順
自分が追加したコメントは、ライブプレビュー画面上から内容を編集できます。
コメントアイコンをクリックし、対象のコメントを選択します。
アカウント名横の3点メニューをクリックします。
[編集]をクリックして、コメントを編集します。
コメントを解決済みにする手順
プレビュー上でコメントを解決済みコメントとしてチェックできます。
解決済みコメントはプレビュー上では非表示になりますが、デザインエディタ上で確認できます。
コメントアイコンをクリックし、対象のコメントを選択します。
コメントスレッド右上部のチェックマークをクリックすると、コメントが解決済みとして非表示になります。
コメントを削除する手順
自分が追加したコメントは、ライブプレビュー画面上から削除できます。一度削除したコメントは復元できません。
コメントアイコンをクリックし、対象のコメントを選択します
コメントスレッド右上部の3点メニューをクリックします。
[スレッドを削除]をクリックすると、スレッドごとコメントが削除されます。
Webhook通知を設定する
Webhookを有効にすると、コメント追加時に通知を受け取ることができます。
詳細は、Webhook通知を参照してください。
Editro 5.0 サンプル テスト テスト表示 プレビューページ プレビューボタン livepreview live preview プレビュー 共有 非公開 テストサイト