はてなブックマーク

Web MIDI APIで楽器やMIDIコンと連携するWebアプリが作れるようになりました。 しかし、そうなってくると、Webアプリと連携する「自作」MIDIデバイスも作りたくなるものですね（強引） 今回は、MIDIUSBを使ってUSB MIDIデバイスを作ってみようと思います。 Web Audio APIや Web MIDI APIの記事じゃなくてごめんなさい。。。 おさらい。いろんなArduinoでのUSB MIDIデバイス自作環境 MIDIUSBの話に入る前に、ArduinoでUSB MIDIデバイスを自作する方法についておさらいしてみましょう。 Arduino UNO R3 Arduino Leonardo / Arduino Micro / Sparkfun Pro Micro など Arduino Zero (arduino.cc) / Arduino M0 Pro (ardu

さて、Advent Calendarですよ！ めりーくりすまーす！！！ Arduinoも遂に無線の時代に突入！！ そこで、WIFI-TNGだ！というわけで、今回の記事です。 WIFI-TNGとは? ESP-WROOM-02（ESP8266EX搭載モジュール）は大人気のモジュールなのですが、外部IOのピン間隔が狭く、変換基板などを使わないと、ブレッドボードやユニバーサル基板で使えません。 さらにArduinoからスケッチの書き込みを行うには、USBシリアル変換モジュールも必要になります。 人気がある割には少しハードルが高いなぁ、というのが正直な感想でした。 そんな時に、作者の@morecat_labさんから頂いたのがWIFI-TNGです。 WIFI-TNGは、@morecat_labさんオリジナルのESP-WROOM-02用基板で、ESP-WROOM-02とFTDI231Xを1枚のボードにコ

自分で作るMIDI音源 Hello World 2015.11.12 某イベント向けチュートリアル MIDI音源という、ちょっと古めかしい言い方にピーンと来たあなた！ Arduinoを使えば簡単に作れちゃいますよ！ というわけで、作ってみましょう。 こんなのが簡単に作れます。 ヘタクソな演奏例w 用意するもの Arduino UNO Rev.3 (mocoLUFAを焼き込んだもの) しょぼいスピーカー USBケーブル (ArduinoとPC/Macを繋ぐやつ) PC/Mac ISP端子をショートするためのジャンパーピン mocoLUFAの焼き方は かわいさんの手順書あたりを参考にしてください！ 作り方 ハード！ Arduinoの11番ピンにスピーカーのプラス側を、ArduinoのGNDピンにスピーカーのマイナス側を繋いでください。 以上！！ スケッチ！ 下記スケッチをArduinoに書き込

書いてね IoTで遊んでるから、Qiitaに書いてもいいよ と、会社で謎の**PPT（注：パワーポイント。「まーくだうん」ではない。）**を渡された。 ありがとう。でも、自分で書けば？ と返したが、 作るのは楽しいけどblog書くのは面倒なんだよね。 いやいや。。。。そこみんな一緒じゃない！？ と、まったく釈然としないまま書くことに。。。なんで！？ というわけで、謎のゴーストライター（？）登場です。 モチベーション→自動で植木鉢に水やりたい ということのようです。 あ、そう。 と反応しましたが、PPTには下記のように書いてあります。 水やりを自動で行いたい。（世には朝顔やひまわりを育てて観察するという教育があり、いつしか子よりも親が熱心に観察するという奇妙な出来事があり（略）） 植木鉢を車に積んでの帰省は・・（略） こんなん、いちいちPPTで書くなよほんとに。 機能 というわけで、読み進め

どうやら、後ろが2で終わるAVRが32PINで、この中ではピンが少ないようです。それでも多いんですけど。。。 いろいろ探してみると、秋月で下記2つが見つかりました。（海外でも探したのですが、USB対応のAVRはそれほど安くありません。秋月の現在の価格は海外と比べても安い方です） AT90USB162 (300円) データシート ATmega32U2 (400円) データシート データシートを見比べても、容量以外あんまり変わらないですね。 ADCやI2Cが無いですが、今回はとりあえず簡単にLUFAを使うことが目的で、かつROM 16Kbyteもあれば十分なので、安いAT90USB162を使って回路を作ることにしました。 32ピンとはいえLQFPパッケージなので、変換基板が無いとブレッドボードやユニバーサル基板で回路作れません。 一緒に変換基板も買って帰ってさっそく回路を作ります。 回路 下記

WebSocketの接続切れたら再接続したい。 ws.readyStateを見て再接続すれば良いみたいだが、どのような状態をとるのか？ 参考資料 WebSocket API 日本語訳 どうやら、 connecting (0): 接続しようとしているが、まだつながってない open (1): つながってる closing (2): 切ろうとしている closed (3): 切れた ということのようだ。 状態遷移こんな感じ？ WebSocketのreadyState、これであってるのだろうか?どんな流れで変わるのか？自分の理解のために絵を書いてみた。 。。。。違ってるかも。 もし違ってたら誰かツッコミ頂けると助かります。気づいたら教えてください。お願いします。 検討したこと ブラウザを動かしてるマシンのWIFI叩き切っても1分くらいreadyStateが1のままだったりするので困る。 navi

[WIP] Arduinoで音を出したい（メモ） Arduinoといえば、何故かMIDI関連ばっか作ってるので、毛色を変えて音が出るモノを作ってみたいと思います。 あまり変わってない？ というわけで、簡単にArduinoで音を出したい（サウンドを生成して鳴らす）というメモ。 今日は休日ということもあり、こんな感じ（圧電スピーカーだけ！w）で試すことに。 ※よく見るとArduino UNOじゃなく互換機なのですが、お気になさらずw tone() これが一番簡単ですね。tone()で、矩形波が出ます。周波数で音程を指定できます。 たとえば、こんなコードで簡単に音が鳴ります。 void setup() { pinMode(8, OUTPUT); // D8にスピーカー繋ぐ。 } int sounds[] = {200,300,400,600,800,1200,1600,2400}; int v

Arduino Advent Calendar 2014 17日目の記事です。 以前書いた、「Arduinoで、小っちゃいIC（ATTiny）を使う方法」の続きです。 メリークリスマ〜ス（ちょっと早い） 前回、ArduinoでATTinyという小さいAVRを開発すると楽しい、という話をしました。（超てきとう） 今回は、このATTinyシリーズ (製造元サイト)の中から、独断と偏見で Arduino初心者でも扱いやすいと思うもの（基本的にArduino UNOなどのArduinoボードとArduino IDEだけで書き込みできるもの） をピックアップして紹介したいと思います。 Arduino IDEとArduino UNOでATTiny45に書き込んで作ったUSB MIDI音源 ArdionoでATTinyを開発する方法については、Arduino IDEで ATtiny/ATmega 開発環

ちょっと触ってみたいだけなんだよ。 メリ〜クリスマ〜ス！！！！（まだ早い） WebRTCのHello Worldって、ビデオチャットが簡単にできる！というものが多いですよね。 確かに、真剣にWebRTCを覚えたい人には、ビデオチャットを作ってみるのは良い手かもしれません。 WebRTCの機能を一通り覚えられるからです。 getUserMediaの使い方 mediaStreamの使い方 peerConnection P2Pで繋がる仕組み（STUNとかTURNとかの仕組み） こんな感じのことを、いっぺんに覚えられるはずです！しかし！ 私は覚えらてない！ だがそろそろ、WebRTC Hello Worldは終わったと言いたい。 というわけで、今回、自分のために おもいっきりハードルを下げてみようと思います。 好きなところをちょっとつま食いしただけでも、WebRTC入門完了。 ここまで下げればいい

Arduino UNOとATTiny13Aを使ったタッチセンサーMIDIコントロールデバイスの作り方 何? 昨日、六本木のGoogle Japanで開催されたWeb Music ハッカソン #3で、りんごやナスにセンサーを繋いでヒドい音を鳴らすというパフォーマンスをさせていただきました。 「Web Music ハッカソン #3」Hangoutsライブストリームの録画。私は7:00くらいから登場！ ビデオ何回見てもヒドい感じでw例によって技術的な説明無しだったので、前回同様、使ったデバイスの作り方を記事にしてお茶を濁そうという魂胆です。 洗濯バサミやワニ口クリップが写っていますが、これと洗濯カゴの中にある基板と繋がっていて通電しています。 (Macについてる洗濯バサミは、単なる飾りですw) これに通電するモノを繋ぐと、それがセンサーになる。というものです。 作りたくないよ？ 単に繋いだモノを

Open Web Boardを使ってFirefox OSアプリ開発に入門してみた！ Open Web Boardとは? Open Web Boardとは、KDDIが開発者向けイベントで配布しているFirefox OS（FxOS）ベースの小さな開発ボードです。 パソコンとFirefoxブラウザがあれば、このボードで動くアプリを開発することができます。 Open Web Boardのスペックは下記のような感じです。 CPU RK3066 (Cortex-A9 Dual) USB (電源用と拡張用の2つ) HDMI (モニタ用) RAM 1G ROM 8G 初期搭載Firefox OSバージョン v1.4 これを私も11/1にKDDIで開催された『Open Web Board』 『Gluin』 ハンズオン＆ラピッドプロトタイピングに参加してGetしてきましたので、これを機にFirefox OSの

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Arduino UNOで SPI接続のSRAM（23LC1024）を使ってみる なぜSRAM? 足りないからです！w ArduinoのIC、ATmega328Pは 2Kbyteしか SRAMが搭載されていません！ いろいろな変数も使うことを考慮すると、大きなバッファーが使いたいときでも、せいぜい1Kbyteくらいの配列しか使えません。 ※注意！：これはSRAMではありません！！！Lambですらなくたぶんマトンです。しかし可愛い。。。。 これじゃ足りない！増設したい！ ※注意！：こいつらもSRAMではありません。 こんくらいに！！！ 23

上記のように書けば、音の再生・停止等を行うコントローラーを表示することができるはず。 しかし。 対応するオーディオフォーマットやコーデックに機種差分がある controls属性で表示されるコントロールUI表示にもブラウザ毎に大きな差分がある と言われており、HTMLだけで書く上記の方法は、あまり使われていない模様。うーむ。 納得いかないので、どのくらい使えないのか？、自分の目で確かめてみることに。 いや、もしかしたら使えるかもしれないでしょ？！ やってみたこと ヘッポコなコンテンツを使って、いろんな機種（スマホ）で動作確認してみることに。 aac(.m4a)、mp3(.mp3)、ogg-vorbis(.ogg)を選択して再生できるように。 ここはCSSのことをとやかく言う場ではありません。スルーする場ですw 確認してみた機種は下記の通り。 iPhone 5C (iOS7.1.1) Mobi

JavaScriptだけでMIDIで遊べる！最高に乱暴なWeb MIDI API利用方法 Web MIDI API / Web Audio APIを使ったハッカソンイベント「Web Music ハッカソン #3」が近づいていますので、ここでWeb MIDI APIの使い方を振り返ってみましょう。 はじめに断っておきますが、これは 乱暴者による乱暴者向けの記事です。 最低限の手間で、Web MIDI APIに対応してる気分を味わう までを目指します。 [2015/02/08 追記] さらに手間をかけたくないという超絶手抜きな人（ワシです）向けに、アホみたいなラッパー(poormidi.js)作りました。 使い方 良かったら使ってみてください。 ちゃんと勉強したい方は、下記リンクを見てください。 ちゃんと勉強したい方向けリンク集 Web MIDI API (W3C) Web MIDI APIの

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Raspberry Piを使って音を出したい。 どんな手があるのか、ぐーぐる先生に聞いてメモ。(随時追加します） こんなんあるよー！と、どんどん教えて頂けたら嬉しい！ やりたいこと WAVとかを再生したい。ただし普通に再生するんじゃなくて、速さを自由に変えたり巻き戻し再生みたいなのもやりたい。 ルーパー エフェクト処理 マイクから録音 スピーカーから鳴らす シンセ などをプログラミング、組み合わせて変態音楽に使いたいｗ ようするに、Mac+MAXでやってるようなことが部分的にでも出来たら嬉しいな。と。 候補 やってみた結果ではなく、やれ

追加は1行だけです。 それでは、http://localhost:3000にブラウザでアクセスしてみましょう。 こんな風に表示されたら、とりあえずOKです。 「accounts-uiの言う通りに」設定する ここから先のやり方は、こと細かくaccounts-uiが教えてくれます。 どういうこと？ やってみれば判ります！w まずは、Googleアカウントからです。 Meteorの設定と、Googleへのアプリケーションの登録を同時に行います。 先ほど動かした、http://localhost:3000 で「Sigin in」をクリック メニューが表示されるので、「Configure Google Login」をクリック さらにポップアップが出てくるので、あとは 書いてある通りに やる。 最後に、ClientIDとClient secretを入力して「Save Configuration」をクリ

ブラウザからWebSocketとOSCを使ってMAXを操作してみる モチベーション 久々にMax触りたいので、コントローラ募集中。うちにiPhone×2+iPod touch 5th×1がある！コレ使いたい。というか、iOSしかない！w iOSCは素晴らしいし大好きだが、自分でもUI作ってみたい でもiPhoneのネイティブアプリ作りたくないのでブラウザでやりたい。 インターネットに出て行くなんて使い方はしないので、レイテンシーなんとかなるはず！ ブラウザで作れるようにしとけば、iPhoneだけでなく、ブラウザ+Arduino+センサ、Web MIDIとか、WebRTCとか、いろいろと夢(妄想)が広がる！ というわけで、自分以外に誰も得な人が居ないと思われる記事ですw レイテンシー気にせず変換作戦！ ↓こんな風に途中で変換すれば、なんとかなるはず！という作戦です。 MaxをWebSocke

突然ですが、Arduino UNOでMIDIコントローラーが作りたいですね！ というわけで、以前、缶の作り方を紹介しましたが、今度はもっと簡単なのを紹介します。 Arduino UNOをそのまま使って、ボリューム、CDS、スイッチ1を1つづつ繋ぐだけ！ USBをそのまま使うので、MIDIケーブルもMIDI/IFも不要！ しかも、今度のやつの方が、機能が豊富です。 なななんと！前回の缶はノートON/OFFができるだけでしたが、今回は音程も変えられるし、なんとピッチベンドもできちゃいます。 頑張ればメロディーが演奏できるかもしれません！（相当難しいですw） さっそく作ってみましょう！ 2015.7.22 記事が古くなりましたので、Arduino IDE 1.6.3とArduino MIDI Library 4.2に対応するよう修正しています。 材料を集めよう 私はちっちゃいのを作りたかったので

今回はチュートリアルに挑戦！w Meteor.jsは、 Webアプリづくりを楽しくする フレームワークです。 前回はv0.8.0での変更点を見てみましたが差分情報ばかりで、あまり「超初心者向け」になってませんでしたね。すいません。 やはり、作りながら覚えないと面白くない！ というわけで、今回は、動くものを作りながらテンプレートやデータベース（コレクション）の使い方を覚えちゃいましょう！という企画です。 つくるもの：シンプルなチャット 今回は、チャットを作ってみましょう。 こんなの(ライブデモ)です。 こんな感じのものです。 チャットなのでリロード無しに相手が書き込んだときに自動的に自分が開いているブラウザの表示に反映される。 ログイン機能などは無し。部屋のような機能もありません。誰でも書けます。 テキストボックスでenterキーを押したら入力を確定させます。 見やすいように色分けする機能つ

Meteorとは? Meteor.jsは、 Webアプリづくりを楽しくする フレームワークです。 node.jsをベースとしたフルスタックフレームワークで、サーバサイドの処理も、データベース処理も、クライアントと同様に全てjavascriptで書くことができます。 大体、こうしたものは、お作法覚えるまでが大変で初心者泣かせだったりするのですが、Meteorは 初心者に鬼フォーカスしてる 点が特徴だと思っています。 はじめるには? 2014.12.19更新 本家Tutorial Meteor 1.0のリリースに伴いチュートリアルサイトもできました！ 英語ですが、こちらを進めるのが良いと思います。 リアルタイムWebアプリケーションフレームワークMeteorについて 良記事です！ Meteorを勉強するモチベーションが高まるとおもいます。 フルスタックJSフレームワークMeteorのメリット＆

[2015.11.8更新]この記事は古いです！ Macへのdfu-programmerのインストールはhomebrewで を参照ください。 どんなときに使う? ずいぶん前に、こんなん作りました。 これは、中にArduino UNO R3が入っていて、USB経由でMacのDAW (Ableton Live)と連携しています。 いわゆる、USB MIDI フィジコンってやつです。 MIDIにするファームはmorecatlabさんが配布してる「Moco for LUFA」というものを使わせていただいたのですが、このファームはArduinoに搭載されているATmega328Pじゃない方のICに書き込むためのものです。 Arduino UNOにはATmega328Pとは別にもう1つ、USBシリアル用にATmega8U2 (UNO Rev.3では16U2)というICが搭載されていて、このICのファーム

なんで、こんな風になってるんですかね。 レスポンシブデザインの勉強会でfluid imageを教えてもらったのですが、スマフォ用サイトでPC用のでっかい画像を縮小して使え、はないと思います。 これはアレですよ。 100gの牛肉 が欲しくて注文してるのに、A○azonから 牛1頭届く ようなモンです。 さずがのA○azonさんでもたぶん送料取りますよ? そのうえ送られて来た牛どーすればいいの！サバくの大変だよ？！というか可愛くてサバけない！ これは絶対変！ と、無知ゆえに勝手に脱線し妄想を膨らませ大いに怒り狂っていたところ、 レスポンシブイメージというのを使えばいいはず。。 最初っから50%に縮小してサーバに置いとけばいい。。 という声が聞こえてきました。 何それ？ というわけで、調べてみることにしました。 レスポンシブイメージって何? 牛 じゃなくて 牛肉 が出荷される方法のようです。 サ

簡単アニメーション！Pixi.jsを触ってみる！ 〜（3）複数のオブジェクトを動かしてみる〜 前回から間が空いてしまいましたが、Pixi.jsの続きです。 pixi.jsの公式サイトへ Pixi.jsはJavascriptで簡単にアニメーションが作れるライブラリです。 前回は画像の動かし方と代表的なプロパティを触ってみました。 今回は、複数のオブジェクトを組み合わせた表現に挑戦してみたいと思います。 簡単な方法でうごかす 1つの画像をたくさん動かす まずは簡単なところから。 ということで、1つの画像ファイルから沢山のスプライトを作成してアニメーションさせてみます。 実は、これ前回既にやっています。雪のサンプル 画像ファイルから複数のスプライトを作っている部分のコードです。 // 画像からスプライトオブジェクトを作る var texture = PIXI.Texture.fromImage(

簡単アニメーション！Pixi.jsを触ってみる！ 〜（2）画像を動かしてみる〜 昨日の大雪は凄かった。。。そして今日は都知事選挙。 と書き出したまではいいが、本当に今日のうちにUpできるか謎ですw 前回は、Pixi.jsのインストールとHello Worldを書いてみました。 今回は、いよいよ画像を動かしてみたいと思います。 まず画像を1つだけ動かしてみる それでは早速Pixi.jsを使って画像を1つだけ動かしてみます。 前回同様、簡単なコードを書いてみようと思ったのですが、ネットで見つかりましたので先に紹介します。 葉っぱ画像が回る！ PeepsQuest.comのPixi.js Basicsのページ こちらもキャラ画像が回る！ gitHubのREADME.mdの'Usage' はい。どちらもグルグル回ってますねー。 それでは、上記サイトをまねして（ほぼ丸パクリでw）コードを書いてみます

簡単アニメーション！Pixi.jsを触ってみる！ 〜（1）テキストを動かしてみる〜 突然ですが、 Pixi.js を触ってみることにしました。 （前フリ無しw） Pixi.jsとは? Pixi.jsは、Goodboy Digital社が配布している2D描画用のjavascriptライブラリです。 下記サイトで配布されています。 MITライセンスに基づくオープンソースソフトウエアとして開発が進められています。 このライブラリを使って作ったアニメーションは、WebGLを自動的に使ってくれるようです。 （非対応のデバイスではCanvasを使う）。 難しそうなWebGLを覚えなくて使えるのはうれしいです。 pixi.jsのexampleページでデモが紹介されていますので、いくつか見てみましょう。(スクリーンショット画像クリックで本家pixijs.comサイトのexampleページに飛びます) Ex

Arduinoで、小っちゃいIC（ATTiny）を使う方法 ちっちゃいICを使いたい！ Arduino、始めたばかりですが超楽しいです。（いや始めたばかりだから楽しいのかw） お金が無いせいで、シールドとかにはまだ手を出してなくて、Arduino UNOとブレッドボード、それと安く手に入る部品だけを使って遊んでいます。 ブレッドボードで動作確認したら、ICをUNOから引き抜いて、ユニバーサル基盤に作った回路に組み込んでみたり。こうした使い方をしていることもあり、ATmega328Pを追加で買ったりしてるのですが、ATmega328Pは1コ250円もして、少々お高いのが気になってました。 それに28PIN-DIPって簡単な用途には大きくて配線もたいへん。 将来量産（なにを？！いや何か絶対！w）を見据え、もっと物理的にちっちゃいICを試してみたい。でも表面実装(SMD)版とかハンダ付け超ムリ！