モバイルサイトを手っ取り早くスマフォ対応にする必要がある場合にsparrow.jsを使うとそれっぽく表現することができます。簡単にできるのかと思っていたのですが、ちょっと良く分からない部分がチラホラ。結局、サイトにあるdemoを見ながら設置しました。そんなこんなで、疑問に思ったことを備忘録な感じで残します。
まず、ダウンロードすると複数のjsが入っています。しかし、読み込むjsは2つだけ。
ダウンロード：sparrow.js
なんでだろ？
sparrow.jsが複数のjsを読み込むようになっていました。それを知らず任意の場所にjsファイルを移動すると当然効きません。サイトに合わせる場合や変更したい場合は、sparrow.js内のルートパスを変更する必要があります。
【ファイルの構成】
sp_config.js
sparrow.js
├ jquery-1.6.4.min.js
├ marquee.js
├ smoothScroll.js
├ sp_core.js
├ sparrow.js
├ sparrow.css
└ glyph
├ mpc.js
└ carrier
├ softbank.js（glyph/carrier）
├ docomo.js（glyph/carrier）
└ ezweb.js（glyph/carrier）
【例：ルートを変更する場合】
sp_config.js
↓ ↓ ↓ ↓ ↓ ↓ ↓
// ベースディレクトリ
var baseHost = "http://www.vi-de-bu.com"; var basePath = "/sp";
sparrow.js
↓ ↓ ↓ ↓ ↓ ↓ ↓
// jquery
document.write('<script src="/js/jquery-1.6.1.min.js"></script>');
document.write('<script type="text/javascript" src="' + url + '/js/jquery.li-scroller.1.0.js"></script>');
document.write('<link rel ="stylesheet" href ="' + url + '/css/li-scroller.css" type="text/css" />');
document.write('<script type="text/javascript" src="' + url + '/js/smoothScroll.js"></script>');
document.write('<script type="text/javascript" src="' + url + '/js/mpc.js"></script>');
document.write('<script type="text/javascript" src="' + url + '/js/docomo.js"></script>');
document.write('<script type="text/javascript" src="' + url + '/js/core.js"></script>');
document.write('<link rel ="stylesheet" href ="' + url + '/css/sparrow.css" type="text/css" />');
とすることで、、cssはcssディレクトリ（http://www.vi-de-bu.com/sp/js/javascript関係）、javascriptをjsディレクトリ（http://www.vi-de-bu.com/sp/css/css関係）にまめることができます。
あとは任意の箇所にTIPSに載っているclassを記入していくだけで完成ですが、想像とことなる表示になることもあるので、必ず公開前に確認することをオススメします。
その理由は、TIPSを試したところ、スマフォだけ文字を大きくするclassやスマフォだけ非表示にするclassを入れても効かなかったのと、半角タカナも全角にはならず半角のまま表示されたりとルートパスに翻弄されるとかなり面倒です。
という感じで、確認や設定も手間ですし、これだけのjsを読み込んで、classも追記しないければならない事を考えると、大きなサイトでない場合はスマートフォン用にサイトを作成したほうが今後の事を考えると良さそうです。
関連記事：
