福野泰介の一日一創

高専プロコンで起業家甲子園挑戦権を手に入れた阿南高専チームをメンタリングするため徳島へ。

4年生と5年生、3人ずつ6人チームのメンタリング。
内容のディスカッションでやる内容が見えてきので、チーム開発手法スクラムを紹介!


みんなで創ろう チーム開発手法、スクラムチーム開発」(社内開発チーム、jigインターンでも活用!)
まずは、ビジョンをチーム全員がしっかり握ること!
やることリスト(=プロダクトバックログ)にしっかり優先順位を付けよう。チームで話し、プロダクトオーナーが決定!
優先順位が高いものを、小さなタスクに分解して、次のMTG(スプリントレビュー)までにやれそうな分、自分のタスクとして取得しよう。
タスクの大きさは、慣れるまでは1時間程度で終わるくらい小さくしておくのがオススメ。
進捗をみんなで報告し合い、次のタスク割り振りを相談するMTGをスプリントレビューと呼びます。1週間か2週間に1度定期開催がいいです。


鯖江からのお土産、メガネ堅パン!


こちら開発中のIoT水位計、新しい公共の形をクリエイト!? 起業家甲子園の本番、3/4をお楽しみに!


こちら阿南高専!南国感ありますね


阿南高専の校長先生、寺沢さんともお会いしました。革新派!おもしろくなりそうっ


講演会、いろいろおもしろい技術が気軽に使える楽しい時代!一緒に取り組む仲間を見つけて、いろいろチャレンジしちゃおう!


VR-FFT
FFTをA-FRAMEを使って3D化!Oculus Questでも動くよう調整して、音の中を歩き回りたい!
必要なのはブラウザとエディタだけ、スマホアプリが簡単に作れて共有できる「Webアプリはじめのいっぽ
30行でマイクラ風が作れたり、3D空間で自在にお絵かきしてみたり。ハンドトラッキングも対応でますます楽しくなる Oculus Quest!


楽しい時間、ありがとう!


徳島への道中、なんと偶然、淡路島へTECHアンギャで向かう PCN x esm メンバーと遭遇!

鯖江の新拠点、名称決定「Sabae Creative Community」記者会見!

鯖江ブランド伝えるロゴ「SABAE MADE」のネオンサイン


鯖江商工会議所、黒田会頭と、総合プロデューサー黒崎輝男さん!
市内外、福井県のみならず、世界中からクリエイターとの交流の場、2020年1月誕生!


32bit波形メモリ音源
ソフトウェアクリエイターとして、記念に何か作っておきたいところ。 SCCと言えば思い出す。こどもの頃のパソコン、MSX用に開発された、波形メモリ音源の一種、SCC音源、わずか32byteの波形メモリだったということで、大雑把に再現してみました。 32x8のドット絵キャンバス風なところで、波形を描いて鳴らせます。

絵、動画、3D、音、音楽ソフトウェア、ハードウェア、彫刻、服飾、焼き物、料理など、いろんなクリエイターが集い、相互に刺激しあえる場所になる予感。

ちょうどこの日、福井高専地域連携アカデミアのイベントも!

初のポスターセッション「こども実業団」
地域と高専で育てる創造的IT人材!スポーツと同様、県大会で盛り上げよう、福井発、越前がにロボコン

こども実業団 = こどもプログラミング必修化 x ロボコン県大会 x 企業の土日の会議室 x 小学生を持つ社員 x 地域の子供たち

企業メリット:地域のこどもたち育成、地域の親からの感謝、社員福利厚生、県大会で応援する楽しみ、遊休資産活用
月に1度程度でOK、高専生にサポートに来てもらうのもあり、大人向けIoT講習をとっかかりとするのもあり
こどもプログラミング+IoT=大人プログラミング! 総務省 デジタル活用共生社会実現会議 ICT地域コミュニティ創造部会にて情報提供&体験会


福井高専と地域企業との交流の場。創ろう、横のつながり、縦のつながり。


すでに世界103ヶ国に日本酒を輸出する、梵!
創り、学び、創る!

パソコンとスマホ、どちらが入力速いですか?

日本人、実はスマホ派の方が多いのかもしれません。 実際、日本語入力であれば、フリック入力方式と変換予測と慣れによって、あまりストレスなく使えています。(編集機能が貧弱なので、長文はまだ面倒)

パソコンとスマホのいいとこ取りをすべく、スマホでコントロールするパソコン第一弾、シンプルなプレゼンクリッカーを作成。

キー操作や、マウス操作をプログラミングするAPIをネット越しに呼び出せばOKです。今回はサーバー側は Python3 + Flask で作りました。 pyautogui を使うと、Javaで言う java.awt.Robot と同様、キー操作、マウス操作をエミュレートできます。

from flask import Flask, render_template app = Flask(__name__) @app.route('/') def home(): return render_template("index.html") import pyautogui @app.route('/api/left') def left(): #pyautogui.click() pyautogui.keyDown('left') return "" @app.route('/api/right') def right(): #pyautogui.rightClick() pyautogui.keyDown('right') return "" app.run(host = '0.0.0.0', port = 8001)

templatesフォルダに、操作するクライアント側プログラムを HTML+CSS+JavaScriptで以下のように記述。

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width"/> <title>clicker</title> </head><body> <div class=btn id=left>←</div> <div class=btn id=right>→</div> <style> body { text-align: center; font-family: sans-serif; } .btn { display: inline-block; margin: 5vh 1vw; width: 40vw; height: 50vh; line-height: 50vh; background-color: gray; color: white; font-size: 30vw; } </style> <script> left.ontouchstart = function(e) { fetch('api/left') e.preventDefault() } right.ontouchstart = function(e) { fetch('api/right') e.preventDefault() } </script> </body> </html>

パソコンとスマホを同一ネットワーク内で起動して、IPアドレスを ifconfig (Mac) か ipconfig (Windows) で調べて、スマホで表示してみましょう(QRコード連携が便利です)

スライド表示して、スマホから左右ボタンを遠隔操作できました。
機能を増やしたり、マウス替わりにしてみたり、WebSocket化して高速化したり、いろいろ試すベースができあがり!

1000円ほどでもそこそこ本格的で楽しめる、スマホVR。セットしたスマホの外カメラ部分が空いているモノはARとしても使えて楽しい。
WebMegane「色メガネ」 と FFT を組み合わせて、音が見えるメガネを開発しました!

colornsound - WebMegane」(src on GitHub)
マイク、カメラ、方角取得用にいろいろタップしたり、許可したりしたあと、スマホVRにセットしましょう。この辺りの手間はが、webアプリの残念なところ。アプリと同様、一度許可したら次は聞かないオプションが欲しいが、それはそれで危ない(けど、アプリはそういう問題をはらむことを忘れずに)。

画面いっぱいのHTML5 Canwas に、同じ画面を2つ並べるだけ。スマホのマイクが拾った音をFFTで周波数変換して、リアルタイムに表示。ついでに「絶対音感ツール AbsScale」の音階表示機能も追加。これで、誰でも絶対音感!


画面収録を使って、使っている様子を撮ってみました。IchigoJam web でドレミを鳴らすと、ちゃんと音階を表示してくれます!憧れの耳コピもできるかも!?


現在、メガネの主流な光学メガネ、カメラの世界が一眼レフから一眼へと変わったように、メガネもいずれ電子メガネ化します。
今からできる電子メガネ、スマホARで遊びましょう!

JavaScriptを使って、MacやWindowsのネイティブアプリを開発する Electron を使ってみました。

絶対音感ツール「AbsScale」が即アプリに!
初回起動時にマイク使用の確認がでますが、その後は起動時にタップする必要がありません。
起動時に即フルスクリーンにもできて、音や、webカメラを使ったツールやゲーム開発にも良さそうです!

必要なのは、Electronのインストールと、index.js の準備だけ(index.html : webアプリ)

const { app, BrowserWindow } = require('electron') let win = null app.on('ready', () => { win = new BrowserWindow({ width: 400, height: 300 }) //win = new BrowserWindow({ width: 800, height: 600, kiosk: true, fullscreen: true, frame: false }) win.loadURL('file://' + __dirname + '/index.html') win.on('closed', () => win = null) })

コメントアウトしている、長めの win = ... に変更するとフルスクリーンのキオスクモードで起動!


こちらはウィンドウ表示させたネイティブアプリ!好きな大きさで起動させましょう。
昔、Windowsにあった HTA = HTML Application みたいな手軽さが良いですね!

electron-packager . absscale --platform=win32 --arch=x64 --overwrite electron-packager . absscale --platform=darwin --arch=x64 --overwrite

electron-packager を使って、Mac用Windows用のバイナリパッケージとしてまとめて、配布もできます!


HTMLはじめのいっぽ

<!DOCTYPE html><html><head><meta charset="utf-8"/> <title>My First Electron</title> </head><body> <p>Hello World!</p> </body></html>

Electronで起動すればメモアプリとして使えそう!?


電卓アプリにしてみました。JavaScriptの強力な命令、eval を使っているので、サイバーセキュリティーに注意!

<!DOCTYPE html><html><head><meta charset="utf-8"/> <title>calc</title> <style> body { background: #f1f1f1; color: black; padding: 20vw 0; text-align: center; } input[type='text'] { font-size: 3vw; width: 50vw; padding: 1vw; margin: .5vw; } button { font-size: 3vw; padding: 1vw; margin: .5vw; } </style> </head><body> <input type=text id=tf> <button id=btn>calc</button> <script>'use strict' btn.onclick = function() { tf.value = eval(tf.value) } </script> </body></html>

HTMLで構造を記述します。styleタグ内のCSSで飾り、scriptタグ内のJavaScriptで動きをプログラムする感じです。
ひとつひとつ調べて、改造を繰り返す内に慣れてきますよ!

index.html をエディタで編集したら、アプリの画面で Control か Command + R 推して、再読み込み。
デバッグするコンソールは Alt か Option + Control か Command + I で開きます。

Let's create something!

絶対音感を持つ人のように、聞こえている音を音階にするツール「AbsScale」を作成。
WebAudioで1Hz程度の分解能で周波数解析(FFT)して、音階を求めて表示するツールです。

使わせてもらった「踏切の音」はこちら


1408Hz、正確なファは1396.913Hzなので、ちょっと高めのファですね。踏切によってはファ#(1479.978Hz)となることもありました。


こちらは低めの音、700Hzの成分が一番高くでています。
ファは、正確には698.456Hz。

いろんな音を聞かせてみましょう!
AbsScale

音楽が手軽になったのは音のデータ圧縮、mp3の功績が大きいです。
その原理は音を周波数成分へと変換と、その逆変換。
ブラウザ上で音を扱うWebAudioを使うと、周波数変換が手軽に楽しめます!


Audio Analyzer
Audio Analyzer に、「ス」と発声して聞かせたところ。さしすせその音は他と全然違います。
音声認識に挑戦するのも楽しそうです!


高い音になるほど右側にいきます。


音楽を聞かせるといろんなピークが観察できます。


Audio Analyzer
周波数変換する大きさは2の乗数、5〜15で指定します。こちら一番小さな5、32サンプルの周波数解析。


Audio Analyzer
こちらは15、32768サンプルの周波数変換。大きくなるほど細かく解析できますが、応答性が落ちます。
URLのハッシュで指定してリロードで、変更できます。

こちらがJavaScriptで実現する、周波数変換 FFT、シンプルに実現できますね!
いろんなビジュアライズに挑戦して、VJごっこも楽しそう!

const audio = new (window.AudioContext || window.webkitAudioContext)() const stream = await navigator.mediaDevices.getUserMedia({ audio: true }) const source = audio.createMediaStreamSource(stream) const analyser = audio.createAnalyser() // FFT analyser.minDecibels = -90 analyser.maxDecibels = -10 analyser.smoothingTimeConstant = 0 // 0-.999 0.85 ふわっとなる analyser.fftSize = 1 << fftsize // min:32==1<<5 max:32768==1<<15 source.connect(analyser) const buflen = analyser.frequencyBinCount const buf = new Uint8Array(buflen) const g = canvas.getContext('2d') const cw = canvas.width const ch = canvas.height const bw = cw / buflen // * 4 const draw = function() { analyser.getByteFrequencyData(buf) g.fillStyle = 'rgb(0, 0, 0)' g.fillRect(0, 0, cw, ch) let x = 0 for (let i = 0; i < buflen; i++) { const n = buf[i] g.fillStyle = 'hsl(' + n + ',100%,50%)' g.fillRect(x, ch - n, bw, n) x += bw } requestAnimationFrame(draw) } draw()

Gamepad API対応した IchigoJam web、PS4のコントローラーでの操作対応しました。
せっかく、アナログスティック2つと、アナログトリガー2つあるので、AN0/2/5-8に割り当ててみました。

PS4のコントローラーを使ったツールや、ゲームが IchigoJam BASIC で作れます!
左アナログスティックを使ったお絵かきプログラムは、1.4の新コマンド DRAW を使って簡単!

10 IF BTN(32) CLS 20 DRAW ANA(2)/16,ANA(0)/22 30 GOTO 10

スペースキーは、メガドラミニのコントローラーと同様、Aボタン位置Xボタンに割り当てています。


DRAW by ANAs - IchigoJam web」要PS4/XBOX/メガドラミニコントローラー
PC上のChrome, Safari、iOSのSafariで動作確認済み。
ただし、iOS Safari は時々認識しなくなるので、その場合は、設定、Bluetoothで登録解除して、再度PSボタンとSHAREボタン同時長押しして、接続し直しましょう。
iOSでは、PSボタン、SHAREボタン、BACKボタン、タッチパッドの状態を取得できないので、L2/R2を使ってESC/RUNを割り当て。
有線で接続するXBOXコントローラーにも対応、ほぼ同様のキー割り当てとしています。

PCのSafariでも時々Gamepadのidの取得に失敗するなど、まだ少しバグがあったりしますが、本格コントローラーを使って遊ぶ IchigoJam も楽しいですよ!

IchigoJamにシリアル入力付き、PCダイレクト接続型の新タイプ「IchigoKamuy」登場!

ジュニア・プログラミング・ワールド2019PCN札幌ブースにて、早速約60名のこどもたちに届けられたとのこと!

札幌から送ってもらった時のレビューもどうぞ!
PCに挿すだけ簡単IchigoJam、USBシリアル内蔵「IchigoKamuy」先行レビューとβファームウェア1.4b10

人は、周波数を言い当てられるのか!?
周波数を指定して鳴らす、シンプルなオシレーターアプリをつくりました。

クイズ、何Hz?
絶対音感に自信がある人に、ぜひチャレンジしてもらってください!
どこまでの音が鳴るか?聞こえるか?チャレンジにも使えます。

WebAudioでDTMF信号を生成する「ベル打ちヘルパー」からの派生作品。
次は、DTMFデコードにチャレンジ!

iOS13が、HTML5のGamePad APIに対応した記念に、IchigoJam web を対応させてみました!


IchigoJam web
ブラウザで動くIchigoJam!教科書とあわせて、プログラミングの学習にもどうぞ!
ゲームパッド対応で、操作性良いゲームが作れます!対戦対応しても楽しいかも?


コントローラーは、メガドラミニのを使用。ちっちゃくてかわいい!質感良し!

難点はコントローラー毎、プラットフォーム毎、ブラウザ毎にボタンとスティックの対応がバラバラなこと・・・
idを見て、ひとつひとつ対応していくしかなさそうです。いろいろコントローラーまとめた共有ライブラリがどこかにあるかも?
なければ、作ればいいかも?

links
- メガドラミニ(コントローラーx1) 7,550円
- メガドラミニ(コントローラーx2) 9,800円(+2,250円)
- Gamepad APIの利用 - 開発者ガイド | MDN

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