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

地方自治体職員が集結、未来の行政運営を研究する、公益財団法人 日本都市センターの第5回都市調査研究交流会にて、基調講演とIoT、webアプリのハンズオンワークショップを開催しました。
オープンデータで創る地方の未来―オープンデータのトップランナーになるには―


オープンデータとIoTが注目される理由、活用事例を紹介しつつ、実際に手を動かしてもらうハンズオン形式。 プログラミングで制御するLED、IoTで集めるデータ、スマホで制御するIoTをIchigoSodaで体験。 後半は、ノートPCを使ってオープンデータでよく使われる地図アプリを実際、GitHubのアカウントを作って、自分で作ってみるwebアプリワークショップ。 SPARQLも少し紹介できました。


地図アプリ向け、かんたん地図フレームワーク「egmapjs」
チュートリアルを作りました。ぜひ、みなさんで挑戦してみてください!


マップアプリづくりハンズオン(地理院地図編) 地図簡単フレームワーク egmapjs (PDF)
こちらは、スライドオープンデータ。

何かつくった自慢や、ご質問など、サポートはFacebookグループ「Code for Fukui」までどうぞ!

links
- 消火栓へゴー!? かんたんマップアプリづくりハンズオン(egmapjs 地理院地図編)スライド公開 - G空間ハッカーはじめのいっぽ
- はじめようG空間ごはん会 - 福井生まれのG空間9アプリレビューとアイデア集 / 総務省主催ハッカソンレポート Geospatial Hackers Program in 福井

第二の故郷、名古屋でオープンデータセミナー。愛知県内の自治体の方を中心に130名もの参加者。

オープンデータ、何から始めて、どう進めるか? 推奨5ステップを紹介しました。
1. 避難所5つ星オープンデータ化(アプリ「ヒナンパス」動く!)
2. 愛知県内オープンデータ化コンプリート(VLEDコンプリート賞とりましょう)
3. Code for や子供含む、市民と一緒にアイデアソン(例、品川アイデアソン
4. 高専、大学、民間協力でハッカソンしてアプリ創出(豊田高専あり!)
5. データを5つ星化して横展開!(普及し、社会変革こそイノベーション)

講演スライド「Code for Sabae 取り組みとオープンデータの可能性 (PDF)」 CC BY fukuno.jig.jp


クイズ Q4愛知 - q4js
こちら、質疑応答時に紹介した、豊田高専訪問記念に作った日本の全自治体キャッチフレーズオープンデータから自治体名を当てるクイズアプリです。 愛知県民にも難しい!?(17市町しかない、コンパクトな福井編版もどうぞ!)


オープンデータ活用にあたっての課題、連携不足とスキル不足。愛知県全体で盛り上げて行きましょう!
具体的なプロジェクトを、オープンソースでみんなで進めるスタイルとか楽しそうです。

愛知県オープンデータカタログサイトに、個人、学校、団体、企業向けのアンケート調査。
愛知県の未来、ここでの一声で変わるかも?
オープンデータに関するアンケート調査にご協力お願いします! - 愛知県
CSVビューワー - 愛知県保有(統計関連)データ一覧(H30棚卸調査結果)
こちらアンケート内でも登場する、愛知県保有のデータ一覧。
1,094件もあるデータ、見やすくするために加工すべく、CSVビューワーアプリを改造し、絞り込みに対応。
上記「アクセス」で絞り込んでみたところ。


非公開データの中で、使いたいものを探せます。アンケート回答用の参考にどうぞ!


こちら元となったExcelファイル「愛知県保有(統計関連)データ一覧(H30棚卸調査結果)
どんなデータが使いたいか、どういう用途で使いたいかと問いがあります。


加工して、CSVデータにしました。


CSV UTF-8 だと、iPhoneでも文字化けしない国際対応ですが、Excelで普通に開くと文字化けする。
CSV だと、iPhoneで文字化けしますが、Excelで普通に開けます。
・・・悩ましいところですが、編集のしやすさを考え、後者のCSVを選択。


こちら「IMI情報共有基盤 共通語彙基盤 コア語彙2.4.1」のページです。


ic:文書型を選択して、項目を一部共通語彙基盤対応にしてみました。
足りない語彙は、どんどん定義して、使い始めてしまうのがオススメです!
銀行の方、ATM語彙、ぜひ!


共通語彙基盤連携の、お城語彙とお城ゴーを創ろう、名古屋から!

2010年12月に鯖江市に提案し、2011年度にスピード実現した、日本初のオープンデータ都市鯖江。

2012年1月30日、一日一創を始めて30日目だった、7年前の今日。鯖江市から日本最初の自治体オープンデータが登場し、そのオープンデータを使ったwebアプリ「鯖江トイレマップ」を発表。 うれしかった、Twitterでの思わぬ反響!はじまりはココでした。

鯖江トイレマップ」 leafletjs x 国土地理院地図, egmapjs バージョン

公開当時のオープンデータに使ったライセンスは「CC BY-SA(表示 - 継承 3.0 非移植)」と、派生データも CC BY-SA を継承することが条件でしたが、Twitter上での先駆者の方のアドバイスを受け、CC BY(表示)へと変更。 さすが機動力高い鯖江市、ライセンスの変更も一瞬でした。その後、日本のオープンデータの標準形式は、CC BY互換と決まりました。

見返して見つかる便利機能。下記のようにアイコン画像を生成することが Google Charts API を使えばできるのでした。

return 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + op[0] + '|' + op[1] + '|FFFFFF'

APIはなまもの。知らぬ前に止まっていたり、仕様が変わっていたり、なくなっていたりする点は注意したい。(Google Charts APIは、3年保証と書いてあって良心的!)

その頃はJavaScriptもGoogleマップAPIも使いたて、なかなかに幼稚なコードを書いていたなぁと思いながらの復刻プログラミング。そう思えることが成長の証。続けて良かった一日一創。

愛知県豊田市にある豊田高専。愛知高専ではない。福井高専は鯖江市にあるが、鯖江高専ではない。
高知高専からスタートした、IchigoSodaを使った出張IoT&情報セキュリティ入門、今回も楽しんでもらえました。
創造モチベアップに期待!


情報工学科2年生、IchigoSodaを使ったIoTプログラミング研修&情報セキュリティ入門。

情報工学科1年生にも楽しいIoTプログラミングの世界を紹介。
webアプリ+電子工作で広がるIoTというイノベーションの種!ぜひ気になるもの、身近なものから取り組みましょう!


こちら4年生、プログラミングに慣れている学生でも、サクッとゲームが作れる感はウケが良い。
ALT+C を押すと、ネコ絵文字登場!敵キャラを出して、ループすれば早速現れるゲーム感。
かわくだりゲーム - IchigoJamプリント


IoT化した端末から続々と送られてくるスコア、ランキング表示で盛り上がる!


ヒストグラム表示で全員のデバイスから送られて集まるビッグデータ感を体験。


チートOK宣言をした後、荒れたヒストグラム。
データに罪なし、誰にどこまで許すか、情報セキュリティは設計次第!


4年生授業後、豊田高専出身、鳥羽商船高専を経て、現在豊田高専の先生、都筑さんと。
今年度のインターンあさしぐれ、起業家甲子園メンバーも!


クイズ Q4愛知 - q4js
福井編に続き、愛知編、数が多いので10問勝負としました。
ぜひ、みなさんの愛知度、測ってみてください。

豊田高専学生のコメントを受けて、問題文が徐々に表示するように改良。
簡単JavaScriptフレームワークで、手軽なスマホアプリづくり、ぜひやってみてね!(src on GitHub
地図フレームワーク「egmapjs」、万華鏡フレームワーク「webbasarajs」もどうぞ。


いろんなキャッチフレーズがあって楽しい。
「書のまち」で検索するとちゃんと「春日井市」がトップで表示!特化するまち、いいですね。


豊田高専散策、ちょっと狭そうだけどきれいな寮!全体で約600人のキャパがあり、1-2年生は基本寮生活。
1-2年生はパソコン持ち込み禁止という規定はかなりユニーク。
自治で運営しているという寮、規定はどのような思いで作られ、今後どうしていくのか、興味深い。
福井高専では、通学制でしたが、いろいろ聞くほどに寮経験がうらやましくなります。これから高専に行く人、ぜひ!


80円のデザートがうれしい、豊田高専学食!


学科ホームページのリュニューアルアイデア募集がおもしろい!
オープンデータ対応で、アプリフレンドリーなページづくりを目指してみるのもおもしろいかも?


放課後、オープンデータアプリコンテスト、宇部高専生と豊田高専生のチームが最優秀賞獲得!
豊田高専コンピュータ部などのみんなと祝賀会!


大きな唐揚げ!


途中、通った名東区、上社JCT、初めてのパソコン、MSXをGETした、幼稚園年長から小3までを過ごした場所!
名古屋市名東区のキャッチフレーズは「文化薫る、活気と思いやりのあるまち」

人が輝く、躍進するまち!
がんがん新しいもの創っていきましょう!

IoTプログラミング体験、情報セキュリティ入門、全国の高専へ伺います!

links
- 高専IT系部活 #kosenit Advent Calendar 2018 - Qiita
- 豊田高専コンピュータ部について - onsd’s blog
- 1時間半でわかる叡智の結晶「IoT」 - IchigoJam x sakura.io 情報セキュリティ実習 in 高知高専

総合的な学習の時間を45分を続きで2コマ使って、プログラミングとコンピューターのおもしろさに触れてもらった子供たちはみんな、もっとやりたいと言います。

図書館内などにIT遊具としてIchigoJamを自由に使える場所を作りましょう。 こどもたち同士の自慢しあい、教えあい、越前がにロボコンやPCNこどもプロコンなどのコンテストや、自由研究へと広がっていくことが、高度IT人材育成へステップアップする子が誕生へとつながるでしょう。

福井県内で進む小学校プログラミング必修化に向けた準備、今回は、福井県の北よりの市、坂井市東十郷小学校の教員、全員対象のプログラミング研修。 まずは先生も楽しむこと。この研修、越前がにロボコンに出場した生徒から羨ましがられたとか!来年度から始まる、楽しいプログラミング学習、みんなや先生を支える強力なサポーター、もういました!

プログラミング研修の復習は、こちらの動画とスライドと合わせてどうぞ!
動画&スライド公開、プログラミングB分類、総合と英語2コマ使った「はじめてのプログラミング」 - 鯖江市進徳小学校でモデル授業

小学生の社会で習う、福井県には市町が17。コンパクトなので覚えやすくて良いですね。
日本の地方自治体オープンデータのキャッチフレーズから、福井県内の市町を当てる4択クイズアプリをつくりました。

クイズ Q4福井」(src on GitHub、JavaScriptのwebアプリフレームワーク、q4js使用)

こういうアプリがサクッと作れる子供たちが、どんどん誕生する未来はすぐそこです!

本日、オープンデータ伝道師会。日本の全地方公共団体がオープンデータ都市になるには?

情報伝達言語の違い、HTMLは表現を重視した人間のため、RDFは構造を重視したコンピューターのため。 多様な日本、すべての地方自治体あるウェブサイトが、全部オープンデータのトップページにもなればいいかも。

「福」を含む自治体はいくつあるか? → 正解は、171件

全自治体のウェブサイトや、キャッチフレーズなどを勝手にまとめているCC0オープンデータ「localgovjp」とegmapjsを使って、 キーワードで旅できるマップアプリを作りました。 (キャッチフレーズは、地方公共団体情報システム機構 全国自治体マップ検索 記載のもの)

フレーズで探そう日本の地方自治体マップ - egmapjs

ちなみに、「めがね」で検索すると、鯖江市のみヒットします!

おもしろいまち、シェアしましょう!

オープンデータ伝道師への出動要請あって、新潟県妙高市へ。

鯖江市などでのオープンデータの活用を事例を交えて紹介、IoTプログラミング体験、地理院マップアプリをベースに避難所一覧2つ星オープンデータのアプリ化、SPARQL!

妙高市役所、上越市役所の皆さんと!5つ星オープンデータで、つなげましょう、上越と鯖江!


妙高市避難所一覧(サンプル)
こちら、研修内にて使った、妙高市オープンデータの避難所一覧を表示するものに、更に、今回の旅写真を加えてみました。避難所データはWordファイルで、緯度経度未記載。緯度経度地図を使って、3点ほど追加してみました。 マップアプリづくりも、IchigoJamのプログラミングを一歩先。(src on GitHub

5つ星オープンデータを手軽に実現する odp で、アプリ作成もとっても簡単に!
災害別避難所案内「ヒナンパス」は、データをいれると、即使えます。


縮小すると、上越妙高駅付近や、名物とん汁ラーメンなどの写真も置いてみました。(addIcon)


妙高市議の村越さんと!(アップいただいた、IoT研修中の動画


月額64円で実現、IchigoSoda(sakura.io x IchigoJam)でかんたんIoTプログラミング!
妙高市役所、オープンデータ担当の池田さん、とても楽しそう!


雪の上越妙高駅!雪は少ないそう。


会場は、妙高市役所。エレベーターで見かけたゆるキャラ「ミョーコーさん
胸元の馬は、雪解けとともに山に現れる、跳ね馬!
跳ね馬(はねうま)・牛形 - haneumas jimdo page!
妙高市役所最寄りの新井駅から上越妙高駅をつなぐ、妙高はねうまラインの名前の由来。


災害相互応援協定を結ぶまち、姉妹都市など、関係ある都市同士を結ぶオープンデータもおもしろそう。


松茶屋のとん汁ラーメン、一見大きなとん汁


でも、らーめんが入ってる!


唐辛子を雪にさらして、3年寝かす、薬味、かんずり!いろいろ付けておいしい!


上越妙高駅近くにあるコンテナを並べた飲食店、FURUSATTO(フルサット)


こちらにも、かんずり!特性中華ソースで食べる、地元の鳥料理が美味!(食堂酒場 酉かつ

その土地ならではの特産物、ローカルチェーンなど、グルメオープンデータ、あるといいですね!

EXIFのGPS、位置情報付き写真から、JSONデータをつくるPython3のプログラムつくりました。お手軽マップづくりがはかどります。

from PIL import Image def toDegree(v): d = float(v[0][0]) / float(v[0][1]) m = float(v[1][0]) / float(v[1][1]) s = float(v[2][0]) / float(v[2][1]) return d + (m / 60.0) + (s / 3600.0) def fixfloat(d, beem): s = str(d) n = s.find('.') if n < 0: return s s += "0000000000" return s[0:n + beem + 1] def fixnum(n, beem): s = "0000000000000" + str(n) return s[-beem:] def getExifGPS(fn): im = Image.open(fn) exif = im._getexif() for id, value in exif.items(): if id == 0x8825: # GPS gps = value lat = toDegree(gps[2]) if gps[1] == 'S': lat = -lat lng = toDegree(gps[4]) if gps[3] == 'W': lng = -lng return fixfloat(lat, 7) + "," + fixfloat(lng, 7) return '' def getExifDate(fn): im = Image.open(fn) exif = im._getexif() for id, value in exif.items(): if id == 0x9003: # DateTimeOriginal s = ''.join(value.split(':')) return ''.join(s.split(' ')) return '' def getImageSize(fn): im = Image.open(fn) h, w, c = im.shape return str(w) + '.' + str(h) import os import sys files = os.listdir('./') list = [] for f in files: if f.endswith('.jpg') or f.endswith('.JPG'): list.append([ f, getExifDate(f) ]) list.sort(key = lambda x: x[1]) if len(sys.argv) > 1: nameprefix = sys.argv[1] n = 0 for i in range(len(list)): f = list[i][0] f2 = nameprefix + '-' + fixnum(n, 2) + ".jpg" os.rename(f, f2) list[i][0] = f2 n += 1 print('[') for item in list: f = item[0] print('{ name: "' + f + '", size: [ ' + getImageSize(f) + ' ], latlng: [ ' + getExifGPS(f) + ' ] },') print(']')

高専プロコン2018にて、起業家甲子園挑戦権を獲得したメンタリングのため、舞鶴高専へ。

起業家甲子園に向けてのメンタリング!
舞鶴市民の健康を守るため、舞鶴市役所と高専生の技術、いかに連携していけるかが鍵!


舞鶴高専のプロコン部の精鋭たちへ、NICT半間さんより、来年度の起業家甲子園へのお誘い!


はじめてのIoTプログラミング」スライド資料 PDF。
町田さんの時間をお借りして、電子制御工学科3年生向けに、特別授業!


LED1 であがる歓声! LEDの点灯実験は初めてだったとのこと!


好評、かわくだりゲーム!


IoT化して、スコアを送信して即席ネットワークゲーム大会!
チートも解禁してからのスコア争いも熱かった!
情報セキュリティのはじめのいっぽは、チートから! 攻めを知らずして守れるわけなし。


温度センサーをつないで、IoT温度計づくり。
多人数で一斉に送られてくる温度データ、リアルタイムにヒストグラム表示させるとおもしろい。


IchigoSodaでIoTプログラミング 舞鶴高専で福野さんの特別授業 | yet another 舞鶴電脳工作室より)


IoTコマンドでスマホからコントロール!

1 N=IOT.IN():IF N LED N-1 2 GOTO 1

たったこれだけ、楽しいIoTづくりへとチャレンジしましょう!
IchigoJam web でも、ゲームづくりはできますよっ。(IchigoJamプリント
IchigoJam webでも、IoTコマンドに対応しちゃうのもアリですね。


町田さん研究室、さかなつり x FPGAのデモ! 研究内容をわかりやすく楽しく伝える、楽しい!
下はなんと0歳の子供も楽しんだとのこと。


デモ動画!
PLL/PWM 方式による位置サーボ系の FPGA 実現


手作りスマート化された、ロボコン部の部室の鍵。取りに行くのが面倒だから作った、と、無いものは作る精神!


ご案内いただいt製作工場! キロW級のレーザー加工機! 金属も余裕で貫くとのこと。


加工サンプル、金属加工品があるのがすごい。


金属加工でつくった時計、かっこいい


舞鶴は造船所が近いということで、溶接施設も充実


大型高級切り出し加工機、学生が自由に使っているとのこと、高専生なら、高専にある機材、学科関係なくどんどん活用しちゃいましょう。


舞鶴高専訪問記 2019.1.11
紹介いただきながら撮った写真、EXIFデータとして位置情報がついているので、取り出して、マッピングし、簡単地図アプリフレームワーク「egmapjs」を使って訪問記アプリにしてみました。 町田さん、ありがとうございました!


舞鶴では松葉ガニ(ズワイガニの山陰の呼び名、福井では越前がに)のメスを、「こっぺかに」と呼ぶ?
こっぺかにロボコンというのもかわいい!(参考、小学生 越前がにロボコン


おいしい煮魚、いただきました!


起業家甲子園に向けて、気合充分!

links
- IchigoSodaでIoTプログラミング 舞鶴高専で福野さんの特別授業 | yet another 舞鶴電脳工作室
- 1時間半でわかる叡智の結晶「IoT」 - IchigoJam x sakura.io 情報セキュリティ実習 in 高知高専>

地理院地図を使ったハンズオンチュートリアルを公開したところ、オープンデータ伝道師のイスマイルさんより、OSMは?と入電あり。

OSM(オープンストリートマップ)は、無料で使える地図データ。ただし、タイル(地図を画像状にしたもの)データ提供サーバーを使ったアプリとしての利用は不可。 ただ、同じ形式の地理院地図 x leafletjs ならOKと気が付き、機能はばっさり削ったシンプル版でいいことに気がつきました。

leaflet x 地理院地図を使った薄いフレームワーク「egmapjs」と、活用例アプリ「Hana道場はどこ?」を作成。


Hana道場はどこ?」 徐々に拡大していきます(動かしたら、オートスクロールは停止)
クリックしたら、Hana道場のページを開きます。
ソース on GitHub


はじまりは日本全体から! zoom = 4


色味は前回同様ちょっと補正していい感じに! zoom = 13


ハンズオン資料も書き換える予定! zoom = 17

links
- Hana道場はどこ? - leafletjs x 地理院地図 (src on GitHub)
- Documentation - Leaflet - a JavaScript library for interactive maps
- 地理院地図|地理院タイル一覧 (出展リンク先)
- JA:タイル利用規約 - OpenStreetMap Wiki

無料で使えて、オープンソースなのでカスタマイズ自由な日本政府、国交省、国土地理院による地理院地図
見た目がちょっと残念な点は、CSS filterで調整することで、結構いい感じにできました!


GitHubのアカウント取得から、地理院地図とオープンデータを使ったオリジナルアプリづくり解説しました。
ハンズオンでできあがるマップアプリ
とりあえずマップ」 「アイコンをおく」 「SPARQLで駐車場マップ」 「秋吉を探せ!

参考
ASCII.jp:大変な時代だからこそ、地方でオープンデータにチャレンジしやすい (1/2)|さくらの熱量チャレンジ
5つ星オープンデータ対応一覧表

2/9-10開催のG空間情報(位置情報付きデータ)イベントでは、更にギミックを足したものを用意します。
みんなでアイデア加えて、新しいアプリ創出を楽しみましょう!
総務省主催:Geospatial Hackers Program in 福井

下記、ハンズオン資料(PDFダウンロードもどうぞ!)


消火栓を探す




地理院地図のAPIはオープンソースの leafletjs なので、国外対応には同APIを使う Mapbox が便利かも。


GitHub








code4fukui/gsimap: 地理院地図マップアプリハンズオン with SPARQL

























5つ星オープンデータ対応一覧表


















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