Google+ APIを使ってみた（JavaScript編）
- December 29th, 2011
「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();
});
- December 29th, 2011
