はじめに
こんにちは、aniumaでインターンをしているryuseiです!👋
現在、Shopifyを使ったECサイトの実装に携わっているのですが、今回はメタタグ実装で遭遇した問題とその解決プロセスをシェアしたいと思います。
「変数は正しいのになぜか表示されない」という謎の現象に悩まされた方、もしかしたら同じ罠にハマっているかもしれません…!
今回のミッション
インターンで任された今回のタスクは以下の2つ:
- 商品ページとメタタグを紐付けるIDタグの実装
- FAQページの作成
特にメタタグ実装では、商品ごとに作成したメタタグを商品ページと紐付けて、画面に表示させることが目標でした。
一見シンプルそうに見えたこのタスク、実は大きな落とし穴が待っていたんです…😱
遭遇した問題:変数が反映されない謎
問題の発覚
実装を進めていると、早速壁にぶつかりました。
メタタグ情報をページに表示させるために、Shopifyテーマに元から実装されていた変数を使用したのですが…
プレビューに何も表示されない。
「変数名は間違ってないはず…」 「構文エラーもない…」 「なんで!?😭」
何度コードを見直しても、変数自体は正しいはずなのに、画面には何も表示されない状況が続きました。
閃いた解決策(のはずだった)
もうダメだ…となっているときに、ふと思いつきました。
💡「そうだ、直書きでファイルに表示させればいいじゃん!」
変数を使わずに、メタタグの内容を直接コードに書き込んでしまえば表示されるはず!
<!-- 変数を使った場合(表示されない) -->
{{ product.metafields.custom.faq_content }}
<!-- 直書きした場合 -->
<div class="faq-section">
<h3>よくある質問</h3>
<p>この商品の使用方法は...</p>
</div>
実行してみると…
案の定、作業中のページで表示を確認できました! ✨
「やった!これで解決…」と思いきや。
新たな壁:Shopifyの仕様による制限
さあ保存しよう、と思った瞬間。
エラー発生。
調べてみると、Shopifyでは直接コードを手書きした状態では本番環境にアップできない仕様となっていることが判明…。
「ええぇぇぇ!!!😱」
またもやゴリ夢中で悩むことに。
突破口:メタタグページの発見
偶然の発見
悩みながら他のページのコードを見ていると、たまたまメタタグが格納されたページに行き着きました。
「まさか…」
そのページを見てみると、衝撃的な事実が判明。
メタタグの管理方法の真実
実は、Shopifyのこのテーマでは:
- メタタグが別々のページとして分類されていた
- 使用するページごとに参照する変数の場所が違った
つまり、商品ページで使おうとしていた変数が、そもそもそのページでは参照できないメタタグの場所を指していたんです!
<!-- 商品ページで使用していた変数(間違い) -->
{{ product.metafields.custom.faq_content }}
<!-- 実際に必要だった変数(正解) -->
{{ metaobject.fields.faq_content }}
解決への道筋
この発見により、新たな可能性が見えてきました。
「実装中のページでも参照するメタタグページを指定できるんじゃないか?」
すぐにページに戻って確認すると…
案の定、指定可能でした! 🎉
適切なメタタグページを指定してプレビューを確認すると、すぐに反映されました。
なんとか納期までに実装完了することができました!
学んだこと
今回の実装を通じて、いくつかの重要な学びがありました。
1. Shopifyのメタフィールド構造の理解
Shopifyでは、メタフィールドの参照方法がコンテキストによって異なるということを学びました。
- 商品ページ:
product.metafields - コレクションページ:
collection.metafields - メタオブジェクト:
metaobject.fields
2. エラーメッセージだけが全てじゃない
変数名が正しくてもエラーが出ない場合、参照先の構造自体が異なる可能性も考慮すべきです。
3. 既存コードの読解の重要性
他のページのコードを見て回ったことで解決の糸口が見つかりました。 既存の実装パターンを調べることの重要性を痛感しました。
4. 直書きは一時的なデバッグツール
直接コードを書き込む方法は、表示確認のデバッグ手法としては有効ですが、本番環境への適用は別問題。 Shopifyの仕様や制約を理解することが大切です。
トラブルシューティングのポイント
同じような問題に遭遇した方のために、チェックポイントをまとめておきます。
✅ 確認すべきこと
- 変数のコンテキストは正しいか
- 現在のページタイプに対応した変数を使用しているか
- メタフィールドの設定は完了しているか
- Shopify管理画面でメタフィールドが正しく設定されているか
- 商品に実際にメタフィールドの値が入力されているか
- テーマの構造を理解しているか
- どのファイルがどのページを制御しているか
- メタフィールドの参照方法がテーマ内で統一されているか
- プレビューと本番の差異
- プレビューで表示されても本番で表示されない場合は別の問題
まとめ
今回のメタタグ実装では、変数の参照先の違いという基本的な部分でつまずいてしまいましたが、最終的には納期内に実装完了することができました。
エラーに直面したときは:
- 問題を分解して考える
- 既存のコードを参考にする
- 一時的な回避策でまず動作確認する
- 根本原因を探る
この流れが大切だと学びました。
次回はFAQページの作成についても記事を書く予定です。お楽しみに!📝
参考リンク
インターン生ならではの試行錯誤の記録でした。 同じような問題で困っている方の助けになれば嬉しいです!
質問やコメントがあれば、お気軽にどうぞ!👇
#Shopify #インターン #実装 #メタフィールド #Liquid #ECサイト #技術ブログ