ShopifyでJavascriptを使ったPC・スマホごとの条件分岐について解説したいと思います。
WordPress(ワードプレス)でのウェブサイト構築に慣れていた私にとって、Shopifyに触って感じた違和感の一つ。
それは、デバイスサイズによる条件分岐ができるLiquidがないという点でした。
私と同様に、Wordpressなら「wp_is_mobile」というPHP関数で簡単に条件分岐できるのに・・と思った事ないでしょうか。
今回は、ShopifyでJavascriptを使ったPC・スマホごとの条件分岐について解説したいと思います。
正直、要らないかも
正直、PC・スマホごとの条件分岐は不要かもしれません。
@media screen and (max-width: 〇〇〇px)のような、CSSのメディアクエリを使って表示/非表示、ポジションやサイズ調整をすれば良いので。
とはいえ、CSSでの調整だけでは、どうかスッキリしない場面もあるかもしれないので、参考程度にご一読いただけると幸いです。
活用シーン
こんな時に使えるかも‥という活用シーンをまとめてみました。
画像やメディアサイズの最適化
モバイルでは軽量な画像を表示し、読み込み速度を最適化。PCでは高解像度の画像を表示するなど
広告の出し分け
PCは、より大きな広告バナーや複数の広告を表示。スマホは、コンパクトな広告やインライン広告を表示し、UXを損なわないようにする。
Jsコード
では、Javascriptのコードを見てみましょう。
<div id="device-content">
<!-- ここにスマホ・PCごとのコンテンツを動的に変更 -->
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
function isSmartPhone() {
if (window.matchMedia && window.matchMedia('(max-device-width: 640px)').matches) {
return true;
} else {
return false;
}
}
var deviceContent = document.getElementById('device-content');
if (isSmartPhone()) {
// スマホ向けの処理
deviceContent.innerHTML = '<p>スマホでアクセスしていただきありがとうございます。</p>';
} else {
// PC向けの処理
deviceContent.innerHTML = '<p>PCでアクセスしていただきありがとうございます。</p>';
}
});
</script>このコード入れると、デバイス判定のJavascriptがそれぞれのHTMLを吐き出すという仕組みです。
判定基準は、デバイスの幅が640px以下ならスマホ、それを上回るとPCという判定を行います。
個人的な感想や注意点
正直、この記事を書いている私もCSSのメディアクエリを使用する頻度が多く、JavaScriptによる条件分岐はあまり使っておらず、デバイスによる注意事項の記載や、バナーの画像くらいです。
もし、サンプルのコードを実装したのにうまくいかない場合は、idをdevice-contentではないものにしてみてください。Shopifyで使用されているテーマやアプリで、デバイス判定を行う他のJavaScriptに影響される事もあります。
また、deviceContent.innerHTMLに入れるHTMLコードは改行してはいけないのでご注意ください。
活用シーンは多くないかもしれませんが、何かとヒントになれたらいいなと思います。
