iScroll4でネイティブに近いスマホ向けHTMLページを作成する
こんにちは。松田です。
スマホ向けにネイティブに近い動作をするHTMLページを作成しようとした時、必ずぶつかるのがヘッダーの動作の扱いです。
特にiOS向けに処理を書く場合、iOS5では実装されているposition:fixed;がiOS4では動作しないた め、iOS4でCSSのみでヘッダーを固定することが難しくなっています。
そんな時につかえるのがiScroll4です。iScrollではJavaScriptの動作によりヘッダーの固定を行う処理が行われます。
http://cubiq.org/iscroll-4
上記のサイトからDOWNLOADボタンを押すとtar.gz形式のファイルがダウンロードされます。
examplesディレクトリにたくさんサンプルが入っているので見てみると良いかもしれません。
特に使えそうなのが、lite、pull-to-refresh、carousel、あたりです。
liteは最も簡略化した使い方のサンプル、pull-to-refreshは表示したリストが上限まで達した際に次のリストを動的に読みこませるサンプル、carouselはページ単位で横スクロールを実装できるサンプルになっています。
lite
pull-to-refresh
carousel
liteのソースコードを見ればわかりますが、基本的な使い方は簡単で、サンプルをコピペすれば簡単に作れてしまいます。
基本的なhtmlの構造はこんなかんじです。
<div id="wrapper">
<ul>
<li>row1</li>
<li>row2</li>
<li>row3</li>
...
</ul>
</div>
これで以下のようにスクリプトを実行させます。
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
DOMの読み込み完了後でないとiScrollが実行 できないため、DOMContentLoadedイベント発生後にnewされるようになっています。
また、タッチ時に余計な動きを起こさないようにtouchmoveイベント発生時のデフォルトの動作をキャンセルさせています。
これにサンプルのソースのcssをコピペすれば完成です。
ヘッダーがしっかりと固定され、かなりネイティブに近い動きになっています。
ヘッダーの固定は、タッチでの移動距離を計算し、その分だけ元の位置に戻すような処理が入っているようです。なかなか力技ですね。
さらに複雑な処理を指せる場合はiScrollのコンストラクタ第2引数で色々なオプションをつけることができるので、何か特殊な操作をさせたい場合は近い動作をするサンプルのソースを見てみるか、公式ページでオプションを確認してみると良いかもしれません。
スマホ向けのページを作るにはとても便利なので、ぜひ一度試してみてはいかがでしょうか。
