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

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福岡開催。今年は新しく、高専賞(仮称)も!

オープンデータなどを議論する、産官学コンソーシアムVLED利活用・普及委員会
内閣官房IT室からオープンデータの取組状況の報告、都道府県でのオープンデータ普及率、福井県が100%と現在単独ナンバーワン!

私からの情報提供として、オープンデータへの関心の高まりから、2017年につくった「緯度経度地図」の人気なことと、地図アプリは無料で簡単に作れること、G空間ハッカー養成講座開催をご紹介。 (Geospatial Hackers Program、鯖江開催 2/9-10

国土地理院の地理院地図とオープンソースなマップAPIである leafletjs との組み合わせをラップした「egmapjs」を使えば、初心者42でも簡単に地図アプリが作れます!

地理院地図をリニューアルしようと、シンプルに作り直してみたものがこちら(動かせます)

緯度経度表示 - egmapjs」 - src on GitHub
* 緯度経度地図2としてリニューアル

使いやすく育てていきたいと思います。ご意見・ご要望など、ぜひお寄せください。
GitHubのissueとして書き込んでいただく、Facebookでのコメント、Twitterなどでどうぞ!
もちろんGitHubからフォーク、プルリクなどもOKです!

ちなみに、地理院地図オリジナルがこちら(ちょっと色がキツイ)

これを、CSSフィルターでまろやかにカラーデザイン変更しています (src on GitHub)

filter: hue-rotate(-10deg) saturate(70%) brightness(104%);

ちなみにオープンストリートマップはこのようなカラーデザイン

Googleマップなど、いろいろ地図を見比べるとおもしろいです。

高専プロコン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 高知高専>

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