forked:横浜オープンデータハッカソン参加者イエローページ｜Mash up the Linked Open Data

forked:横浜オープンデータハッカソン参加者イエローページ

if (!YP) {
	var YP = {};
}

YP.main = function() {
	this._init.apply(this, arguments);
};

YP.main.prototype = {
	
	_infoList : null,
	_property : null,
	_subjectList : null,
	
	_cons : {
		MAX_ITEM_COUNT			: 5,
		INFO_SELECTOR			: ".info",
		KEY_WORD_SELECTOR		: "#keyword",
		INFO_LIST_SELECTOR		: "#infoList",
		MORE_INFO_SELECTOR		: ".moreInfo",
		TAG_SELECTOR			: ".tag",
		SEARCH_IMAGE_SELECTOR	: ".searchImage",
		EXPAND_ALL_SELECTOR		: ".expandAll",
		EXTRA_INFO_SELECTOR		: ".extraInfo",
		PAGE_TITLE_SELECTOR		: ".pageTitle",
		SHOW_ALL_BUTTON_SELECTOR: ".showAllButton"
		
	},
	
	_init : function() {
		this._infoList = [];
		this._property = new YP.property();
		this._initInfoList();
		this._initView();
		this._initListener();
	},
	
	_initInfoList : function() {
		var self = this, workId = self._property.getWorkId(), fileName = self._property.getFileName();
		var subjectList = LinkData.getSubjects(workId, fileName);
		for (var i = 0; i < subjectList.length; i++) {
			var subject = subjectList[i];
			var info = new YP.info();
//			info.setTitle(LinkData.getObjects(workId, fileName, subject, self._property.getTitleProperty())[0]);
			info.setName(self._getLabel(subject));
			info.setEmail(LinkData.getObjects(workId, fileName, subject, self._property.getEmailProperty())[0]);
			info.setOrgName(LinkData.getObjects(workId, fileName, subject, self._property.getOrgNameProperty())[0]);
			info.setDescription(LinkData.getObjects(workId, fileName, subject, self._property.getDescriptionProperty())[0]);
			info.setDepiction(LinkData.getObjects(workId, fileName, subject, self._property.getDepictionProperty())[0]);
			info.setHomePage(LinkData.getObjects(workId, fileName, subject, self._property.getHomePageProperty())[0]);
			info.setAchievements(LinkData.getObjects(workId, fileName, subject, self._property.getAchievementsProperty())[0]);
			info.setCapabilityList(LinkData.getObjects(workId, fileName, subject, self._property.getCapabilitiesProperty()));
			info.setMainPaperList(LinkData.getObjects(workId, fileName, subject, self._property.getMainPaperProperty()));
			self._infoList.push(info);
		}
	},
	
	_initView : function() {
		var self = this;
		var infoList = self._getInfoListByIndex(1, self._cons.MAX_ITEM_COUNT);
		self._addHtml(infoList);
		$(self._cons.KEY_WORD_SELECTOR).val("");
	},
	
	_initListener : function() {
		this._initPageTitleListener();
		this._initShowAllButtonListener();
		this._initMoreInfoListener();
		this._initAutoCompleter();
		this._initKeywordListener();
		this._initSearchImageListener();
	},
	
	_initPageTitleListener : function() {
		var self = this;
		$(self._cons.PAGE_TITLE_SELECTOR).click(function() {
			$(self._cons.KEY_WORD_SELECTOR).val("");
			var infoList = self._getInfoListByIndex(1, self._cons.MAX_ITEM_COUNT);
			self._addHtml(infoList);
		});
	},
	
	_initShowAllButtonListener : function() {
		var self = this;
		$(self._cons.SHOW_ALL_BUTTON_SELECTOR).click(function() {
			$(self._cons.KEY_WORD_SELECTOR).val("");
			var infoList = self._getInfoListByIndex(1, self._cons.MAX_ITEM_COUNT);
			self._addHtml(infoList);
		});
	},
	
	_initMoreInfoListener : function() {
		var self = this, page = 2;
		$(self._cons.MORE_INFO_SELECTOR).unbind("click");
		$(self._cons.MORE_INFO_SELECTOR).click(function() {
			var keyword = $(self._cons.KEY_WORD_SELECTOR).val();
			var infoList = self._getInfoListByIndex(page, self._cons.MAX_ITEM_COUNT, keyword);
			if (infoList.length != 0) {
				self._appendHtml(infoList, keyword);
				page++;
			} else {
				$(this).hide();
			}
		});
	},
	
	_initAutoCompleter : function() {
		var self = this;
		$(self._cons.KEY_WORD_SELECTOR).autocomplete({
			minLength: 2,
			source: function(req, res) {
				var keyword = req.term;
				res(self._getMatchWordListByKeyword(keyword));
			},
			select : function(event, ui) {
				var keyword = ui.item.value;
				var infoList = self._getInfoListByIndex(1, self._cons.MAX_ITEM_COUNT, keyword);
				self._addHtml(infoList, keyword);
			}
		})
	},
	
	_initKeywordListener : function() {
		var self = this;
		$(self._cons.KEY_WORD_SELECTOR).keydown(function(evt) {
			if (evt.which == 13) {
				$(self._cons.KEY_WORD_SELECTOR).autocomplete("close");
				var keyword = $(this).val();
				var infoList = self._getInfoListByIndex(1, self._cons.MAX_ITEM_COUNT, keyword);
				self._addHtml(infoList, keyword);
			}
		});
	},
	
	_initSearchImageListener : function() {
		var self = this;
		$(self._cons.SEARCH_IMAGE_SELECTOR).click(function() {
			$(self._cons.KEY_WORD_SELECTOR).autocomplete("close");
			var keyword = $(self._cons.KEY_WORD_SELECTOR).val();
			var infoList = self._getInfoListByIndex(1, self._cons.MAX_ITEM_COUNT, keyword);
			self._addHtml(infoList, keyword);
		});
	},
	
	_initTagListener : function() {
		var self = this;
		$(self._cons.INFO_LIST_SELECTOR + " " + self._cons.TAG_SELECTOR).unbind("click");
		$(self._cons.INFO_LIST_SELECTOR + " " + self._cons.TAG_SELECTOR).click(function() {
			var keyword = $(this).text().trim();
			$(self._cons.KEY_WORD_SELECTOR).val(keyword);
			var infoList = self._getInfoListByIndex(1, self._cons.MAX_ITEM_COUNT, keyword);
			self._addHtml(infoList, keyword);
		});
	},
	
	_initExpandAllListener : function() {
		var self = this;
		$(self._cons.INFO_LIST_SELECTOR + " " + self._cons.EXPAND_ALL_SELECTOR).unbind("click");
		$(self._cons.INFO_LIST_SELECTOR + " " + self._cons.EXPAND_ALL_SELECTOR).click(function() {
			var parent = $(this).closest(self._cons.INFO_SELECTOR);
			$(parent).find(self._cons.EXTRA_INFO_SELECTOR).show();
			$(this).hide();
		});
	},
	
	_addHtml : function(infoList, keyword) {
		var self = this;
		if (infoList.length != 0) {
			var html = self._getContentHtml(infoList, keyword);
			$(self._cons.INFO_LIST_SELECTOR).html(html);
			self._initMoreInfoListener();
			self._initTagListener();
			self._hideUnNecessaryExpandAllButton();
			self._initExpandAllListener();
			$(self._cons.MORE_INFO_SELECTOR).show();
		} else {
			var html = self._getNotFoundHtml();
			$(self._cons.INFO_LIST_SELECTOR).html(html);
			$(self._cons.MORE_INFO_SELECTOR).hide();
		}
	},
	
	_appendHtml : function(infoList, keyword) {
		var self = this;
		var html = self._getContentHtml(infoList, keyword);
		$(self._cons.INFO_LIST_SELECTOR).append(html);
		self._initTagListener();
		self._hideUnNecessaryExpandAllButton();
		self._initExpandAllListener();
	},
	
	_hideUnNecessaryExpandAllButton : function() {
		var self = this;
		$.each($(self._cons.INFO_LIST_SELECTOR + " " + self._cons.EXPAND_ALL_SELECTOR), function() {
			var parent = $(this).closest(self._cons.INFO_SELECTOR);
			var html = $(parent).find(self._cons.EXTRA_INFO_SELECTOR).html();
			if (!html || html.trim().length == 0) {
				$(this).hide();
			}
		});
	},
	
	_getInfoList : function(start, itemCount) {
		var self = this, list = [];
		var workId = self._property.getWorkId(), fileName = self._property.getFileName();
		var sList = self._getSubjectList(start, itemCount);
		for (var i = 0; i < sList.length; i++) {
			var subject = sList[i];
			var info = new YP.info();
//			info.setTitle(LinkData.getObjects(workId, fileName, subject, self._property.getTitleProperty())[0]);
			info.setName(self._getLabel(subject));
			info.setEmail(LinkData.getObjects(workId, fileName, subject, self._property.getEmailProperty())[0]);
			info.setOrgName(LinkData.getObjects(workId, fileName, subject, self._property.getOrgNameProperty())[0]);
			info.setDescription(LinkData.getObjects(workId, fileName, subject, self._property.getDescriptionProperty())[0]);
			info.setDepiction(LinkData.getObjects(workId, fileName, subject, self._property.getDepictionProperty())[0]);
			info.setHomePage(LinkData.getObjects(workId, fileName, subject, self._property.getHomePageProperty())[0]);
			info.setAchievements(LinkData.getObjects(workId, fileName, subject, self._property.getAchievementsProperty())[0]);
			info.setCapabilityList(LinkData.getObjects(workId, fileName, subject, self._property.getCapabilitiesProperty()));
			info.setMainPaperList(LinkData.getObjects(workId, fileName, subject, self._property.getMainPaperProperty()));
			list.push(info);
		}
		return list;
	},
	
	_getMatchWordListByKeyword : function(keyword) {
		var self = this, list = [];
		var infoList = self._getInfoListByIndex(1, self._cons.MAX_ITEM_COUNT, keyword);
		$.each(infoList, function(key, info) {
			if (info.getName().toLowerCase().indexOf(keyword.toLowerCase()) > -1 && $.inArray(info.getName(), list)) {
				list.push(info.getName());
			} 
			if (info.getEmail().toLowerCase().indexOf(keyword.toLowerCase()) > -1 && $.inArray(info.getEmail(), list)) {
				list.push(info.getEmail());
			}
			if (info.getOrgName().toLowerCase().indexOf(keyword.toLowerCase()) > -1 && $.inArray(info.getOrgName(), list)) {
				list.push(info.getOrgName());
			}
			var capabilityList = info.getCapabilityList();
			$.each(capabilityList, function(key, value) {
				if (value.trim().toLowerCase().indexOf(keyword.toLowerCase()) > -1 && $.inArray(value, list)) {
					list.push(value.trim());
				}
			});
		});
		return list;
	},
	
	_getInfoListByIndex : function(page, itemCount, keyword) {
		var self = this, list = [], count = 0;
		var end = (page * itemCount) - 1;
		var start = end - itemCount + 1;
		for (var i = 0; i < self._infoList.length; i++) {
			var info = self._infoList[i];
			if ((!keyword || keyword.trim().length == 0) || self._isHitInfo(info, keyword)) {
				if (count >= start && count <= end) {
					list.push(info);
				}
				count++;
			}
			if (list.length == itemCount) {
				return list;
			}
		}
		return list;
	},
	
	_isHitInfo : function(info, keyword) {
		if (!keyword || keyword.trim().length == 0) {
			return false;
		}
		if (info.getName().toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
			return true;
		} else if (info.getEmail().toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
			return true;
		} else if (info.getOrgName().toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
			return true;
		} else if ($.inArray(keyword, info.getCapabilityList()) > -1) {
			return true;
		}
		var capabilityList = info.getCapabilityList();
		for (var i = 0; i < capabilityList.length; i++) {
			var capability = capabilityList[i];
			if (capability.toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
				return true;
			}
		}
		return false;
	},
	
	_getContentHtml : function(infoList, keyword) {
		var self = this, sb = [];
		for (var i = 0; i < infoList.length; i++) {
			var info = infoList[i];
			sb[sb.length] = "<div class='info cf'>";
			sb[sb.length] = "<div class='profileImageArea left'>";
			sb[sb.length] = "<img class='profileImage' src='" + info.getDepiction() + "'/>";
			sb[sb.length] = "</div>";
			sb[sb.length] = "<div class='profileInfoArea left'>";
			sb[sb.length] = "<div class='name'>" + self._getHighLightKeywordHtml(info.getDisplayName(), keyword) + "</div>";
			sb[sb.length] = "<div>";
			if (info.getOrgName().trim().length != 0) {
				sb[sb.length] = "<span class='orgName'><i class='icon icon-briefcase'></i>" + self._getHighLightKeywordHtml(info.getOrgName(), keyword) + "</span>";
			}
			if (info.getEmail().trim().length != 0) {
				sb[sb.length] = "<i class='icon icon-envelope'></i><a href='mailto:" + info.getEmail() + "' class='email'>" + self._getHighLightKeywordHtml(info.getEmail(), keyword) + "</a>";
			}
			sb[sb.length] = "</div>";
			sb[sb.length] = "<div class='cf'>";
			sb[sb.length] = "<div class='tagList cf left'>" + self._getTagListHtml(info.getCapabilityList(), keyword) + "</div>";
			sb[sb.length] = "<div class='expandAll right'>&gt;&gt; more</div>";
			sb[sb.length] = "</div>";
			sb[sb.length] = "<div class='extraInfo hide'>";
			if (info.getDescription().trim().length != 0) {
				sb[sb.length] = "<div><i class='icon icon-comment'></i>" + info.getDescription() + "</div>";
			}
			if (info.getHomePage().trim().length != 0) {
				sb[sb.length] = "<div>";
				sb[sb.length] = "<i class='icon icon-user'></i><a href='" + info.getHomePage() + "' target='_blank' class='homePage'>" + info.getHomePage() + "</a>";
				sb[sb.length] = "</div>";
			}
			var mainPaperHtml = self._getMainPaperHtml(info.getMainPaperList());
			if (mainPaperHtml.trim().length != 0) {
				sb[sb.length] = "<div class='cf'>";
				sb[sb.length] = "<div class='left'><i class='icon icon-list'></i></div>";
				sb[sb.length] = "<div class='left'>" + mainPaperHtml + "</div>";
				sb[sb.length] = "</div>";
			}
			if (info.getAchievements().trim().length != 0) {
				sb[sb.length] = "<div>";
				sb[sb.length] = "<a href='" + info.getAchievements() + "' class='achievement' target='_blank'>&gt;&gt; show more achievements..</a>";
				sb[sb.length] = "</div>";
			}
			sb[sb.length] = "</div>";
			sb[sb.length] = "</div>";
			sb[sb.length] = "</div>";
		}
		return sb.join("");
	},
	
	_getHighLightKeywordHtml : function(text, keyword) {
		if (!keyword || keyword.trim().length == 0) {
			return text;
		}
		var regex = new RegExp('(' + keyword + ')', 'gi');
		return text.replace(regex, "<span class='highlight'>$1</span>");
	},
	
	_getNotFoundHtml : function() {
		var sb = [];
		sb[sb.length] = "<div class='info error'>No Participant Found</div>";
		return sb.join("");
	},
	
	_getTagListHtml : function(tagList, keyword) {
		var self = this, sb = [];
		for (var i = 0; i < tagList.length; i++) {
			var tag = tagList[i];
			sb[sb.length] = "<span class='tag left'>" + self._getHighLightKeywordHtml(tag.trim(), keyword) + "</span>";
		}
		return sb.join("");
	},
	
	_getMainPaperHtml : function(paperList) {
		var sb = [];
		for (var i = 0; i < paperList.length; i++) {
			var paper = paperList[i];
			sb[sb.length] = "<div class='mainPaper'>" + paper + "</div>";
		}
		return sb.join("");
	},
	
	_getLabel : function(subject) {
		var label = subject;
		var arr = subject.split("#");
		if (arr.length > 1) {
			label = decodeURIComponent(arr[1]);
		}
		return label;
	}
	
};

YP.property = function() {
	this._init.apply(this, arguments);
};

YP.property.prototype = {
	
	_workId : null,
	_fileName : null,
//	_titleProperty : null,
	_emailProperty : null,
	_orgNameProperty : null,
	_descriptionProperty : null,
	_depictionProperty : null,
	_homePageProperty : null,
	_achievementsProperty : null,
	_capabilitiesProperty : null,
	_mainPaperProperty : null,
	
	_cons : {
//		TITLE				: "#title",
		EMAIL				: "#email",
		ORGANIZATION_NAME	: "#organization-name",
		DESCRIPTION			: "description",
		DEPICTION			: "depiction",
		HOME_PAGE			: "homepage",
		ACHIEVEMENT			: "#achievements",
		CAPABILITIES		: "#capabilities",
		MAIN_PAPER			: "#mainpaper"
	},
	
	_init : function() {
		this._initProperty();
	},
	
	_initProperty : function() {
		var self = this;
		$.each(LinkData.getWorks(), function(workKey, workId) {
			$.each(LinkData.getFiles(workId), function(fileKey, fileName) {
				self._workId = workId;
				self._fileName = fileName;
				$.each(LinkData.getProperties(workId, fileName), function(propKey, propValue) {
//					if (propValue.indexOf(self._cons.TITLE) > -1) {
//						self._titleProperty = propValue;
//					} else 
					if (propValue.indexOf(self._cons.EMAIL) > -1) {
						self._emailProperty = propValue;
					} else if (propValue.indexOf(self._cons.ORGANIZATION_NAME) > -1) {
						self._orgNameProperty = propValue;
					} else if (propValue.indexOf(self._cons.DESCRIPTION) > -1) {
						self._descriptionProperty = propValue;
					} else if (propValue.indexOf(self._cons.DEPICTION) > -1) {
						self._depictionProperty = propValue;
					} else if (propValue.indexOf(self._cons.HOME_PAGE) > -1) {
						self._homePageProperty = propValue;
					} else if (propValue.indexOf(self._cons.ACHIEVEMENT) > -1) {
						self._achievementsProperty = propValue;
					} else if (propValue.indexOf(self._cons.CAPABILITIES) > -1) {
						self._capabilitiesProperty = propValue;
					} else if (propValue.indexOf(self._cons.MAIN_PAPER) > -1) {
						self._mainPaperProperty = propValue;
					}
				});
				return false;
			});
			return false;
		});
	},
	
	getWorkId : function() {
		return this._workId;
	},
	
	getFileName : function() {
		return this._fileName;
	},
	
//	getTitleProperty : function() {
//		return this._titleProperty;
//	},
	
	getEmailProperty : function() {
		return this._emailProperty;
	},
	
	getOrgNameProperty : function() {
		return this._orgNameProperty;
	},
	
	getDescriptionProperty : function() {
		return this._descriptionProperty;
	},
	
	getDepictionProperty : function() {
		return this._depictionProperty;
	},
	
	getHomePageProperty : function() {
		return this._homePageProperty;
	},
	
	getAchievementsProperty : function() {
		return this._achievementsProperty;
	},
	
	getCapabilitiesProperty : function() {
		return this._capabilitiesProperty;
	},
	
	getMainPaperProperty : function() {
		return this._mainPaperProperty;
	}
	
};

YP.info = function() {
	this._init.apply(this, arguments);
};

YP.info.prototype = {
	
//	_title : null,
	_name : null,
	_email : null,
	_orgName : null,
	_description : null,
	_depiction : null,
	_homePage : null,
	_achievement : null,
	_capabilityList : null,
	_mainPaperList : null,
	
	_init : function() {},
	
//	getTitle : function() {
//		if (!this._title) {
//			this._title = "";
//		}
//		return this._title;
//	},
	
//	setTitle : function(title) {
//		this._title = title;
//	},
	
	getName : function() {
		if (!this._name) {
			this._name = "";
		}
		return this._name;
	},
	
	setName : function(name) {
		this._name = name;
	},
	
	getDisplayName : function() {
		return this._name;
	},
	
	getEmail : function() {
		if (!this._email) {
			this._email = "";
		}
		return this._email;
	},
	
	setEmail : function(email) {
		this._email = email;
	},
	
	getOrgName : function() {
		if (!this._orgName) {
			this._orgName = "";
		}
		return this._orgName;
	},
	
	setOrgName : function(orgName) {
		this._orgName = orgName;
	},
	
	getDescription : function() {
		if (!this._description) {
			this._description = "";
		}
		return this._description;
	},
	
	setDescription : function(description) {
		this._description = description;
	},
	
	getDepiction : function() {
		if (!this._depiction) {
			this._depiction = "http://app.linkdata.org/asset/d4a3f83b.png";
		}
		return this._depiction;
	},
	
	setDepiction : function(depiction) {
		this._depiction = depiction;
	},
	
	getHomePage : function() {
		if (!this._homePage) {
			this._homePage = "";
		}
		return this._homePage;
	},
	
	setHomePage : function(homePage) {
		this._homePage = homePage;
	},
	
	getAchievements : function() {
		if (!this._achievements) {
			this._achievements = "";
		}
		return this._achievements;
	},
	
	setAchievements : function(achievements) {
		this._achievements = achievements;
	},
	
	getCapabilityList : function() {
		return this._capabilityList;
	},
	
	setCapabilityList : function(capabilityList) {
		this._capabilityList = capabilityList;
	},
	
	getMainPaperList : function() {
		return this._mainPaperList;
	},
	
	setMainPaperList : function(mainPaperList) {
		this._mainPaperList = mainPaperList;
	}
	
};

$(document).ready(function() {
	new YP.main();
});

body {
    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 0;
}

.left {
	float: left;
}

.right {
	float: right;
}

.cf:after {
	display: block;
	content: "";
	clear: both;
}

.hide {
	display: none;
}

.icon {
	height: 14px;
	width: 14px;
	display: inline-block;
	margin-right: 5px;
	vertical-align: middle;
	background-repeat: no-repeat;
}

.icon-about,
.icon-contact {
	background-image: url("http://app.linkdata.org/asset/c0b5a191.png");
	margin-right: 0px;
}

.icon-list,
.icon-user,
.icon-comment,
.icon-briefcase,
.icon-envelope {
	background-image: url("http://app.linkdata.org/asset/d84209e9.png");
}

.icon-about {
	background-position: -96px -96px;
}

.icon-contact {
	background-position: -72px 0;
}

.icon-briefcase {
	background-position: -432px -144px;
}

.icon-envelope {
	background-position: -72px 0;
}

.icon-comment {
	background-position: -240px -120px;
}

.icon-user {
	background-position: -168px 0;
}

.icon-list {
	background-position: -264px -24px;
	margin-top: 3px;
}

#pageContainer {
	background-color: #FFF38C;
	min-width: 940px;
	width: 100%;
}

#pageContainer .body {
	min-height: 700px;
	text-align: center;
}

#pageContainer .header {
	background: #999999; /* Old browsers */
	background: -moz-linear-gradient(top,  #999999 0%, #888888 11%, #666666 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(11%,#888888), color-stop(100%,#666666)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #999999 0%,#888888 11%,#666666 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #999999 0%,#888888 11%,#666666 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #999999 0%,#888888 11%,#666666 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #999999 0%,#888888 11%,#666666 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#666666',GradientType=0 ); /* IE6-9 */
	-moz-box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.4);
	box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.4);
}

#pageContainer .footer {
	background: #999999; /* Old browsers */
	background: -moz-linear-gradient(top,  #999999 0%, #888888 11%, #666666 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(11%,#888888), color-stop(100%,#666666)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #999999 0%,#888888 11%,#666666 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #999999 0%,#888888 11%,#666666 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #999999 0%,#888888 11%,#666666 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #999999 0%,#888888 11%,#666666 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#666666',GradientType=0 ); /* IE6-9 */
}

#pageContainer .body .bodyContainer {
	width: 940px;
}

#pageContainer .header .headerContent {
	width: 900px;
}

#pageContainer .header,
#pageContainer .footer {
	background-color: #999999;
	height: 50px;
	color: #FFFFFF;
	text-align: center;
}

#pageContainer .header .headerContent {
	margin-left: auto;
	margin-right: auto;
}

#pageContainer .header .headerContent .contact,
#pageContainer .header .headerContent .about,
#pageContainer .header .headerContent .pageTitle {
	font-size: 22px;
	font-weight: bold;
	text-shadow: 0 2px 3px #555555;
}

#pageContainer .header .headerContent .pageTitle{
	cursor: pointer;
	margin: 7px 0 0 0;
}

#pageContainer .header .headerContent .contact,
#pageContainer .header .headerContent .about{
	cursor: pointer;
	margin: 7px 0 0 20px;
}

#pageContainer .header .headerContent .contact a,
#pageContainer .header .headerContent .about a {
	text-decoration: none;
	color: #FFFFFF;
}

#pageContainer .body .bodyContainer {
	padding-top: 20px;
	margin-left: auto;
	margin-right: auto;
}

#pageContainer .body .bodyContainer .searchBox {
	width: 500px;
	margin-left: auto;
	margin-right: auto;
	display: inline-block;
	background: #FFF;
	width: 500px;
	margin: 50px auto;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
	padding: 4px 15px;
	-moz-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.4) inset;
	-webkit-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.4) inset;
	box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.4) inset;
}

#pageContainer .body .bodyContainer .searchBox #keyword {
	width: 470px;
	font-size: 1.8em;
	line-height: 100%;
	float: left;
	border: none;
}

#pageContainer .body .bodyContainer .searchBox input:focus {
	border: none;
	outline:none;
}

#pageContainer .body .bodyContainer .searchBox .searchImage {
	vertical-align: middle;
	cursor: pointer;
	padding: 5px 0;
    width: auto;
}

#pageContainer .body .bodyContainer .showAllButton {
	margin: 0;
	padding: 10px;
	font-size: 1.4em;
	color: #666666;
	cursor: pointer;
	text-decoration: underline;
}

#pageContainer #infoBox {
	margin: 0 20px;
}

#pageContainer #infoList .info {
	margin: 10px 0;
	padding: 20px;
	text-align: left;
	background-color: #FFFFFF;
}

#pageContainer #infoList .error {
	text-align: center;
}

#pageContainer #infoList .info .tagList {
	width: 650px;
}

#pageContainer #infoList .info .highlight {
	color: #FF0000;
}

#pageContainer .bodyContainer .moreInfo,
#pageContainer #infoList .info {
	border: 1px solid #666666;
	border-radius: 10px;
}

#pageContainer #infoList .info .profileImageArea {
	margin-right: 20px;
	min-width: 70px;
}

#pageContainer #infoList .info .profileImageArea .profileImage {
	width: 70px;
	border: solid 1px #BBB;
	background-color: #fff;
	padding: 2px;
}

#pageContainer #infoList .info .profileInfoArea {
	width: 750px;
}

#pageContainer #infoList .info .profileInfoArea .name {
	font-size: 1.5em;
	font-weight: bold;
}

#pageContainer #infoList .info .profileInfoArea .orgName {
	margin-right: 15px;
}

#pageContainer #infoList .info .profileInfoArea .achievement,
#pageContainer #infoList .info .profileInfoArea .homePage,
#pageContainer #infoList .info .profileInfoArea .email {
	text-decoration: underline;
	color: #CCB400;
}

#pageContainer #infoList .info .profileInfoArea .achievement:hover,
#pageContainer #infoList .info .profileInfoArea .homePage:hover,
#pageContainer #infoList .info .profileInfoArea .email:hover {
	text-decoration: none;
}

#pageContainer #infoList .info .profileInfoArea .tag {
	background-color: #FFFCE2;
	border: 1px solid #CCB400;
	color: #CCB400;
	margin: 3px 3px 3px 0;
	padding: 0 3px;
	border-radius: 5px;
	cursor: pointer;
}

#pageContainer #infoList .info .profileInfoArea .expandAll{
	background-color: #DEC400;
	border: 1px solid #CCB400;
	border-radius: 5px;
	color: #FFFFFF;
	font-weight: bold;
	padding: 0 5px;
	margin: 3px 3px 3px 0;
	cursor: pointer;
}

#pageContainer #infoList .info .profileInfoArea .mainPaper {
	max-width: 700px;
	margin: 0 0 7px;
}

#pageContainer .bodyContainer .moreInfo {
	margin: 20px 0;
	padding: 10px;
	background-color: #CCCCCC;
	color: #666666;
	font-weight: bold;
	cursor: pointer;
}

#pageContainer .bodyContainer .dlExcel {
	margin: 20px;
	display: block;
}

#pageContainer .bodyContainer .dlExcel a {
	color: #666666;
}

#pageContainer .bodyContainer .dlExcel a:hover {
	font-weight: bold;
}

<div id="pageContainer">
	<div class="header">
		<div class="headerContent cf">
			<div class="pageTitle left">横浜オープンデータハッカソン参加者イエローページ</div>
			<div class="contact right">
				<i class="icon icon-contact"></i>
				<a href="mailto:ocean3fish@gmail.com">Contact</a>
			</div>
			<div class="about right">
				<i class="icon icon-about"></i>
				<a href="http://app.linkdata.org/run/app1s176i?key=11257add755bf4c61874dffd4363b55ee16b1c187ec8469dd2e54ce4d99904a73d1a2314a559fd85&tab=readme"
					target="_top">About</a>
			</div>
		</div>
	</div>
	<div class="body">
		<div class="bodyContainer">
			<div>
				<span class="searchBox">
					<input id="keyword" type="text"/>
					<img class="searchImage" src="http://app.linkdata.org/asset/95f23270.png"/>
				</span>
				<span class="showAllButton">Show All</span>
			</div>
			<div id="infoBox">
				<div id="infoList"></div>
				<div class="moreInfo">参加者をもっと見る..</div>
			</div>
			<span class="dlExcel">
				こちらのスプレッドシートから参加者情報を追加できます→ <a href="https://docs.google.com/spreadsheet/ccc?key=0AswBe-oIvKzndFk4bnVraGdHR3hPNnpPanBiREM4T3c" target="_blank">GoogleDriveで開く</a>
			</span>
		</div>
	</div>
	<div class=footer></div>
</div>

実行画面
入力データ
概要
保存した実行結果

同じデータを使っているアプリケーション

作者:
更新日:
評価指数

データ作品	テーブルデータ
横浜オープンデータハッカソン参加者リスト作者:Sayoko Shimoyama 更新日:2013年1月31日 393 ダウンロード, 2 アプリケーション 2013年1月25-26日に行われた、横浜オープンデータハッカソン / LODチャレンジデー in 横浜の参加者リストです。イエローページのアプリの入力データとして使用しています。	participant_list

データ作品を追加する

Link http://app.linkdata.org/run/app1s521i?tab=readme