Q.対象サイトの動的なページを編集する方法はありますか?
#A.
#はい、可能です。
ライブプレビューでは、実際のサイトを操作しながら編集できるため、ボタンをクリックして表示されるモーダルや、スクロールで読み込まれるコンテンツも、 画面に表示させた状態で編集できます。
#基本的な手順
ライブプレビューは、実際のサイトを操作できる状態で表示されます。
- 管理画面からライブプレビューを起動します
- 編集したいコンテンツが画面に表示されるまで、通常どおりサイトを操作します(ボタンをクリック、タブを切り替える、スクロールするなど)
- 表示されたテキストを選択して編集します
表示されているテキストであれば、後から動的に追加されたものでも編集の対象になります。
#編集できるコンテンツの例
- ボタンをクリックして開くモーダル・ポップアップ
- タブやアコーディオンの切り替えで表示される内容
- 「もっと見る」や無限スクロールで追加読み込みされる内容
- 入力フォームのエラーメッセージ
- 画面遷移せずに切り替わるページ(SPA)の各画面
#編集が難しいケースと対処法
一瞬しか表示されないコンテンツ
トースト通知や自動で切り替わるスライダーなど、表示時間が短い要素は、編集操作の途中で消えてしまう場合があります。
このようなケースでは、翻訳テキスト管理画面からの編集をご検討ください。 翻訳テキスト管理画面では、翻訳対象のテキストを一覧から検索して編集できるため、画面に表示させる必要がありません。
特定の条件でしか表示されないコンテンツ
ログイン後にのみ表示される画面や、特定の操作を完了した後にしか表示されない画面(購入完了画面など)は、ライブプレビュー上で同じ状態を再現していただく必要があります。
再現が難しい場合は、一度実際のサイトでその画面を表示していただければ、そのテキストが翻訳対象として登録されます。その後、翻訳テキスト管理画面から検索して編集いただけます。
#補足:翻訳テキスト管理画面との使い分け
| ご状況 | おすすめ |
|---|---|
| 表示を確認しながら修正したい | ライブプレビュー |
| 一瞬しか表示されない要素を修正したい | 翻訳テキスト管理画面 |
| 複数の翻訳をまとめて確認・修正したい | 翻訳テキスト管理画面 |
| レイアウト崩れもあわせて確認したい | ライブプレビュー |
【プロジェクト画面】2-3-2.ライブモード(ライブプレビュー/ライブ編集機能)