ライブプレビューとは
ライブプレビューは、エディタでの編集内容をブラウザ上でリアルタイムに確認できる機能です。発行されたライブプレビュー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を削除]をクリックします。
ライブプレビューのコメント機能
共有されたプレビュー上に、コメントとしてデザインの確認やフィードバックを追加できます。
コメント機能の仕様
コメントを追加できるのは、Studioにアカウント登録済みで、該当のプロジェクトに参加しているユーザーのみです。
コメントを追加する際は、Studioアカウントへのログインが必要です。
デザインエディタのコメント機能で追加済みのコメントも、ライブプレビューに表示されます。
ライブプレビューでは、コメントの追加と、追加済みコメントの閲覧のみが可能です。
コメントの削除や編集はライブプレビューではできません。Studioエディタのコメント機能で行ってください。
コメントした箇所は、ページ上にピンとして表示されます。
コメント機能の利用環境
コメント機能は、PC・モバイルのどちらでも利用できます。
対応環境は、Studioで作成したWebサイトの閲覧環境 に準じます。
ライブプレビューからコメントを追加する
ライブプレビューを表示します。
プレビュー画面左下の[Login]をクリックします。
デザインエディターからプレビューを開いた場合でも、コメント機能利用時には再ログインが必須です。
該当プロジェクトに参加中のStudioアカウントにログインをします。
ログインが完了すると、プレビュー画面左下の表示がユーザーアイコンとコメント機能のアイコンに切り替わります。
コメントアイコンをクリックしてから、プレビュー上でコメントを残したい箇所をクリックします。
新規コメント入力フィールドにコメントを入力し、上矢印ボタンをクリックしてコメントを送信します。
ライブプレビュー上でコメントを確認する
ライブプレビューを表示します。
プレビュー画面左下の[Login]をクリックします。
デザインエディターからプレビューを開いた場合でも、コメント機能利用時には再ログインが必須です。
該当プロジェクトに参加中のStudioアカウントにログインをします。
ログインが完了すると、プレビュー画面左下の表示がユーザーアイコンとコメント機能のアイコンに切り替わります。
画面左下のリストアイコンをクリックして、コメントを一覧表示します。
コメント追加時のWebbhook通知
Webhookを有効にすると、コメント追加時に通知を受け取ることができます。
詳細は、Webhook通知を参照してください。
Editro 5.0 サンプル テスト テスト表示 プレビューページ プレビューボタン livepreview live preview プレビュー 共有 非公開 テストサイト