カラーミーネットショップのデザインでviewportを設定する方法

どうも、久しぶりの更新です。個人的などうでもいい日常ネタについてはfacebookページにて書いていくことにしたので、こちらの方の更新が止まってしまっていました。というわけで4月分の投稿数を稼ぐためにちょっとしたエントリーを書きます。

業務でGMOグループが運営している「カラーミーショップ」のネットショップの構築をしているのですが、作成したお店をスマホで表示させるときのテクニックを紹介します。

カラーミーショップは簡単なデザインの変更は可能なのですが、制約が多く、特にheadタグの中身についてはカスタマイズすることができなくなっています。となると、スマホに対応させるためのviewportの設定もできないんですよね。どうしようかなー、なんて思っていたのですが、テンプレートのカスタマイズでbodyタグ内の編集は可能なので、headタグ内にviewportの設定するmetaタグをJavaScriptを使って動的に追加することにしました。

コードはこんな感じです。

$(function() {
     var viewport = document.createElement('meta');
     viewport.setAttribute('name', 'viewport');
     viewport.setAttribute('content', 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no');
     document.getElementsByTagName('head')[0].appendChild(viewport);
});

このJavaScriptのコードをbodyタグのどこかにscriptタグを使って書けばOKです。

カラーミーショップではもともとjQueryのライブラリは組み込まれているので、上記のようなコードで動的にviewportを設定したmetaタグを追加することが可能です。

カラーミーショップで配布されているスマホ対応をうたっている公式テンプレートも同じような方法でviewportを設定していますね。なにわともあれ、これでネットショップをスマホ対応させることができました。