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

ローカルで高速生成するQRコード、PCのカメラで読み取るQRコード

2018/07/16
#js 

高専生の受肉に触発されて作ったQRコード読み取りWebMegane
QRコードの生成もネットを使わずできたら便利かも?
探すとすぐに見つかる「QR Code Generator」。

JSで簡単に組み込めたので、Google Chart API を使っていた2012年版qrmakerを刷新。

qrmaker2
シンプルなQRコードづくりにどうぞ!URLの後ろ、ハッシュ(#)に続けて記述しても作成できます。

Macについているインカメラや、Webカメラを使ってサクッとQRコードを読み取り、webサイトに飛べるのも便利そうだったので、qrdetector(WebMegane)に、tap to jump / click to jump 機能を追加!

ケータイに搭載された時に大興奮したQRコード、iPhoneでは搭載されず不遇の期間がありましたが、2017年10月に標準搭載され、再活用の幅広がっています!

イベントの入場管理、据え置きデモ機とのインタラクションなど、手軽な非接触通信方法として、いろいろ手軽に活用してみましょう。

受肉したい高専生。プログラミング嫌いはメガネで克服! - 高専カンファレンス東京2018レポート

2018/07/15
#kosen #megane #js 

現役生もいる同窓会的なゆるい学会風でもあるイベント「高専カンファレンス

参加者143名の大規模開催となった「高専カンファレンス東京2018」、最大頻出ワードはVtuber。バーチャルな肉体を入手し、Vtuberになることを「受肉(じゅにく)」と呼び、3Dモデリングや、プログラムで自作しだす高専生が続出。 自らをコミュ障と言い、人との関わり方に少し慎重になり勝ちな高専生にぴったりな技術かも。先生が受肉すれば、授業も楽しい!(*受肉=元はキリスト教用語の様子)

早くにTwitterに目をつけた高専生、今回の #kosenconf もトレンド入り。高専パワーで新しい時代を切り開こう! 「メガネ」で、互いに受肉するコミュニケーションとかおもしろいかも?見る側が相手に勝手に受肉させるのも悪くない。

思わぬところでバズった「プログラミング嫌い」のスライド、その克服にも「メガネ」がオススメです。


受肉(バーチャルな肉体を入手すること、憑依の逆?) by とぐちさん(@togucchi)


DMM.comのステキオフィスに集まった参加者、143人!出席率93%!


マンガでわかりやすい技術書を手がける、湊川あいさんによる招待講演!(資料
著書は「わかばちゃんと学ぶGit使い方入門」など、会場の8割が所持!


実際、絵で伝えてみるミニワークショップ。「冪等性」という初耳ワードを図解。
数学での意味と、情報学での意味が違う点に注意。情報学的、冪等は再現性と思っていて良さそう。
40点(高専では赤点は60点)でも出しちゃうのがコツ。さまざまな図解の登場に活気づく、Twitterハッシュタグ #kosenconf
創る技術と、伝える技術。どっちも楽しい!(see also デザインの二面性 資料)


招待講演、きゅんくんによる「メカフ」デモ!


DJに合唱に、多様性増す高専カンファレンス「高専合唱カンファレンスin沼津」紹介。
歌うなら高専生開発サービス「うたオン」もどうぞw


バーチャルなんだから美少女じゃなくていいよね?(資料
誰でもコンデンサくんになって配信できちゃうかも
(see also 演じる技術=演技 資料)


在宅x生物学!情報だけじゃないのが高専カンファレンスのおもしろいところ。(資料
在宅でも野菜からDNA抽出とかできる様子。栄養素の検証とかしてみたい!


ディープラーニングは脳じゃない。
第4次、人工知能ブームのきっかけになるものを作り出すのは高専生かもしれない!


福井高専な後輩の活躍もまたうれしい。


弊社jig.jp、スポンサーセッションらしい一コマ。
本高専カンファレンスのテーマは、多様化する技術!
(WebRTC, HLS, RTMP, Swift, Kotlin, Angular, AngularJS, TypeScript, Vue.js, Nuxt.js)


マーケティングな話。高専卒だからプログラムやアルゴリズムを考える免疫があった!
すべての会社に電話が広がったように、すべての業界がIT活用、プログラミング活用が当たり前!


なんと超5000いいね「プログラミングは好きですか?
好きだと唯一手を上げてくれた人も実は気を使ってくれただけ、嫌い?と聞くとみんな勢いよく手を上げてくれた某高専情報系4年生の思い出。 これを覆すほどの「楽しい!」が必要。


体験しないと伝わらない、今おすすめな「楽しい!」が、VR/MR/メガネの世界。


qrdetector - WebMegane
JavaScriptで手軽に開発可能なデジタルメガネ(WebMegane)にQRコード読み取りメガネを追加!やはりJSではちょっと重いけど、視界内にQRコードをみつけ、デコードした文字をQRコード位置の右側に表示するプログラムになっています。 どうぞ、いろんな改造に活用ください!
WebMegane src on GitHub - using jsQR


「すべての技術はメガネに通ず」のスライド全文のダウンロードは、こちら(PDF)
800円のオススメ、スマホVR/MRは、こちら「ショップ一日一創」へどうぞ!
Oculus Go(23,800円)も楽しいよ!


高専でつながるいろんな輪。


きゅんくんを囲んで!


運営スタッフのみなさん、ありがとう!


ステキなカンファありがとう、実行委員長、あそなすさん!(@asonas)


元航空高専の校長先生、島田さんと!


祝、高専カンファレンス10周年!
10年前から参加している人も、今回初参加という現役高専1年生まで幅広く、次の10年も楽しみ!


10周年に乾杯!懇親会も盛り上がりました!

最後に、高専カンファレンスの開催の仕方の紹介。
1. 開催を宣言する
2. 開催する
以上!
(参考:開催ノウハウ - 高専カンファレンス

Let's go KOSEN conference!

links
- 高専カンファレンス in 東京 2018 - 高専カンファレンス Wiki
- kosenconfdecade

把握しきれない多量のデータはコンピューターに丸っと投げよう!機械学習と触れ合うTensorFriday、手書きテストデータ生成アプリ

2018/07/13
#AI #js #python 

100円コンピューターでも秒回5000万計算。 元々はグラフィックス用に開発されたGPUの汎用利用により、手軽に秒間1兆回という単位の計算をこなせるようになっている現代のパソコン。 普段はその持てる力をほとんど使っていない状態です。

AIの一種、機械学習は脳をモデル化したもの。入力と出力をつなぐ、大量のパラメーターを有り余るコンピューターの計算力を使って、いい感じに求める技。 複雑な脳のモデル化(ディープラーニング)も、現代コンピューターによってなんとかなってしまう時代です。

機械学習に便利なオープンソースなライブラリTensorFlowと触れ合う金曜イベント、TensorFriday#02のテーマは手書き文字認識。 短いPythonのプログラムを動かして、ディープじゃないラーニング(nn)の結果と、ディープラーニング(cnn)の結果を体験しました。

せっかくなら、自分でかいた文字を認識させてみたいところなので、webアプリのお絵かきツール「freepad」を改造してPython用の28x28の配列データを生成するアプリ「fornn」を作成。 見事、パッドで書いた下手な数字「5」を認識してくれました!

テストデータを入れ、5を認識するように改造した nn.py in Python3

次回のTensorFlow#03に向けた、講師やテーマ、募集中!

Code for Japan 地域フィールドラボ、健康と特定健康診断をテーマにしたディスカッション。
人ではとても見きれない健康に関する多量のデータでも、機械学習に突っ込んでみることで、なんとかなりそうな気がします。

links
- Hana道場、若宮さんと学ぶIoTとIchigoJamプログラミングと地域フィールドラボ第5期スタート!
- 地域フィールドラボの募集テーマを大公開! | Code for Japan

鯖江市の実用IoT、LoRaで格安水位計測IoT&リアルタイムオープンデータ、公開スタート

2018/07/05
#js #opendata #sabae #IoT 

大雨、川の様子は気になっても決して見に行ってはいけません。
それでも気になる、河川の水位。鯖江市では、さくらインターネット協力により、省電力広域無線(LPWA)の一種、"LoRa"を使った水位計測IoTのリアルタイムオープンデータをアプリと共に公開。
LoRaを使った河川水位システムの実証実験 | データシティ鯖江ポータルサイト

7/5、計測できている5箇所とも、水位のピークは21時ごろ。


鯖江市水位メーター
計測箇所の水位と、計測器の温度の推移を誰でもチェック、活用できます。

距離センサーから水位を表示するためには、センサーから川底距離を測る必要があります。計測時の様子。

福井県情報システム工業会にて、スパコン京を手がける富士通さんによる次の一手「デジタルアニーラ」の講演。講演者は、デジタルアニーラプロジェクト 工学博士の中村誠さん。 特殊な電子回路を用いて、ノイマンアーキテクチャでは時間がかかる問題を瞬時に解く特殊チップ。実験に使える小規模版を無料提供してもらえるといろいろ試せておもしろそう!

CISCO推定によると、IoTによってインターネット接続デバイスは2020年には500億台。2018年現在は300億台!? 感覚的にはまだ届いていないような気がしますが、今後、増加ペースが加速するのは確実です。

links
- LoRaを使った河川水位システムの実証実験 | データシティ鯖江ポータルサイト
- 北海道石狩市とさくらインターネット、IoTなどの情報技術を活用した地域活性化に関する包括連携協定を締結~4月よりLoRaを利用した河川水位計測システムの試行運用開始~
- B Inc.とさくらインターネット、IoTやAI、ビッグデータを活用したデータ事業で業務提携~オープンデータによる社会変革を目指して~
- Googleマップハンズオンの続き、地図内に鯖江市水位メーターの位置アイコンを全部置く方法
- IoTで防災力アップ! 河川水位IoTセンサー鯖江市内6箇所、試験稼働中
- 距離計測IoTと水位センサー、現実社会へのデプロイのおもしろさ

ZOZOSUITが来たので、体格オープンデータと3D物理シミュレーションで歩くモデルづくり

2018/07/04
#js #3d #opendata #profile 

ZOZOSUITで計測完了!自分の体型を3Dモデルにして動かせると楽しいかもと、Oimo.jsのデモいじり。
JSで作られた、three.jsと組み合わせて使う、3次元物理シミュレーションエンジンの名前がなぜかオイモ(Oimo)、かわいくて、軽くていい感じ!

歩く人、走る人デモ」Oimo.jsのサンプルを少し改造

ZOZOSUIT到着!

着た!

測った!

計測前にZOZOアプリをアップデート推奨。2回計測した最大差5.4cm。小数第一位が0の時も".0cm"と表記してほしい。

こちら、福野泰介 体格オープンデータ CSV (CC BY)


スタッフTシャツとかの注文に便利かも?RDF化して、5つ星オープンデータにもしてみたい。
計測するごとに変わるので、どこまで正確かの検証は必要そうですが、最新の計測結果をひとまず信用して、Tシャツ、ドレスシャツ、デニムを注文!到着14-28日後とのこと。

体格データに合わせて3Dモデルを変更したり、WebMeganeで実寸大で見て、着た姿を確認するなどできるとおもしろそう。 ZOZOSUIT x Oimo.js 楽しいですよ!

胴長な人デモ」「手足が長い人デモ」色や形をいろいろ変更するところからどうぞ!

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&自治体総合フェア!
鯖江の新しい一歩のきっかけに!

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