言語切り替え時のちらつき防止設定
言語を切り替えた際、翻訳が完了する前に元言語のテキストが一瞬表示される「ちらつき」が発生することがあります。
本機能は、翻訳の準備が完了するまでページ全体を非表示にし、翻訳済みの内容が表示可能になったタイミングでページを表示します。
#こんな場合におすすめ
- 言語切り替え時に、元言語のテキストが一瞬見えてしまう
- 初回表示時に翻訳前のコンテンツが見えてしまう
#設定方法
サーバーサイド翻訳機能の利用有無によって、設定手順が異なります。
| サイトの構成 | 必要な作業 |
|---|---|
| サーバーサイド翻訳機能を利用している | 弊社担当者による切り替え作業 |
| サーバーサイド翻訳機能を利用していない | サイトの <head> 先頭にコードを追加する or CSSを追加する |
#サーバーサイド翻訳機能を利用している場合
弊社担当者による切り替え作業が必要ですので、ご利用をご希望の場合、お伝えいただけましたら幸いです。
#サーバーサイド翻訳機能を利用していない場合
以下のいずれかのコードをサイトの <head>** **タグの先頭 に追加してください。
CSS で追加する場合
<style id="al-wait-for-translation-mask">
@keyframes al-wait-for-translation-mask-reveal {
0%, 99.99% { visibility: hidden; }
100% { visibility: visible; }
}
html {
animation: al-wait-for-translation-mask-reveal 3s linear forwards;
}
</style>
JavaScript で追加する場合
<script>
(function () {
var style = document.createElement("style");
style.id = "al-wait-for-translation-mask";
style.textContent =
"@keyframes al-wait-for-translation-mask-reveal{0%,99.99%{visibility:hidden}100%{visibility:visible}}" +
"html{animation:al-wait-for-translation-mask-reveal 3s linear forwards}";
document.head.appendChild(style);
})();
</script>
重要: コードは必ず <head> の先頭に配置してください。<head> の後半に置くと、ページの一部が先に描画されてしまい、ちらつき防止の効果が弱くなります。
#動作の仕組み
- ページ読み込み時、追加した CSS（または サーバーサイド翻訳有効時はサーバーが注入した CSS）により、ページ全体が一時的に非表示になります
- Autolingual SDK が翻訳を適用し、DOM の更新が落ち着いたタイミングでマスクを自動的に解除します
- SDKが読み込まれない場合やエラーが発生した場合でも、最大3秒後にはページが表示されます（安全装置）
#よくある質問
#SSR 利用時と非 SSR 利用時、両方の設定が必要ですか？
いいえ、どちらか一方のみで問題ありません。
- サーバーサイド翻訳利用時 → 弊社担当者による切り替え（コード追加不要）
- サーバーサイド翻訳非利用時 →
<head>先頭にコードを追加する
#ページが表示されるまでどのくらいかかりますか？
翻訳の完了タイミングに依存します。通常は翻訳完了後すぐに表示されます。
SDK が正常に動作しない場合でも、最大 3 秒後にはページが表示されます。
#検索エンジンのクローラーに影響はありますか？
マスクは visibility: hidden を使用しており、DOM 上のコンテンツ自体は存在します。サーバーサイド翻訳配信時は翻訳済み HTML がサーバーから返されるため、SEO への影響は限定的です。
#特定のページだけ無効にできますか？
現時点では、プロジェクト単位（SSR 時）またはサイト全体（コード追加時）での設定となります。ページ単位での ON/OFF はサポートしていません。