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

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を作成しました

鯖江駅から歩けるランチマップ by おてがるマイマップ - クリックして簡単なコメントを書いて即共有

2018/03/23
#jig #js #opendata #sabae #megane 

間もなく16期を迎えるjig.jp、今回は鯖江に全員集合してキックオフ!
いざこういう時にさっとランチ場所を伝える方法がないことに気が付き、マップを作成。
漠然としたデータから、誰かのためを思ったデータをセレクトすることで価値がでます。


鯖江駅ランチマップ」徒歩でいけるオススメスポット
「編集モード」ボタンを押して、いろいろ編集すると簡単にURLで共有できるマップができます。

利用シーンに特化したアプリづくり、大事ですね。
網羅的なオープンデータとの接続など、いろいろ拡張していけそうです。


この日、霧に包まれ幻想的な鯖江市、まるで、電脳コイルの舞台、大黒市のよう。


未来のSUI(Spatial User Interface)を先取りする、Windows MRによるVR体験会、人気でした!
VR出社も夢じゃない!

点字ファイルをユニコード点字に変換するプログラム

2018/02/12
#js #tenji 

6つの点で文字を表す点字は、つまり一文字6bit。コンピューターと相性が良いです。
2進数とプログラミングで解く点字

点字を表すファイル形式として使われているBES/BSE/BET/NABフォーマットなど。現代では世界共通で使われる文字コード「ユニコード」に点字が含まれるので、普通のテキストファイルでもやりとりできますが、いままで作られた点字ファイルには変換が必要です。

公表された著作物は点字への翻訳は無許諾で可能という、著作権法で特例があります。

第三十七条 公表された著作物は、点字により複製することができる。
2 公表された著作物については、電子計算機を用いて点字を処理する方式により、記録媒体に記録し、又は公衆送信(放送又は有線放送を除き、自動公衆送信の場合にあつては送信可能化を含む。)を行うことができる。
著作権法より)

音楽教育と特別支援学校から辿ったところ、点字楽譜というIchigoJamのMMLのような音楽表記方法を発見。視覚障害者の方向けに楽曲が点訳されているサイトがありました。
点字楽譜のページ

こちらで使われているファイルなどを、点字に変換するコンバーターを作成。

tenji converter - 点字変換」 CC BYのオープンソースです

プログラミングや電子工作が活躍できそうな予感はしますが、あまり点字に触れる機会がないので、どういうニーズがあるか分かっていません。 よかったらリクエスト、お送りください!

links
- 点字リーダー 一日一創2012
- 点字ライター 一日一創2012
- 2進数とプログラミングで解く点字 - IchigoJam

旭川高専出身、Viscuit開発者の原田さん開発、3次元版タートルグラフィック、トンボグラフィックがおもしろそう!ラインアートの3次元版(立体視用)

2018/01/15
#KidsIT #art #kosen #js 

北海道の離島、天売島生まれ旭川高専出身でこどもプログラミングアプリ「Viscuit」を開発・提供する原田さん、来福。 PC-8001をモニターなしでBASICを打ち込み、音でデバッグの話、おもしろい!

コンピューター、電子工作、粘土など、ものづくり話に花咲きます!

「右へ10、前へ20」などと亀を動かし軌跡で絵を描く、タートルグラフィックIchigoJamでの実装例)。これを3次元に拡張した亀ならぬ空間を飛び回るトンボグラフィックを旭川高専5年生の時に開発していたとのこと。 ダイヤモンドや、分子を短いプログラミングでさくっと表現できるとのことで、楽しそう!(実装かも、T3
過去に発明した変な言語1 - ビスケットのあれこれ」 - 原田さんのブログ

平行法や、交差法で手軽に(?)見られる3D(例、点で作った球)を、2012年一日一創のラインアートに適応。

LineArt3D」 - JavaScriptで作った、Webアプリ(オープンデータなオープンソース)

コンピューターの計算速度が上がり、部品が安くなって手軽になってきた Windows MRなどのVR。 先日、7歳以上向けのガイドラインが発表され、こども x VR の可能性もでてきたので、プログラミングで空間を自在に操るWOWなアプリもできちゃいますね!
「7歳未満には利用させない」など,施設型VRコンテンツの利用年齢に関するガイドラインをロケーションベースVR協会がリリース - 4Gamer.net

安いパソコンで、テキスト、2次元グラフィック、3次元グラフィックへと一気にステップアップできてしまう現代の子供達がうらやましい!
「jig.jp」福野泰介社長 ゲーム作りに夢中になった1冊|暮らし|ライフ|日刊ゲンダイDIGITAL

ベーマガイベント大盛況だっととのこと!コンピューターの楽しさは不変!

マイコンベーシックマガジン - Facebook

もっと楽するコンパイラ、WebAssemblyマシン語入門その3

2017/12/05
#asm #wasm #js 

IchigoJam web(ブラウザで動くIchigoJam)で使っているお気に入り技術、WebAssembly。
マシン語をバイナリで直接書いてみる第一回、初歩的なアセンブラ体験する第二回に続く第三回のテーマは、コンパイラです。

おさらいとして、前回のアセンブラで、param+10 を計算するプログラムを作ってみましょう。

正解はこちら

get_local $0 i32.const 10 i32.add end

paramが1の時、ちゃんと答は11と出ます。では、param+100 を計算するプログラムに変えてみてください。

おや、おかしいですね!?では、128にすると、今度はコンパイルエラーになってしまいます。

WebAssemblyのマシン語での数値は大きさによって1byteから5byteまで長さを変えて表します。最上位bitが1なら、次のbyteを読んで上位に追加していく仕組みになっています。 つまり、1byteで表せる数は、7bitで表せる-64〜63まで。100(2進数で1100100)はこの範囲を超えているので、上位bitを1にして、残りのbitを次のbyteで表すので、1 1100100 (e4) と 0 0000000 (00) となります。

WebAssemblyのコードを書き換えて試してみましょう。

20 0 41 e4 0 6a b

i32.const を表す 41 の後の 64 (=10進数の100) を、e4 に変えてその後ろに 0 を加えて「RUN」
ちゃんと答がでました!

このような計算をいちいち手でやらなくて済む方法は?・・・そうです、プログラムですね。
命令表から手打ちするのも面倒なので、短く楽にプログラムを書けるようにするソフトをつくりましょう。

コンパイラはじめのいっぽ
「P 3 +」と空白区切りで書いたら対応するアセンブリ言語を出力するものです。
※ P は、パラーメータ0を意味することにします

compilebtn.onclick = function() { var src = srcprg.value.split(" "); var asm = []; for (var i = 0; i < src.length; i++) { var s = src[i]; if (s == "P") { asm.push("get_local 0"); } else if (s == "+") { asm.push("i32.add"); } else if (parseInt(s) == s) { asm.push("i32.const " + s); } } asm.push("end"); srcasm.value = asm.join("\n"); }

簡単ですね。このようなソフトをコンパイラといいます。
掛け算とかいろいろ足したものがこちら「WebAssembly poor compiler」です。

WebAssembly poor compiler

「P 3 +」と入力し「COMPILE」「ASSEMBLE」「RUN」と順に押して、答が出してみましょう。

課題:パラメータを自乗して1を足すプログラムをつくってみよう!

アセンブラも上記、大きな数値にも対応するよう改良してあるので、プログラムを確認してみてください。

次はこのコンパイラをもう一歩進めて、もっと自然な数式で書けるように改良してみます。
待ちきれない人は、どんどん進めちゃってください!

WebAssemblyマシン語入門
- ブラウザだけでOK! 1+1からはじめる、WebAssemblyマシン語入門その1
- プログラミングはプログラミングで楽をする、WebAssemblyマシン語入門その2
- もっと楽するコンパイラ、WebAssemblyマシン語入門その3

- 連載、IchigoJamではじめる、Armマシン語入門
1. はじめてのマシン語
2. ハンドアセンブルで超速計算!
3. マシン語メモリアクセスで画面超速表示!
4. マシン語でLEDを光らせよう!
5. 楽しさ広がるマルチバイトメモリアクセスとスタック
6. マシン語使いこなしTIPS
7. カジュアルに使うインラインマシン語
8. アセンブラを使って楽しよう
9. マシン語で高速SPI
10. マシン語を制するもの時間を制す
11. 画面をイチゴで埋め尽くす12の方法
12. レジスタ不足に上位レジスタとスタック操作

links
- WebAssembly Advent Calendar 2017 - Qiita 参加!

行政が人に合わせる時代へ - オープンデータ伝道師会

2017/11/22
#opendata #js 

ZOZOTOWNから登場、全身採寸IoTスーツ!
【ZOZOSUIT】服が人に合わせる時代へ - ZOZOTOWN
服選びから妥協がなくなるかも!?

行政サービスにも変革が必要、画一的で中途半端なサービスから、それぞれのライフスタイルに合わせたサービスへ。

世界最先端IT国家創造宣言」にて宣言された、オープンデータ化と官民連携によって達成する「人に合わせる未来の行政」。 その実現には、今やっている事業にプラスして、行政を大きくするのではなく、民で担えるものは積極的に停止し、スリム化することが必要です。

紙文化をスキップしたルワンダ、紙文化を引きずる日本。

既存の事業を地味に改善する方法を考える時間はないかもしれません。一度、試験的にやめてみて、問題の大小を確認してみてはどうでしょう? 課題を市民も一体となって認識することで、全く新しい解決方法が見えてきます。(障害者をテーマにアイデアソン by Code for Japan

健康管理とは関係ないと理由で廃止になった座高測定。
2014年に"座高測定"が廃止になった理由 | プレジデントオンライン | PRESIDENT Online
78年間、無意味に測り続けたコストは総額いくらでしょう?それは何に使えたでしょう?
今も失われ続けている「何か」まだまだたくさんありそうです。

オープンデータ100」と同様、「やめてもよかった100」事例を集め、どんどん廃止していきましょう。
AI/ロボティクスがどんどん進む今、過去に縛られている場合ではありません。

オープンデータ伝道師、明石高専卒業で明石高専から奈良先端大へ移った新井さんと!

オープンデータ伝道師会でも話題になったZaimの給付金オープンデータ。
もらえる検索」で検索するとトップに表示される官民連携記念アプリ。
よりわかりやすく給付金を日本語数字表記する機能を追加!

もらえる検索 / 給付金オープンデータ活用アプリ

こちら単体動作する、日本語数字表記に変換するアプリ(JavaScript実装、オープンソース)

日本語数字表記変換アプリ - tojpnum
例)1500000 → 150万円、75000 → 7万5千円、10,000,000 → 1000万円
日本語の区切りと合わないコンマ表記がわかりづらいという人、意外と多いかもしれません。

SoftBank Robot World 2017
ボストン・ダイナミクスのロボットくんを間近で見ることができました!(静態展示)
赤いボタンはドラえもんの尻尾と同様、緊急停止かな?

オープンデータはインフラ。
スマートシティ2.0、IoT、行政業務改革、AI/自動運転/ロボティクス、あらゆるフィールドに必要不可欠。
日本の余力と革新への近道、探していきましょう!

来週本番!越前がにロボコン試走会、得点記録システムにトーナメント戦績記録を追加!当日は鮮魚&越前がに祭「紅白味自慢2017」も!

2017/11/19
#KidsIT #js 

福井新聞本社内のホールで開催された、越前がにロボコンの試走会。
本番で使われるコースを使って、子供たちが実際に何度も走らせながら、調整してました。
自分なりに工夫して、あれこれ試す姿、頼もしい!

当日の組み合わせは未発表ですが、低学年の部、高学年の部、それぞれトーナメント形式で争われる越前がにロボコン
得点記録システムに、チーム名表示と、トーナメント戦績記録機能を追加!


小学生向けロボットコンテスト、越前がにロボコン、2017.11.26(日)開催!(9時開場、10時開会式)

なんと電動バイクzecOOで有名、znug design 根津孝太さんによるデザイン審査も!

福井の冬と言えば・・・

同日開催「福井県 越前・若狭 紅白味自慢2017|北陸新幹線で行こう!北陸・信越観光ナビ
越前がにと、越前若狭のおいしいお魚が食べられるイベント!

未来のエンジニア、小学生ロボコンの見学&福井の味覚ツアーへぜひどうぞ!

イベント設計に便利!タイムスケジュール計算機 timesum2

2017/11/16
#js 

イベント設計、何時に始まり、どのセッションに何分取って、何時に終えるか?
そんな時間の計算に便利な「タイムスケジュール計算機」を作りました。

タイムスケジュール計算機 - timesum2

使い方
1. 開始時刻をセット
2. 所要時間を分単位や、コロン付きの時分表記で時間で入力するとリアルタイム計算
3. 右側のコメント欄と共に、下のテキストエリアにコピペに便利な計算結果!

シンプルな、JavaScriptでつくったオープンソースなWebアプリ、好きなように改造、デザイン、命名し、コンピューターとプログラミングでできる便利を広めてください!

links
- timesum(元ネタ、一日一創をはじめた2012年の作品)
- 計算系アプリ in 一日一創2012
- 計算系アプリ(再まとめ中)

プログラミングはプログラミングで楽をする、WebAssemblyマシン語入門その2

2017/11/09
#asm #wasm #js 

前回「ブラウザだけでOK! 1+1からはじめる、WebAssemblyマシン語入門その1」では、マシン語の命令表からひとつずつ選んで数を書いてみました。 プログラムをこのようにマシン語にする作業のことをアセンブル(英語で組み立てを意味する)と言います。

数が多くなってくると、こうして手で変換するのは大変なので、プログラムを作って自動化しましょう。 今使っている環境の範囲だけで動く簡易的なアセンブラ「WebAssembly poor assembler」をJavaScriptで作りました。


WebAssembly poor assembler

こちら、前回はマシン語だった param+1 を計算するプログラムのアセンブリ言語プログラムです。

get_local $0 i32.const 1 i32.add end

「ASSEMBLE」ボタンを押すと、下に数字の並びに変換され、RUNで動かせます。

20 0 41 1 6a b

試しに、i32.add を i32.mul に書き換えて、ASSEMBLE、RUNしてみましょう。
i32.const 1 を i32.const 5 に書き換えて、ASSEMBLE、RUNしてみましょう。
param に、10と入力しなおして、RUNしてみましょう。

ちょっとだけ複雑な計算をさせてみます。

get_local $0 i32.const 5 i32.mul i32.const 1 i32.add end

i32.const 1 と i32.add を書き加えて、n*5+1 を計算するプログラムにしました。
ASSEMBLE、RUNしたり、paramを書き換えてみましょう。

このようにアセンブルを自動化するプログラムのことを、アセンブラといいます。
(手でアセンブルすることをハンドアセンブルといい、アセンブラがない時代の必須テクニックでした)

次はコンパイラを作ってみます。お楽しみに!

WebAssemblyマシン語入門
- ブラウザだけでOK! 1+1からはじめる、WebAssemblyマシン語入門その1
- プログラミングはプログラミングで楽をする、WebAssemblyマシン語入門その2
- もっと楽するコンパイラ、WebAssemblyマシン語入門その3

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