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

高専プロコン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 実現」

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

ご案内いただいｔ製作工場！ キロ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道場のページを開きます。
（ソース 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つ星オープンデータ対応一覧表」

小学校での国語と英語と絡めたプログラミング。
IchigoJamを使って、アルファベットとローマ字に親しんでもらう計画。
「小学校で教えるローマ字は日本式で決まり！ IchigoJamプリント「ローマじでうつ、カタカナ - こくごコース」と授業計画例」

思いの外、奥深かかったローマ字、日本式ローマ字にちゃんと対応したバージョンへとバージョンアップを決めました。 先行して、まずはブラウザで動くIchigoJam「IchigoJam web」、未対応だったローマ字に対応です！（カナ切り替えは、CTRL+SHIFT）

「IchigoJam web」

今までのローマ字入力では、入力中のアルファベットの表示をしていませんでしたが、方式変更！

ローマ字、格段に打ちやすくなりました！

「IchigoJam web」とのプログラムのやり取りする、インポートとエクスポートもカタカナに対応。 全角でも大丈夫！日本語混じりのプログラムいろいろ、どうぞ思う存分作ってみてください！

links
- 訓令式に準拠した「日本式ローマ字のづづり方」と差分でまとめた「ヘボン式ローマ字」

終戦直後の1946年「新かなづかい（現代かなづかい）」が内閣告示。
百人一首でおなじみ、平安時代初期から続く実際の綴りに基づく、歴史的仮名遣いから主役交代。
「当用漢字・新かなづかいが告示される：日本のあゆみ」

仮名遣い変遷のまとめは、1893年、当時の文部大臣、井上毅による歴史的仮名遣いへの諮問から始まっている。
ややこしい仮名遣いのせいで、諸外国と比べ、学習に遅れを取っているのではないか？
「文化庁 | 国語施策・日本語教育 | 仮名遣い資料集（諸案集成）」

歴史的仮名遣いの難しさを体験できるクイズアプリを q4.js で作ってみた。

「歴史的仮名遣いクイズ」（仮名遣いCSVオープンデータ(CC0) - 現代仮名遣い：文部科学省）
出題は10問、一発正解率を競おー！古文の先生にやってみてもらおー（棒引き仮名遣い）
50%超えるのもなかなか難しい。

「業」は歴史的仮名遣いでは「ごふ」
現代仮名遣いでは「ごう」と綴り、「ごー」と読みます。
読みやすく改定するはずの現代仮名遣いで、なぜ、よみと綴りが違うまま残ったのか！？

実は、1904年〜1909年、棒引き仮名遣いと呼ばれる、読みをそのまま仮名遣いとする方式が小学校で採用されていたが、強い反対によって廃止。（1900年 小学校令施行規則（抄）（明治三十三年八月二十一日文部省令第十四号）、詳細な記述はなし）

（仮名遣い対照表 - 仮名遣いまとめより）

「1911年 点字説明 : 日本訓盲、文部省」
長音記号「ー」を病気に「びょーき」として書くとある（右下）
「ょ」を「び」の右下に小さくつける表記方法もおもしろい！

行動に基づくべし（ヅは、ダ行＋濁点）

点字は、その後1946年、現代かなづかいが告示後もこの部分が改定されないまま今に至る。

ローマ字も「ローマ字のつづり方（訓令式）」として告示されたのが、現代かなづかい告示の9年前の1937年で、その後改定なし。

1986年時、現代かなづかい告示後、40年経過するもすっかり定着していたため、現代仮名遣いはほぼ変更なし、そこから更に30年以上経った今も違和感はない。 学びやすさで言えば、「読み」との区別を学習する必要がない「棒引き仮名遣い」に軍配が上がりそうだが、日本語の歴史的な良さを遺す「現代仮名遣い」のバランスが良かったのだろう。

であれば、かつての混乱期の名残りを残している「ローマ字」「点字」の方を改定した方がいいように思う。（本来は、1946年時にやっておくべきだった）

以上踏まえて、小学校で学ぶローマ字としては日本式を推したい（ヘボン式は英語で触れる）
「小学校で教えるローマ字は日本式で決まり！ IchigoJamプリント「ローマじでうつ、カタカナ - こくごコース」と授業計画例」

（仮名遣い・点字・ローマ字にまつわる年表、一部）
1878年 石川倉治氏、仮名文字会に出席して表音文字の研究を始める
1890年 東京盲唖（もうあ）学校の石川倉治氏が考案した点字配列が採用（日本点字の父）
1900年 《小學校令施行規則》漢語は表音式、和語は歴史的仮名遣という手法が取られる
1901年 官報に「日本訓盲点字」掲載（原案ブレイユ）
1911年 点字説明 : 日本訓盲、文部省
1937年 内閣 日本式とヘボン式が融合する形で「ローマ字のつづり方」を告示（訓令式）
1946年「新かなづかい（現代かなづかい）」が内閣告示
1986年「現代仮名遣い」内閣告示

links
- iPadで見る百人一首
- シンプル化を突き詰めた「決まり字百人一首」と読めない昔の百人一首
- スマホ・タブレット・PC対応、シンプルな4択クイズフレームワーク「q4.js」と「クイズ Ichigo Q」
- 訓令式に準拠した「日本式ローマ字のづづり方」と差分でまとめた「ヘボン式ローマ字」

学習を簡単にゲームっぽく楽しくする手法、クイズ。
シンプルなJavaScriptの4択クイズフレームワーク「q4.js」を作りました。

「クイズ Ichigo Q - q4.js」

特徴は、CSSを使った、そこそこデザインとマルチプラットフォーム対応なレスポンシブ対応。
縦長スマホからタブレットや大画面PC、iframeによる埋め込みまで対応したシンプルなコード、ぜひ改造元として活用ください。

Chromeの開発ツールのこのボタンを押すと、いろんな大きさをデバッグできます。

横長から

縦長まで、どんな大きさでもOK！

こちらがメインのjsプログラム。タイトルや、問題文、クリア後の処理を startQuiz に渡すだけ！
まずは、単にクイズを追加、変更するところから始めましょう。
CSSをのぞいて、色を変えてみるのもいいですね。

<!DOCTYPE html><html><head><meta charset="utf-8"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/> <meta name="viewport" content="width=device-width"/> <title>クイズ Ichigo Q - q4.js</title> <meta property="og:image" content="q4js.png"/> <link rel="apple-touch-icon" href="q4js.png"/> <link rel="stylesheet" type="text/css" href="q4js.css"/> <script src=fukuno.js></script> <script src=q4.js></script> <script>"use strict" window.onload = function() { // タイトル var title = "クイズ Ichigo Q" // 問題文、正解、誤答3つ以上いくつでも var quiz = [ [ "IchigoJamでLEDをつけるには？", "LED1", "LED0", "PRINT1", "CLS", "LED" ], [ "IchigoJamの誕生日は？", "4/1", "1/5", "10/15", "10/10", "1/1", "12/31" ], [ "PEEKコマンドと同じ働きをするコマンドは？", "ASC", "CHR$", "STR$", "POKE", "CLS" ], [ "複雑すぎる式を実行しようとしてでるエラーは？", "Complex expression", "Syntax error", "Out of memory", "Too long", "Illegal argument", ], [ "IchigoJamのプログラムで使える最大サイズは？", "1024byte", "512byte", "4KB", "32KB", "1000文字", "100文字" ], [ "ALT+Cででるキャラクターは？", "ネコ", "イヌ", "宇宙人", "ハート", "宝箱" ], [ "PRINTコマンドの省略形は？", "?", "PRT", "println", "print", "P" ], [ "LCとは何の略？", "LOCATE", "LLC", "LOCATION", "LOCALIZE", "LLC" ], [ "変数の最大値は？", "32767", "32768", "255", "65535", "30000", "1024" ], [ "IchigoJamの名前の由来は？", "1,500円", "15,000円", "福井の特産物", "開発者の誕生日", "CPUの型番" ], ] // クリアした時 var callback = function() { // 即、ジャンプしたい場合はこちら // location = "https://fukuno.jig.jp/2355" // ダイアログ形式で尋ねたい場合はこちら if (confirm("クイズフレームワーク q4.js についてくわしく知りたい")) { location = "https://fukuno.jig.jp/2355" } else if (confirm("こどもIchigoJamについて詳しく知りたい")) { location = "https://ichigojam.net/" } else if (confirm("もういちど？")) { location.reload() } } // クイズスタート startQuiz(title, quiz, callback) } </script> </head><body> <div id=head>第1問</div> <div id=main> <!--<div id=ind class=indcorrect></div>--> <div id=ind class=indcorrect>正解</div> <!--<div id=ind class=indincorrect>不正解</div>--> <div id=q>魁のよみは？</div> <div id=ans> <div id=ans1>さきかけ</div> <div class=correct id=ans2>さきがけ</div> <div id=ans3>ささき</div> <div class=disable id=ans4>がけがけ</div> </div> </div> <div id=credit> <a href=https://fukuno.jig.jp/2355>CC BY fukuno.jig.jp - 4択クイズアプリ framework q4.js</a> </div> </body></html>

HTML、必要な要素を構造化して記述。
JavaScript、シンプルに呼び出すだけ。startQuiz のプログラムも64行と短い！(see q4.js)
CSS、画面幅や高さを100とするvwやvhをレイアウトやフォントの大きさの単位として使い、media query の min-aspect-ratio を使って、入れたい文字数を確保するのがポイントです。（see q4js.css）
（q4js.zip - まとめてダウンロード ZIP）

あけましておめでとうございます！
今年の一日一創も、よろしくおねがいします。

「nenga2019」 - framework websarasa.js
こどもパソコンIchigoJam の IchigoJamフォント と websarasa.js を使った年賀アプリ！

本サイト「福野泰介の一日一創」遅ればせながら、ようやくAOSSL（Always on SSL / 常時SSL）にしました。 無償で使えるSSL Let's Encrypt と、軽量webサーバー Nginx で、Javaで開発する自前webアプリケーションサーバー Zerosen へ受け渡す形で実現。

従来の非URL http で始まるアドレスへのアクセスは、https を付ける形でリダイレクトするので、基本的には動くはずですが、混ぜるな危険のSSLの仕組み上、アプリが動かなくなっているものは、順次修正していきます。

アドレスが変更になったことから、Facebookのいいね数などがリセット。心機一転、リスタート。ひとまず、ソーシャルボタンを外したところ、ずいぶん軽量になりました！

「日本の自治体「Webの安全」対策率」
1年ぶりに調査してみた、地方自治体webサイトのAOSSL化状況。
2017年12月には54自治体、2.8%から、306自治体15.9%まで大幅増とはいえ、対策は遅い。
「Webの安全、準備できてますか？ 2017年はHTTPS標準化元年 地方自治体対応率はわずか1.5%」

SSLの普及率、世界平均69.9%、日本平均62%、アメリカはすでに82%！（2018年5月の調査）
「日本のHTTPS導入、普及しつつもまだ不十分 – Anderswodenkender – Medium」

オープンデータ伝道師＆地域情報化アドバイザーとしての活動にも力が入ります！

links
- 2012年 2012年のテーマ「一日一創」
- 2013年 じゃみじゃみ年賀アプリでスタート、2013年の一日一創
- 2014年 セマンティックWeb元年、一日一創第三章のテーマは「つなぐ」
- 2015年 創造は力なり スロットおみくじハードウェアで占う2015年
- 2016年 起動10秒！IchigoJam BASIC、PC用のOSベータ版リリース！ IchigoJam PC
- 2017年 BIG SCREEN IchigoJam New Year Update!
- 2018年 Happy New Year 2018! Starting with Glasses! 新メガネで迎える新年

すみません！消火栓探しアプリ、つつじバスモニターが動いていませんでした。
原因は、APIKEYと中使っているプログラムのモジュール名の衝突。

ブラズザ上で動作するアプリ、webアプリは、ブラウザのバージョンアップ、使っているAPIの仕様変更や、障害などに引きづられる運命にあるので、定期的なメンテナンスが欠かせません。

「findhydrant 消火栓を探す - odp 」
雪で埋まった消火栓は、火災時の消火活動に支障が出るため、危険です。優先的に除雪しましょう。 近くの消火栓を掘り起こしに探検するのも楽しいですよっ。今年の鯖江、活躍するほど雪は振るのか！？

「鯖江つつじバスモニター / 公共交通IoTリアルタイムオープンデータ」
鯖江市のIoTバス、どこにいるか？何人乗っているか？がリアルタイムオープンデータとなっています。過去データを探索して、機械学習(AI)に使うのも楽しそう。

消火栓を探すアプリ、odpで、消火栓オープンデータを5つ星オープンデータ化するとすぐに活用可能です！ 雪が降る自治体の方、ぜひご検討くださいー

jig.jp 2019年度入社予定な内定者さんとの鯖江合宿。

集合は鯖江駅！

まずは、鯖江駅構内の階段を登った駅2Fライブラリーカフェ「te to te」で作戦会議

「サバエシュー」で栄養補給。

つつじバスに乗ってみます。

乗降数をリアルタイムにオープンデータ化しているシステムは、IchigoJam x sakura.io 製！
「福井県鯖江市における「バス乗客リアルタイムオープンデータシステム」の事例紹介」

ちょっと乗るつもりが図書館まで

図書館から徒歩15分ほどで到着、水落駅

身近なG空間データ、消火栓を発見！

福井鉄道、見える景色がスリリング

商店街メインストリートのバス停

商店街内、タケベ無線にて、美しいパソコン、MSXの動作品！カナ配列が50音順です。

ここタケベ無線は、鯖江産パソコン、IchigoJam店頭販売の1号店！

夜食に福井の冬の名物、つるっとおいしい、水ようかん！

さくらインターネット高火力サーバーを初契約！80万円ものGPUを搭載した、マシンがなんと1時間357円でレンタル可能！
CPU（Xeon E5-2623 v3 4コア ×2）に、9.3TFLOPSを誇る、GPU（NVIDIA Tesla P100 x1、時価80万円!）というスペックは、まさに、高級ゲーミングPCの計算毎秒10兆回クラス！

nVidiaのGPU、CUDA対応のffmpegを使った動画変換をコンパイルして、比較してみましたが手元の Mac Book Proの倍ちょっととそこまで高速化しませんでした（うまくいってなかったかも？）
CUDAを使ったプログラムの拡張子は、.cu 、100万個の並列計算するサンプルプログラムはサクッと動作。また時間を見つけて、超並列プログラミングにも挑戦しなくては！
「CUDA 7.5 をWindows10にインストールし、Sampleコードを実行するまで - Qiita」

鯖江といえば電脳メガネ！
高火力サーバーを使って、機械学習スタート！普通のパソコンでは1日がかりなところ45分で終了！

一晩使った高火力、切り上げとなって7時間分、2,499円ナリ

こちら巡った鯖江を題材に、 Vue.js を使って、webアプリ開発

サクっとつながる、Node.js を使ってつくったwebサーバープログラムとjsのwebアプリとIchigoJam！
jsアプリから小型WS2812Bの8x8マトリクスを自在に表示！
JavaScriptを使って、PCからフィジカルになにか表示するのに便利です。
「IchigoJamでパソコンとUSBシリアル通信。Node.jsを使うとキーボードとモニタいらず – しずかなかずし」

動いている様子！JavaScriptから使うかんたんフィジカル端末としてもどうぞ！
こちらWS2812B 8x8制御用のIchigoJam BASICのドライバです。

10 N=64 20 POKE#700,240,181,68,24,N*3,32,12,73,114,182,128,37,35,120,1,52,255,34,74,96,3,39,10,38,43,66,1,208,10,39,3,38,1,63,253,209,0,34,74,96,1,62,253,209,109,8,239,209,1,56,234,209,98,182,240,189,0,0,1,80 30 v=10 40 D=#900 50 LET[0],0,0,0 60 FORH=0TO64-1 80 IF PEEK(C*8+H/8)>>(7-H%8)&1 POKED+H*3,L/10%10,L/100%10,L%10 ELSE POKED+H*3,0,0,0 90 NEXT 100 U=USR(#700,D)

「C=ASC("A"):L=800:RUN」と改行をコマンドとしてシリアルで送ることで、その文字を指定色で表示します。

ラポーゼかわだ、宿泊者は無償で使えるステキルーム！

2020年度の新卒採用もエントリー受付してます！
「2019新卒エンジニア募集！ 無いものを創ろう - asm15 supported SREC format!」

算数が嫌いな小学生が多いことにショックを受けたので、算数プログラミングシリーズを増やします。
テーマは「円弧と面積」
津幡町のまちなか科学館の万華鏡が気に入ったので、websarasaを使っています。

「fillArc - websarasa.js」
こちらJavaScriptのソースコード、今回はセミコロン、辞めました。（JaovaScript Advent Calendar 2018）

var main = function(scr) { scr.loop = function(g, ts, dt, vw) { var speed = 60 var deg = ts / 1000 * speed % 360 // var deg = 120 // var deg = 240 // var deg = 0 g.setColor(255, 255, 255) // 背景 R, G, B g.fillRect(0, 0, 1000, 1000) // x, y, width, height g.setColor(250, 220, 0) // R, G, B g.beginPath() g.moveTo(500, 500) g.arc(500, 500, 100, 0, Math.PI * 2 - deg / 360 * Math.PI * 2, true) g.fill() if (deg == 0) deg = 360 g.setColor(0, 0, 0) var m = 10 * 10 * Math.PI * (deg / 360) g.fillTextCenter("angle:" + fixfloat(deg, 1) + "° area:" + fixfloat(m, 0), 500, 500, 19) } }

degが円弧の角度。経過時間(msec)を表すtsと動く速度speedを使って、じわじわアニメーションさせています。
プログラムであれば、ひとつひとつ手描きするより圧倒的に楽ですね！

var deg = 120 と角度を指定すると、アニメーションを止めてじっくり観察することができます。
思う存分いじり回してください。

var deg = 360 とすると円弧は消えてしまうバグを発見。
0度か360度かの二者択一、360度で円になる方を選びました。（if (deg == 0) deg = 360）

プログラミングをしていると、いろんな判断の連続です。
間違いはありません。結果は瞬時に返ってきます。
最終的に自分で決めたものが、正解と言えるかもしれません。

プログラミング教育が、算数嫌い低減のきっかけとなりますように！
リクエストなど、Facebook/Twitterなど、受付中です！