いきいきすざか OPEN_DATA

オープンデータだけで須坂市ホームページを作成してみました。スマートフォン利用を念頭に、「最新情報を見る」「担当部署を調べる」「連絡する」という機能に限定して作成しました。【更新履歴】2015.6.11市役所からのお知らせ表示件数を８件から10件に増やしました。自治会情報の検索機能をメニュー内に入れました。統計情報関係のレイアウト変更を行いました。2015.6.18統計情報レイアウトを変更しました。自治会情報の人口表示を追加しました。2015.10.7人口一覧へのリンクを追加しました。2015.10.29市民バスへのリンクを追加しました。2015.11.16iphone等でセレクトボックスを選択する際に、画面が拡大されて元に戻らない現象を修正しました。2016.3.1要介護認定情報ほかへのリンクを追加しました。

評価指数

アプリケーション

Play
JavaScript
CSS
HTML
概要
保存した実行結果

//アコーディオン//
$('.accordion_dl dd').hide();
$('.accordion_dl dt').click(function(){
    $(this).toggleClass("active");  
    $(this).siblings("dt").removeClass("active");
    $(this).next("dd").slideToggle();
    $(this).next("dd").siblings("dd").slideUp();
});

//RSS取得//
//google.load("feeds", "1");
function initialize() {
	var ti = "", li = "";
	$.ajax({
		url: 'https://opendata.city.suzaka.nagano.jp/rss/suzaka.xml',
		async: true,
		cache: false,
		dataType:"xml",
		success: function(xml){
			$(xml).find('item').each(function(){
				ti = $(this).find('title').text();
				li = $(this).find('link').text();
				var title = '<li><a href="' + li + '"\ target=_blank>' + ti + '</a></li>';
				$('#feed').append('<li class="post"><ul>' + title + '</ul></li>');
			});
		}
	});
}
google.setOnLoadCallback(initialize);

//単語検索//
if (!KOW) {
	var KOW = {};
}

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

KOW.main.prototype = {
	
	_infoList : null,
	_property : null,
	_subjectList : null,
	
	_cons : {
		MAX_ITEM_COUNT			: 300,
		INFO_SELECTOR			: ".info",
		KEY_WORD_SELECTOR		: "#keyword",
		INFO_LIST_SELECTOR		: "#infoList",
		TAG_SELECTOR			: ".tag",
		EXPAND_ALL_SELECTOR		: ".expandAll",
		EXTRA_INFO_SELECTOR		: ".extraInfo",
		SEARCH_IMAGE_SELECTOR	: ".searchImage",
		PAGE_TITLE_SELECTOR		: ".pageTitle",
		
	},
	
	_init : function() {
		this._infoList = [];
		this._property = new KOW.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 KOW.info();
			info.setName(LinkData.getObjects(workId, fileName, subject, self._property.getNameProperty())[0]);
			info.setKana(LinkData.getObjects(workId, fileName, subject, self._property.getKanaProperty())[0]);
			info.setTel(LinkData.getObjects(workId, fileName, subject, self._property.getTelProperty())[0]);
			info.setMail(LinkData.getObjects(workId, fileName, subject, self._property.getMailProperty())[0]);
			info.setFax(LinkData.getObjects(workId, fileName, subject, self._property.getFaxProperty())[0]);
			info.setUrl(LinkData.getObjects(workId, fileName, subject, self._property.getUrlProperty())[0]);
			info.setWork(LinkData.getObjects(workId, fileName, subject, self._property.getWorkProperty())[0]);
			self._infoList.push(info);
		}
	},
	
	_initView : function() {
	
	},
	
	_initListener : function() {
		this._initPageTitleListener();
		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);
		});
	},
	_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: 1,
			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 KOW.info();
			info.setName(LinkData.getObjects(workId, fileName, subject, self._property.getNameProperty())[0]);
			info.setKana(LinkData.getObjects(workId, fileName, subject, self._property.getKanaProperty())[0]);
			info.setTel(LinkData.getObjects(workId, fileName, subject, self._property.getTelProperty())[0]);
			info.setMail(LinkData.getObjects(workId, fileName, subject, self._property.getMailProperty())[0]);
			info.setFax(LinkData.getObjects(workId, fileName, subject, self._property.getFaxProperty())[0]);
   	        info.setUrl(LinkData.getObjects(workId, fileName, subject, self._property.getUrlProperty())[0]);
            info.setWork(LinkData.getObjects(workId, fileName, subject, self._property.getWorkProperty())[0]);
			list.push(info);
		}
		return list;
	},
	
	_getMatchWordListByKeyword : function(keyword) {
		
		var self = this, list = [];
		var infoList = self._getInfoListByIndex(2, 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.getKana().toLowerCase().indexOf(keyword.toLowerCase()) > -1 && $.inArray(info.getKana(), list)) {
				list.push(info.getKana());
			} 
			if (info.getTel().toLowerCase().indexOf(keyword.toLowerCase()) > -1 && $.inArray(info.getTel(), list)) {
				list.push(info.getTel());
			} 
			if (info.getUrl().toLowerCase().indexOf(keyword.toLowerCase()) > -1 && $.inArray(info.getUrl(), list)) {
				list.push(info.getUrl());
			}
			if (info.getMail().toLowerCase().indexOf(keyword.toLowerCase()) > -1 && $.inArray(info.getMail(), list)) {
				list.push(info.getMail());
			}
            if (info.getFax().toLowerCase().indexOf(keyword.toLowerCase()) > -1 && $.inArray(info.getFax(), list)) {
				list.push(info.getFax());
		    }
		    if (info.getWork().toLowerCase().indexOf(keyword.toLowerCase()) > -1 && $.inArray(info.getWork(), list)) {
				list.push(info.getWork());
			}
		});
		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.getKana().toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
			return true;
		} else if (info.getTel().toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
			return true;
		} else if (info.getUrl().toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
			return true;
		} else if (info.getMail().toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
			return true;
		} else if (info.getFax().toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
			return true;
		} else if (info.getWork().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='profileInfoKana left'>";
			sb[sb.length] = ""+"<div class='name'>" +self._getHighLightKeywordHtml(info.getName(), keyword) +"<br/>(" + self._getHighLightKeywordHtml(info.getKana(), keyword) +")<br/>TEL:<a href=tel:" + self._getHighLightKeywordHtml(info.getTel(), keyword) + ">" + self._getHighLightKeywordHtml(info.getTel(), keyword)+ "</a><br/>FAX:" + self._getHighLightKeywordHtml(info.getFax(), keyword)  +"<br/>E-MAIL:<a href=mailto:" + self._getHighLightKeywordHtml(info.getMail(), keyword) + ">" + self._getHighLightKeywordHtml(info.getMail(), keyword)+ "</a><br/>URL:<a href=" + self._getHighLightKeywordHtml(info.getUrl(), keyword) + "\ target=_blank>こちらをクリック</a>";
						sb[sb.length] = "</div>";
			sb[sb.length] = "<div class='cf'>";
			sb[sb.length] = "<div class='expandAll right'>&gt;&gt; もっと見る</div>";
			sb[sb.length] = "</div>";
			sb[sb.length] = "<div class='extraInfo hide'>";
			if (info.getWork().trim().length != 0) {
				sb[sb.length] = "<br><span class='nextTo'>" + self._getHighLightKeywordHtml(info.getWork(), keyword) + "</span>";
			}
　　　　　　　
			sb[sb.length] = "</div>";
			sb[sb.length] = "<div class='cf'>";
			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'>見つかりませんでした</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("");
	}
};

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

KOW.property.prototype = {
	
	_workId : null,
	_fileName : null,
	_nameProperty : null,
	_kanaProperty : null,
	_telProperty : null,
	_mailProperty : null,
	_faxProperty : null,
	_urlProperty : null,
	_workProperty : null,

_cons : {
		NAME			: "department_name",
		KANA			: "kana",
		TEL				: "telephone_number",
		FAX			    : "fax_number",
		MAIL			: "email_address",
		URL			    : "page_url",
		WORK		    : "work"

},
	
	_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.NAME) > -1) {
						self._nameProperty = propValue;
					} else if (propValue.indexOf(self._cons.KANA) > -1) {
						self._kanaProperty = propValue;
					} else if (propValue.indexOf(self._cons.TEL) > -1) {
						self._telProperty = propValue;
					} else if (propValue.indexOf(self._cons.MAIL) > -1) {
						self._mailProperty = propValue;
					} else if (propValue.indexOf(self._cons.FAX) > -1) {
						self._faxProperty = propValue;
					} else if (propValue.indexOf(self._cons.URL) > -1) {
						self._urlProperty = propValue;
					} else if (propValue.indexOf(self._cons.WORK) > -1) {
						self._workProperty = propValue;
					}
				});
				return false;
			});
			return false;
		});
	},
	
	getWorkId : function() {
		return this._workId;
	},
	
	getFileName : function() {
		return this._fileName;
	},
	
	getNameProperty : function() {
		return this._nameProperty;
	},
	
	getKanaProperty : function() {
		return this._kanaProperty;
	},
	
	getTelProperty : function() {
		return this._telProperty;
	},
	
	getMailProperty : function() {
		return this._mailProperty;
	},
	
	getFaxProperty : function() {
		return this._faxProperty;
	},
	
	getUrlProperty : function() {
		return this._urlProperty;
	},
	
	getWorkProperty : function() {
		return this._workProperty;
	}
};

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

KOW.info.prototype = {
	_name : null,
	_kana : null,
	_tel : null,
	_mail : null,
	_fax : null,
	_url : null,
    _work : null,

_init : function() {},
	
	getName : function() {
		if (!this._name) {
			this._name = "";
		}
		return this._name;
	},
	
	setName : function(name) {
		this._name = name;
	},
	
	getKana : function() {
		if (!this._kana) {
			this._kana = "";
		}
		return this._kana;
	},
	
	setKana : function(kana) {
		this._kana = kana;
	},
	
	getTel : function() {
		if (!this._tel) {
			this._tel = "";
		}
		return this._tel;
	},
	
	setTel : function(tel) {
		this._tel = tel;
	},
	
	getMail : function() {
		if (!this._mail) {
			this._mail = "";
		}
		return this._mail;
	},
	
	setMail : function(mail) {
		this._mail = mail;
	},
	
	getFax : function() {
		if (!this._fax) {
			this._fax = "";
		}
		return this._fax;
	},
	
	setFax : function(fax) {
		this._fax = fax;
	},
	
	getUrl : function() {
		if (!this._url) {
			this._url = "";
		}
		return this._url;
	},
	
	setUrl : function(url) {
		this._url = url;
	},
	
	getWork : function() {
		if (!this._work) {
			this._work = "";
		}
		return this._work;
	},
	
	setWork : function(work) {
		this._work = work;
	}

};

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

//施設一覧//
//infoウィンドウの初期化
var currentwindow=null;

window.onload = function() {
//LinkDataからのデータ取得
	var fileValue = 'suzakacity_kind_of_work_section';
	var　tmp_a_data =  new Array();

$.each(LinkData.getWorks(), function(workKey, workValue) {
		$.each(LinkData.getFiles(workValue), function(fileKey, fileValue) {
			$.each(LinkData.getSubjects(workValue,fileValue),function(subjKey,subjValue) {
				var tmp_data = {}
				tmp_data["id"] = subjValue;
					$.each(LinkData.getProperties(workValue, fileValue), function(propKey, propValue) {
						$.each(LinkData.getObjects(workValue, fileValue, subjValue, propValue), function(objKey, objValue) {
							if(propValue == "http://linkdata.org/property/rdf1s2885i#department_name"){
								tmp_data["name"] = objValue;
							} else if(propValue == "http://linkdata.org/property/rdf1s2885i#work"){
							tmp_data["work"] = objValue;	
							} else if(propValue == "http://linkdata.org/property/rdf1s2885i#telephone_number"){
							tmp_data["tel"] = objValue;
							} else if(propValue == "http://linkdata.org/property/rdf1s2885i#fax_number"){
							tmp_data["fax"] = objValue;
							} else if(propValue == "http://linkdata.org/property/rdf1s2885i#email_address"){
							tmp_data["mail"] = objValue;
							} else if(propValue == "http://linkdata.org/property/rdf1s2885i#page_url"){
							tmp_data["url"] = objValue;
							} else if(propValue == "http://linkdata.org/property/rdf1s2885i#post_number"){
							tmp_data["post"] = objValue;
							} else if(propValue == "http://linkdata.org/property/rdf1s2885i#address"){
							tmp_data["address"] = objValue;
							} else if(propValue == "http://www.w3.org/2003/01/geo/wgs84_pos#lat"){
							tmp_data["lat"] = objValue;
							} else if(propValue == "http://www.w3.org/2003/01/geo/wgs84_pos#long"){
							tmp_data["long"] = objValue;
							} else if(propValue == "http://linkdata.org/property/rdf1s2885i#kana"){
							tmp_data["kana"] = objValue;
							} 
					});
				});
				tmp_a_data.push(tmp_data);
			});
		});
	});
	//全データ
	all_data = tmp_a_data;
	//課のデータを表示
	$(".selectka").append("<option value='-1' selected='selected'>部署を選択してください。         </option>");
	for (var i in all_data){
		if (all_data[i].name ){ 
                var all_id=all_data[i].name;

$(".selectka").append("<option value='"+ all_data[i].id +"'>" + all_data[i].name+ "</option>");
		}
		}

//課が選択、変更された時の処理
	$(".selectka").change(function() {
		//詳細データのリセット
		$("#result2").empty();
		
		//選択された課の詳細データの表示
		var sectionKaKey = $("option:selected", $(this)).val();
		if (sectionKaKey == -1) {
			//$("#result2").html("");
			return;
		}
		$("#result2").append();
		for (var i in all_data){
			var detail_c = sectionKaKey;
			if (all_data[i].id === detail_c){
				$("#result2").append("<br/><div>よみかた:" + all_data[i].kana + "<br/>TEL:" + "<a href=tel:" +　all_data[i].tel + ">" + all_data[i].tel + "</a><br/>" + "FAX:" + all_data[i].fax + "<br/>Mail:"  + "<a href=mailto:" + all_data[i].mail +  ">" + all_data[i].mail + "</a><br/>" + "URL:"+ "<a href="+ all_data[i].url +  "\ target=_blank>こちらをクリック" + "</a><br/>"+"〒:" + all_data[i].post + "　" +  all_data[i].address + "　" + "<a href=\"http://www.google.com/maps/?q=" + all_data[i].lat + "," + all_data[i].long + "\" target=_blank>（地図を見る）" + "</a>"+"<br/><br/></div>");
	}
		}
	});
}

//行政区一覧//
//infoウィンドウの初期化

// データをLinkDataから取得 
	var fileValue2 = 'suzakacity_gyoseiku';
	var workId = "rdf1s3230i";
	var　tmp_a_data_machi =  new Array();
	
	$.each(LinkData.getWorks(), function(workKey, workValue) {
		//$("#result3").append("<h3>Work: " + workValue + "</h3>");
		$.each(LinkData.getFiles(workValue), function(fileKey, fileValue2) {
			$.each(LinkData.getSubjects(workValue, fileValue2), function(subjKey, subjValue) {
				var tmp_data_machi = {}
				tmp_data_machi["id3"] = subjValue;
				$.each(LinkData.getProperties(workValue, fileValue2), function(propKey, propValue) {
					$.each(LinkData.getObjects(workValue, fileValue2, subjValue, propValue), function(objKey, objValue) {
						if(propValue == "http://imi.ipa.go.jp/ns/core/rdf#町名"){
							tmp_data_machi["machimei"] = objValue;
						}else if(propValue == "http://imi.ipa.go.jp/ns/core/rdf#カナ表記"){
							tmp_data_machi["machikana"] = objValue;
						}else if(propValue == "http://www.w3.org/2003/01/geo/wgs84_pos#lat"){
							tmp_data_machi["lat2"] = objValue;
						}else if(propValue == "http://www.w3.org/2003/01/geo/wgs84_pos#long"){
							tmp_data_machi["longitude2"] = objValue;
						}else if(propValue == "http://linkdata.org/property/rdf1s3230i#" + encodeURIComponent("area_community_hall")){
							tmp_data_machi["hall"] = objValue;
						}else if(propValue == "http://linkdata.org/property/rdf1s3230i#" + encodeURIComponent("elementary_school")){
							tmp_data_machi["e_sch"] = objValue;
						}else if(propValue == "http://linkdata.org/property/rdf1s3230i#" + encodeURIComponent("ｌower_secondary_school")){
							tmp_data_machi["l_sch"] = objValue;
						}else if(propValue == "http://linkdata.org/property/rdf1s3230i#" + encodeURIComponent("volunteer_fire_department")){
							tmp_data_machi["fire"] = objValue;
						}else if(propValue == "http://linkdata.org/property/rdf1s3230i#" + encodeURIComponent("larger_section")){
							tmp_data_machi["oaza"] = objValue;
						}else if(propValue == "http://imi.ipa.go.jp/ns/core/rdf#郵便番号"){
							tmp_data_machi["yubin"] = objValue;
						}else if(propValue == "http://linkdata.org/property/rdf1s3230i#" + encodeURIComponent("refuge")){
							tmp_data_machi["hinanjo"] = objValue;
						}else if(propValue == "http://imi.ipa.go.jp/ns/core/Core22.html#標準日付型"){
							tmp_data_machi["kijunbi"] = objValue;
						}else if(propValue == "http://linkdata.org/property/rdf1s3230i#" + encodeURIComponent("household")){
							tmp_data_machi["setai"] = objValue;
						}else if(propValue == "http://linkdata.org/property/rdf1s3230i#" + encodeURIComponent("total")){
							tmp_data_machi["total"] = objValue;
						}else if(propValue == "http://linkdata.org/property/rdf1s3230i#" + encodeURIComponent("male")){
							tmp_data_machi["male"] = objValue;
						}else if(propValue == "http://linkdata.org/property/rdf1s3230i#" + encodeURIComponent("female")){
							tmp_data_machi["female"] = objValue;
							
						}
					});
				});
				tmp_a_data_machi.push(tmp_data_machi);
			});
		});
	});

//全データ
	all_data_machi = tmp_a_data_machi;
	//自治会のデータを表示
	$(".selectmachi").append("<option value='-1' selected='selected'>自治会（町）を選んでください。</option>");
	for (var i in all_data_machi){
		if (all_data_machi[i].machimei ){ 
                var all_id3=all_data_machi[i].machimei;

$(".selectmachi").append("<option value='"+ all_data_machi[i].id3 +"'>" + all_data_machi[i].machimei+ "</option>");
		}
		}

//行政区が選択、変更された時の処理
	$(".selectmachi").change(function() {
		//詳細データのリセット
		$("#result3").empty();
		
		//選択された行政区の詳細データの表示
		var sectionmachiKey = $("option:selected", $(this)).val();
		if (sectionmachiKey == -1) {
			//$("#result3").html("");
			return;
		}
		$("#result3").append();
		for (var i in all_data_machi){
			var detail_c = sectionmachiKey;
			if (all_data_machi[i].id3 === detail_c){
				$("#result3").append("<br/><div>【読み方】:" + all_data_machi[i].machikana + "<br/>【大字】:" + all_data_machi[i].oaza + "<br/>【郵便番号】:" + all_data_machi[i].yubin+"<br/>(注：墨坂は382-0099、墨坂南は382-0098、臥竜は382-0028です)<br/>【小学校】:" + all_data_machi[i].e_sch + "<br/>" + "【中学校】:" + all_data_machi[i].l_sch + "<br/>【地域公民館】:"  +　all_data_machi[i].hall + "<br/>【消防団】:"+ all_data_machi[i].fire + "<br/>【避難所】:"  +　all_data_machi[i].hinanjo + "<br/>【人口（"  +　all_data_machi[i].kijunbi +"時点)】<br/>　世帯:"  +　all_data_machi[i].setai +"世帯<br/>　男性:"  +　all_data_machi[i].male +"人<br/>　女性:"  +　all_data_machi[i].female + "人<br/>　合計:"  +　all_data_machi[i].total + "人</div>");
				
// 地図センター緯度経度の初期値は「須坂市役所」
    
	var latlng = new google.maps.LatLng(all_data_machi[i].lat2,all_data_machi[i].longitude2);
    var myOptions = {
    zoom: 16,
    center: latlng,
	 mapTypeId: google.maps.MapTypeId.ROADMAP
    };
   var map = new google.maps.Map(document.getElementById("result4"), myOptions);

//* アイコン設定 *//
  var icon = new google.maps.MarkerImage('http://app.linkdata.org/asset/7c83d9be.png',
    new google.maps.Size(100,100),
    new google.maps.Point(0,0),
    new google.maps.Point(19,51)
  );
  var markerOptions = {
    position: latlng,
    map: map,
    icon: icon,
     };
  var marker = new google.maps.Marker(markerOptions);
				
			
			}
		}
	});

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

.left {
	float: left;
}

.right {
	float: right;
}

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

.hide {
	display: none;
}

.nextTo {
	padding-right: 2em;
}

#pageContainer {
	background-color: #ffffcc;
	min-width: 100px;
	width: 100%;
	min-height: 500px;
	font-size:120%;
}

#pageContainer .body {
	height: auto;

}

#pageContainer .body .bodyContainer {
	width: 100%;
}

#pageContainer .header .headerContent {
	width: 100%;
}

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

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

#pageContainer .header .headerContent .contact,
#pageContainer .header .headerContent .about,
#pageContainer .header .headerContent .pageTitle {
	font-size: 140%;
	padding: 5px;
}

#pageContainer .header .headerContent .pageTitle{
	cursor: pointer;
	margin: 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 {
	height: auto;
	padding-top: 10px;
	margin-left: auto;
	margin-right: auto;
}
#pageContainer .selectka {/* 部署選択セレクト */
	height: auto;
	margin-left: auto;
	margin-right: auto;
	display: inline-block;
	background: #FFF;
	width: 100%;
	margin: 5px auto;
	border-radius: 5px;
	box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.4) inset;
	font-size:16px;
}
#pageContainer .body .selectmachi {/* 町選択セレクト */
	height: auto;
	margin-left: auto;
	margin-right: auto;
	display: inline-block;
	background: #FFF;
	width: 100%;
	margin: 5px auto;
	border-radius: 5px;
	box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.4) inset;
	font-size:16px;
}

#pageContainer .body .bodyContainer .searchBox {/* 検索窓自体の設定 */
	height: auto;
	margin-left: auto;
	margin-right: auto;
	display: inline-block;
	background: #FFF;
	width: 70%;
	margin: 2px auto;
	border-radius: 10px;
	padding: 5px 5px;
	box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.4) inset;
	font-size:16px;
}

#pageContainer .body .bodyContainer .searchBox #keyword { /* 検索窓内の設定 */
	width: 80%;
	font-size: 1.0em;
	line-height: 100%;
	float: left;
	border: none;
	font-size:16px;
}

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

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

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

#pageContainer #infoList .info { /* 情報ウィンド内の設定 */
	margin: 7px 7px;
	padding: 2px 5px;
	text-align: left;
	background-color: #FFFFFF;
	word-break:break-all;
}

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

#pageContainer #infoList .info .tagList {
	width: 100%;
}

#pageContainer #infoList .info .highlight {
	color: #0084F7;
}

#pageContainer .bodyContainer .moreInfo,
#pageContainer #infoList .info {
	border: 1px solid #666666;
	border-radius: 3px;
	word-wrap: break-word;
}

#pageContainer #infoList .info .profileImageArea {
	margin-right: 1px;
	min-width: 100px;
	position: relative;
	word-wrap: break-word;
}

#pageContainer #infoList .info .profileInfoArea {
	width: 100%;
	word-wrap: break-word;
}

#pageContainer #infoList .info .profileInfoArea .name {
	font-size: 1.0em;
	position: relative;
	word-wrap: break-word;
}

#pageContainer #infoList .info .profileInfoArea .orgName {
	margin-right: 3px;
	word-wrap: break-word;
}

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

#pageContainer #infoList .info .profileInfoArea .expandAll, 
#pageContainer #infoList .info .callButton {
	background-color: #F7DA00;
	border: 1px solid #E6CB00;
	border-radius: 5px;
	color: #FFFFFF;
	padding: 0 5px;
	margin: -20px 0 0 0;
	cursor: pointer;
	font-size: 0.9em;
}

#pageContainer #infoList .info .profileInfoArea .mainPaper {
	max-width: 80%;
	margin: 0 0 3px;
	word-wrap: break-word;
}

/* table幅の指定・隣接するセルのボーダーを重ねて表示 */
#contents table.style {
        width: 90%;
        border-collapse: collapse;
	    font-size: 1em;
}

/* thの指定 */
#contents table.style th {
        font-weight: normal;
　　　　 font-size: 1.0em;
        background-color: #F0F0F0;
        border:1px solid #BFBFBF;
        text-align: center;
        padding: 3px;
}

/* tr tdの指定 */
#contents table.style tr td {
        font-size: 1.0em;
        background-color: #FFFFFF;
        border:1px solid #BFBFBF;
        text-align: right;
        padding: 3px;
}

/* アコーディオンメニューの設定 */
section h1,
dt {
    background-color: #ffcccc;
    border-bottom: solid 1px #ffffff;
    margin-bottom: 1px;
    padding: 10px;
    color: #000000;
    cursor: pointer;
    position: relative;
	font-size:130%;
	text-align: left;
}

section h1:before,
dt:before {
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  right: 15px;
  width: 10px;
  height: 10px;
  margin-top: -8px;
  background: #FFF;
}
 
section h1:after,
dt:after {
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  right: 15px;
  width: 10px;
  height: 10px;
  margin-top: -13px;
  background: #ffcccc;
}
 
section h1.active:before,
dt.active:before {
  margin-top: -2px;
}
 
section h1.active:after,
dt.active:after {
  margin-top: 3px;
}
 
section li,
dd {
    background-color: #ffffcc;
    border-bottom: solid 0px #D6D6D6;
    padding: 0px 0 8px 0px;
}
 
section li a {
    position: relative;
    display: block;
}
 
section li a:before{
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  right: 17px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: #9CF;
}
 
section li a:after{
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  right: 22px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: #F2F2F2;
}

ul {
  margin: 0; /* 上下左右のマージンを0 */
  padding: 0; /* 上下左右のパディングを0 */
}
li {
 list-style-type: none; /* リストマーカーを表示しない */ 
}

<div id="pageContainer">
	<div class="header">
		<div class="headerContent cf">
			<div class="pageTitle">いきいきすざか OPEN_DATA</div>
		</div>
	</div>
	<p>【開庁日】平日 8:30～17:15<br/>
       【休日】土曜日、日曜日、祝祭日、年末年始（12/29～1/3）<br/>
       【時間外窓口】<a href="https://www.city.suzaka.nagano.jp/contents/item.php?id=5930c1ac6aebe" target="_blank">こちらから</a>ご確認ください。</p>

<dl class="accordion_dl">
	<dt>　市役所からのお知らせ</dt>
	<dd>
				
		  <ul id="feed"></ul><br/>須坂市ホームページ<a href="http://www.city.suzaka.nagano.jp/" target="_blank">「いきいきすざか」</a></dd>
	<dt>　単語で担当課を調べる</dt>
      <dd><div class="body">
		  <div class="bodyContainer">
          <div>調べたい単語を入力してください
			<span class="searchBox">
					<input id="keyword" type="text" name="myext"/>
					<img class="searchImage" src="http://app.linkdata.org/asset/95f23270.png"/>
	            </span>	<br>
		</div>
		  <div id="infoBox">
			<div id="infoList"></div>
			  
		  </div>
		</div>
		</div>
	  </dd>
	<dt>　各課の連絡先を調べる</dt>
	  <dd><div class="body">
           <h3><div class="left"><select class="selectka"></select></div></h3><br/><br/>
           <div id="result2"></div>
          </div>
	  </dd>

<dt>　　須坂市の基本情報</dt>
	  <dd>
		  <a href="https://www.city.suzaka.nagano.jp/jinko/index.php" target="_blank">【人口と世帯】</a>	
<br/>
		  <a href="https://www.city.suzaka.nagano.jp/contents/item.php?id=59262f829d558" target="_blank">【須坂市の統計】</a>
	</dd>
	<dt>　　自治会（町）を調べる</dt>
	<dd><div class="body">
		<h3><div class="left"><select class="selectmachi"></select></div></h3><br/>
		  <div id="result3"></div>
	<style type="text/css">
      html { height: 60% }
	  body { height: 60%; width: 95%; margin: 3px; padding: 3px }
      #map_canvas { height: 60% }
   </style>
       <div id="result4" style="width:95%; height:100%"></div>
	  </div>
		</dd>
	<dt>　　オープンデータアプリ new!</dt>
	  <dd>オープンデータを利用したアプリをご紹介します。<br/><br/>
  	    <a href="http://app.linkdata.org/run/app1s1312i" target="_blank">【須坂市介護保険認定情報】NEW！</a>
		<br/>H18以降の各月介護保険認定情報が表示されるアプリ<br/>
		  <a href="http://app.linkdata.org/run/app1s1310i" target="_blank">【長野県内保険者別要介護認定率】NEW！</a>
		<br/>H18以降の県内保険者別で要介護認定率が比較できるアプリ<br/>
		  <a href="http://app.linkdata.org/run/app1s1311i" target="_blank">【長野県内保険者別平均要介護度】NEW！</a>
		<br/>H18以降の県内保険者別で平均要介護度が比較できるアプリ<br/>
   		<a href="http://app.linkdata.org/run/app1s1298i" target="_blank">【須坂市自治会別高齢化率】NEW！</a>
		<br/>H14以降の自治会（町）別の高齢化率がグラフ表示されるアプリ<br/>
		  <a href="http://app.linkdata.org/run/app1s1125i" target="_blank">【すざか市民バス】</a>
		<br/>市民バスのバス停情報が表示されるアプリ<br/>
		  <a href="http://app.linkdata.org/run/app1s1119i" target="_blank">【須坂市自治会別人口】</a>
		  <br/>S47以降の自治会（町）別の人口がグラフ表示されるアプリ<br/>
		<a href="http://app.linkdata.org/run/app1s1023i" target="_blank">【須坂市自治会（町）一覧】</a>
		  <br/>市内の自治会（町）の各種情報が表示されるアプリ<br/>
		<a href="http://app.linkdata.org/run/app1s728i" target="_blank">【須坂市避難場所】</a>
		  <br/>市内の避難所がGoogleMap上に表示されるアプリ<br/>
<a href="http://app.linkdata.org/run/app1s746i" target="_blank">【須高地域AED設置場所】</a>
		  <br/>市内のAED設置施設がGoogleMap上に表示されるアプリ<br/>
		<a href="http://app.linkdata.org/run/app1s978i" target="_blank">【須坂市どこでも図書館】</a>
		  <br/>市内で本を読めるスペースをご提供頂いている施設「どこでも図書館」が、GoogleMap上に表示されるアプリ<br/>
		<a href="http://app.linkdata.org/run/app1s903i" target="_blank">【クマ目撃情報】</a>
		  <br/>3年間のクマ出没情報がGoogleMap上に表示されるアプリ<br/>
<a href="http://app.linkdata.org/run/app1s889i" target="_blank">【須坂の歴史～できごとけんさく】</a>
		  <br/>紀元前から須坂市に関連がある出来事を検索できるアプリ<br/>
		<a href="http://app.linkdata.org/run/app1s846i" target="_blank">【須坂の歴史年表～すざかのできごと】</a>
		  <br/>紀元前から須坂市で起きた出来事を検索できるアプリ<br/>
		<a href="http://suzaka.5374.jp/" target="_blank">【5374(ゴミナシ).jp for Suzaka】</a>
		  <br/>「いつ、どのゴミが収集されているのか？」「どうやって捨てるのか？」がすぐに分かるアプリ<br/>
		</dd>

</dl>
	<div class="footer">このアプリは長野県須坂市のオープンデータ<br/>
		<a href="http://opendata.city.suzaka.nagano.jp/" target="_blank">
			須坂市役所業務一覧</a> を利用しています。</div>
</div>

このアプリをForkして新しいアプリを作るダウンロード

このアプリ作品をwebから探す

作者メッセージ送信	長野県須坂市
実行回数	3728
ウェブサイト
ライセンス
Fork count	2
作成日	2015年3月16日
最終更新日	2022年11月25日

Forkして作られたアプリ

すざか市民バス作者: 長野県須坂市更新日: 2020年6月24日 1625 回実行

すざか市民バス_仙仁線S10 作者: 長野県須坂市更新日: 2015年10月29日 529 回実行

入力データ
関連アイデア

このアプリ作品で入力データとして使われているデータ作品のリストです。
チェックボックスの選択を変更すると、入力データを変更して実行することができます。

須坂市自治会一覧作者: 長野県須坂市更新日: 2022年11月25日
2822 ダウンロード
,

2 アプリケーション

suzakacity_gyoseiku
須坂市役所業務一覧作者: 長野県須坂市更新日: 2020年4月16日
2944 ダウンロード
,

1 アプリケーション

suzakacity_kind_of_work

suzakacity_kind_of_work_section

suzakacity_kind_of_work_unit
自分のデータを入力する

ニュースフィード

linkdata.org に関するツイート

オープンデータを使ってアプリを作ろう

アプリケーションの作成と公開をサポートするサイト

アプリ作品の情報

いきいきすざか OPEN_DATA

アプリケーション

Forkして作られたアプリ

ニュースフィード