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

高校生から学ぶ金曜日、TensorFriday、ディープラーニングでオープンデータが欲しくなる

2018/05/18
#opendata #sabae 

TensorFlowで計算する、1+1」で止まっていた機械学習の学習。
高校生Masashi氏をお迎えしてのTensorFlowを学ぶ金曜日、TensorFridayの第一回目の開催!

人間の脳のようにコンピューターに学習させてみるのが機械学習(マシンラーニング)。機械学習の一種、ディープラーニングに便利なオープンソースなライブラリ、TensorFlow(テンソルフロー)。

入力と出力の間に中間層をつくって、それぞれに重みを掛けバイアスを足すことで伝搬させるニューラルネットワーク。 中間層が2層以上あるニューラルネットワークを使った機械学習をディープラーニング。

概要を聞いたら、とりあえず動かす。
TensorFlowとPython3をインストールして、レゴのロボットによる色判定に使ったサンプルプログラムのパラメータをいじって精度アップトライ。 中間層の数を増やしたり、学習回数を増やしたり、あれこれいじって遊んでみます。

Model restored. 学習結果 test dataでの精度 96.49999737739563 result: [[0.26694813 0.13882981 0.14053437 0.15240924 0.14337103 0.15790743] [0.26694813 0.13882981 0.14053437 0.15240924 0.14337103 0.15790743] [0.26694813 0.13882981 0.14053437 0.15240924 0.14337103 0.15790743] [0.26486809 0.13913066 0.14082932 0.15404477 0.14392366 0.1572035 ] [0.26486809 0.13913066 0.14082932 0.15404477 0.14392366 0.1572035 ] [0.26486809 0.13913066 0.14082932 0.15404477 0.14392366 0.1572035 ] [0.26709853 0.13883259 0.14053056 0.15244703 0.14338787 0.15770341] [0.26709853 0.13883259 0.14053056 0.15244703 0.14338787 0.15770341] [0.26709853 0.13883259 0.14053056 0.15244703 0.14338787 0.15770341] [0.26667621 0.13883541 0.14053443 0.15241994 0.14335514 0.15817887]]

サンプルは中間層が1層。正解データ付きのテストデータを流して、正答率でチェックします。(上記の場合、96.5%)

学習させた重みとバイアスを使ってマイコン内で計算させれば、学習結果をロボットでも活用可能!(IchigoJamでもやってみたい!)

中間層を2層にしてディープラーニング化してみたのがプログラムがこちら

w_h = tf.Variable(tf.random_normal([4, num], mean=0.0, stddev=0.05)) b_h = tf.Variable(tf.zeros([num])) w_h2 = tf.Variable(tf.random_normal([num, num], mean=0.0, stddev=0.05)) b_h2 = tf.Variable(tf.zeros([num])) w_o = tf.Variable(tf.random_normal([num, 6], mean=0.0, stddev=0.05)) b_o = tf.Variable(tf.zeros([6])) h = tf.sigmoid(tf.matmul(x, w_h) + b_h) h2 = tf.sigmoid(tf.matmul(h, w_h2) + b_h2) y_hypo = tf.nn.softmax(tf.matmul(h2, w_o) + b_o)

taisukef/TensorFriday01 - GitHub

データがないと始まらない、ディープラーニング活用。いろんなオープンデータが欲しくなります。


データ集めといえば、同日おじゃました「福井高専アマチュア無線研究会 - Ja9ydb」。 刻々と変わる気象状況を入力に、使用帯域を出力にして、より遠くまで届く電波状況をディープラーニングするとか使えるのかも。

次回のTensorFriday#02では、データづくりや、おもしろデータを持ち寄って、いろいろ予測にトライします。

links
- 機械学習でロボット制御してみた(2) EV3 & TensorFlow - 広く浅い高校生のブログ
- TensorFriday #01 - connpass
- 高卒でもわかる機械学習 (0) 前置き – 頭の中に思い浮かべた時には
- MisakiMa/TensorFriday01

鯖江の市長さん、ニューヨークへ行く!こどもプログラミングで地方が変わる、EDIX&自治体総合フェア!

2018/05/17
#IchigoJam #IoT #opendata #sabae 

EDIXと同時開始、自治体総合フェアにて、鯖江市長と対談。
自治体総合フェア2018 自治体カンファレンスで対談してきました | 『さばえ.jp』百さんのブログです

生き残るのは、変わり続けられる自治体のみ。

2010年のオープンデータ提案から8年、誰もが幸せになれる都市、インクルーシブシティ鯖江の実現へ!?
ものづくりのまち、社長率ナンバーワン、女性活躍、高齢者元気な高年大学、そして、こどもプログラミングに、障がい者に寄り添うまち。
緊縮財政の中、一見実現困難なゴールも、未来のITを信じて設定することで、人の集まるまちづくり!

鯖江の市長さん、ニューヨークへ行く!
鯖江市長 国連で発表へ ものづくりのまちの女性活躍


EDIX、1Fのソビーゴ・ナチュラルスタイルブースへ、どうぞ!
ますますおもしろい、こども起業家創出のきっかけづくり、KidsVenture!


こどもの成長に合わせた、三段階。鍵は、手軽に自分のものにできること。
上下左右とABボタンだけでプログラミング、IchigonQuest
アルファベット大文字だけでプログラミング、IchigoJam BASIC
プロシージャーやクラスを使ったプログラミング、IchigoLatte (ECMAScript)
いずれのIchigoDakeも980円!
980円のIchigoIgaiとキーボード、テレビがあれば開発環境が揃います。
IchigoDake


いちごー(15,000円)ではじめる低消費電力低価格、本格IoT、IchigoSoda。
簡単!低予算IoT入門、共立電子さんによる信号機デモ、KidsVentureコーナーに!

高度情報化社会、すべてのこどもたちやもちろん大人に必須な情報セキュリティスキル。体験が一番。
1時間半でわかる叡智の結晶「IoT」 - IchigoJam x sakura.io 情報セキュリティ実習 in 高知高専


IoTをもっと簡単に、IoT.IN() と IoT.OUT という新命令搭載、IchigoJam 1.2b IoT!
数の受信や、数の送信用のショートカットコマンドで、センサーの値を送ったり、値を受け取ってネットからロボット制御したりが超簡単。 KidsVentureブースにて、先行体験ください!


ソビーゴロボットの授業風景。


大きなダンボールロボットが目印、ソビーゴブースへどうぞ。


IchigoJamのロゴ画像は、オープンデータ!


2F、IO-DATAブースでは、IchigoJam RPiの展示と1日2回のミニセミナー。


今の小6が受ける大学入試では プログラミング が基礎科目に!?本日最終日 松田校長 も登壇、教育EXPO「学びNEXT」へぜひどうぞ!
こどもプログラミングは、国家プロジェクト。首相「プログラミングは現代のそろばん」

EDIX最終日、5.18 15:00-、前原小学校、松田校長も登壇!
AI・IoT時代に向けた、これからのプログラミング授業 ~大胆に、自由に、思いきり!実践しよう~

2020年以降、プログラミングスキルをもった小学生がどんどん誕生する社会。これとIoTを機に、それより上の世代は、大人も子供も大学生もプログラミングを学んでおきましょう。
福井県庁職員向けIoTプログラミング講習会、世界初のIchigoSodaワークショップでの気づきと対策


東京ビッグサイト、自治体総合フェア教育ITソリューションEXPO、共に18日まで!

PCN i18n MTG at Roppongi with Creative Pasta!

2018/05/16
#IchigoJam #js #china #africa #opendata 

i18n means internationalization (i + 18 charaters + n).
Our PCN mission is programming for all kids all over the world.
English meeting with PCN member of Beijing, Ivory Coast, المملكة المغربية‎, Dziko la Malaŵi and 福井県.

We got translation apps (UDTalk etc).
So there are no borders about i18n communications!


PCN Beijin, République de Côte d'Ivoire, Katsuyama & Sabae.
Let's create kids creators!

At Gaston & Gaspar, you can create your pasta!

English menu is available also!


Created pasta 1.


Created pasta 2.


"Pasta Creation Order Sheet - unoffcial web app version"
Foods makes you. You can choose your future.
This is the first step. I want to to add links to detail data of each foods by opendata.


Let's begin programming with fun without borders!

links
- PCN Programming club network
- Gaston & Gaspar
- Beiging China will join to the PCN! We started next contest for the World, Please support us! / ついにPCN北京も加わり、いよいよ世界に広がる こどもプログラミング!コンテスト協賛にぜひご協力ください! – about yrm
- みんなもやってみよう「PCN〇〇」!新たに加わるコートジボワール、モロッコ、マラウイ、旭川。EDIX 学びNEXTにぜひどうぞ! – about yrm

学外連携、情報セキュリティ人材育成プログラムで育む高専生と地域のこどもたち

2018/05/10
#health #opendata #kochi #kosen 

「学外と連携するセキュリティ人材育成プログラム」に取り組む高知高専!
今年からスタートした、新コースソーシャルデザイン工学科情報セキュリティコースの3年生への講義と、情報セキュリティに関する講義見学&情報交換にやってきました。


高知高専、岩崎さんによる1年生向け講義見学。一斉講義座学とグループワークのバランス、大事ですね。


ヘマタイト 茨木さんによる講義見学。ラズパイ、ロボット、SSLを使った情報セキュリティ実習。
町に繰り出し、町の安全を脅かす「脆弱性」を探す遠足とかもいいかも。


企業や外の組織との連携によって最新の情報セキュリティを学んだ高専生が、小中学校など外へと出ていって活躍するモデル! 卒業後も地域の情報セキュリティ力アップを目指すという事業に取り組んでいる高知高専。 すべてがIT企業と化すると言われて久しい現代、地域のIT力低下は日本の地盤沈下にも通じかねない。
security|情報セキュリティコース|高知工業高等専門学校

セキュリティとは守る技術。
情報セキュリティとは、情報を盗まれぬよう(機密性)、壊さないよう(完全性)、いつでも使えるように(可用性)にする技術。

情報かデータか。
個人的には情報は主観的な言葉なので、データセキュリティと呼んだ方が、守るべき対象がはっきりしてしっくりくる。 データの属性や量によって、どういう対象にとってどの程度の利用価値がでてくるかもまたデータとして表せる。

オープンという、攻めの情報セキュリティ。
オープンデータは、データを出処を明示しつつ、無制限なコピーを許諾することで機密性と完全性と可用性を低コストで実現する情報セキュリティ技術とも言える。 攻殻機動隊に登場する「攻性防壁」という好きな響き。 攻撃が最大の防御なることもあり、創造という武器によってガンガン戦う情報セキュリティ人材を理想としたい。


お昼は、学食!


メニューの栄養成分算定値表がステキ!ホットな「カロリー内訳計算機」でバランスと食物繊維含有量をチェック!


このカレーライス、ちょっとたんぱく質が少なめ。カロリーの計算があわない点は完全性に欠ける。
どうしてもエラーが混ざるデータの修復には、紙からデータへ、データの可用性を上げることが慣用。
学生と先生の健康のためにも、学食オープンデータをオススメしたい。


カツカレーだと脂質が多め。こっちはカロリー計算もぴったり合う。


いろいろかわいい高知高専の学食。


南国市からバスで高知市、こちらも南国風。


高知に来たらここに来なきゃと、ひろめ市場。屋台村的フードコートないい雰囲気でした。


塩で食べる初ガツオ!・・・でも、8月下旬から9月の戻りガツオの方がおいしいという話も
「初ガツオ」と「戻りガツオ」……あなたはどちらがお好み?(tenki.jpサプリ 2015年09月05日) - 日本気象協会 tenki.jp


なんと食べるウツボ!意外と美味。


情報セキュリティ人材を生み出す最適教材を研究する、高専を超えた高専つながり。地方創生の要は高専にあり!地元産業団体と自治体との連携をゆるく強化する県域コンテストがオススメです!(福井県では、越前がにロボコン!)


タイピングのスコアなど、一斉に送られてくる数をランキング表示するwebアプリを準備!


明日はいよいよ情報セキュリティ実習として、IchigoSodaでIoT開発体験!

links
- 資料10 国立高専の取組み(教育の質保証と貢献)
- 情報セキュリティ人材育成プログラム|東京都立産業技術高等専門学校
- 高知高専

健康を計算しよう!カロリー内訳計算機、バランスと食物繊維含有量をチェックする食べるをハックするカロリー編

2018/05/09
#js #health #opendata 

あまり気にしてこなかった、食品表示。
完全食の実現、COMPを見てからはまっている自分探しの旅、食べるをハック第三弾。

カロリーの計算式

カロリー(kcal) = 蛋白質 x 4 + 脂質 x 9 + 糖質 x 4
* 糖質 = 炭水化物 - 食物繊維
* 量はg、係数はkcal/g

炭水化物の内、消化できるものが糖質、そうでないものを食物繊維と呼びます。

食品表示で、炭水化物の量しか書いてないもの食物繊維量が気になって、作成した計算アプリ。

カロリー内訳計算機
こちら牛乳100gを計算してみた例、全体バランスから脂質が多め、糖質が少なめことわかります。 1日でトータルバランスを取ることが大事な様子。


こちらが完全食 COMP を成人男性1日分2,200kcalとったときのバランス。推奨量ぴったり。
COMP 完全食」栄養素データより


UHA味覚糖コラボのグミ状完全食、COMPグミの試食会でも好評でした!
持ち込んだver1.3とver1.4の食べ比べ、体においしいと聞いてからだと、どちらもおいしく食べられる気がします。


趣味・研究が大好き、没頭したい! → 食事を効率的に済ませたい。
好きなことを好きなだけしたい!そんな人にぴったり!


完全食COMPは、なぜ開発したのか
「手軽で健康的な食生活」を叶える食品が世の中に無かった。
無いものは創る精神!


COMPもガレージでスタート!
まだまだ続くCOMPのチャレンジ、まだ発展途上という栄養学と合わせ、ますますの進化に大いに期待です。


講演後、大事な蛋白質、たっぷりいただきます(甘めのタレにはきっと糖質も多め?)
塩分が多めな味噌汁は、汁を残す主義になりました。(参考、塩メモ


COMP、鈴木社長と!

朝と昼の食べたものの栄養素を足せば、夜食べるべきものが決まりそう。
外食も売ってる食品も、オープンデータ化してもらえるとアプリで楽々管理できます。
栄養素のオープンデータ化、ぜひやりましょう!


salesforce.comさんでのIoT講座からの良いご縁、いただきました!

links
- 遺伝暗号コドンの衝撃、生物は超小型2bitコンピューター!? 食べるをハックする蛋白質DNA編
- 化学は自分の仕様を探るテクノロジー、食べるをハックする食塩編
- IoT for everyone! 大人IoTプログラミング体験 at Salesforce.com Tokyo Marunouchi

遺伝暗号コドンの衝撃、生物は超小型2bitコンピューター!? 食べるをハックする蛋白質DNA編

2018/05/03
#health #IchigoJam #opendata 

塩コントロールに続く、食べるハック第二弾は蛋白質とDNA。
人の体、水が7割、2割が蛋白質。

人に必要な五大栄養素(カロリー=糖質*4+脂質*9+蛋白質*4(kcal))
1. 炭水化物 エネルギー4kcal/g(消化される糖質のみ、消化されないものは植物繊維)
2. 脂質 エネルギー9kcal/g
3. 蛋白質 エネルギー4kcal/g
4. ビタミン(上記以外で必要な有機物)
5. ミネラル(無機物)

蛋白質(たんぱく質=プロテイン)とは、20種類のアミノ酸が50以上つながった立体構造を持つ分子機械。 生体内でさまざまな機能を発揮する。 体の全細胞内にある、生命の設計図、DNA。DNAの一部をRNAとしてコピーし、アミノ酸列にデコードして、蛋白質を生成する構造(リボソーム)はまさにコンピューター。

TCAGによるDNAに対応するRNAはUCAG。1つ4種、2bit。これを3つ1組にしたものをコドンと呼び、その組み合わせは64種類。20種のアミノ酸との対応も判明していたので、サブルーチンでつくるDNAの続きで、RNAデコーダーを作ってみた。

100 C="FFLLSSSSYY..CC.WLLLLPPPPHHQQRRRRIIIMTTTTNNKKSSRRVVVVAAAADDEEGGGG" 110 M=0:CLS 120 N=0:FOR I=1 TO 3 130 K=INKEY():IF !K CONT 140 POKE#A00+M,K:M=M+1 150 N=N<<2 160 IF K=ASC("C") N=N+1 170 IF K=ASC("A") N=N+2 180 IF K=ASC("G") N=N+3 190 NEXT 200 POKE#AC0-1+M/3,ASC(C+N) 210 GOTO 120

「RNAデコーダー」 - リボソームのデコード風プログラム
RNAの構成要素、UCAGを打ち込んでいくと対応するアミノ酸を表すアルファベットか終端コード"."が表示される。

コドン - Wikipediaより)

例えば、アミノ酸をつないでタンパク質を作ろうゲームに登場する、GSEIQPRという7つのアミノ酸の鎖でできたペプチド(50以上のアミノ酸列のものが蛋白質)、カルノシンを仮にRNAで表すとしたら

GGUUCUGAAAUUCAACCUCGU

となる(RUN on IchigoJam web
*蛋白質はメチオニンAUGから始まるものらしいので、実在しないDNA


多少のエラーにも対応できるコード体系。 DNAの中でアミノ酸に対応する部分(エクソン)は5%ほど、残りの部分(イントロン)もエラー耐性を高めたり、スキップの仕方で多様性を産んだりとおもしろい。 DNA末尾に TTAGGGTTAGGGTTAGGG... と無駄なコードを続けておくことでコピー毎に短くなっていくDNAを守る仕組み、などなど・・・。

なかなかうまいアーキテクチャーだな、と思うこれがコンピューターが影も形もなかった頃、自然界によって作られたものというのが信じられない。

分子機械、蛋白質、単純に50のアミノ酸を組み合わせ20の50乗、10の65乗とほぼ無量大数! ただし、機能する蛋白質には制限があり、失敗作は細胞を出る前に破壊される仕組みまである様子(ナンセンス変異依存mRNA分解機構)。 蛋白質の種類は数千万種類と言われ、世界中で解析が進むプロテインデータが「Protain Data Bank Japan」にて約14万のパブリックドメインな蛋白質オープンデータとして公開されている。

膨大なDNAから必要な部分をどう選んでいるのか?蛋白質の機能はどのように決まるのか?
自分という、一番身近で謎多きコンピューターのスペック解明という、楽しい旅!

links
- コドン - Wikipedia - 遺伝暗号、遺伝コード
- PDBj入門:PDBjの教育的コンテンツサイト - 蛋白質オープンデータ内
- 遺伝子の部屋
- 遺伝暗号を解読する鍵となる新メカニズムを発見  | 理化学研究所 (2014年6月23日)

福井県花粉オープンデータで12年分の花粉量まとめ、花粉予想プログラムで勝負!?

2018/04/27
#opendata #fukui 

ユニークなオープンデータが楽しい「福井県オープンデータライブラリ」に、花粉オープンデータ発見。 12年前の2007年から、今年の4/26分まで、CSVやRDFで取得可能です。


福井県花粉データまとめ(福井市)
スギ花粉とヒノキ花粉、12年分全部まとめてグラフにするアプリにしてみたのがこちら。だいたい2月後半から3月後半にかけて花粉症の人にとっては辛い日が続く様子。 今年は大雪などで、欠測日が11日あるので、最大や総和はもっと多かったかもしれません。


福井県花粉データまとめ(福井市) - 2年分のみ
去年との比較です。最大量が昨年の倍以上あります。多い日の数を数えるなどをしてみてもいいのかもしれません。


福井県花粉データまとめ(敦賀)
もうひとつの観測値、敦賀のデータは2015年まで。

花粉データの12年分、11年分使って機械学習など、予測アルゴリズムを設定し、12年分のデータで精度を確認。来年の花粉量予測で競う「花粉プロコン」とかおもしろいかも。

金曜夜に機械学習、TensorFlowで遊んでみる「TensorFriday #01(テンソルフライデー)」
めがね会館にて来月、開催です!

高専インターン募集開始!鯖江を鯖江でハックしよう / バスのスピードメーターアプリ

2018/04/16
#kosen #opendata #sabae 

今年も開催、jig.jpのサマーインターン!
全国高専から集まる16人、4人4チームに分かれて、企画・開発・発表までの3週間(2018/8/20-9/8)


大変だった開発、あっという間だった生活 - jigintern2017の日記」よりインターン開発風景

初週末には、ゲスト開発者を交えたハッカソンでも腕試し。
IchigoJamが産まれた町、鯖江。
未成年無料のファブスペースHana道場、子供エンジニアやシニアエンジニアに会えるかも?

日本初のオープンデータ都市となった、福井県鯖江市には、楽しいAPIが満載!
鯖江駅から高専も結ぶ、市営のつつじバスのAPI x D3.js で、こんなアプリがすぐできる。

鯖江つつじバス スピードメーターズリアルタイムオープンデータAPI使用
デザインベース「D3.jsでスピードメーターみたいなものを作成 - とあるSEの手順書

Swift/Kotlin/Javaを使ったスマホネイティブアプリで使い勝手を追求するもよし、PWAで手軽に使えるWebアプリづくりもよし、IchigoJamやラズパイでのIoT、オープンデータを活用した機械学習、xRに挑戦するもよし。

がっつり開発スキルをアップしたい人にオススメです!

jig.jpグループは、一般利用者向けに動画配信サービス「ふわっち」、オタク向けフリマアプリ「オタマート」など、スマホなどモバイルを中心としたソフトウェアを企画・開発・提供する会社です。(創業者、福野泰介は福井高専卒。エンジニアの8割が高専卒)

16期目を数える恒例の高専生向け夏のインターンシップ、今年もがっつり3週間開催いたします。全国高専から集まる16名が、4チームに分かれて企画・開発・発表までを体験するプログラムです。

弊社エンジニアや、ゲスト開発者を交えたハッカソンや、BBQ、メガネストラップづくり他、各種アトラクションも用意。初対面で自称コミュ障な高専生も、すぐに打ち解けている様子。

全国の情報系高専生、インターンシップご担当教員の皆様からのエントリー、お問い合わせをお待ちしております。

【募集要項】
■期間 8月20日(月)〜9月8日(土) 朝解散 (チーム開発の為、全日程の参加が必須です)
■場所 株式会社jig.jp(本店・開発センター)福井県鯖江市めがね会館
■応募要件
・高専生(本科・専攻科)であること(学科不問)
・プログラミング・ものづくりが好きであること(自分でつくったサービスを世の中に!)
・インターンシップ保険(傷害保険)に加入可能であること
■支給 往復交通費、宿泊費

選考、エントリーなど、詳しくは下記まで。
学生インターンプログラム2018 ~全国高専生向けjig.jpインターンシップ募集開始のお知らせ~

PWAでエッジ化するウェブ、JSこどもプログラミング「progrun」iOS11.3でオフライン対応!

2018/04/10
#web #js #progrun #opendata 

IchigoJam開発きっかけのひとつ、タブレット用こどもプログラミング環境、progrun

石川高専のインターンOB生と一緒に開発し、2012年の一日一創にてリニューアル。 親子体験会、2013年おもしろフェスタで子供100人体験、鯖江のシニア向け講座、鯖江市役所JK課向け、デザイナー向けにも活躍!福井県、鯖江市の写真オープンデータを使えるようにして、オープンデータ推進にも一躍担ってもらいました。
親子プログラミング教室子供100人体験シニアプログラミング教室JKxプログラミング

ネットワーク不要で使えて便利だった Application Cache API(廃止)が、PWA(Progressive Web Apps)となって還ってきました!(iPhone/iPadがiOS11.3から部分対応)

久しぶりに、progrunのメンテナンス(ServiceWorkerでのキャッシュと、manifest.jsonでアプリ設定対応)。ホームに追加して起動すると、以後、オフライン環境でも遊べます。(ネットワークへのアップロード、ダウンロードはまだできません。ローカル保存機能とかあるといいかも)

スマホ、タブレット、PC対応こどもプログラミング環境「progrun」PWA版 - src on GitHub

当時使っていた説明資料、アップしておきます。手軽なJavaScriptプログラミングはじめとして遊んでみてください。

progrunを作って試して分かったこと
- 文字を書くだけで、絵が出るテキストコーディング体験は新鮮で楽しい!
- 簡単に何度も作り直せるコンピューターものづくりの本質に触れてもらえた
- 小学生にとってアルファベットの小文字は馴染みが薄い(→ IchigoJam BASIC は大文字基本)
- プログラミングにハマル子は一定割合いる!
- 簡易環境では次のステップを示しづらい(複雑にすると入り口のハードルが上がる)
- タブレットを買ってあげちゃうと余計なことに使いそうで嫌という親の声(→ ネット不要のIchigoJam)

子供が何か創りたいと言ったらチャンス!(そもそも、子供はデフォルト、クリエイター)

links
- KidsIT - 子供とプログラミングが遠いという危機感
- なぜ今デザイナーにプログラミングなのか? P4D in FUKUI 開催レポート
- かんたんプログラミング環境「progrun」を使った福井県児童科学館での教室開催中(動画付き)
- 一見分かりやすいビジュアル言語 vs 想像かき立てるテキスト言語

Googleマップハンズオンの続き、地図内に鯖江市水位メーターの位置アイコンを全部置く方法

2018/04/09
#opendata #js 

鯖江市に試験設置中のIoT河川水位メーターに地図を加えてみます。
Googleマップハンズオンで、地図表示を習得したら、APIリファレンス「Google Maps JavaScript API」を見ながらガシガシ改造しちゃいましょう。

1つサンプルとして、よく使うアイコンを全部地図上に表示する方法を紹介します。

「鯖江市 水位メーター」(試験版)

使うAPIは、緯度経度の範囲を表す google.maps.LatLngBounds と、その範囲が入るように表示する map.fitBounds です。

var bounds = new google.maps.LatLngBounds(); for (var i = 1; i < sensors.length; i++) { var s = sensors[i]; var ll = s[4].split(","); var marker = new google.maps.Marker({ position: new google.maps.LatLng(ll[0], ll[1]), icon: "icon_waterlevel.png", map: map }); bounds.extend(marker.position); } map.fitBounds(bounds);

boundsをつくり、画面内に収めたいアイコンの位置情報を extend で範囲を拡張、最後に fitBounds で完了です!

アイコンとして、水位メーターを加工して、32x32のPNGを作成しました

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