以前に「jQueryで「もっと見る」ボタンで画像を順々に読み込むUIの実験」と題して
「もっと見る」ボタンで画像を次々と読み込ますUIを紹介しましたが
そこで紹介したスクリプトでは連番で構成している画像要素のみの追加だったので
jQueryでページ最下部までスクロールした際に外部HTML(JSON形式)化した要素を追加する方法
こちらと同様の構成でJSON形式で外部HTML化したコンテンツ要素を
「もっと見る」ボタンで追加するUIを試しに作ってみたので紹介してみます。

jQueryで外部HTML(JSON形式)化した要素を「もっと見る」ボタンで追加する方法

サンプルを別枠で表示する

ページの最下部にある「もっと見る」をクリックすると
追加で要素を読み込みます。

サンプルでは28個の要素を
5個ずつ追加表示しています。

全体構成についてまずはHTMLから。

◆HTML
<div id="loadarea"></div><!--/#loadarea-->

HTMLには要素を追加させたい箇所に
任意のID(もしくはクラス)を付けた
ブロック要素を配置するだけです。

そしてCSSは以下の様になります。

◆CSS
/* #loadarea
--------------------------- */
#loadarea {
	margin: 0 auto 10px auto;
	width: 500px;
	text-align: left;
}
#loadarea .loadItem {
	padding: 10px 0;
	width: 500px;
	line-height: 160%;
	border-bottom: #666 1px dotted;
}
#loadarea #item1 {
	border-top: #666 1px dotted;
}
#loadarea .loadItem img {
	margin: 0 15px 0 0;
	width: 200px;
	height: 200px;
	float: left;
}

/* #nowLoading
--------------------------- */
#nowLoading {
	padding: 5px 0;
	width: 100%;
	text-align: center;
}

/* #btnMore
--------------------------- */
#btnMore {
	padding: 10px 0;
	width: 100%;
	text-align: center;
	border: #000 1px solid;
	cursor: pointer;
}

/* =======================================
	ClearFixElements
======================================= */
#loadarea .loadItem:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}
#loadarea .loadItem {
	display: inline-block;
	overflow: hidden;
}

基本的にはCSSは動作に影響しないもので
サンプル画面のレイアウトを形成しているものになっています。

そして実際の動作スクリプトは以下の様になります。

◆SCRIPT
$(function(){
	var setArea = $('#loadarea'),
	loadNum = 5, // 読み込む個数
	loadTxt = 'Now Loading...', // Loading中の表示テキスト
	btnTxt = 'もっと見る', // ボタンテキスト
	fadeSpeed = 500; // フェードスピード

	setArea.after('<div id="btnMore">' + btnTxt + '</div>');
	var setMore = setArea.next('#btnMore');

	setMore.click(function(){
		$.ajax({
			url: 'js/include.json',
			dataType: 'json',
			success : function(data){
				var dataLengh = data.length,
				loadItemLength = setArea.find('.loadItem').length,
				setAdj = (dataLengh)-(loadItemLength),
				setBeg = (dataLengh)-(setAdj);
				if(!(dataLengh == loadItemLength)){
					setArea.append('<div id="nowLoading">' + loadTxt + '</div>');
					if(loadItemLength == 0){
						if(dataLengh <= loadNum){
							for (var i=0; i<dataLengh; i++) {
								$('<div id="item' + data[i].itemNum + '" class="loadItem">' + data[i].itemSource + '</div>').appendTo(setArea).css({opacity:'0'}).animate({opacity:'1'},fadeSpeed);
							}
							setMore.remove();
						} else {
							for (var i=0; i<loadNum; i++) {
								$('<div id="item' + data[i].itemNum + '" class="loadItem">' + data[i].itemSource + '</div>').appendTo(setArea).css({opacity:'0'}).animate({opacity:'1'},fadeSpeed);
							}
						}
					} else if(loadItemLength > 0 && loadItemLength < dataLengh){
						if(loadNum < setAdj){
							for (var i=0; i<loadNum; i++) {
								v = i+setBeg;
								$('<div id="item' + data[v].itemNum + '" class="loadItem">' + data[v].itemSource + '</div>').appendTo(setArea).css({opacity:'0'}).animate({opacity:'1'},fadeSpeed);
							}
						} else if(loadNum >= setAdj){
							for (var i=0; i<setAdj; i++) {
								v = i+setBeg;
								$('<div id="item' + data[v].itemNum + '" class="loadItem">' + data[v].itemSource + '</div>').appendTo(setArea).css({opacity:'0'}).animate({opacity:'1'},fadeSpeed);
							}
							setMore.remove();
						}
					} else if(loadItemLength == dataLengh){
						return false;
					}
				} else {
					return false;
				}
			}, //success
			complete : function(){
				$('#nowLoading').each(function(){
					$(this).remove();
				});
				return false;
			} //complete
		});
		return false;
	});
});

今回のサンプルではJSONファイルとの兼ね合いから
外部JSファイル構成になっていますので
ここには記述していませんが
別途jQueryファイルは必要になります。

スクリプト開始部分にある設定値の内容は以下の様になっています。

var setArea = $(‘#loadarea’) 要素を追加表示させるブロック要素名(クラスでも可)
loadNum = 5 一度に読み込む個数
loadTxt = ‘Now Loading…’ ローディング中の表示テキスト
btnTxt = ‘もっと見る’ ボタンに表示するテキスト
fadeSpeed = 500 要素を追加する際のフェードスピード

これらの設定値を変更することでもろもろ調整が可能になっています。

追加される要素は一つひとつが
<div>で囲われるようになっており
個々にID名が付与されるようになっています。
※実行後のHTMLソースをFirebug等の開発ツールで見てもらえると分かるかと思います。
(ID名に関してはJSONファイルに記述)

スクリプト14行目の「url: ‘js/include.json’」が
読み込むJSONファイルの指定になるので
パスやファイル名を変える際にはここを変更します。

そして読み込むJSONファイルは以下の様になっています。
(ちょっとムダに長いです・・・)

◆JSON
[
	{
		"itemNum": "1",
		"itemSource": "<img src='img/photo1.jpg' alt='' />【photo1】<br>これは追加要素1つ目のダミーテキストです。これは追加要素1つ目のダミーテキストです。これは追加要素1つ目のダミーテキストです。これは追加要素1つ目のダミーテキストです。これは追加要素1つ目のダミーテキストです。これは追加要素1つ目のダミーテキストです。これは追加要素1つ目のダミーテキストです。"
	},
	{
		"itemNum": "2",
		"itemSource": "<img src='img/photo2.jpg' alt='' />【photo2】<br>これは追加要素2つ目のダミーテキストです。これは追加要素2つ目のダミーテキストです。これは追加要素2つ目のダミーテキストです。これは追加要素2つ目のダミーテキストです。これは追加要素2つ目のダミーテキストです。これは追加要素2つ目のダミーテキストです。これは追加要素2つ目のダミーテキストです。これは追加要素2つ目のダミーテキストです。これは追加要素2つ目のダミーテキストです。これは追加要素2つ目のダミーテキストです。"
	},
	{
		"itemNum": "3",
		"itemSource": "<img src='img/photo3.jpg' alt='' />【photo3】<br>これは追加要素3つ目のダミーテキストです。これは追加要素3つ目のダミーテキストです。これは追加要素3つ目のダミーテキストです。これは追加要素3つ目のダミーテキストです。"
	},
	{
		"itemNum": "4",
		"itemSource": "<img src='img/photo4.jpg' alt='' />【photo4】<br>これは追加要素4つ目のダミーテキストです。これは追加要素4つ目のダミーテキストです。これは追加要素4つ目のダミーテキストです。これは追加要素4つ目のダミーテキストです。これは追加要素4つ目のダミーテキストです。これは追加要素4つ目のダミーテキストです。これは追加要素4つ目のダミーテキストです。これは追加要素4つ目のダミーテキストです。"
	},
	{
		"itemNum": "5",
		"itemSource": "<img src='img/photo5.jpg' alt='' />【photo5】<br>これは追加要素5つ目のダミーテキストです。これは追加要素5つ目のダミーテキストです。これは追加要素5つ目のダミーテキストです。これは追加要素5つ目のダミーテキストです。これは追加要素5つ目のダミーテキストです。"
	},
	{
		"itemNum": "6",
		"itemSource": "<img src='img/photo6.jpg' alt='' />【photo6】<br>これは追加要素6つ目のダミーテキストです。"
	},
	{
		"itemNum": "7",
		"itemSource": "<img src='img/photo7.jpg' alt='' />【photo7】<br>これは追加要素7つ目のダミーテキストです。これは追加要素7つ目のダミーテキストです。これは追加要素7つ目のダミーテキストです。これは追加要素7つ目のダミーテキストです。これは追加要素7つ目のダミーテキストです。これは追加要素7つ目のダミーテキストです。これは追加要素7つ目のダミーテキストです。これは追加要素7つ目のダミーテキストです。これは追加要素7つ目のダミーテキストです。これは追加要素7つ目のダミーテキストです。"
	},
	{
		"itemNum": "8",
		"itemSource": "<img src='img/photo8.jpg' alt='' />【photo8】<br>これは追加要素8つ目のダミーテキストです。これは追加要素8つ目のダミーテキストです。これは追加要素8つ目のダミーテキストです。これは追加要素8つ目のダミーテキストです。これは追加要素8つ目のダミーテキストです。"
	},
	{
		"itemNum": "9",
		"itemSource": "<img src='img/photo9.jpg' alt='' />【photo9】<br>これは追加要素9つ目のダミーテキストです。これは追加要素9つ目のダミーテキストです。これは追加要素9つ目のダミーテキストです。"
	},
	{
		"itemNum": "10",
		"itemSource": "<img src='img/photo10.jpg' alt='' />【photo10】<br>これは追加要素10つ目のダミーテキストです。これは追加要素10つ目のダミーテキストです。これは追加要素10つ目のダミーテキストです。これは追加要素10つ目のダミーテキストです。これは追加要素10つ目のダミーテキストです。これは追加要素10つ目のダミーテキストです。これは追加要素10つ目のダミーテキストです。これは追加要素10つ目のダミーテキストです。"
	},
	{
		"itemNum": "11",
		"itemSource": "<img src='img/photo11.jpg' alt='' />【photo11】<br>これは追加要素11つ目のダミーテキストです。これは追加要素11つ目のダミーテキストです。これは追加要素11つ目のダミーテキストです。これは追加要素11つ目のダミーテキストです。"
	},
	{
		"itemNum": "12",
		"itemSource": "<img src='img/photo12.jpg' alt='' />【photo12】<br>これは追加要素12つ目のダミーテキストです。これは追加要素12つ目のダミーテキストです。これは追加要素12つ目のダミーテキストです。これは追加要素12つ目のダミーテキストです。これは追加要素12つ目のダミーテキストです。これは追加要素12つ目のダミーテキストです。これは追加要素12つ目のダミーテキストです。"
	},
	{
		"itemNum": "13",
		"itemSource": "<img src='img/photo13.jpg' alt='' />【photo13】<br>これは追加要素13つ目のダミーテキストです。"
	},
	{
		"itemNum": "14",
		"itemSource": "<img src='img/photo14.jpg' alt='' />【photo14】<br>これは追加要素14つ目のダミーテキストです。これは追加要素14つ目のダミーテキストです。これは追加要素14つ目のダミーテキストです。これは追加要素14つ目のダミーテキストです。これは追加要素14つ目のダミーテキストです。これは追加要素14つ目のダミーテキストです。これは追加要素14つ目のダミーテキストです。これは追加要素14つ目のダミーテキストです。これは追加要素14つ目のダミーテキストです。これは追加要素14つ目のダミーテキストです。"
	},
	{
		"itemNum": "15",
		"itemSource": "<img src='img/photo15.jpg' alt='' />【photo15】<br>これは追加要素15つ目のダミーテキストです。これは追加要素15つ目のダミーテキストです。これは追加要素15つ目のダミーテキストです。これは追加要素15つ目のダミーテキストです。これは追加要素15つ目のダミーテキストです。これは追加要素15つ目のダミーテキストです。これは追加要素15つ目のダミーテキストです。これは追加要素15つ目のダミーテキストです。"
	},
	{
		"itemNum": "16",
		"itemSource": "<img src='img/photo16.jpg' alt='' />【photo16】<br>これは追加要素16つ目のダミーテキストです。これは追加要素16つ目のダミーテキストです。これは追加要素16つ目のダミーテキストです。これは追加要素16つ目のダミーテキストです。"
	},
	{
		"itemNum": "17",
		"itemSource": "<img src='img/photo17.jpg' alt='' />【photo17】<br>これは追加要素17つ目のダミーテキストです。これは追加要素17つ目のダミーテキストです。"
	},
	{
		"itemNum": "18",
		"itemSource": "<img src='img/photo18.jpg' alt='' />【photo18】<br>これは追加要素18つ目のダミーテキストです。これは追加要素18つ目のダミーテキストです。これは追加要素18つ目のダミーテキストです。これは追加要素18つ目のダミーテキストです。これは追加要素18つ目のダミーテキストです。これは追加要素18つ目のダミーテキストです。これは追加要素18つ目のダミーテキストです。"
	},
	{
		"itemNum": "19",
		"itemSource": "<img src='img/photo19.jpg' alt='' />【photo19】<br>これは追加要素19つ目のダミーテキストです。これは追加要素19つ目のダミーテキストです。これは追加要素19つ目のダミーテキストです。これは追加要素19つ目のダミーテキストです。これは追加要素19つ目のダミーテキストです。これは追加要素19つ目のダミーテキストです。これは追加要素19つ目のダミーテキストです。これは追加要素19つ目のダミーテキストです。これは追加要素19つ目のダミーテキストです。"
	},
	{
		"itemNum": "20",
		"itemSource": "<img src='img/photo20.jpg' alt='' />【photo20】<br>これは追加要素20つ目のダミーテキストです。これは追加要素20つ目のダミーテキストです。これは追加要素20つ目のダミーテキストです。"
	},
	{
		"itemNum": "21",
		"itemSource": "<img src='img/photo21.jpg' alt='' />【photo21】<br>これは追加要素21つ目のダミーテキストです。これは追加要素21つ目のダミーテキストです。これは追加要素21つ目のダミーテキストです。これは追加要素21つ目のダミーテキストです。これは追加要素21つ目のダミーテキストです。これは追加要素21つ目のダミーテキストです。"
	},
	{
		"itemNum": "22",
		"itemSource": "<img src='img/photo22.jpg' alt='' />【photo22】<br>これは追加要素22つ目のダミーテキストです。これは追加要素22つ目のダミーテキストです。これは追加要素22つ目のダミーテキストです。これは追加要素22つ目のダミーテキストです。これは追加要素22つ目のダミーテキストです。これは追加要素22つ目のダミーテキストです。これは追加要素22つ目のダミーテキストです。これは追加要素22つ目のダミーテキストです。これは追加要素22つ目のダミーテキストです。"
	},
	{
		"itemNum": "23",
		"itemSource": "<img src='img/photo23.jpg' alt='' />【photo23】<br>これは追加要素23つ目のダミーテキストです。"
	},
	{
		"itemNum": "24",
		"itemSource": "<img src='img/photo24.jpg' alt='' />【photo24】<br>これは追加要素24つ目のダミーテキストです。これは追加要素24つ目のダミーテキストです。これは追加要素24つ目のダミーテキストです。これは追加要素24つ目のダミーテキストです。これは追加要素24つ目のダミーテキストです。これは追加要素24つ目のダミーテキストです。これは追加要素24つ目のダミーテキストです。これは追加要素24つ目のダミーテキストです。これは追加要素24つ目のダミーテキストです。"
	},
	{
		"itemNum": "25",
		"itemSource": "<img src='img/photo25.jpg' alt='' />【photo25】<br>これは追加要素25つ目のダミーテキストです。これは追加要素25つ目のダミーテキストです。これは追加要素25つ目のダミーテキストです。これは追加要素25つ目のダミーテキストです。"
	},
	{
		"itemNum": "26",
		"itemSource": "<img src='img/photo26.jpg' alt='' />【photo26】<br>これは追加要素26つ目のダミーテキストです。これは追加要素26つ目のダミーテキストです。これは追加要素26つ目のダミーテキストです。これは追加要素26つ目のダミーテキストです。これは追加要素26つ目のダミーテキストです。これは追加要素26つ目のダミーテキストです。これは追加要素26つ目のダミーテキストです。これは追加要素26つ目のダミーテキストです。これは追加要素26つ目のダミーテキストです。"
	},
	{
		"itemNum": "27",
		"itemSource": "<img src='img/photo27.jpg' alt='' />【photo27】<br>これは追加要素27つ目のダミーテキストです。これは追加要素27つ目のダミーテキストです。これは追加要素27つ目のダミーテキストです。これは追加要素27つ目のダミーテキストです。これは追加要素27つ目のダミーテキストです。"
	},
	{
		"itemNum": "28",
		"itemSource": "<img src='img/photo28.jpg' alt='' />【photo28】<br>これは追加要素28つ目のダミーテキストです。これは追加要素28つ目のダミーテキストです。これは追加要素28つ目のダミーテキストです。これは追加要素28つ目のダミーテキストです。これは追加要素28つ目のダミーテキストです。これは追加要素28つ目のダミーテキストです。これは追加要素28つ目のダミーテキストです。これは追加要素28つ目のダミーテキストです。これは追加要素28つ目のダミーテキストです。"
	}
]

サンプルで表示させている
追加要素28個分のHTMLソースになります。

「itemNum」と「itemSource」が1セットになっており
「itemNum」は追加させる要素のナンバリング、
「itemSource」は実際に追加させるHTMLソース部分になっています。

「itemNum」で追加させるナンバーは
生成されるソースの<div>にID名として入ることになるので
要素の連番を入れておきます。
(同じ数値を入れても動作自体には影響しませんが。。)

「itemSource」で記述するHTMLソースはJSONファイルの構成上、
属性はシングルクォーテーション「’’」で記述する必要がありますが
この部分に読み込む要素に対して、個別にHTMLソースを記述させることが出来る様になっています。

一つひとつのセットは { ~ } で囲われており
セットの間は「,」カンマで区切られていますが
最後のセットだけはカンマが付かない構成になります。

ページ内で表示する要素が多くなってしまう場合は
この様にソースを外部化してボタンクリックで読み込むようにすることで
ページロード時の負荷を軽くすることも可能になるかと思います。

JSON形式で外部HTML化した要素を「もっと見る」ボタンで追加表示させる際にぜひ。。。

サンプルファイルをダウンロードしたい方はこちらから

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (22)

  • soooo | 2014.04.25 11:17

    はじめまして。
    いつも素敵なエントリーを参考にさせていただいております。
    ありがとうございます。

    今回、json形式のデータをもっと読むで表示させたいとおもい、
    こちらのエントリーにたどり着き、参考にさせていただきましたが、1点質問です。

    「一度に読み込む個数」の設定を『3』としたいが、
    jsonにはitemが1つもしくは2つしかない場合、もっと見るで表示させた後、「もっと見る」が消えません。

    上記の場合でも「もっと見る」を消す方法はございますでしょうか?

    よろしくお願いいたします。

  • BlackFlag | 2014.04.25 20:10

    >sooooさん
    コメントありがとうございます。
    この「もっと見る」スクリプトをご活用いただいている様で
    嬉しく思っております。

    ご指摘いただきました件について
    確かにそのようなパターンも有りましたね。。

    スクリプトを改修し
    サンプルファイル及び記事内のスクリプトを更新しましたので
    再度ご確認いただければと思っております。

    変更箇所については
    記事内のスクリプト24~33行目になります。

    また何かお気づきの点が御座いましたら
    ご連絡くださいませ。

    よろしくお願いします。

  • soooo | 2014.05.09 10:38

    >BlackFlagさん

    ご返信が遅くなりもうしわけありません。
    ありがとうございます!うまく動作いたしました。

    もう2点お聞きしたいことがございまして。。

    (1)更新した際のキャッシュを残さないために、
    moreClickJson.jsの16行目にcache: false,と追記してみました。
    問題はありませんでしょうか?

    (2)1ページに2つ以上の「もっと見る」を設置することは可能でしょうか。

    お忙しい中、恐縮ですが、
    お時間のある時にでもご確認いただければとお思います。

    よろしくお願いいたします。

  • BlackFlag | 2014.05.13 1:04

    >sooooさん
    無事に動作した様で安心致しました。

    ご質問いただいた2点につきましては
    (1)はajaxに追記することに関しては特に問題ないと思います。

    (2)に関しては当記事のスクリプトは
    基本的にはページ内に1つ想定で構成してあります。
    ページ内に複数設置タイプは現在実業務で必要に駆られ作成しておりますので
    サンプルが出来次第またこちらでも紹介させていただこうかと思っております。

    以上になりますが
    よろしくお願いします。

  • soooo | 2014.05.14 19:08

    >BlackFlagさん

    お忙しい中ありがとうございました。
    (2)について、ありがとうございます、楽しみにお待ちしております。

  • 葉月 | 2014.09.08 15:18

    いつも参考にさせて頂いております。

    今私はテーブルで作ったもっと見るを作りたくてコチラを参考にしようと思うのですが、最初に横3列を表示し、もっと見る画像を押すと残りのテーブルを表示させたいのですがどう組めばよいでしょうか。
    あと、表示した分を閉じることで3列に戻したりもできますでしょうか?

    説明下手で申し訳ないのですが教えて頂けると嬉しいです。

    ここで質問することではなかった場合は申し訳ありません…
    宜しくお願い致します。

  • BlackFlag | 2014.09.14 12:34

    >葉月さん
    コメントありがとうございます。
    この「もっと見る」スクリプトをご検討いただいている様で
    嬉しく思っております。

    テーブルでの「もっと見る」も実装は可能ですが
    「もっと見る」ボタンクリック後の生成ソースの調整と
    JSONファイル側の値の持ち方も調整が必要になります。

    表示/非表示の機能もカスタマイズすることで
    実装は可能だと思いますが現状ではそのような仕様は組み込んでおりません。

    またその様な仕様でのスクリプトが出来ましたら
    ここで紹介させていただきます。

    よろしくお願いします。

  • アシベ | 2014.11.30 11:59

    jQueryで外部HTML(JSON形式)化した要素を「もっと見る」ボタンで追加する方法「複数設置対応パターン」 で質問させていただきましたが、こちらのシングルのパターンのほうがサイトにあっていたのでDLさせていただきました。
    上記のタイトルで回答していただいた通りに該当箇所と変数を1か所追加して実行してみましたが動かなく困り果ててしまいました。
    ※通常のJSON読み込みではいくので同じようにやってみたのですが・・・(なぜ

    DLスクリプトに以下の要素を追加してやってみたのですが(繰り返し部分は下記のstr~に変更,JSONファイルも以下に修正)

    スクリプト
    var str = ”

    str += ‘<li class=”‘ + data[i].category + ‘”>’;
    str += ‘<date class=”test”> ‘+ data[i].day +’</date>';
    str += '<p><a href="' + data[i].link + '">' + data[i].title + '</a></p>';
    str += '</li>';

    setArea.appendTo(str);

    JSONファイル
    [
    {
    "day" : "2014.01.01",
    "category":"test",
    "title": "お知らせ",
    "link" : "test.html"
    },

    {
    "day" : "2014.01.02",
    "category":"test",
    "title": "お知らせ1",
    "link" : "test1.html"
    },
    以下略
    ]

    私の力ではさすがに実現するのは無理そうです・・・
    失礼を承知の上で申し上げますが、可能でしたらサンプルをお願いできないでしょうか?

  • BlackFlag | 2014.12.08 0:12

    >アシベさん
    コメントありがとうございます。
    当記事の「もっと見る」スクリプトをお試しいただいている様で
    嬉しく思っております。

    ご質問いただいた件についてですが
    実際の全体構成を見てみないと何とも言えないのですが
    記述いただいた部分を確認させていただく限りでは
    「var str」の変数の部分が怪しくも見えるので
    ひとまず切り分けずに「str」一つの中に
    すべての生成タグの記述を入れてみてはいかがでしょうか。
    (変数の閉じカッコにもご確認ください)

    ご実装されようとしている全体像も明確に分からないので
    サンプルをこちらで用意するのは厳しいか感じております。

    以上になりますが、
    よろしくお願いします。

  • アシベ | 2014.12.16 20:54

    >BlackFlag様

    お忙しい中ありがとうございます。
    ご指摘していただいた箇所を修正し、元のコードを参考にもう一度試行錯誤しながら行ったところ、なんとか生成されましたうれしい限りです。
    今後の作品も楽しみにしています。がんばってください

  • takabeee | 2015.01.16 17:31

    はじめまして。

    現在instagram APIを使って画像一覧ページを作成しており、
    色々サンプルを探しているなかこのページにたどり着きました。
    まさに思い描いていたとおりの挙動です。

    私はデザイナーなので、プログラムの知識があまりありません。
    2点質問がありコメントさせていただきました。

    【1.jsonファイルの読み込みについて】
    instagram APIではアクセストークンを使ってデータを取得するするのですが、
    以下のサイトを参考にして、一度phpを介してjsで処理しています。
    BlackFlagさんのスクリプトにも適用できるのでしょうか?

    参考:Javascript(jQuery)で利用する方法
    http://syncer.jp/instagram-api-matome#content-12-2

    【2.jsonファイルからの出力について】
    BlackFlagさんのスクリプトを基に色々試しているのですが、
    instagram APIのJSONファイルが思いのほか複雑で、
    htmlに出力する部分が実現できずにおります。
    instagram APIのサンプルJSONデータが以下となります。

    参考:Instagram API メディアリストJSONデータ
    http://syncer.jp/instagram-api-matome#content-4-9

    どのプロパティでも結構ですので、ひとつ設定例をあげていただけないでしょうか?
    大変恐縮なのですが、ご返信いただけますと幸いです。
    何卒よろしくお願いいたします。

  • BlackFlag | 2015.01.17 11:24

    >takabeeeさん
    コメントありがとうございます。
    当記事の「もっと見る」スクリプトをお試しいただいている様で
    嬉しく思っております。

    instagram APIを使っての表示に関しても
    JSON形式で扱えるようなので当記事のスクリプトと併せて実装することも
    可能かと思っております。
    (phpファイルへのパスを当スクリプトの14行目に記述していただく形になるかと思います。)

    instagramから返ってくるJSONデータは
    いろいろと入れ子になっているようですが
    例えば画像のURLをとってくる場合は
    「data.images.url」の値でJS側で呼ぶことで取得できるのではないでしょうか。

    【参考】Ajaxでネスト(入れ子)のJSONデータを解析する方法 | ジャイアントモリンキーのjavaテック
    http://javatechnology.net/ajax/jquery-json-nest/

    少々憶測での回答になってしまい申し訳ありませんが
    お試しください。

    よろしくお願いします。

  • takabeee | 2015.01.19 16:53

    >BlackFlag様

    ご多用のところ、ご返信ありがとうございます。
    アドバイスいただきました内容で、読み込みはうまくいきました。

    ただ、一部挙動がおかしく、「もっと見る」を押すと
    一回目は loadNum で設定した件数が表示されるのですが、
    それ以降「もっと見る」を押しても反応しません。
    js側の取得が間違っているのでしょうか。。。

    >例えば画像のURLをとってくる場合は
    >「data.images.url」の値でJS側で呼ぶことで取得できるのではないでしょうか。

    →名前をとってくるのは以下のような値で記述しています。
    data.data[i].user.username(1つめと2つめの条件文の中)
    data.data[v].user.username(3つめと4つめの条件文の中)

  • takabeee | 2015.01.20 9:23

    >BlackFlag様

    すみません;;先の質問ですが解決いたしました。
    取得にばかり気をとられ、長さの設定?を行っておりませんでした。
    以下のように修正したところうまく動作いたしました。
    jsonが入れ子になっていたため、修正が必要なようでした。

    var dataLengh = data.length,
      ↓
    var dataLengh = data.data.length,

    お騒がせいたしました;
    おかげさまで希望通りのコンテンツがつくれそうです。
    ありがとうございました。

  • takabeee | 2015.01.22 13:08

    ほんとに何度もすみません・・・;

    実装自体はおかげさまでうまくいきました。
    ありがとうございます。

    最初の10件だけ表示しておき、
    残りの件数を「もっと読む」で読み込むことは可能でしょうか?

    もしくは、最初の10件を読み込まず、
    11件目以降からを「もっと読む」で読み込むことは可能でしょうか?

    何度もお手数をおかけしてしまい恐縮ですが、
    何卒よろしくお願いいたします。

  • BlackFlag | 2015.01.23 1:41

    >takabeeeさん
    理想の動作に近づいているようでよかったです。

    最初に10件表示する動作についてですが
    「もっと見る」ボタンクリックごとに10件表示する、
    という構成でよろしいでしょうか。

    その場合は、読み込み個数を「10」にしておいて
    ページロード時にスクリプト側からボタンを1度クリックさせることで
    実現可能かと思っております。

    スクリプト62行目「});」を「}).click();」と
    変更するだけになります。

    参考までにサンプルページも用意しましたので
    下記からご確認ください。
    http://black-flag.net/devel/jQueryMoreClickJson/jQueryMoreClickJsonLoadShow/

    よろしくお願いします。

  • takabeee | 2015.01.23 16:00

    早速のご対応&サンプルまでご用意していただきありがとうございました
    いただいた内容でうまく動作いたしました!
    ページロードの発想が全くなく丸二日さまよいました泣
    おかげさまで完成させることができました

    本当に色々とご対応いただき感謝いたします
    今後もご活躍応援しております

  • tki_t | 2015.09.08 16:11

    BlackFlag様

    はじめまして
    JSにはあまり詳しくなく申し訳ないのですが、こういう動きを作りたい!と思い探していたところコチラにたどり着きました。

    こちらの もっと読むスクリプト とリストをレスポンシブに表示するmasonry(http://masonry.desandro.com/)を組み合わせて作成してみて
    とても理想の動きに近いものが作れそうで嬉しく思っていたのですが

    「もっと見る」を押してjsonファイルから追加されたリストの表示位置が、下に追加されず、
    もともと表示されていたリストと重なって表示されてしまします。
    「もっと見る」を押した後に表示位置を取得し直す、ということは可能でしょうか?

    お忙しいところ申し訳ありませんが、もしよろしければご教授よろしくお願いいたします。

  • BlackFlag | 2015.09.14 1:33

    >tki_tさん
    コメントありがとうございます。
    当記事の「もっと見る」スクリプトをお試しいただいている様で
    嬉しく思っております。

    masonryプラグインとの併用については少々難しいかもしれませんが、
    「もっと見る」をクリックするたびにmasonryプラグインを一旦解除して、
    新たに読み込まれたソースを加えたうえで
    再度masonryプラグインを実行させるような
    作りができれば行けるかと思います。

    憶測での回答になってしまいますが
    よろしくお願いします。

  • maki | 2016.06.26 20:03

    はじめまして

    私もテーブルタグを使いたいのですが、

    「もっと見る」ボタンクリック後の生成ソースの調整と
    JSONファイル側の値の持ち方も調整が必要になります。

    とのこですが、これはどういうことなのか、

    もしお時間があれば教えていただけますか?

    よろしくお願いします。

  • BlackFlag | 2016.06.26 23:02

    >makiさん
    コメントありがとうございます。
    当記事の「もっと見る」スクリプトをお試しいただいている様で
    嬉しく思っております。

    ご質問いただきました件についてですが
    当記事で紹介しているスクリプトはテーブルで構成していないので
    サンプルスクリプトの26、31、38、43行目のソース生成している部分を
    テーブル用のソースに変更する必要があります。

    加えて、テーブル構成(thやtdの数など)によって
    JSONの項目を増やしたりする必要があります。

    お試しください。
    よろしくお願いします。

  • maki | 2016.06.29 17:19

    返信ありがとうございました。







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryで外部HTML(JSON形式)化した要素を「もっと見る」ボタンで追加する方法

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR