Shopifyのテーマエディタの操作でメイン言語がサブ言語の翻訳で上書きされる:メモ

遭遇したので調査内容をメモとして。
個人的には想定外の動作であり、バックアップ的なデータがない場合は復旧困難になる可能性がある印象です。

前提

Shopifyの有料プラン(ローカルストアフロント機能が使えないプラン)で運用中のストアで発生
2以上のマーケットを設定
2つ以上の言語(メイン言語+サブ言語)を設定
開発ストア(クライアント移行用/dev)で再現できず

開発ストアでの再現

できる限り条件を揃えてみたのですが、開発ストアでは再現できませんでした。
有料プランか否かの違いとして内部的に機能がやや異なるようなので、開発ストアだから再現できない可能性もありますが、正確な確認ができないので理由は不明です。

発生した問題

ライブテーマのテーマエディタのプレビューを使用
プレビュー内の言語スイッチャーでサブ言語に切り替え、「編集に戻る」ボタンを押してブラウザをリロードすると表示中のテンプレートがサブ言語の内容で上書きされる

例えば「メイン言語:日本語/サブ言語:英語」のストアで、テーマエディタとブラウザの操作中にリロードすると、勝手に日本語が英語に書き換えれられてしまいます。
サブ言語用に画像も設定していた場合、サブ言語の画像に置き換わります。

Shopifyのテーマエディタはそれなりの回数触っていますが、この問題が発生したのは今回初めてでした。

原因

Shopifyサポートの回答を元に該当を記載したあと、Sidekick含めて得た回答を記載します。

概要

サブ言語に切り替えた状態で「編集に戻る」ボタンを押す
表示に変化はないが、内部的には「表示中の言語はメイン言語だが、入力値はサブ言語」という状態になる
この状態でリロードすると、サブ言語の入力値で上書きする状態で保存される

大きな問題は「リロードで保存される」という動作です。
保存ボタンを押さずとも保存されてしまうので、「ボタンを押さなければ安全」という操作の前提が崩れます。

後述しますがこの動作は仕様である可能性もあるようで、今後も修正されない可能性があります。

Shopifyサポートの回答

ご説明いただいた内容に基づきますと、最も可能性の高い原因は、テーマエディターにおけるマーケットの上書き設定の状態であると考えられます。
プレビュー画面でサブ言語に切り替えた後、「編集に戻る」をクリックした際に、エディターがその言語・マーケットの状態を保持したままになることがございます。
その状態で自動保存やページの再読み込みを含む保存操作が実行されますと、サブ言語の値がデフォルト言語のコンテンツに上書きされ、代替テンプレートに反映されてしまう場合がございます。

「再読み込み=保存」であるという点は想定外の動作でしたが、発生した状況は「仕様」なのか「改善されるべき問題」なのかという趣旨の質問をしたところ、以下回答を得ました。

現時点では、この問題がどのカテゴリーに該当するかを確認することができかねます。開発ストアでは問題を再現することができず、再現手順が確認されていない状況では、既知の不具合、仕様通りの動作、または修正対象のいずれに分類されるかを判断することができません。
弊社にて対応可能なこととして、この件をHorizonテーマチームへのご意見として送付し、記録に残すことができます。これが既知の問題または新たに発生している問題である場合、チームが調査を行い、適切な分類を判断いたします。

「編集に戻る」ボタン

以前から気にはなっていたので、テーマエディタ内のプレビューで言語を切り替えた際に、左カラムに表示される「編集に戻る」ボタンに関して質問したところ、下記の回答を得ました。

「編集に戻る」ボタンに関する具体的なドキュメントはございませんが、以下にその動作についてご説明申し上げます。

テーマエディターのプレビュー内でリンクをクリックされた場合（例：別のページへの移動）、エディターは現在のテンプレートの編集可能な状態から外れます。左サイドバーに「編集に戻る」ボタンが表示され、クリックすることで編集可能な状態に戻ることができます。

ページの視覚的なレイアウトはクリック前後で同じように見える場合があるため、画面上は変化がないように見えます。違いは内部的なものであり、エディターがサイドバーのコントロールと設定が当該テンプレートに対して有効な編集モードに再び入ります。

これはご報告いただいた問題に関連しております。プレビューがサブ言語に設定されている状態で「編集に戻る」をクリックすると、エディターはそのサブ言語の状態を保持したまま編集コンテキストに再び入ります。これが、再読み込み時に言語コンテキストがコンテンツの表示に影響を与える可能性がある時点となります。

個人的な理解のためにまとめ直すと以下のようになるかなと思います。

メイン言語の状態では、テーマエディタは編集モードである
プレビュー内の言語スイッチャーでサブ言語に切り替えると、プレビューモードに変わる
プレビューモードになると左カラムに「編集に戻る」ボタンが表示され、押すと編集モードに戻る
ただし、編集モードに戻ってもサブ言語のままであり、「編集に戻る」ボタンが表示され続ける(=ボタン押下前後で画面に変化がない)

Sidekickの回答

これはShopifyのテーマエディタとTranslate & Adaptの既知の挙動に関する問題です。原因を説明します。

原因
テーマエディタのプレビューで言語スイッチャーを使ってサブ言語に切り替えると、エディタの編集コンテキスト（locale）がサブ言語に切り替わります。この状態で「編集に戻る」ボタンを押すと、左カラムのフォームはサブ言語のコンテキストのまま表示されます。

この状態でブラウザをリロードすると、以下が起きます：

エディタがサブ言語のコンテキストで再初期化される

フォームに表示されているサブ言語の翻訳値が、メイン言語のフィールドに書き込まれる形で保存・上書きされる

これはShopifyテーマエディタとTranslate & Adaptのlocale切り替え状態がリロード後も保持されることによる意図しない上書きです。

上記の根拠となるドキュメントの提示を求めると以下の回答となりました。

最初の回答は、公式ドキュメントや確認済みの情報源に基づいたものではなく、Shopifyのテーマエディタ・多言語機能・ブラウザの一般的な動作に関する私の学習データから推論した内容でした。

つまりSidekickの回答に基づくと、他にも同様のケースがあり問題として認識されているように読めます。

検索用キーワード

Sidekickが以下のワードでの検索を勧めきましたが、実際に検索しても類似事例を確認することができていません。
状況的に類似事例があるはずなので、見つかる可能性が高いとは思うのですが。

検索キーワードの候補：

Translate Adapt theme editor overwrite default language

language switcher theme editor content overwritten

translate adapt main language overwritten reload

回避方法

サポートからは以下の回避策を提示されました。
ともかく「メイン言語に戻せ」というのが要点になるようです。

再現が確認できず、根本的な原因がプラットフォームの不具合であると確定できていないため、以下の回避策を標準的な手順としてご対応いただくことを推奨いたします。

テーマエディターで保存またはページを移動する前に、必ずメイン言語に戻るようにしてください。

テンプレートを編集する前に、マーケット・言語セレクターをご確認ください。

代替テンプレートを編集する前に、テーマを複製してください。

復旧方法

作業前にテーマを複製してバックアップをとっておき、その内容を参照しつつ手作業でメイン言語の入力値を再入力か、複製テーマに対して作業をやり直す

作業前にテーマを複製していなかった場合は、Googleなどのキャッシュに頼る以外では復旧不可能になると思われます。

結び

経験上、Shopifyサポート側で再現できないと問題とみなされないため、改善が期待できない状況ではありますが、兎にも角にも「リロードで保存」という動作が怖いです。

Shopifyは管理画面の表示が固まることがよくあるのでリロードはそれなりに実行していましたが、意図しない状態での保存が発生する可能性があるということですから、今後はリロードではなくタブを閉じて作業をやり直すしかないかなと考えています。

0人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。