forked:Yokohama Opendata hackathon's Participants Yellow Page

fullscreen

大石康晴

横浜オープンデータハッカソンのイエローページです。検索ボックスにキーワードを入力すると、人物を名前、所属、メールアドレス、技能で検索することができます。

Rating

useful

Application

Play
JavaScript
CSS
HTML
ReadMe
Snapshots

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>

このページでは、横浜オープンデータハッカソンの参加者リストを掲載しています。

検索ボックスにキーワードを入力すると、人物を

名前
所属
メールアドレス
持っているスキル

で検索することができます。

Created by S.Shimoyama

Fork this app as your new one download

Web Search

Contributor Send Message	大石康晴
Forked from (Parent App)	Sayoko Shimoyama 's Yokohama Opendata hackathon's Participants Yellow Page
Run count	151
Website
License
Fork count	0
Created date	Dec 13, 2013
Last update date	Dec 13, 2013