Asial Blog

Recruit! Asialで一緒に働きませんか?

iScroll4でネイティブに近いスマホ向けHTMLページを作成する

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
iScroll
JavaScript
スマートフォン
こんにちは。松田です。
スマホ向けにネイティブに近い動作をする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の構造はこんなかんじです。

  1. <div id="wrapper">
  2.   <ul>
  3.     <li>row1</li>
  4.     <li>row2</li>
  5.     <li>row3</li>
  6.     ...
  7.   </ul>
  8. </div>

これで以下のようにスクリプトを実行させます。
  1. var myScroll;
  2. function loaded() {
  3.   myScroll = new iScroll('wrapper');
  4. }
  5. document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
  6. document.addEventListener('DOMContentLoaded', loaded, false);

DOMの読み込み完了後でないとiScrollが実行できないため、DOMContentLoadedイベント発生後にnewされるようになっています。
また、タッチ時に余計な動きを起こさないようにtouchmoveイベント発生時のデフォルトの動作をキャンセルさせています。
これにサンプルのソースのcssをコピペすれば完成です。
ヘッダーがしっかりと固定され、かなりネイティブに近い動きになっています。
ヘッダーの固定は、タッチでの移動距離を計算し、その分だけ元の位置に戻すような処理が入っているようです。なかなか力技ですね。

さらに複雑な処理を指せる場合はiScrollのコンストラクタ第2引数で色々なオプションをつけることができるので、何か特殊な操作をさせたい場合は近い動作をするサンプルのソースを見てみるか、公式ページでオプションを確認してみると良いかもしれません。

スマホ向けのページを作るにはとても便利なので、ぜひ一度試してみてはいかがでしょうか。

コメント

  • Plaza Lofts

    ースコードを見ればわかりますが、基本的な使い方は簡単で、サンプルをコピペすれば簡単に作れてしまいます。
    基本的なhtmlの構造はこんなかんじです。

  • dissertations.superiorpapers.com reviews

    ヘッダーの固定は、タッチでの移動距離を計算し、その分だけ元の位置に戻すような処理が入っているようです。なかなか力技ですね。

  • payday loans

    The second interesting element is to reflect on the state of actual Indigenous-colonizer relations, and the state of Indigenous resistance to the colonizing project.sをコピペすれば完成です。
    ヘッダーがしっかりと固定され、かなりネイティブに近い動きになっています。
    ヘッダーの固定は、タッチでの移動距離を計算し、その分だけ元の位置に戻すような処理が入っているようです。なかなか力技ですね。

  • goldenkudocasino.com

    私はこのサイトを見つけることは非常に幸せだった。私は、この特殊な読み取りのためにあなたに感謝したい。ありがとうございます。

  • prompt essay

    感謝您的閱讀。老實說你覆蓋的主題和廣泛研究的所有領 。
    如果我是寫這個我會做一些不同的事情我自己,但你肯定已經啟發了我進入博客世界。感謝堆為後我真的很感激它。日子過好,並保持博客:)

  • <a href="http://www.icsi.edu/capitalmarketweek/UserProfile/tabid/4706/userId/655992/Default.aspx">conquistar uma garota</a>

    会場は東京ファッションタウンビル、みらいの学びゾーンになります。感謝堆為後我真的很感激它。日子過好,並保持博客:) その分だけ元の位置に戻すような処理

コメントフォーム



captcha_key

アシアルの会社情報

アシアル株式会社はPHP、HTML5、JavaScriptに特化したWebエンジニアリング企業です。ユーザーエクスペリエンス設計から大規模システム構築まで、アシアルメンバーが各々の専門性を通じてインターネットの進化に貢献します。

会社情報詳細

最近の記事