カラーミーでrespond.jsが動かない

業務でGMOグループの「カラーミーショップ」の構築を行いました。
既存のテンプレートを使うのではなく、ゼロからレスポンシブ対応のコードを書いて制作しました。一通りコーディングが終わり、さぁ動作確認しようと思い、respond.jsを読み込ませてIE8で動作確認しようとしたのですが、どうやってもレスポンシブにならない。

respond.jsというのはIE6~IE8にもメディアクエリを有効にするためのJavaScriptで書かれたポリフィルのことです。scriptタグで読み込むだけで、CSSファイルに記述されたメディアクエリを有効にさせることができます。

カラーミーショップでも自由にscriptタグを書くことはできるので動作できるはず、と思ったのです無理でした。そこでrespond.jsの動作条件についていろいろ調べてみると、resond.jsにはいろいろと制約があることがわかりました。

respond.js 使い方、動かない時のチェック項目 から引用します。

・HTML内のstyle要素は対象外
・CSSファイル内の@importは無効
・link要素に rel=”stylesheet” を記述すること
・属性セレクタの記述をすると無効になる
・ローカルでは動作しない
・CSSファイルはHTMLと同一のサーバーに置く
・media属性はHTMLかCSSどちらかだけにする
・BOM付きのUTF-8だとダメ

などなど。これまであまり意識してなかったのですが、こんなに条件があるんですね。

さて、このrespond.jsがカラーミーでは動作しないという問題ですが、カラーミーの仕様上、以下の点に問題がありそうです。

・CSSファイルはHTMLと同一のサーバーに置く

カラーミーでは同じページだったら、管理画面の同じページでHTMLとCSSを設定できるのですが、記述したCSSファイルの設置されるサーバーがカラーミーのホームページとは違うサーバーに設置されてしまいます。

CSSファイルは、

http://imgXX.shop-pro.jp/***********************

のようなドメインのサーバーにおかれています。このドメインとショップのあるサーバーのドメインが異なるため、respond.jsが動作しないというのが原因です。

ということで、カラーミーショップでレスポンシブ対応のショップを作る場合には、IE6~IE8をメディアクエリに対応させることはあきらめるしかなさそうですね。やれやれ・・・

==========
ブログの更新情報をTwitterやfacebookで紹介しています。ぜひフォローお願いします!
Twitter → @jugedred
facebook → Jugedred Project

関連記事


この記事をかいた人

ドレッド Webクリエイター、ライター

Web制作やライティングなどインターネットを使って自由に暮らしているドレッドです。このブログではWeb制作やライティングでお役に立ちそうな知識から、ドレッドのプライベートな出来事まで幅広いネタを取り扱っています。ご質問、ご要望、お仕事のご依頼はお問い合わせフォームからどうぞ! 2016年10月から放送大学に入学しました。

カラーミーショップ | Posted on 2015/06/21 12:33

※コメントは管理人の承認後に公開されます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です