ライブプレビュー

ライブプレビューとは

ライブプレビューは、エディタでの編集内容をブラウザ上でリアルタイムに確認できる機能です。発行されたライブプレビューURLを共有することで、チームメンバーなどと編集内容の確認が行えます。

ライブプレビュー画面では、プレビュー中であることを示す通知が画面右下に表示されます。

ライブプレビューを表示する

注意：カスタムコードで追加した編集内容は、ライブプレビューには反映されません。

画面右上の[ライブプレビュー]（矢印アイコン）ボタンをクリックします。
ライブプレビューを初めて利用する場合は、[スタート]をクリックします。
ランダムなライブプレビューURLが自動発行されます。
例：preview.studio.site/live/{ランダムな文字列}/
パネル上のURLをクリックして、ライブプレビュー画面を開きます。

スクリーンショット：デザインエディタで開いたライブプレビューのパネル。QRコード、プレビューURL、[詳細設定]ボタンが表示されている。

ライブプレビューでレスポンシブデザインを確認する

レスポンシブデザインをライブプレビューで確認する際は、ライブプレビューを表示しているブラウザのウィンドウ幅を調整してください。

エディタ上のブレイクポイント設定とライブプレビューの表示は対応していません。

例：タブレット用のレスポンシブデザインを確認したい

OK：PCでライブプレビューを開き、ウィンドウ幅を840px以内にする
OK：タブレット上のブラウザでライブプレビューを開く
NG：エディタのブレイクポイント設定を「タブレット」にした上で、ライブプレビューを開く

ライブプレビューを共有する

ライブプレビューのURLを共有することで、他のメンバーもリアルタイムにサイトを確認できます。

共有方法は、URL共有とQRコードの2種類があります。

URLを共有する

ライブプレビューパネルに表示されているURLの右にあるコピーアイコンをクリックして、ライブプレビューURLをコピーします。チャットツールやメールなどで共有する際に利用できます。

QRコードを活用する

ライブプレビューパネルに表示されているQRコードをモバイル端末で読み込むと、読み込んだ端末のブラウザでライブプレビューが開きます。

スマートフォンやタブレットでの動作確認に利用できます。

ライブプレビューのURLを削除する

作成したライブプレビューURLは削除できます。

削除後は、そのURLでのアクセスが無効になるため、削除後に再度プレビューを共有したい場合は、新しいURLを発行してください。

プレビューリンクを削除できるのは、下記のアカウントです。ワークスペースのゲストと、旧プランのライターのロールアカウントでは、削除操作はできません。

プロジェクトの「支払いオーナー」「オーナー」「編集者」ロールのメンバー
ワークスペースの「オーナー」と「メンバー」ロール

プロジェクトのダッシュボードで[設定]タブの[一般]を開きます。
[ライブプレビュー]の[プレビューの管理]にある[プレビューリンクを削除]をクリックします。
確認画面で[削除]をクリックします。

デザインエディタからは、画面右上の[ライブプレビュー]をクリックし、パネルの[詳細設定]からこの画面を開けます。

ライブプレビューでコメントを追加する

共有されたプレビュー上に、コメントとしてデザインの確認やフィードバックを追加できます。

Tips：ライブプレビュー画面左下のコメントバーは、ドラッグで四隅に移動できます。

コメント機能の仕様

コメントを追加できるのは、Studioにアカウント登録済みで、該当のプロジェクトに参加しているユーザーのみです。（招待方法はこちら）
コメントを追加する際は、Studioアカウントへのログインが必要です。
デザインエディタで追加されたコメントも、ライブプレビューに表示されます。
コメントした箇所は、ページ上にピンとして表示されます。

コメント機能の利用環境

コメント機能は、PC・モバイルのどちらでも利用できます。

対応する利用環境は、Studioで作成したWebサイトの閲覧環境に準じます。

コメント機能を有効化する手順

コメント機能を有効化するためには、ライブプレビュー上での再ログインが必要です。

ライブプレビューを表示します。
プレビュー画面左下の[Login]をクリックします。
該当プロジェクトに参加中のStudioアカウントにログインをします。
ログインが完了すると、プレビュー画面左下バナー上の表示が、コメントアイコンとユーザーアイコンに切り替わります。

コメントを追加する手順

ライブプレビューを表示し、コメント機能を有効化します。
ライブプレビューバナー上のコメントアイコンをクリックし、プレビュー上でコメントを残したい箇所をクリックします。
新規コメント入力フィールドにコメントを入力し、上矢印ボタンをクリックしてコメントを送信します。

コメントを確認する手順

ライブプレビューを表示し、コメント機能を有効化します。
コメントアイコンをクリックすると、追加済みのコメントが一覧で表示されます。デザインエディタで追加されたコメントも同様にリストされます。
コメントをクリックすると、コメントされた箇所に移動してコメントのスレッドが表示されます。
コメントスレッド右上部の[×]をクリックすると、コメントスレッドが閉じます。

コメントを編集する手順

自分が追加したコメントは、ライブプレビュー画面上から内容を編集できます。

ライブプレビューを表示し、コメント機能を有効化します。
コメントアイコンをクリックし、対象のコメントを選択します。
アカウント名横の3点メニューをクリックします。
[編集]をクリックして、コメントを編集します。

スクリーンショット：ライブプレビュー画面。左下にライブプレビューバナーにコメントリストが表示された上で、コメントのスレッド上でコメントの編集を試みている。

コメントを解決済みにする手順

プレビュー上でコメントを解決済みコメントとしてチェックできます。

解決済みコメントはプレビュー上では非表示になりますが、デザインエディタ上で確認できます。

ライブプレビューを表示し、コメント機能を有効化します。
コメントアイコンをクリックし、対象のコメントを選択します。
コメントスレッド右上部のチェックマークをクリックすると、コメントが解決済みとして非表示になります。

スクリーンショット：ライブプレビュー画面。左下にライブプレビューバナーにコメントリストが表示された上で、コメントのスレッド上でコメントを解決済みとしてチェックしようとしている。

コメントを削除する手順

自分が追加したコメントは、ライブプレビュー画面上から削除できます。一度削除したコメントは復元できません。

ライブプレビューを表示し、コメント機能を有効化します。
コメントアイコンをクリックし、対象のコメントを選択します
コメントスレッド右上部の3点メニューをクリックします。
[スレッドを削除]をクリックすると、スレッドごとコメントが削除されます。

スクリーンショット：ライブプレビュー画面。左下にライブプレビューバナーにコメントリストが表示された上で、コメントのスレッド上でコメントの削除を試みている。

Webhook通知を設定する

Webhookを有効にすると、コメント追加時に通知を受け取ることができます。

詳細は、Webhook通知を参照してください。

Editro 5.0 サンプル テスト テスト表示 プレビューページ プレビューボタン livepreview live preview プレビュー 共有 非公開 テストサイト