音楽が手軽になったのは音のデータ圧縮、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」登場！
ジュニア・プログラミング・ワールド2019のPCN札幌ブースにて、早速約60名のこどもたちに届けられたとのこと！
札幌から送ってもらった時のレビューもどうぞ！
「PCに挿すだけ簡単IchigoJam、USBシリアル内蔵「IchigoKamuy」先行レビューとβファームウェア1.4b10」
iOS13が、HTML5のGamePad APIに対応した記念に、IchigoJam web を対応させてみました！
「IchigoJam web」
ブラウザで動くIchigoJam！教科書とあわせて、プログラミングの学習にもどうぞ！
ゲームパッド対応で、操作性良いゲームが作れます！対戦対応しても楽しいかも？
コントローラーは、メガドラミニのを使用。ちっちゃくてかわいい！質感良し！
難点はコントローラー毎、プラットフォーム毎、ブラウザ毎にボタンとスティックの対応がバラバラなこと・・・
idを見て、ひとつひとつ対応していくしかなさそうです。いろいろコントローラーまとめた共有ライブラリがどこかにあるかも？
なければ、作ればいいかも？
links
- メガドラミニ（コントローラーx1） 7,550円
- メガドラミニ（コントローラーx2） 9,800円（+2,250円）
- Gamepad APIの利用 - 開発者ガイド | MDN
福井県大野市で開催された「令和元年度福井県総合防災訓練および緊急消防援助隊中部ブロック合同訓練」にて、
たんなん夢レディオによる防災ラジオの応用、FMラジオを使って緊急時に解錠する実証実験が行われました。
FM波利用実証実験（写真提供、たんなん夢レディオ 理事長、菅原さん）
FM波の音声帯域のみを使ったデジタル信号送信方式といえば、ピポパ音でおなじみ(?)DTMF！
ラジオから流れる特殊コードで解錠する仕組み！
「ベル打ちヘルパー」
現代でも生きる古のポケベル入力！片手でマラソン走りながらでもブラインドタッチできるのが便利でした。
なんと、ドコモのケータイに固定電話や公衆電話からベル打ちでSMSが送れます！（送り方公式）
「公衆電話からスマホにメールが送れる!? ドコモの担当者「利用者はゼロではありません」 - FNN.jpプライムオンライン」
今も変わらずプッシュトーンでポケベル表を見ながら打つ方式。そういえば、DTMF、2012年一日一創にあったかも！
WebAudio正式実装前のコードだったため動かなくなっていた DTMF をメンテナンスして復活！
それを利用して作った「ベル打ちヘルパー」
これでスマホの電池が切れてしまっても、公衆電話からメールできますね！（相手がドコモでなおかつ、電話番号をメモっておく必要があります）
防災ラジオのしかけ人、たんなん夢レディオ創始者で会長の伊藤さん、北陸総合通信局長 三田さんと！
伊藤さん、この防災ラジオの仕組みを使った応用、いろいろと構想中！伊藤さんは、福井高専の一期生、さすが！
災害時に生きるラジオ！スマホが使えなくなった時、どうするか、シミュレーションしておきたいですね。
中部ブロックから消防車大集合！圧巻！
力任せなコンピューター利用、クラウド編です。（GPU編）
APIで手軽に扱えるVPSサービス「ConoHa」を Node.js で使ってみました。
なんと、初期費用0円、1時間1円から借りられるので、複数台のコンピューターを使った実験が手軽にできます。
（1コア512MB〜6コア8GB、最大10台まで）
試しに6コアも立ち上げてみたこともあって、前日分料金が25円！
管理画面からのサーバー立ち上げも簡単です。サーバーを一旦停止する必要がありますが、ストレージの内容そのままをイメージ保存できる機能も無料！
セットアップしておいて、保存しておき、そのイメージを使って立ち上げればいつでもすぐにいろいろ使えて便利！ハッカソンなどでのテンポラリなサービス立ち上げにもいいですね。
（Ubuntuのイメージ8GB弱なので、無料枠50GBに6つも入る計算！）
VPSですが、APIを使ってクラウドっぽく、気軽にサーバーを作ったり、消したりできます。(cmd4conoha src on GitHub)
コンソールで扱う便利なツールは、GitHubにもいろいろありそうですが、コンパクトに Node.js で扱うサンプルとして活用ください！
管理画面 APIで、ユーザー名、パスワード、テナントID、Identity Service のエンドポイントを env_sample.js をコピーした env.js に設定したら準備完了！
const tokens = await getTokens(env.username, env.password, env.tenant_id, env.id_endpoint) await addServer(tokens, image_name, 'g-512mb', 'gncs-ipv4-all')
tokensを取得して、サーバーを起動するプログラム例！
ConoHaの1コアでも1コア性能は、MacBookPro 2017とほぼ同程度となかなか高速。
WebARENAの「Indigo」もAPIが使えて、なんと最低料金時給0.5円から！ イメージ保存機能がないので、安く長期運用するならこちらがいいかもしれません。性能は、ミニマムスペックでの比較で、ConoHaの半分程度。 料金が即反映されるので、安心して使えそうです。（ConoHaは翌日反映）
「さくらのVPS」も新プランから初期費用が0円になりますが、時間課金とAPIはまだなさそう。
「さくらのクラウド」は、APIが使えて台数上限もないプロフェッショナル向け！ただ、ミニマム料金がちょっと高め。
「VPS KADOYA CLOUD」は、日額24円〜。
現時点でのクラウド入門には「ConoHa」がいい感じです。
クレカがなくてもコンビニ先払いにも対応しているので高専生など学生にもやさしい！
いろんなOSや、Minecraftのサーバーなど、いろいろなプリセットなOSを気軽に立ち上げられます。
links
- ConoHa（今なら1コア700時間分、700円分クーポン付き！）
ニューラルネットのPlaygroundで遊んでAIの感覚をつかんだら、TensorFlow.jsを使ってブラウザだけで気軽に実装、始めよう！
ID別に名前をつけた画像ファイル群をドロップするだけで学習開始。識別したい画像のドロップすれば識別してくれます！
ID別の確からしさも表示するシンプルなwebアプリ、AIの一種、機械学習(Machine Learning / ML)で作ってる感が楽しいです。
「AI画像学習＆識別 by TensorFlow.js」(src on GitHub)
「TensorFlow.js はじめのいっぽ JavaScript版」
人間（動物）の神経細胞をモデル化したニューラルネットワーク
例えば「猫っぽさ」を判定させたい場合、その要素として「活動量」と「耳のとがり具合」を数値化して、計算する感じです。
グラフ構造はややこしそうですが、意外と単純で、それぞれの数を特定の数で掛け算したものを足し合わせるだけです。
ここでいう特定の数を変数（Variable）と呼びます。
変数がちゃんと判定できるように調整していくことを学習と呼びます。
学習のために、猫なデータや、猫じゃないデータなどをデータをいろいろ用意します。
この中間層を2層以上にして、入力と出力合わせて4層以上のものを深層学習、ディープラーニングと呼びます。
こちら、Playgroundで、隠れ層（＝中間層）を2つ以上でディープラーニング！
いろいろ試してみましょう！（手書き識別、画像認識、音声認識など、中身はコレなわけですね）
AIを使ったサービスづくりの構成図です。
どういうUXを提供するか？AIをどう使うか？学習データはどう準備するか？どういうモデルにするか？
まずはUXをデザインしてみましょう！
TensorFlow.jsを使ったミニマムな学習から予測までのコードです。(src on GitHub)
<html> <head> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js"></script> <script> window.onload = async function() { const model = tf.sequential(); model.add(tf.layers.dense({units: 1, inputShape: [1]})); model.compile({loss: 'meanSquaredError', optimizer: 'sgd'}); // 学習用データ const xs = tf.tensor2d([1, 2, 3, 4], [4, 1]); const ys = tf.tensor2d([1, 3, 5, 7], [4, 1]); // 学習 await model.fit(xs, ys) // 予測 model.predict(tf.tensor2d([5], [1, 1])).print() } </script> </head> <body> </body> </html>
こちら応用してまのがファイルのドラッグアンドドロップで学習から識別まで試せる、画像識別です（再掲）
「AI画像学習＆識別 by TensorFlow.js」
識別精度はいまいちですが、makeModelでモデルをいろいろ工夫してみるなど、いろいろ遊んでみてください。
一度学習したモデルは、端末内部に indexdb として保存(model.save)され、次開いたときに再利用できるようにしてあります。
予測部分だけを変更するときは index.html の先頭をいじるだけ！(src on GitHub)
function log(s) { output.innerHTML = s } function predicted(id, out) { output.innerHTML = "識別した結果は" + id + "番です！" // 確からしさを加える for (let i = 0; i < out.length; i++) { output.innerHTML += "<br>" + out[i].id + "番 確度：" + (out[i].acc * 100).toFixed(2) + "%" } }
Enjoy playing with AI/ML!
コンピューターとより仲良くなる窓口、黒背景に白地のターミナル。（Windowsではコマンドプロンプト）
ターミナルを初めて使う人向けに、Node.jsを使ったシンプルな入門を詳しく解説してみました。
ngrokを使って、自分のスマホともつないだ自作のチャットで遊んでみよう！
「Webサービスはじめのいっぽ JavaScript / Node.js版」 for Mac
おなじみコンピューターくん。
パソコンは声操作は一般的ではないですね。
ここで登場、ターミナル！IchigoJamを使ったことある人にはおなじみ黒い画面。
ターミナルを起動しよう！
$マークがターミナルの証
aと打って
エンター
お返事が来るね！
シラナイコトバダナーって言ってるよ（IchigoJam BASICでは、Syntax error）
ファイルを見せてもらおう
ls、LISTの略！
cdを使ってフォルダをめぐるたび
サーバーサイド開発にチャレンジ！
ブラウザじゃないところで動かすJavaScript、「Node.js」を使ってチャットサービスをつくってみよう
計算機代わりにもなるよ！
教材「vuenodechat」をGitHubからダウンロード
エディタはVSCodeや、ATOMなど好みのものを使ってOK！
HTML/CSSをいじれば、すぐに自分だけのチャットサービスに！
ngrokはあくまでお試し用、本格的にサービスを公開したい時は、さくらのVPS（698円/月〜）から始めてみましょう！
京都造形芸術大学 情報デザイン学科 クロステックデザインコースの人に体験してもらいました！
いろいろ整ってきたAI関係。JavaScriptで動き、ブラウザだけでいろいろできちゃうライブラリ TensorFlow.js を使って、ドロップした写真を画像識別するアプリを作ってみました。
「ざっくりAI画像識別」
学習済みのモデルを使っているので、日本向けにもなっていません。写真をいろいろ用意しての学習もまたやってみます。
画像識別のコアのコードはたったこれだけ！シンプルです。
const model = await mobilenet.load()
predict.innerHTML = "準備OK!"
const pred = async function() { // predict
const img = document.getElementById('img')
const predictions = await model.classify(img)
const ss = redictions.map((p) => { p.className + " " + (p.probability * 100).toFixed(2) + "%" })
predict.innerHTML = 'Predictions:
' + ss.join("\n")
}
AIはじめのいっぽにおすすめしたい、ニューラルネットワークゲーム！
「ニューラルネットワーク Playground - Deep Insider」
左側のデータセットを予測するモデルをつくる神経細胞をモデルにした、ニューラルネットをいろいろ組み立てて、最小のニューラルネット個数で高精度99%(acc)を目指して競争しよう！
「壊れたりしないから好きにいじってみてね」というコメントが良い！
一番難しい、うずまきデータモデル、これが最小パターン！？
