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

人気アプリ「緯度経度地図」をバージョンアップ!
新地理院版から、シンプルな住所検索機能と、タブ区切りモードをつけました。


緯度程度地図2
実は日本中にたくさんある福井


ご要望にお応えして、コピペしやすい、タブ区切りモード搭載!


緯度程度地図で探す銀座
確かに山口県にもありますね!

住所検索には、東京大学空間情報科学研究センター提供「CSVアドレスマッチングサービス」を利用しています。 SSLに非対応なので、一段プロキシーを通してアクセスしています。(旧緯度経度地図からは新バージョンへのリンク設置)

地図アプリのベースは、地理院地図 x leaflet のかんたん地図フレームワーク「egmapjs」
消火栓へゴー!? かんたんマップアプリづくりハンズオン(egmapjs 地理院地図編)スライド公開 - G空間ハッカーはじめのいっぽ

目指せG空間ハッカー!
インプット、アイデアソン、チーム分け、ハンズオンアプリづくり体験まで行った初日に続き、2日目はハッカソン!
ステキなG空間アプリ9作品、参加者による投票によって、東京での発表会へと出場する2チームが決定しました。

高校、高専生、大学生から社会人、山口県、石川県、東京都などの参加もあって大いに盛り上がったG空間ハッカソン。
メガネポーズで記念撮影!


今日の会場は、サンドーム福井、小ホール。こちらも天井高くて気持ちいい。

成果発表会、持ち時間は5分。9チームから、デモ付きプレゼンテーション!


チームB. お店も観光客も時間有効活用サービス
店の空き時間と、出先でちょっと作業したい人のマッチング。
店舗の人向けデータ登録と、検索、地図へのマッピングまで動いてた。
オープンデータを元に入力支援したり、電源やWiFiは備考でなく正規化して、5つ星オープンデータにしたい。

細かいニーズ同士のマッチングはITならでは!


チームE. 危機一髪回避サービス
出先でスマホが使えないは、ほぼ災害!


コンセントをAR表示して、最寄りの電源コンセントが利用可能なスポットまで案内するアプリ


お店の外観、内装、商品のセット、どんなお店にもほしいですね。
写真、大事!オープンデータとして集めたい!
コンセントの空き状況や、使用量をリアルタイムにオープンデータ化するIoTコンセントとかも便利かも?


チームI. みんなどこに通った?マップ
初めての土地、特に地方は人通りがないのでどこにいったらいいか分からない。足跡を可視化しよう!


鯖江駅からサンドーム福井までの道筋。発表社自らがしっかり迷ったとのこと。


みんなどこ通ったマップがあれば、熱いスポットが一目瞭然!
年代別、性別、時間帯別、曜日別、さまざまな角度で分析して、楽しいスポット紹介だけでなく、新規出店用データとして、安全性向上データにも!
データベースを構築し、Go言語でサーバーアプリケーションまで準備と、高専生エンジニアっぽい作品!


チームH. AR市長が観光名所を案内
Hana道場に通う、柔道部の高校生チームによる、ARで市長が登場し、観光名所を案内してくれるという作品。


Unityを使って、ARマーカーにスマホをかざすと、空間に登場する市長に大げさに驚く寸劇付き。さすが、受け身がうまい。
街中にマーカーを置きまくる作戦、ぜひやろう!


チームG. バスの確認サービス
利用者が多すぎてバスに乗れない、バスの遅延で待ち時間が無駄、リアルタイムオープンデータで解消しよう。
日本版GTFSによって、続々と日本国内のバスオープンデータが広まってます。
福井市 京福バスのAPIは残念ながら運用停止中でした。
鯖江市 つつじバスAPI」「つつじバス乗客数」で実現しましょう!
身近な課題の解決、自分で作って自分で使う!


チームC. おやさい 逆アマゾンダッシュボタン!
農家さんが作った食べきれない野菜、近所の人は同じものを作っているのであげられない。


あげたい野菜の数だけボタンを押すだけ逆ダッシュボタン!


IchigoSoda(IchigoJam x sakura.io)を使ったプロトタイプ!


ほしいを登録しておくとプッシュ通知され、地図上の野菜アイコンからタップで農家さんの写真が見え、農業への親近感アップ。
感謝の気持ちは、地域通貨の投げ銭スタイルがおもしろい。


東京進出!
副賞に大阪のフルタ製菓x鯖江市役所「サバエイト


チームD. 高齢者自動送迎サービス「病院へGO!」
風邪かと思ったら誤嚥性肺炎という例が増えていると、医大生。
交通弱者である高齢者、痛い場所と顔写真をシンプルに送って、病院からの自動運転送迎を使おうというサービス。


人の体の絵をタップ、ARアプリによる撮影、呼び出し完了までとってもシンプル!病院側も呼び出しを受けた患者さん情報が事前によく分かるという、プロトタイプ。
わかりやすいUIと写真による119、良いかも!?


チームF. 有料パーキングの簡単支払い
駐車場にまつわる課題、空いている駐車場を探すのが面倒、止めている間の料金が心配、精算が面倒を全部解決!
場所、台数、料金、営業時間など、駐車場に関する細かなオープンデータを語彙化して、IoTによって空き状況をリアルタイムオープンデータ化して、賢く案内!
QRコード決済、LINEペイを使って、すばやく支払いまでできたら便利ですね!駐車後も安心できるよう、止めた場所、料金確認などあるのがいい感じ。
PayPayなど、個人間送金もできるお手軽決済サービス、空き地を気軽に時間貸しできても便利そう!


東京進出!メガネ型のサバエイト、みなさんで分けていただきました!


チームA. 近くに何がある!?(公共の施設を探そう!!)
もともと兵庫県出身「近くに何があるか知りたい」を地図上でアプリ化!
学校、病院、警察、駅など、SPARQLをそれぞれ呼び分けて、地図上に表示。この日のためにノートPCを買って参戦とのこと!
SPARQL、ぜひいろいろ遊んでくださいー

初日、インプット

主催者、総務省 情報流通行政局 地域通信振興課長 吉田正彦さんより激励!


「G空間データの潜在能力」
事業構想大学院大学 小塩篤史さん、早期警報、都市マッピング、スポーツ、スマホログ解析、室内測位、おもてなし、ヘルスケア、ドローン、農業など、G空間とつながる、さまざまな分野のご紹介。


奈良先端科学技術大学院大学、オープンデータ伝道師、新井イスマイルさんは動画で登場!


宇宙や衛星にも広がる「地理空間情報とプログラミングと現在とこれから」
日本情報経済社会推進協会 電子情報利活用研究部 主任部員、オープンストリートマップ・ファウンデーション・ジャパン副理事長、飯田哲さん(@nyampire)
飯田さん記事「行政サイトでウェブ地図を使う際の注意点などまとめ - Qiita」は参考になります。 ここでも紹介されている国営で自由な地理院地図のデザインの問題を egmapjs は改善!

アイデアソン&チーム分け風景

1分半で3つのアイデアを考えて、次の人回す。これを6ターン!まずは質より量!たくさんのアイデアを机上に。


こちら7テーブルでのグルーピングされたアイデア「アイデアオープンデータ(PDF)」にしました!


みんなで見て回り、自分のアイデアをまとめて、絵にする時間。


テーブル内で自分のアイデアを紹介。良いアイデアに星印をつけましょう。


テーブルごとのアイデアのトップ2をみんなに発表。
やってみたいアイデアに集まって、チームができました!
その後、開催「かんたんマップアプリづくりハンズオン」は別記事参照。

ハッカソン風景

IoTを駆使するチーム。IchigoSodaによるIoTを紹介しました。
kintone x sakura.io x IchigoJam 親子イベント」「こどもIoTハッカソン」でおなじみ、BASIC言語による簡単IoTをご紹介。
IchigoSoda、IoTコマンド搭載で、より便利になった IchigoJam ver 1.3 でぜひ遊んでください!


経路探索を使うチーム。


経路探索サンプル - egmapjs チュートリアル
ただし、この経路探索APIはテスト用、実運用する場合は別途商用のサービスへの申込みが必要です。(Api usage policy · Project-OSRM/osrm-backend Wiki


SPARQLでWiFiマップ - egmapjs チュートリアル

select ?uri ?name ?lat ?lng { ?uri rdf:type <http://purl.org/jrrk#PublicWIFI>. ?uri rdfs:label ?name. ?uri geo:lat ?lat. ?uri geo:long ?lng. } limit 100


SPARQLでWiFiマップに条件をつけて、電源マップ - egmapjs チュートリアル

select ?uri ?name ?lat ?lng ?plugs { ?uri rdf:type <http://purl.org/jrrk#PublicWIFI>. ?uri rdfs:label ?name. ?uri geo:lat ?lat. ?uri geo:long ?lng. ?uri jrrk:hasPlugs ?plugs. filter(contains(str(?plugs),'有')) } limit 100


ARアプリを使うチーム。内側カメラを使ったARアプリフレームワーク「egarjs」サンプルとしてインカメラを追加しました。


助っ人コーディングが落ち着いたので、TELLOを使った室内巡回自動運転プログラムの実験。
締切5分前のギリギリの時に、お騒がせしてすみませんでした。

告知タイム!
2日間、一緒にハッカソンに参加した仲間、せっかくなので、イベント紹介で広がる交流の輪。


学生団体withによる「もしも最先端システムでビジネスゲームをできるとしたら。「体験型ビジネスゲーム」 | Peatix
ビジネスが学べる「ERP GAME」2.23、再び開催!


こちらは東京、同日2.23-24開催「NICT SpaceHack 2019」宇宙や衛星オープンデータ活用ハッカソン!
Tellus」の正式版公開も近い!?

全体講評
大事なのは楽しむこと。
2日間、長時間に渡るイベント、参加者の人が終始楽しそうにしていたのが印象的でした。

楽しく作った、楽しいアプリは使うし、使うと改善点が見えてきて、楽しく改善、どんどんよくなる。
楽しいと誰かに教えたくなるし、広がる。
データがつながる、5つ星オープンデータで、使える地域が隣の市、隣の県、日本中、世界中へと広がり、イノベーション!

もう一つ大事なのは、アプリの名前。
せっかく作った楽しいサービスはまさに我が子、みんなでステキな名前をつけてあげましょう。
伝えやすい、探しやすいがいい名前のコツ!

年齢や、住んでいるところ、専門分野もみんなバラバラ、みんなでつくった、9つの作品。
視点が違う人が集まるともっと楽しい、データが増えるともっと楽しい。使えるテクニックが増えるともっと楽しい!

ちょっとずついいものを作って広めていきましょう。
まずは、気楽な「G空間ごはん会」からはじめます!

links
- 総務省|「Geospatial Hackers Program」の開催《地理空間情報を活用可能な人材の裾野拡大に向けたハッカソン等の開催》
- 消火栓へゴー!? かんたんマップアプリづくりハンズオン(egmapjs 地理院地図編)スライド公開 - G空間ハッカーはじめのいっぽ(1日目、ハンズオン)
- GEOSPATIAL Hackers Program in福井まとめ
- G空間ハッカソンに参加しました | 鯖江から世界へ! 学生団体with

G空間ハッカーはじめのいっぽ「Geospatial Hackers Program | Peatix
福井会場の1日目は、サンドーム福井のものづくりキャンパス


40名もの参加者、みんなでつくろう地図アプリ!


Chromeじゃないと動かなかったり、コピペの貼り付け場所が分からなかったり、いろいろありましたが、それぞれの地図アプリできました!
Forks · code4fukui/egmapjs


かんたんマップアプリづくりハンズオン(egmapjs 地理院地図編)スライド (PDF)
分かりづらかった点など、ブラッシュアップしました。
地図アプリのページ、下にQRコードを出したので、すぐにスマホで確認できますよ!
誰かに教えるのも簡単、自分だけの地図アプリ、自慢しちゃいましょう。


SPARQLを使ったサンプル位置ゲーム「消火栓へゴー」とすぐにお試し「チュートリアル
こちらを元にあれこれ改造するのもいいですね!

文書を編集するHTML、プログラムをつくるJavaScript、デザイン変更CSS、データを取得するためのSPARQL。
用途に合わせて登場する、4種類のコンピューター言語、興味があるものから、ひとつずつ遊んでみると良いですよ!

links
- egmapjs

日本人男性の5%、日本人女性の0.2%が色弱という。
色覚特性について|メガネスーパー 眼鏡(めがね、メガネ),コンタクト,サングラス,補聴器販売
フランス・北欧の男性では10%と、そう珍しいことではありません。(色覚多様性 - Wikipedia

この色なんだろう?色を通じた子供とのコミュニケーションにも活用してもらえればと、
WebMegane colorsight」をもっとスマホで手軽につかえるバージョン「iromieru / いろみえる」を開発!


iromieru / いろみえる
色名は「JIS慣用色名 - Wikipedia」を利用しています(colorjis.js / colorjis.csv

色覚特性の人は”Super Green Eyes”の持ち主!
色覚特性(いわゆる色盲・色弱)の人は微妙な「緑」の違いを容易に識別できるといわれています。
色覚特性について|メガネスーパー
人も自分と同じように見えていると思ってしまいがちですが、大間違い。
色覚特性を細かく計測するアプリを作ってみたいですね。

MacBook Pro など、カメラ付きのPCでも動きます!
この色なんだろう?を手軽に解決!?

iromieru src on GitHub

ARアプリのテンプレートとしても活用ください!
WebMegane colorsight も、JISカラーに対応版にバージョンアップ!

福井高専に入学した時、電子情報工学科では全員SHARPのポケコンPCG-805を買うこととなってました。

BASICでプログラミングできる、ちょっと大きな関数電卓。テストに持ち込めないので結局関数電卓も買う羽目になりましたが、運命を変えるほどの大活躍。 当時持っていたMSXと接続してゲームをクロス開発し、ケーブルを使ったローカルネットワーク転送で高専のクラスの友達に配布は、モバイルアプリサービスの原点です。

現代で言う、クラス全員スマホを持っているような状況。今ならきっとスマホのアプリを作って配布したいはず。

そこで、JavaScriptかんたんフレームワークです!

重たい開発環境は一切不要で、数行から書き始めることができ、GitHub pagesを使えば、クラス内はもちろん世界中の人に見てもらうことだって可能です。

こちら、PCスマホタブレット対応、かんたんフレームワーク jigjsシリーズ(ちょっとしたjsの治具)
- 正方形ゲームフレームワーク - sq-game.js
- デジタル万華鏡フレームワーク - websarasa.js
- 4択クイズフレームワーク - q4js
- 地図フレームワーク - egmapjs
- 時計フレームワーク - egclockjs

新作、時計フレームワーク「egclockjs」は、プログラミングでちょっとしたものづくりをより簡単にします!

simple analog clock - egclockjssrc on GitHub
秒で変化する色相を使った sin/cos 三角関数を使った定番、アナログ時計。
1秒で1回転するミリ秒針がワンポイント!


simple digital clock - egclockjssrc on GitHub
シンプルに文字で時計を表し、背景が1秒を表現する。
fixnum は、指定した桁数で0埋めする関数。

IchigoJamでプログラミングの学び方のコツをつかんでいたなら、スマホで動くアプリづくりもすっと取り組めるはず。
何か困ったことがあれば、Twitterで #jigjs ハッシュタクで質問ください!

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も使いたて、なかなかに幼稚なコードを書いていたなぁと思いながらの復刻プログラミング。そう思えることが成長の証。続けて良かった一日一創。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaとJavaScriptは、メロンとメロンパンほどは違いません。
どちらもプログラミング言語、名前が似ているだけあって、使い方も似ているところも多いです。

何か得意な言語をもつと、違う言語の習得も楽々。私の場合、Javaが長いので、あまり変わりないJavaScriptは覚えやすく、ちょっと違うPython3はその違いを覚えるまでに一手間必要です。

こちら忘れがちな、Python3の文字列操作をJavaとJavaScriptとの比較と合わせて記載したものです。
結構似てます。単語単位では、英語とフランス語ほど違いがあるわけではありません。言うなれば方言程度?


Python3の短さがよくわかりますね。慣れるとJavaやJavaScriptでの文字列操作が億劫になってしまうほど!


strfuncs」 - シンプルな JavaScript 文字列操作チェックプログラム

PCNこどもプロコンの一次審査では、JavaScript, Python, Swift を使いこなしている小学生もちらほら!
ありがとう、329作品! 小中学生PCNこどもプロコン一次審査とJavaScriptで触るScratch - lib4scratch.js

links
- IchigoJamからのステップアップ - IchigoJam BASIC / Python3 / JavaScript / Java / C言語 対照表

高専プロコンの小中学生版を!と5年前から開催しているPCNこどもプロコン
9回目の開催となる今回、日本全国と海外からも届いた小中学生のプログラム、過去最多の329作品の応募!

全作品ソースを見て審査していきます。
小学生低学年でも、なかなか凝った作り、おもしろい実装などあります。

応募も多い、Scratchのプログラムは、流れを追いかけるのがちょっと慣れがいります。
大作になると、各スプライトに紐づき、2次元空間に配置され、GOTOコマンドと同様、グローバルなメッセージによって縦横無尽にジャンプするので、全体把握がなかなか大変。


blockcounter for Scratch
Scratchのプログラムのステップ数にあたる、ブロック数を算出するアプリを作ってみました。

sb3ファイルの拡張子をzipにすると展開できて、中にJSONでプログラムが記述されています。
それをパースしてScratchをJavaScriptであれこれいじるライブラリ lib4scratch 活用ください!(src on GitHub)

今回ちょうど、Flashベースのsb2からHTML5ベースのsb3へとバージョンアップへの狭間。
blockcounterはsb3のみ対応ですが、同じファイル名のJSONなので、sb2を触りたい方も使えます!


ノミネート作品発表、お楽しみに!
表彰式は、3/3福岡開催。今年は新しく、高専賞(仮称)も!

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