「Google+ APIを使ってみた」の最終章として、JavaScript編をメモしておく事に。今までのメモは、下記のリンクを参照。

• Google+ APIを使ってみた（下準備編）
• Google+ APIを使ってみた（PHP編）
• Google+ APIを使ってみた（JavaScript編）

今回の「JavaScript編」はSNS系のサイトによくある、下の方までスクロールしたら次の記事を読み込んで表示する処理をメモしておきます。

用意するモノと参考にしたモノ

• JSONデータ（前回書いた記事で作成した配列をJSON形式で出力）
• jQuery
• ボックス内をスクロールすると自動でコンテンツをロードするjQuery - かちびと. net（参考サイト）
• ボックス内をスクロールすると自動でコンテンツをロードするjQueryをちょっと変えてみた | QUOIT Blog（参考サイト）

HTML

HTML5でサポートされた、data属性を利用するコードに修正（2013/07/24）しました。

「data-nextpage」には、Google+ APIから取得できる”nextPageToken”を代入する。

「data-url」には、Google+ APIのデータを取得出来るURLを代入する。前回の記事で加工したデータを利用する。

<div id="googleplus" data-nextpage="" data-url="/ajax/googleplus.php">
    <!-- この中に記事を挿入していく -->
</div>

scrolloader.js

ページの残りが、一定の高さより下回ったら、$.ajax()で次のデータを取得するオブジェクト。

/*
 * スクロールで自動ロードをするオブジェクト
 */
var scrolloader = function (options) {
    var t = this;
    options = options ? options : {};

    t.isloader = false; // ロード判定
    t.iniload = options.iniload ? true : false; // 初期ロードの有無
    t.offset = !isNaN(options.offset) ? options.offset : 300; // ロードを行う基準値
    t.nextpage = '';
    t.url = '';
    t.target = options.target ? options.target : $('#scrolloader'); // データを追加するコンテンツ
    t.window = options.window ? options.window : $(window); // スクロールするコンテンツ
    t.document = options.document ? options.document : $(document); // スクロール内のコンテンツ
    t.customhtml = typeof options.customhtml == 'function' ? options.customhtml : null;

    t.initial();
};
scrolloader.prototype = {
    initial : function () { // 初期設定
        if (!this.target.size()) return false;
        if (this.iniload) this.load(true);
    },
    scroll : function () { // スクロール時の設定
        if (!this.target.size()) return false;
        if (this.offset > this.getRestHeight()) {
            this.load(false);
        }
    },
    load : function (init) { // データ読込
        var t = this;
        if (t.isloader) return false; // ロード判定がTRUEの場合は処理をしない
        var target = t.target;
        t.nextpage = target.data('nextpage');
        t.url = target.data('url');

        // "nextpage"が存在する場合と、"init"がTRUE場合のみ処理をする
        if (t.nextpage || init) {
            t.isloader = true; // ロード判定をTRUEにする
            $.ajax({
                type : 'post',
                dataType : 'json',
                url : t.url,
                data : {nextpage:encodeURIComponent(t.nextpage)},
                timeout : 10000,
                error : function () {
                    console.log('File Load Error.');
                },
                success : function (obj) {
                    var html = t.getHtml(obj.items);
                    if (html) {
                        target.append(html);
                        target.data('nextpage', obj.nextpage); // "nextpage"を更新
                        t.isloader = false; // ロード判定をFALSEにする
                    } else {
                        console.log('Data Error.');
                    }
                }
            });
        }
    },
    getHtml : function (data) { // HTML取得
        if (!data) return false;
        if (this.customhtml) return this.customhtml(data);
        var html = '';
        for (var i = 0; i < data.length; i++) {
            html += '<dl>\
                <dt>' + data[i].title + '</dt>\
                <dd>' + data[i].description + '</dd>\
                </dl>';
        }
        return html;
    },
    getRestHeight : function () { // ページの残りを取得
        var scroll = this.window.scrollTop(); // スクロールした距離
        var winH = this.window.height(); // ウィンドウ（表示領域）の高さ
        var docH = this.document.height(); // ページ（全体）の高さ
        return docH - (winH + scroll);
    }
};

scrolloader.jsを実行する

HTMLの読込完了時に”scrolloader”のオブジェクトを生成する。初期値を設定できるので、変更したい値がある場合は指定する。

スクロールイベント時に”scrolloader”のスクロール関数を実行させる。

/*
 * 読込完了時
 */
var sl = null;
$(function(){
    sl = new scrolloader({
        target : $('#googleplus'),
        iniload : true, // 初期ロード有り
        offset : 100, // 残りが100pxを下回ったら実行する
        customhtml : function (data) { // カスタムHTMLを設定
            var html = '';
            for (var i = 0; i < data.length; i++) {
                html += '<dl>\
                    <dt>' + data[i].item_title + '</dt>\
                    <dd>' + data[i].item_content + '</dd>\
                    </dl>';
            }
            return html;
        }
    });
});

/*
 * スクロール時
 */
$(window).scroll(function(){
    sl.scroll();
});