福野泰介の一日一創 - create every day

プログラミングでまちを楽しく!福井県オープンデータアプリコンテスト向け、オープンデータスロット

2016/06/02
#opendata #js #codefor 

福井県オープンデータアプリコンテストがスタートしました!
食品営業許可施設に、多言語化された観光オープンデータ、リアルタイムな計測データのオープンデータが目玉です。

レギュレーションとして、福井県発のオープンデータを一つ以上使うこととなっています。 オープンデータ一覧オープンデータを使って、データは組み合わせるほどにおもしろいので、スロット2つの福井県オープンデータをランダムに表示するアプリをアイデア出し用に作ってみました。


福井県オープンデータスロット

こちらのアプリ自体もオープンデータ(オープンソースで利用自由)です。とってもシンプルなので、まずはCSSを変更してオリジナルデザインにしてみましょう!

<style> button { margin: 10px; padding: 20px; font-size: 110%; } .data { cursor: hand; margin: 10px; padding: 20px; font-size: 110%; background-color: gray; color: white; verflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .credit { margin: 1em 0em; font-size: 80%; } </style>

つづいて、プログラムも改造してみましょう!
スロットをもっと素早く止めるには、どこの数値を変更するといいでしょう?
2つのデータを3つにするには、どう変更するといいでしょう?

window.onload = function() { var url = "http://www.pref.fukui.lg.jp/doc/toukei-jouhou/opendata/list_od_d/fil/opendata.csv"; getJSON(url, function(csv) { csv.shift(); csv.pop(); // dump(csv); var f = function() { var dataurl = "http://www.pref.fukui.lg.jp/doc/toukei-jouhou/opendata/category.html"; window.open(dataurl); }; get("data1").onclick = f; get("data2").onclick = f; var setRandom = function() { shuffle(csv); get("data1").textContent = csv[0][3]; get("data2").textContent = csv[1][3]; }; setRandom(); get("slot").onclick = function() { var t = 0; var dt = 20; var f = function() { setRandom(); t++; if (t > 10) { dt *= 1.1; } if (dt < 300) setTimeout(f, dt); }; f(); }; }); };

PC、iPhone/iPad、Android、どれでもだいたい動くJavaScriptでつくるWebアプリは手軽です! IchigoJamで、プログラミングの基本がわかっていれば、JavaScriptもなんとなく読むことはできると思います。 まずは簡単な改造から入ってみましょう!ライセンスのCC BYの作品を元に改変するには、作者名やリンクをどこかに表記だけでOK!じゃんじゃん活用くださいっ

福井県オープンデータアプリコンテスト」かっこいいバナー画像とかほしいところですねっ!
締め切りは、10/31(月)17:00まで!(メールOK!)

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY 福野泰介 - Taisuke Fukuno / @taisukef / アイコン画像 / プロフィール画像