Skip to content

@autch /fr.html
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
<!DOCTYPE html>
<html>
<head>
<title>食品の放射能データ検索もどき(実験)</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script type="text/javascript">
var YQL = {
yql_url: 'http://query.yahooapis.com/v1/public/yql?callback=?',
query: function(query, on_ready) {
jQuery.getJSON(this.yql_url, {
q: query,
format: "json",
}, function(data) {
on_ready(data.query.results);
});
}
}
function on_submit() {
// http://oku.edu.mie-u.ac.jp/food/ が GET に対応したら↓ので置き換える
// var query = 'SELECT * FROM html WHERE url="http://oku.edu.mie-u.ac.jp/food/?%QUERY%" AND xpath="//table/tr"';
var query = 'SELECT * FROM html WHERE url="http://tnok.jp/get2post.php?URL=http://oku.edu.mie-u.ac.jp/food/&%QUERY%" AND xpath="//table/tr"';
var ul = jQuery("#result");
ul.empty();
jQuery.mobile.showPageLoadingMsg();
var request = {
area: jQuery('#area').val(),
category: jQuery('#category').val(),
name: jQuery('#name').val(),
I131: jQuery('#I131').val(),
Cs: jQuery('#Cs').val(),
};
var query_to_use = query.replace(/%QUERY%/, jQuery.param(request));
YQL.query(query_to_use, function(results) {
var ul = jQuery("#result");
ul.empty();
if(results == null || results.tr == null) {
jQuery("<li>", { text: "見つかりませんでした" }).appendTo(ul);
jQuery('ul.dynamic-list').listview('refresh');
jQuery.mobile.hidePageLoadingMsg();
return;
}
for(var i = 0; i < results.tr.length; i++) {
if(!results.tr[i]['td']) continue;
var item = results.tr[i]['td'];
var template = "<li><a><div class=\"result-container\"><h3><small/></h3></div></a></li>";
var tmpl_item = jQuery(template);
var container = jQuery("div", tmpl_item);
var anchor = jQuery("a", tmpl_item);
jQuery("small", tmpl_item).text(item[8].p + " " + item[10].p).
before(item[9].p + " ");
jQuery("<p>", { text: item[4].p + " " + item[5].p + "" }).appendTo(container);
jQuery("<p>", { text: item[13].p + "採取、" + item[14].p + "判明" }).appendTo(container);
var bc = null;
if(item.length == 19) {
var cs;
cs = "Cs134+137: " + item[18].p + " " +
"(Cs134: " + item[16].p + ", Cs137: " + item[17].p + ") [Bq/kg]";
jQuery("<p>", { text: cs }).appendTo(container);
bc = item[18].style;
} else if(item.length == 18) {
jQuery("<p>", { text: "Cs134+137: " + item[17].p + " Bq/kg"}).appendTo(container);
bc = item[17].style;
}
if(bc) {
var styles = bc.split(/;/);
for(var s in styles) {
var style = styles[s].split(/:/, 2);
if(/background-color/.test(style[0])) {
jQuery("div", tmpl_item).css("border-left", "8px solid " + style[1]);
}
}
}
jQuery.data(anchor, "item", item);
anchor.attr("href", "#detailPage");
anchor.click(item, function(event) {
showDetail(event);
});
tmpl_item.appendTo(ul);
}
if(ul.children().length == 0) {
jQuery("<li>").text("見つかりませんでした").appendTo(ul);
}
jQuery.mobile.changePage(jQuery('#resultPage'));
jQuery('ul.dynamic-list').listview('refresh');
jQuery.mobile.hidePageLoadingMsg();
});
return false;
}
function showDetail(event) {
var data = event.data;
// key 列目を detail-key という ID を持つ要素へはめ込む
for(var key in data) {
var td = jQuery("#detail-" + key);
if(td && td.length > 0) {
td.text(data[key].p);
}
}
}
</script>
<style>
#detailPage table th { text-align: left; }
#detailPage table td.num { text-align: right; }
#resultPage .result-container { padding-left: 4px; }
</style>
</head>
<body>
<div id="mainPage" data-role="page">
<div data-role="header">
<h1>食品の放射能データ検索もどき(実験)</h1>
</div><!-- /header -->
<div data-role="content">
<p>検索は <a href="http://oku.edu.mie-u.ac.jp/food/">食品の放射能データ検索もどき(実験)</a> に丸投げしています。</p>
<form method="post" action="#resultPage" data-ajax="false" onsubmit="return on_submit();">
<fieldset>
<legend>検索条件</legend>
<div data-role="fieldcontain">
<label for="area" class="ui-hidden-accessible">都道府県</label>
<input id="area" name="area" size="20" value="" placeholder="都道府県" />
(空欄ならすべてを対象にします。正規表現対応)
</div>
<div data-role="fieldcontain">
<label for="category" class="ui-hidden-accessible">食品カテゴリ</label>
<input id="category" name="category" size="20" value="" placeholder="食品カテゴリ" />
(空欄ならすべてを対象にします。正規表現対応)
<select name="select-category" id="select-category" onchange="$('#category').val($(this).val())">
<option value="">すべて</option>
<option value="畜産物">畜産物</option>
<option value="肉・卵">肉・卵</option>
<option value="肉類">肉類</option>
<option value="野菜類">野菜類</option>
<option value="穀類">穀類</option>
<option value="農産物">農産物</option>
<option value="水産物">水産物</option>
<option value="魚介類">魚介類</option>
<option value="乳・乳製品">乳・乳製品</option>
<option value="牛乳・乳児用食品">牛乳・乳児用食品</option>
<option value="その他">その他</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="name" class="ui-hidden-accessible">品目</label>
<input id="name" name="name" size="20" value="シイタケ" placeholder="品目" />
(空欄ならすべてを対象にします。正規表現対応)
</div>
<div data-role="fieldcontain">
<label for="I131">I131 <input id="I131" name="I131" size="5" value="0" /> Bq/kg 以上</label>
</div>
<div data-role="fieldcontain">
<label for="Cs">Cs-134+137 <input id="Cs" name="Cs" size="5" value="100" /> Bq/kg 以上</label>
</div>
</fieldset>
<input type="submit" value="検索" data-theme="b"/>
</form>
</div><!-- /content -->
</div><!-- /page -->
<div id="resultPage" data-role="page">
<div data-role="header">
<a href="#mainPage" data-icon="back" data-direction="reverse" class="ui-btn-left jqm-back">戻る</a>
<h1>食品の放射能データ検索もどき(実験)</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" class="dynamic-list" id="result">
</ul>
</div>
</div>
<div id="detailPage" data-role="page">
<div data-role="header">
<a href="#resultPage" data-icon="back" data-direction="reverse" class="ui-btn-left jqm-back">戻る</a>
<h1>検索結果詳細</h1>
</div><!-- /header -->
<div data-role="content">
<!-- detail-NNN というidの要素に CSV の NNN 列目が埋め込まれる -->
<table>
<tr><th scope="row">No</th><td id="detail-0"></td></tr>
<tr><th scope="row">報告自治体</th><td id="detail-1"></td></tr>
<tr><th scope="row">実施主体</th><td><span id="detail-2"></span> <span id="detail-3"></span></td></tr>
<tr><th scope="row">産地</th><td><span id="detail-4"></span> <span id="detail-5"></span> <span id="detail-6"></span></td></tr>
<tr><th scope="row">非流通品/流通品</th><td id="detail-7"></td></tr>
<tr><th scope="row">食品カテゴリ</th><td id="detail-8"></td></tr>
<tr><th scope="row">品目</th><td id="detail-9"></td></tr>
<tr><th scope="row">品目委細</th><td id="detail-10"></td></tr>
<tr><th scope="row">検査機関</th><td id="detail-11"></td></tr>
<tr><th scope="row">検査法 [Ge/NaI]</th><td id="detail-12"></td><tr>
<tr><th scope="row">採取日/購入日</th><td id="detail-13"></td></tr>
<tr><th scope="row">結果判明日</th><td id="detail-14"></td></tr>
<tr><th scope="row">I131</th><td class="num"><span id="detail-15"></span> Bq/kg</td></tr>
<tr><th scope="row">Cs134</th><td class="num"><span id="detail-16"></span> Bq/kg</td></tr>
<tr><th scope="row">Cs137</th><td class="num"><span id="detail-17"></span> Bq/kg</td></tr>
<tr><th scope="row">Cs 合計</th><td class="num"><span id="detail-18"></span> Bq/kg</td></tr>
</table>
<p>不検出は &lt; を付けた数値で表しています。この場合の &lt; の右の数値は検出限界値です。</p>
</div>
</div>
<script>
jQuery(function() {
// jQuery.mobile.showPageLoadingMsg();
jQuery('#submit').attr('disabled', "disabled");
});
jQuery(document).delegate('#mainPage', 'pageinit', function() {
});
</script>
</body>
</html>
@autch
Owner

食品の放射能データ検索もどき(実験) を iPhone/Android で検索する。

データもリンク先のページから YQL でスクレーピングしてくるので DB も CSV ファイルも不要。
いまのところリンク先が GET リクエストには対応していないので https://gist.github.com/2356840 の get2post.php を tnok.jp においてそれを経由している。27 行目周辺を参照。

@autch
Owner
ブラウザ → YQL → GET gist:2356840 → (cURL) → POST http://oku.edu.mie-u.ac.jp/food/ 

というまわりくどい構成になっている。直接 GET でリクエストできるようになれば gist:2356840 は不要。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.