WebDesign Dackel

jqueryでレスポンシブサイトへ対応。PCとスマートフォンでCSSを切り替えるプラグインjquery.switchview.jsを作った

jqueryでレスポンシブサイトへ対応。PCとスマートフォンでCSSを切り替えるプラグインjquery.switchview.jsを作った

Hatena0
Google+0
Pocket0
Feedly0

最近、PCサイトをそのままワンソースでスマホ対応させる、いわゆるレスポンシブサイトに携わる事が多く、サーバーサイドは使えない、、Mediaqueryも禁止、なのでJSでCSSを動的に切り替えるという手法で構築していて、そのためのJSがなんとなくまとまってきたので勉強と、これからの案件のためにプラグイン化しましたので公開しようと思います。
一応簡単なプラグインページを作ったので、DEMO、ダウンロード、使い方は以下からどうぞ。

SwitchView DEMO: http://webdesign-dackel.com/dev/switchview/

使い方はDEMOのページにかいてあるのですが、簡単にご紹介。
CSSは以下の様な構成を想定します。

css /
  reset.css
  common.css
  style.css

  sp /
    reset.css
    common.css
    style.css

HTMLは、まずjqueryを読み込んでswitchview.jsを読み込みます。
その後に$.switchViewの中に読み込むCSSを配列で指定します。他のプラグインは特に必要ありません。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.switchview.js"></script>
<script type="text/javascript">
$.switchView([
  "css/reset.css",
  "css/common.css",
  "css/style.css"
]);
</script>

これで、PCとスマホのCSSを切り替えることが出来ます。(スマホの場合はspディレクトリ内のファイルを読み込む)

こんな時にお使い下さい

冒頭にも書いたようなことなのですが、以下の様な場合に便利かなと思います。

  • CSS Mediaqueryが使えない
  • サーバーサイド(phpなど)が使えない
  • PCとスマホのCSSを別ファイルで管理したい

プラグインがやっていること

最初にJSでCSSを切り替えていた時は、PC用の<link>を書いておいて、スマホ表示に時にパスを動的に切り替える、という方法で行っていました。
しかし、上記の方法ではスマホ表示にした時に読み込み終わるまでの間、PC版のデザインが少し見えてしまっていました。これが毎ページ表示されるのでうざくてしかたありません。
そこで、JSでDOMを追加する方法に切り替えてからこのプラグインを作りました。DOMの生成、追加など極力ネイティブなJSで行うことでPC、スマホ表示共に表示速度の向上を行っています。
また、ページをまたいで表示状態を維持するのにはCookieを使っています。
これも有名なjquery.cookieでは無く、プラグイン内でCookieを管理することで単体で使えるようにしました。使うプラグインの数を少しでも減らしたい場合には便利かなと思います。
現在、やや閲覧デバイスの判定が甘いかな〜と思っています。ので、次期バージョンではその点の改良をと思っています。とりあえず公開、ということで。

駆け足になってしまいましたが、様々なデバイスがありMediaqueryだけでの対応は難しいと思っていた方におすすめ?ですので、是非使ってみて下さい。

SwitchView DEMO: http://webdesign-dackel.com/dev/switchview/