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

もっと楽するコンパイラ、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

IchigoJam web 拡大表示に対応!未就学児からシニアまでIchigoJamプログラミング体験!

2017/10/30
#IchigoJam #KidsIT #senior #js 

車載用の小さい画面で手軽にはじめられるIchigoJam。
ただ、小さいお子様や、シニアな方にはちょっと文字が小さいかも?
そんなとき便利なコマンド

VIDEO 3

文字が倍角表示されます!

VIDEO 5

これで4倍表示!

パソコンやスマホ、タブレットでも体験できる、IchigoJam web も、VIDEOコマンドに対応しました!


IchigoJam web

大きな画面対応の未就学児、小学生低学年用のサンプルプログラムもいろいろと用意したいと思います!

高校生インターンでバス到着予測アプリ、iPhone風スクリーンショット用フリー素材

2017/10/27
#js #intern #jig #opendata 

今年初開催となる高校生対象の3日間のインターン。
テーマはオープンデータを使った美しいWebアプリ開発。
初日の午前中、軽いガイダンス、自己紹介の後、早速企画会議。
オープンデータを眺めつつ、日常の不満を元にアイデアを出して、吟味。

決定したのは、バス到着時刻予測アプリ!
鯖江市自慢のオープンデータ、リアルタイムに位置と乗客数が分かるつつじバスオープンデータを使用!


バスの到着時間がわかるWebアプリ
1. バス路線を選択(鯖江市営つつじバス)
2. 現在位置最寄りのバス停2つから選択
3. 次来るバスまでの到着予測時間までの残時間が表示される
・・・という、シンプルなWebアプリ!

現在は2つ前のバス停通過時間を見てその差分を最寄りに足しているだけということで、今後ゲーム化したり、曜日やイベントのデータも含め、機械学習で予測精度を高めたりといろいろ展望は膨らみ、楽しみです!


【画像】バスの悪いところランキング 1位は「時間通りにこない」で55%|ニフティニュース」発表中
早発が問題となる路線定期運行バスなので、遅れ気味に運行されるのはしょうがないとして、どのくらい送れるのかは見える化したいですよね!

最終日の夕方、発表とコードレビューを行って、3日間のショートインターンは修了。


みんなでお昼食べたり、おしゃべりしたり、ボードゲーム会に合流したり、楽しんでもらえてたら何よりです!

発表資料作成の援護射撃として作ったスマホ画面っぽく見せるための透過画像がこちら!
- sphone-base.png (透過PNG画像、オススメ!)
- sphone-base.key (Keynote版)
- sphone-base.pptx (PowerPoint版)
CC0のライセンスフリーなオープンデータとします。どうぞ活用ください。

親しみやすく表示する鯖江市論手川水位メーターアプリ with D3.js

2017/10/26
#js #d3 #opendata 

河川の状況、D3.jsを使って親しみやすく、かわいいゲージを見つけたので、改良してみました。

鯖江市 論手川 水位メーター D3.js version

台風時には気になる河川の水位、鯖江市の川、論手川に設置されたリアルタイム5つ星オープンデータ化された水位計でも大幅な上昇が記録されています。

(鯖江市論手川の水位の推移 2017.10.22 / 2017.10.23

sakura.ioなどIoTを使った身近な安心につながるオープンデータ、どんどん増やしていけるといいですね!

links
- 5つ星リアルタイムオープンデータ SPARQLを使った鯖江市論手川排水機場の水位表示アプリ
- 5分でできるオリジナル鯖江論手川排水機場水位表示iPhoneアプリ / Swift2入門

越前がにロボコン会場リハーサル&得点記録システム

2017/10/25
#js #KidsIT 

福井県システム工業会の30周年イベント「越前がにロボコン」の開催が来月へと迫る中、会場ハピリンにて導線確認を兼ねた打ち合わせ。

こちらが福井駅前、ハピリン2Fの会場となる場所です。


越前がにロボコン 得点記録システム
カニロボの試走と合わせて使える記録システムの第一弾できました!(越前がにロボコンのルール


海のない鯖江市ですが、Hana道場から「さばえカニロボット」として登場!(開発背景


勝山の子供たちの着々と開発すすむカニロボ達(写真)


小学生向け越前がにロボコン、開催は11/26(日)!
電動バイク「zeCOO」などを手がける、ツナグデザイン・根津孝太さんも特別審査員として来福!

福井の冬の味覚と言えば、越前がに

links
- 越前がにロボコン
- ハピリン
- 福井県システム工業会

D3.js で作った「やらわか時計」D3再入門

2017/10/24
#js #d3 

SVGを使った美しい描画を簡単につくれる D3.js
再入門しようと、2012年作品「やわらか時計」から復習開始!


softtime / やわらか時計」 フルスクリーン対応


Macでフルスクリーン表示した図
プロジェクターで映したり、iPadで表示して飾っておくなどもいいかもしれません

D3.jsを使ったオープンデータビジュアライズをいろいろ試していきます!

links
- Gallery · d3/d3 Wiki
- D3 入門 | スコット・マレイ | alignedleft

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