福野泰介の一日一創 - 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 実現


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


ご案内いただい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道場のページを開きます。
ソース 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
こどもパソコンIchigoJamIchigoJamフォント と 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など、受付中です!

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