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

IchigoJam web / IchigoJam VR ゲームパッド対応! Web Gamepad APIでiCade互換

2018/06/20
#IchigoJam #js 

単純に2画面分割表示するVRモードに対応した、IchigoJam web
Bluetoothキーボードを接続することで、目の前に広がる大画面でプログラミングに没頭することができます。

iOSには、iCadeというキーボードの仕様を使った手頃なゲームパッド仕様があったので、対応してみました。

かわくだりゲーム for iCade (RUN on IchigoJam web)

10 CLS:X=15 20 LC X,5:?"C" 30 LC RND(32),23:?"*" 35 WAIT3 36 K=INKEY() 37 X=X-(K=65)+(K=68) 39 IF SCR(X,5) WAIT 60:RUN 40 GOTO20

iCadeでは、押したときと離したときにキーダウンイベントが届きます。(オリジナルドキュメント
コントローラー「8BITDO SFC30 GamePad」での動作は下記の通り。
(SFC30は販売終了ですが、Somnus258 1,969円でも同等と思われます)

SFC30は、MacにつなぐとGamePadとして認識するので、PCで動かしたときにもiCade互換になるように、W3C web標準のGamepad APIを使って、エミュレートしています。

IchigoJamでも、iCade互換な物理コントローラーづくりもありですね!

links
- iCade - Arcade Cabinet for iPad - ION Audio - Dedicated to Delivering Sound Experiences
- IchigoJam VR!? meet up with Japanese Raspberry Pi Users Group!

都道府県別 子供減少率マップと青森マップアプリハンズオン、青森オープンデータ利活用セミナー

2018/06/11
#opendata #aomori #js 

青森にて、オープンデータ伝道師活動「青森オープンデータ利活用セミナー」
スマホからメガネ、HTMLからオープンデータ、計測装置からIoT、カンと経験からEBPM(AI)へ。

県別の年齢別人口グラフ、青森は福井より子供減少数がヤバイ。
聞くと、青森県は日本の少子高齢化でも最先端だという。アプリを少し改造して、都道府県別に子供減少率を算出し、色を塗ってみると、見事に東京とそれ以外に色分けされる。

県別 子供減少率
確かに、青森県の子供減少率はトップクラス(2010年データ)。
お隣、秋田より若干減少率が低いという計算結果。
子供減少率は、0-15才の子供人口の差分の平均をとり、15才人口で割って計算。


官民データ活用推進計画に関する、日本の地方公共団体へのアンケート、有効回答数1590。
アンケートの回答、共通語彙基盤を使った5つ星オープンデータにしましょう!


デジタルメガネことスマホMRをかけての登壇スタート。
掛けなければつたわらないメガネスタイル、講演後いろいろと体験いただきました。


SPARQLでマップ!青森編
5つ星オープンデータにも対応している青森県のオープンデータを使った、プログラミング未経験者の方でも使える、マップアプリハンズオン。ぜひダウンロードしてお試しください。
マップアプリハンズオン(青森編)


地元、青森での事例紹介する、岡本さん。はじまりは、MSXturboR!


データで案内する駐車場の事例。イベントには便利ですね!IoT化していかに安く実現するかと周知が鍵!

本日の講演資料。
--> 日本危機を乗り切るには、IT活用は不可欠。オープンデータというインフラ整備。いち早く5つ星オープンデータを普及すべし! インフラなきところに産業なし。

誰かがやってくれる感覚は捨て、いろんな壁を取っ払い、みんなでいち早く取り組むために、何ができるか!?

できることから、はじめましょう。

WebVRで取得可能、シンプル快適 Oculus Go controller

2018/06/10
#megane #vr #js 

2次元のテレビやスマホでは伝わらない、VR/AR/MRのスゴさ。実際体験するしかないですねっ。

アメコミ化しためがね大使まゆちゃん。視界がリアルタイムに変換されて、アメコミの世界にいった感覚になれます。・・・と、いくら書いても伝わらないのがもどかしいところ。


めがねフェスでも人気だった、Oculus Go。 自分で創りたくなるのがものづくり好きの性。シンプルながら操作性抜群の Oculus Go controller をwebアプリで取得する方法を調査。 無事、ボタンと加速度の値が取れました!

const gp = navigator.getGamepads()[0]; const corient = gp.pose.orientation; const pad = gp.buttons[0].pressed; const trigger = gp..buttons[1].pressed;

方向とトリガー、パッド部分が押されたかどうかが取得できます。(戻るキーはVRモードが終了してしまう)
* VRDisplay requestPresent した後のみ有効です


視点移動と合わせたシンプルなサンプルとしてまとめて公開したいと思います。


MRの不思議な世界、お子様たちも興味津々。ようこそプログラマブルワールドへ。


まゆちゃんも体験!


NUAGEのメガネアイス!


NUAGEは、めがねグルメグランプリ、二冠!


次回のめがねフェスではどこまで進化しているか!?


めがね大使まゆちゃんとめがね会館 in アメコミ世界

links
- Oculus Go | Oculus (スマホVRの一段上質のVR体験が23,800円!)

共通語彙基盤対応の拉麺型!? IMIで遊ぼう、開いてるところを探すアプリ on opendata.cc

2018/06/01
#opendata #js 

imi.go.jp という、日本の本気が見えるドメイン、共通語彙基盤。
IPAによる初開催となる招待制イベント「IMI意見交換会」


京都市、5つ星オープンデータの事例で、一日一創アプリ、紹介していただきました!


自治体職員には共通語彙基盤は手強すぎ!とおっしゃる京都市役所の林さん


なんと自分で独自語彙も作成した、拉麺語彙と独自調査のラーメンオープンデータを公開してます!
共通語彙基盤ラーメンデータ in Kyoto
共通語彙基盤ラーメンデータセット 独自定義語彙

すごい!

共通語彙作成までの思考を綴った「ラーメンデータをめぐるオントロ思考の大冒険」ステキです!

開店時間、閉店時間もしっかり共通語彙基盤準拠で入っているので、今開いてるラーメン屋さん検索アプリを作るためのSPARQLクエリーづくり。(12時に開いているところクエリーの例)

prefix xsd: <http://www.w3.org/2001/XMLSchema#> prefix ic: <http://imi.go.jp/ns/core/rdf#> select * { ?s ic:名称 [ ic:表記 ?name ]. ?s ic:利用可能時間 ?t. ?t ic:開始時間 ?startt. filter(?startt <= "12:00:00"^^xsd:time) ?t ic:終了時間 ?endt. filter(?endt >= "12:00:00"^^xsd:time) optional { ?t ic:説明 ?dest. } }

ひとまず、5つ星オープンデータポータル、opendata.cc を使って「開いているところを探す」アプリとして実装。
ラーメンデータを登録すれば、近くの開いているラーメン屋として表示されることになります!(誰でも登録可能!)

開いているところを探すsrc on GitHub CC BY taisukef


経産省、平本さん、オープンデータや共通語彙基盤が日本国家戦略の中枢にどんどん組み込まれて大忙し。


日本国家蔵出しの楽しいオープンデータを使って、一緒につくる仲間、大募集!
ソーシャルハックデー Tokyo vol.2」 2018.6.30 @ SENQ霞が関

どんどん使おう、共通語彙基盤!
コア語彙2.4.1に、sameAsで、英語版を関連付ける手でグローバル化も図れそう!
足りない語彙は、拉麺語彙の如く、勝手に作って、広めたもの勝ちです。
自然にいい語彙に集約されるので心配無用。

多様性と信頼が共存する新しいwebの世界、分かりやすくインパクトある入り口が肝!

今までの延長線上に未来なし、攻める鯖江商工会議所と常識反転メガネ

2018/05/25
#sabae #megane #js 

鯖江市内を中心に1846の会員を持つ、鯖江商工会議所の記念すべき第60回通常議員総会。

WebMegane」 JSで作ったブラウザで動くWebMeganeに、反転モードを追加
左右反転させるレンズもプログラム1行で実現できてしまう、デジタル化したメガネ。

強烈に気持ち悪い左右反転視界も、しばらく歩き回っているとなんとかなってしまう不思議。
電話も、ネットも、スマホ、「今までの常識と違う」気持ち悪さも「利便性」には叶わない。

一眼レフがデジタル化し、光学ファインダーから液晶モニター化によるミラーレスが実現したように。 メガネの世界でもレンズレス時代が訪れる。


今までの延長線上じゃだめだと開会宣言する、鯖江商工会議所、黒田会頭。


新任で阪大から来られた福井工業大学、学長で、理学博士の掛下知行さんと鯖江市長!
商工会議所、鯖江市、福井工大による産官学連携も丸10年。


鯖江商工会議所副会頭「」代表の加藤さんによる〆。


サイトリニューアルしていた「日本酒「梵」の酒蔵 | 加藤吉平商店 |


SDGsバッジとメガネバッジを付けた鯖江市長、いよいよ国連本部、ニューヨークへ!
鯖江の市長さん、ニューヨークへ行く!こどもプログラミングで地方が変わる、EDIX&自治体総合フェア!
鯖江の新しい一歩のきっかけに!

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を使えば、月額65円でチャット端末ができちゃいます。
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)

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