モバイルWebブラウザでHTMLとJavaScriptを使って「引っ張って更新（プルダウンリフレッシュ）」を実装する方法

プルダウンリフレッシュとは

スマートフォンのアプリでおなじみの「引っ張って更新（プル・トゥ・リフレッシュ）」機能。画面を指で下に引っ張るとページが再読み込みされ、最新の情報を取得できる便利なUIです。モバイルWebブラウザでも、JavaScript・XMLHttpRequest（XHR）・タッチイベントを組み合わせることで、この機能を実装できます。

プルダウンリフレッシュは、AJAXにおけるXHRリクエストのトリガーとして動作します。ユーザーが画面を引っ張ると新しいデータが取得され、対象の要素へと追加される仕組みです。

主な実装方法

1. iScrollを活用する方法

代表的な実装手法のひとつが、iScrollのようにJavaScriptのネイティブなスクロール機構をハイジャック（制御を奪う）するアプローチです。実際にTwitterも、プルダウンリフレッシュ機能のためにiScrollを採用しています。スクロール挙動を完全にコントロールできるため、滑らかで自然な引き操作を実現できます。

2. overflow:scroll コンポーネントにリフレッシュハンドラを作成する

もうひとつの方法は、CSSの overflow: scroll が適用されたコンポーネントに対して、独自のリフレッシュハンドラを定義するやり方です。ライブラリに依存せず、比較的シンプルに導入できるのが特徴です。

以下のコードは、そのハンドラインターフェースの設計イメージを示したものです。

var PullToRefresh = function(callback, wrapper, instructionsText) {

    // DOM要素を生成し、コンテンツラッパーの直前に挿入する

    // マークアップは以下の構造になる
    // <div class="mainWrapper" style="overflow: scroll; height: 600px;">
    //   <div class="pullToReloadWrapper"></div>
    //   <div class="contentWrapper"></div>
    // </div>

    // メインラッパーの高さがコンテンツラッパーより大きい場合は、
    // メインラッパーの高さをコンテンツラッパーの高さに合わせて調整する

    // メインラッパーをスクロール可能にする

    // initializeEvents() を呼び出して各種イベントを初期化する
};

まとめ

プルダウンリフレッシュは、タッチイベントで引っ張りの操作を検知し、XHRで最新データを取得してDOMに反映させるという流れで実装します。iScrollのようなライブラリを使えば手軽に高品質な操作感を得られますし、overflow: scroll を使った自作ハンドラなら軽量に構築できます。用途やプロジェクトの規模に応じて、最適な方法を選択しましょう。