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

WebMeganeでMR、JSで手軽に実現、外カメラ映像とCGをミックス!

2018/05/23
#megane #js 

MR = Mixed Reallity。CGと現実を混ぜること。

スマホとVRゴーグルで手軽なデジタルメガネを実現、WebMegane
three.jsと組み合わせて、MR化!

ひとまずシンプルな赤い画面を半透明にして合成。
現実とCGが混ざる世界ができあがった。


カメラ入力とThree.jsのCGをミックス!「redsnow - WebMeganesrc on GitHub
ただ失敗は背景のカメラは立体視非対応で、CGは立体視なので違和感あり・・・。
CGの左右視差はなしにする必要がありそう。外カメラ2つが使えれば、立体視可能にできるかも。


こちらオタマートで販売しているVRゴーグルの一番安いもの。
高いものにはついているボタンがないので、何かインタラクションを付ける場合は、視点の移動を基本にする必要がありですが、デジタルメガネ実現だけなら問題なし!

格安VRゴーグルとJSで、Let's begin to make your WebMegane!

links
- 任天堂伝説のゲーム機、バーチャルボーイ風をスマホVRとWebVRで手軽に創る
- WebMegane - your new digital sight / デジタルな視界 on iPhone Safari x VR goggles

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

How to make the Inclusive City - Learn Braille (点字を学ぼう) on IchigoJam / Alphabet(+和文)

2018/05/15
#IchigoJam #IoT #js #africa #codefor #nerima 

インクルーシブシティとは、いろんな壁を越えて誰もが豊かに暮らせる都市。
The Inclusive City makes everyone happy.

「はじめのいっぽ」は関心。
The first step is the interest.

見えなくても聞こえなくても伝わる、点字を学習するプログラムを作りました。
I made a program to learn braille, characters for everyone.


キーボードで打つと、対応する点字が表示されます。(A-Z版とひらがな版、プログラムは後半に)
You can check the braille with typing A-Z or Kana of Japanese.
(RUN on Ichigojam web)


アフリカ各国からのインターン生と、お互いの紹介とIT使った社会発展に向けたディスカッション。
Mutual introduction and discussion to improve this society with IT with interns from Africa.


アフリカと日本、つなぎましょう!
Let's connect Africa to Japan.


Code for Nerima では、体表点字の開発者、長谷川さんに見てもらえました。
I met Mr. Hasegawa, an inventer of braille with motors at Code for Nerima.


コードでつながる練馬と鯖江。
Sabae(Fukui) connected Nerima(Tokyo) with the code.


Code for Nerima 青木さん作のデジタルメガネ体験。メガネ新ジャンル、熱い!
I enjoyed the digital eye-glasses by Mr. Aoki. It's hot to create new glasses!


インクルーシブシティづくり、ぜひご一緒に!
Let's create the inclusive city!

点字学習プログラムのつくりかた on IchigoJam
How to make to learn braille on IchigoJam

点字をデータ化する(点字 - Wikipedia
Make the code(number) from the braille (braille - Wikipedia)

?`100000 32

10 00 00 - braille in binary (2進数化した点字) → 32

10 LET[0],32,40,48,52,36,56,60,44,24,28,34,42,50,54,38,58,62,46,26,30,35,43,29,51,55,39 100 K=INKEY():IF K=0 CONT 105 ?CHR$(K) 110 IF K<65 OR K>90 GOTO100 120 B=[K-65] 300 ?BIN$(B,6) 390 GOTO 100

タイプすると対応する点字コードを表示
Show the code by typed character.

300 FORI=0TO5 310 LC 5+I%2*4,2+I/2*4 320 ?CHR$(232+B>>(5-I)&1) 330 NEXT 60 CLS 70 VIDEO3 105 LC5,0:?CHR$(24,K);

点字っぽく表示を工夫してできあがり!(24=特殊キーコード、行削除)
Make up the display to finishi!(24=special key code, delete line)

ひらがなバージョン。
Japanese Kana version.
(RUN on IchigoJam web)

10 LET[0],`100,`101,`110,`111,`011:'AIUEO 20 LET[5],`001,`101,`110,`010,`011,`111,`100:'KSTNHMR 30 LET[12],`010010,`010011,`010110:'YYY 40 LET[15],`0010,`0110,`0111:'W 50 S="AIUEOKSTNHMRYYYW" 100 K=INKEY():IF K=0 CONT 105 ?CHR$(K); 110 N=-1:FORI=0TOLEN(S)-1:IF ASC(S+I)=K N=I:NEXT:ELSE NEXT 120 IF N<0 GOTO100 130 IF N<5 B=[N]<<3:GOTO300 140 K=INKEY():IF K=0 CONT 145 ?CHR$(K) 150 IF N=8 AND K=ASC("N") B=[17]:GOTO300 160 M=-1:FORI=0TO4:IF ASC(S+I)=K M=I:NEXT:ELSE NEXT 170 IF M<0 GOTO100 180 IF N<12 B=[M]<<3+[N] 190 IF N=14 B=[12+M/2] 200 IF N=15 B=[15+M/4] 300 ?BIN$(B,6) 390 GOTO100 60 CLS 70 VIDEO3 105 LC5,0:?CHR$(24,K); 300 FORI=0TO5 310 LC 5+I%2*4,2+I/2*4 320 ?CHR$(232+B>>(5-I)&1) 330 NEXT

ローマ字で打つと対応する点字が出ます。
This program shows in braille by your type in Roman letters.

濁点半濁点などへ拡張してみましょう。容量不足対策はこちら。
Let's make extension versions! If you want to more memory...

?FREE() 362 ?"10 LET[0]";:FORI=0TO17:?",";[I];:NEXT:? 10 LET[0],4,5,6,7,3,1,5,6,2,3,7,4,18,19,22,2,6,7 20 30 40 ?FREE() 480

118byte縮みます。
You can save 118byte.

links
- Programming for Rwandan kids! Open Teaching Materials
- デジタル指点字はじめのいっぽ「数字」の点字表現を体得する読み上げ学習マシーン

IchigoJam x sakura.io でつくる格安IoTチャットデバイス

2018/05/14
#IchigoJam #IoT #js 

高知高専での情報セキュリティ実習でも楽しんでくれたたった2台のローカルチャット。
世界とリアルタイムにつながった感あるチャットを作り、学生の頃よくやりました!
sakura.ioを使えば、月額64円でチャット端末ができちゃいます。
PCやスマホを使っている人とリアルタイムコミュニケーションを楽しんでみましょう。

入力時に、ダブルクォートから打ちはじめて、文字列をINPUTコマンドに渡します。
sakura.ioの1データサイズに合わせて、ひとまず最大8文字です。
「かな」キーを押して、カタカナモード。「CAPS」キーか「かな」キーで英数に戻ります。

Message IoT - sakura.io」こちらPC用送受信webアプリ
全角のひらがな、カタカナを半角カタカナに変換して、IchigoJamへ送るJSプログラム作りました。

IchigoJam側のプログラムはsakura.ioの送受信コードを使って、下記のように作ります。

10 CLS 20 INPUT S:IF S GSB@W 30 GSB@R:IF F ?"> ";STR$(S) 40 GOTO 20 800 @W:POKE#800,#21,10,1,98:COPY#804,S,8:C=0:FORI=0TO11:C=C^PEEK(#800+I):NEXT:POKE#80C,C:R=I2CR(79,#800,13,#820,3):RTN 810 @R:LET[0],48,48:R=I2CR(79,#800,3,#820,22):F=!U&&[16]!=5:S=#824:POKE#82C,0:RTN

このプログラムでは受信をチェックするのは、送信後のみ。改造してリアルタイムなチャットづくりにも挑戦しましょう!

sakura.ioモジュールver1.4以降で対応した、自動スリープによる省エネモードに対応させてみましょう。
sakura.io 省電力新ファームウェアv1.4、IchigoSodaで待機電力0.1W!

10 GSB@ECO:CLS 820 @ECO:POKE#800,#B0,1,1,#B0:R=I2CR(79,#800,4,#820,3):RTN

省エネチャット端末のできあがり!


今回使用したIchigoJam x sakura.ioは、開発版IchigoSodaとIchigoJamのFUJISOFTスペシャル!


IchigoJamの裏面、CN5を5ピンのピンヘッダーをはんだづけして、下に重ねて、IchigoSoda風を実現したもの。

IchigoSodaがあれば、手間なくすぐに、チャットづくりなど、IoTがはじめられます!

links
- 1時間半でわかる叡智の結晶「IoT」 - IchigoJam x sakura.io 情報セキュリティ実習 in 高知高専
- さくらインターネットが提供するIoTプラットフォームサービス、sakura.io | IchigoSoda/IchigoJam for sakura.io

WebMegane - your new digital sight / デジタルな視界 on iPhone Safari x VR goggles

2018/05/12
#js #megane 

2007年の今日、5/12、アニメ「電脳コイル」が放送開始。
バーチャルとリアルが融合した、近未来の世界はまさにエンジニアの夢。
12th May is anniversary day of "COIL A CIRCLE OF CHILDREN", a dream of all engneers!
電脳コイル on Otamart

オタマートで買ったVRゴーグル
任天堂伝説のゲーム機、バーチャルボーイ風をスマホVRとWebVRで手軽に創る

スマホというイノベーションは、安価で軽量なVRディスプレイ、Oculusを産んだ。
iOS11で利用可能になったweb上でのカメラのストリーミングを使った「WebMegane」を作ってみた。
I created WebMegane, digital eye glasses using web technologies.

カメラからの画像をCanvasに2枚貼り付け、VRゴーグルでこのサイトを開いて見るだけ。
WebMegane」 web app for iOS11 with VR goggles

立体感はなく、ちょっと遅延が気になるが、メガネをしなくてもゴーグルでクリアな視界が見られる体験が楽しい。
2014年のSXSW発表時点では、ネイティブアプリでしかできなかったものが、JSで簡単に誰でも無料で自在に配布できるようになったのは大きい。
It's so fun and easy to share!


ゴーグルのボタンタップで、視界をモノクロ、セピア、色相回転、色反転、標準と切り替え可能。
You can modify your sight using the button on your goggles.


モノクロモードにしたWebMeganeをかけて開発していると、モノクロモードになったかどうかの確認ができないことに気がつく。 手軽に、色弱や弱視など、障がいを体験することができるメガネとしても使える。

もちろん真骨頂は見えないものを見せるメガネ。
You can improve your sight by WebMegane!

オープンソースかつオープンライセンスな WebMegane CC BY、どんどん進化させてみたいと思います。
Join us on GitHub "WebMegane - github.com"

links
- Circle for Glass concept by Zeppelin x jig.jp in SXSW Trade Show 2014
- iPhoneで開発可能な「攻殻機動隊」の世界、80年代の夢が現実に (2014)
- 課題と向き合い、みんなで創ろう、世界最先端IT国家、電脳メガネサミット2018 in 東京
- Smart Glasses x Open Government = Smart City, Smart Glasses Summit! (2012.8.3)

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

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

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

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