Microbit 工作〜ソフトシンセを鳴らす1〜

Microbitを使用して、iPadなどのiOS系のデバイスからMIDIデータ送信による、音楽再生ツールを作成しようと考えています。

Micribit工作

マイクロビットでどのようにやるかというと・・・
シンプルに、MIDIデータを送信しループしてデータを送信し続けるというものです。これが作れたら、iPadを使って簡単な伴奏をiPadにやらせて、自分はアドリブの練習をしようと考えています。

設計

仕様としては、Aボタン押下により伴奏を行う時のキー(ハ長調とかイ長調など)を選択します。#(シャープ)とかb(フラット)は面倒なので、キーは以下のものにしようと考えています。

C(ハ長調), D(ニ長調), E, F, G, A, B

以上の7つを考えています。

ちょっと妄想

月曜日〜日曜までと考えてCから始まりBで一週間を終わるようなイメージ、毎日キーを変えて同じ練習してもいいし、例えば、Cメジャー(ハ長調)キーの伴奏に合わせて、Am(イ短調)のスケールを合わせても良いし。。。うーん楽しそうだ!

楽しむために

ちょいと頑張ってみようか?ってかMicrobitはブロックコードでいろんなことができるので、実装はそんなに大変でないと思います。間違いなく前回作成したDBからカテゴリ情報を取得してくるよりは楽です。。。なぜかというとJSとPHPは癖が強く、「〜の場合は〜のやり方」でないと動かない時が結構あり。。。じゃPHPとか使うなよ!と怒られそうですが、他に手がなく。。。
PHPとかJSは、なんだかんだ言って付き合っている悪友のような。。。そんな感じです(笑)
ちなみに今、記載しているブログもPHPを使用しているWordPressを使用しています。

Microbitを始める

参考にするページはこちらです。下のようなページです。

学校などでプログラミング教育を行なっているようです。以前アメリカのどこだか忘れたけど、音楽に合わせて踊るなど(教育チャンネルでやっているようなもの)でプログラムの動きと体の動きを同じようにして「〜したらどうなる?」みたいなことをしているのを日本とアメリカでテレビ電話しながら互いのやっていることを動画にて共有することをやっている所のに参加したことがあります。
まさにグローバル!はっきり言って何を言っているのかわからなかった(笑)
英語の勉強も大切ですね。。。

当たり前な話ですが、Microbitは購入する必要があります。これは値段的には¥2,500くらいです。

なので、手軽に購入ができます。これを使用して世界的に「プログラミング教育」を行なっていますが、自分の思うところはScratchでも良いと思います。実際にプログラムを作って、動かす時にPC上で動かすのではなくIot的に使用するというのなら間違いなくMicrobitだと思います。
「とりあえずやってみるかな?」というのならScratchで十分だと思います。

Microbit買いました。

自分は、買ってしまった方なのですが、買ってよかったと思っています。
実際のところ、Scratchだとできることに限界があり、画面上(ブラウザ上)で何かをするというものです。
WebBluetoothを使用してPCからBluetooth接続というもの悪くないと思います。
しかし、手を動かして「Microbitを手に持って振ってみる」とかそういう物理的な動きでアプリケーションを動かそうとするのならMicribitでないとできません。というか面倒なことになります。

Microbitの良いところ

下の動画のように、電気が繋がらなくなってもの手回し発電機で動かすことができます。

そして、C++での実装も可能です。これにはMakeCodeというウェブサイトから実行することができます。
ここでは、C++コードを使用できます。
ブロックから一気に飛びすぎでは?と思ってしまいますが、マイコンボードであるMicrobitでは当然な話です。

通常のPCのようにメモリが多いわけでないので最小限のプログラムで作成する必要があります。
いづれにしろ、アイディアが鍵を握りますので、趣味としてもとても魅力的だと思います。

でわでわ。。。

関連ページ

  1. microbitからwebserverまでの旅
  2. Microbitで遊ぶ〜シリアル通信をする〜
  3. Microbitで遊ぶ〜ボタンを押す〜
  4. Microbitで遊んでみる
  5. MicrobitでHttpリクエストを飛ばすためのメモ


Microbit花火〜MicrobitからWebServerまでの旅〜

イントロダクション

マイクロビットで作成したプログラムから全世界にメッセージを送ろう!

実行手順

  1. マイクロビットでPCにシリアル通信でメッセージを送る
  2. PCで受けたメッセージをPythonでWebServerへ飛ばす
  3. ここの画面に表示されることを確認する


マイクロビットのプログラミング方法

Microbitで遊ぶ〜シリアル通信をする〜

シリアル通信の方法

マイクロビットによるシリアル通信プログラムを作成し、接続したUSBで「マイクロビット」→「PC」へマイクロビットで作成したプログラムから文字を送信する。

Micro:bit Python 〜マイクロビット→PCへシリアル通信〜

関連ページ一覧

  1. Microbitで遊ぶ〜ボタンを押す〜
  2. Microbit Python 〜シリアル通信データを受け取る〜
  3. WebSocket in PHP And JS 〜レンタルサーバー上でのWebSocket〜
  4. Python websocket client〜WebSocket送信処理を作る〜

 

Micro:bit Python 〜マイクロビット→PCへシリアル通信〜

送信したことを確認する for Mac

  1. Microbitで「シリアル通信」プログラムを作る
  2. ターミナルを開き、「ls /dev/tty*」(最後はアスタリスク)とコマンドを入力する
  3. 表示されたファイル名をメモしておく
  4. GItから"websocketSernder.py"ファイルをダウンロードする(コピーも可)
  5. ダウンロードしたpyファイルを開き「# コーディング1」と書いている下にある「diviceName = ""」の「""」に2でメモしたファイル名を記入する(例:deviceName="/dev/tty.usbmodemFA132")
  6. http://zenryokuservice.com/project/index.phpをブラウザで開く(PC)
  7. ターミナルから「python3 websocketSernder.py」を起動する

websocketSernder.pyをダウンロードしたディレクトリまでターミナルで移動してください。

ターミナルの使い方

Step1. とりあえず開きます。

手段1

  1. コマンドキーとスペースを押下
  2. Terminal.app」と入力してEnterキーを押下

手段2

右の様なアイコンをクリックする 

Step2. websocketSernder.pyファイルの場所に移動する

  1. websocketSernder.pyの場所を確認する
  2. ダウンロードフォルダにあった場合は"cd Downloads"と入力してエンターキーを押下する
  3. 次のコマンドを入力してエンターキーを押下する「python3 websocketSender.py」
  4. Micro:bitからシリアルデータを送信する

 

上の様なプログラムを作成した場合は、「Aボタン」を押下するとシリアルデータを送信できる。

健闘を祈ります。


Micro:bit スマホでプログラミング〜ブラウザにアクセス〜

イントロダクション

今回は、マイクロビットで遊べるページを作成(コピペ)を作成しました。Micro:bit -> ブラウザで遊べます。

下のリンクにある手順を踏んで、今回はマイクロビットを使って上記のページにブラウザ経由でアクセスしようと思います。

  1. Micro:bit スマホでプログラミング〜Bluetoothの設定〜

参考:マイクロビットのページです。

上記のサイトにはHTMLを作成するような記述があるのですが、こちら(マイクロビットで遊べるページ)に作成したものを配置しておりますので、よかったら遊んで見てください。

参考サイトの手順を追いかけます。手順的には「図7-1-2-9.ペアリング方法の変更(3)」まで終わっている状態です。

※スマホアプリにBluetoothのブロックが表示されていなければMicro:bit スマホでプログラミング〜Bluetoothの設定〜に戻って手順を踏んでください。

スマホでプログラミング!

スマホでMicro:bitのアプリを開きます。※インストールはこちら

上部の「+」マークのある部分、もしくは「Pair a new microbit」と書いてある部分をタップします。

こんな感じの画面が表示されるのでボタンを3つ押します。

裏側(A,Bボタンのない方)のボタンを2〜3秒くらいしたら話します。すると

上記のようなパスワード?ペアリング時の確認キーです。が表示されますのでそれを入力して次へ

「Pairingsuccessful」と表示されるので「OK」

この画面の「Create Code」を押下します。

ブロックはないと思いますが、コーディング用の画面です。

こんな感じでコードを作成します。Bluetoothのタブを選択して作成してください。

こんな感じでコードを作成したら。。。コンパイルしてマイクロビットへ送信(ダウンロード)します。

やってみた感想

一旦は動くけど、一度ペアリングが切れた後に再接続がうまくいかなかったりする、ちょっと不安定な感じでした。実際にコード書いて遊ぶならばPCでやった方が無難かな?

関連ページ一覧

Microbit Python HTTP リクエストを飛ばす

イントロダクション

下の関連ページ一覧にあるようなことをやってきました。Microbit→ PC →ときたので、今度はウェブサーバーにデータを飛ばそうと思います。

リクエストって何?

ブラウザを開くとGoolgeとかYahooとか出てきます。この時に見えないところで「HTTPリクエスト」を携帯の端末(スマホ)から、PCから「どこかにあるウェブサーバー」へとHTTPリクエストが送信されます。ここでいう「リクエスト」とは「HTTPリクエスト」のことです。

環境について

今回は現在使用しているレンタルサーバー「ミニムサーバー」での環境でPythonを使用します。サーバーのCGI仕様にあるように「Python 2.4」を使っているということなので(一応確認もしいました。PHPからPythonを起動してバージョンを確認しました。)

Pythonの2.4を基準にプログラムの構成を考えます。ちなみに自分はMac Book Proを使用しています。ウィンドウズでも関係なく使用できるコマンドだと思うのですが、実際のところはわかりません。

現状の問題は「リクエストを飛ばすにはどの部品(クラス)を使用すればいけるだろうか?」になります。

ネットで調べてみると結構出てくるのでちょいと試してみます。

ちなみにほとんどのものは追加でインストールする必要があります。そして、レンタルサーバー上で追加でインストールしたライブラリをどのようにインポートすれば良いのか?

とりあえず以下のコマンドを叩きます

pip install requests

実はここのサイトを見てやりました。ちなみに「request」と「requests」があるので注意してください。自分は、間違えて「request」の方をインポートしました。これは動きません。。。

Requestのインストール方法〜使い方までコード付きで記載してあります。

翻訳すると「哲学」という項目までありました。現代では「当たり前」になったリクエスト送信について触れてみるのも良いのでわ?

Pythonを実行してみる

コマンドは「pip install requests」を実行しそのあとで「python」でコマンドモードでpythonを開きます。※「コマンドモード」というかは定かではありません。

そして以下のように入力します。

import requests
r = requests.get("http://zenryokuservice.com/project/server.php")

これでリクエストを送信して「レスポンス」を取得します。

レスポンスはブラウザでいうところの画面が表示されたところです。なので中にはHTMLが入っています。

これはこれで、単発では使えないんだなぁ。。。


ちなみにPythonサーバーというのもあるみたいだ。

下のサイトで詳しく書いてある

https://www.linuxjournal.com/content/tech-tip-really-simple-http-server-python

関連ページ一覧

Microbit Python 〜シリアル通信データを受け取る〜

イントロダクション

JS、Javaとシリアル通信データを受信する方法調査してきたけど。。。

結局「C/C++」が一番適切ということになりました。しかし、プログラム初心者には敷居が高いのでノンプログラマにはお勧めできないのが現実。。。

そこでPythonでしょう!

という判断になりました。

Macの場合は簡単にインストールができることを確認済みです。

手順は以下の通り

  1. マイクロビットをMacにUSBで接続する
  2. マイクロビットのプログラムを作る
  3. Macがインターネットに接続していることを確認
  4. pip install pyserialコマンドを叩く
  5. Pythonプログラムを作る
  6. python exePy.py コマンドを叩く

<マイクロビットのプログラム>


<exePy.py>

import serial
import time

def main():
   ser = serial.Serial('/dev/tty.usbmodemFA132', 115200,  timeout=3)
   print(ser.port)
   print(ser.baudrate)


   ser.flushInput()
   ser.flushOutput()
   while True:
      try:
         #data_raw = ser.inWaiting()
         data_raw = ser.read(100)
         print(data_raw)

      except:
         print("Error")
      else:
         print("End Program")
         ser.close()
         break

<実行結果>

※マイクロビットで「Serial Data」を送信しています。

参考にしたサイト

pyserialのインストール

pyserialのドキュメント

シリアルコンソールを使う

関連ページ一覧

  1. MicrobitでHttpリクエストを飛ばすためのメモ
  2. Microbitで遊ぶ〜ボタンを押す〜
  3. Microbitで遊ぶ〜シリアル通信をする〜

Java Microbit Serial data connect 〜シリアル通信〜

イントロダクション

ここ数日、マイクロビットでのデータ通信をやりたいと思い。。。色々と調べていました。Bluetoothで繋ごうと思ったけど、WenBluetooth APIは制限が多く面倒なので、シリアル通信をやって見てはどうだろうか?と思い調べて見たところヒット!右中間を抜けて2ベースヒットくらいの勢いです。

ちなみに、今までやったのは以下のリンクにあります。

  1. MicrobitでHttpリクエストを飛ばすためのメモ
  2. Microbitで遊ぶ〜ボタンを押す〜
  3. Microbitで遊ぶ〜シリアル通信をする〜

マイクロビットからシリアル通信でデータを飛ばす→PCで受信することを確認したので、今度は受信したデータをHTTPリクエストで送信することを考えます。

そしたらJavaの出番かね?

このように思いました。じゃ、早速調べます。。。

「Javaでシリアル通信を行う」を調べて、見つけたのはjavax.commパッケージを使用してttyの入力を受け取る方法です。

javax.commパッケージのダウンロード

上のリンクからJARファイルをダウンロード。

そして、javax.commの使い方(サンプル)を見て実装(写経)します。

いつものように、ビルドパスの設定を行います。

  1. プロジェクトを右クリック
  2. プロジェクトのプロパティを開く
  3. Java BuildPathを選択する

そしてAdd External Jarsを選択して、ダウンロードしてきたJarファイルを選択します。 ※comm-2.0.jarを選択


そして写経する。。。

 

package jp.zenryoku.app.microbit;
import java.io.IOException;
import java.io.InputStream;
import java.util.Enumeration;
import java.util.TooManyListenersException;

import javax.comm.CommDriver;
import javax.comm.CommPortIdentifier;
import javax.comm.NoSuchPortException;
import javax.comm.PortInUseException;
import javax.comm.SerialPort;
import javax.comm.SerialPortEvent;
import javax.comm.SerialPortEventListener;
import javax.comm.UnsupportedCommOperationException;

/**
 * シリアル通信で送られてきたデータを受信します。
 * 使用する外部ライブラリ: javax.comm
 * 
 * @see http://www.java2s.com/Code/Jar/c/Downloadcomm20jar.htm
 * @author takunoji
 * 2018/12/05
 */
public class SerialReciever implements Runnable, SerialPortEventListener {
	/** シリアルポート(ID) */
	static CommPortIdentifier portId;
	/** 使用可能なポートのEnumeration */
	static Enumeration portList;
	/** 入力 */
	InputStream inputStream;
	/** シリアルポート */
	SerialPort serialPort;
	/** 受信するスレッド(Javaの起動スレッド) */
	Thread readThread;
	
	public static void main(String[] args) {
		// 初期化処理(必要な情報を集めます)
		initReciever(true);
		System.out.println("*** System Propertiees ***");
		System.out.println("java.home: " + System.getProperty("java.home"));
		System.out.println("**************************");
		// ポートが、あるか、ないか。。。
		boolean portFound = false;
		// デフォルトポート
		String defaultPort = "/dev/tty.usbmodemFA132";
		CommPortIdentifier.addPortName(defaultPort, CommPortIdentifier.PORT_SERIAL, null);
		if (args.length > 0) {
			// プログラム引数がある場合はこれをデフォルトポートにする
			defaultPort = args[0];
		}
		// ポートの取得
		portList = CommPortIdentifier.getPortIdentifiers();
		System.out.println("hasMoreElements: " + portList.hasMoreElements());
		while (portList.hasMoreElements()) {
			portId = (CommPortIdentifier) portList.nextElement();
			if (portId.getPortType() == CommPortIdentifier.PORT_SERIAL) {
				String portName = portId.getName();
				System.out.println("portName: " + portName);
				if (defaultPort.equals(portName)) {
					System.out.println("PortFound: " + portName);
					portFound = true;
					SerialReciever recieve = new SerialReciever();
				}
			}
		}
		if (portFound == false) {
			System.out.println(defaultPort + " is not found...");
		}
		
	}

	/**
	 * コマンドを実行して必要な情報を集める
	 * @param isExecute プロパティの取得のみを行う場合はfalseに設定する
	 */
	public static void initReciever(boolean isExecute) {
		
		if (isExecute == false) {
			System.exit(0);
		}
	}
	public SerialReciever() {
		try {
		    serialPort = (SerialPort) portId.open("SimpleReadApp", 2000);
		} catch (PortInUseException e) {}

		try {
		    inputStream = serialPort.getInputStream();
		} catch (IOException e) {}

		try {
		    serialPort.addEventListener(this);
		} catch (TooManyListenersException e) {}

		serialPort.notifyOnDataAvailable(true);

		try {
		    serialPort.setSerialPortParams(9600, SerialPort.DATABITS_8, 
						   SerialPort.STOPBITS_1, 
						   SerialPort.PARITY_NONE);
		} catch (UnsupportedCommOperationException e) {}

		readThread = new Thread(this);

		readThread.start();
	    }

	    /**
	     * Method declaration
	     *
	     *
	     * @see
	     */
	    public void run() {
		try {
		    Thread.sleep(20000);
		} catch (InterruptedException e) {}
	    } 

	    /**
	     * Method declaration
	     *
	     *
	     * @param event
	     *
	     * @see
	     */
	    public void serialEvent(SerialPortEvent event) {
		switch (event.getEventType()) {

		case SerialPortEvent.BI:

		case SerialPortEvent.OE:

		case SerialPortEvent.FE:

		case SerialPortEvent.PE:

		case SerialPortEvent.CD:

		case SerialPortEvent.CTS:

		case SerialPortEvent.DSR:

		case SerialPortEvent.RI:

		case SerialPortEvent.OUTPUT_BUFFER_EMPTY:
		    break;

		case SerialPortEvent.DATA_AVAILABLE:
		    byte[] readBuffer = new byte[20];

		    try {
			while (inputStream.available() > 0) {
			    int numBytes = inputStream.read(readBuffer);
			} 

			System.out.print(new String(readBuffer));
		    } catch (IOException e) {}

		    break;
		}
    } 

}

しかし、パソコンのOSに依存する実装しかできないため、シリアルポート通信を諦めるのでした。。。

よく考えてみれば、USBシリアルポートを使うんだもんなぁ。。。そりゃOSに依存するようなぁ(笑)

 

Microbitで遊ぶ〜シリアル通信をする〜

イントロダクション

前回は、マイクロビットでボタンを押したら△を表示するプログラムを作成しました。

Microbitで遊ぶ〜ボタンを押す〜

こいつをカスタムする

上の状態で、ボタンを押したのか、押してないのかがマイクロビット上で確認できるので、今度はこれに「シリアル通信」をつけて見ます。コードは下に。。。

そして、シリアル通信の確認をするためパソコンで受信した文字を表示するようにします。

<参考サイト>

  1. Macでのシリアル通信確認
  2. マイクロビットのドキュメント

<Macでの受信確認手順>

1:確認するためのプログラムがあるか確認する。

ターミナルを開き「ls /dev/tty.*」コマンドを入力

$ ls /dev/tty.*
/dev/tty.Bluetooth-Incoming-Port
/dev/tty.usbmodemFA132

Bluetoothでの接続はペアリングなどが面倒なのでUSB接続usbmodemFA132を使用します。

上の確認ができたら以下の手順を実行します。

  1. マイクロビットに作成したコードをコンパイルしてダウンロード
  2. screen /dev/tty.usbmodemFA132 115200コマンドを入力
  3. マイクロビットのAボタンを押す

※シリアル通信確認時のポート番号は適当(なんでも良い)なものを使用して良いのですが、他のアプリケーションと被らないようにする必要があります。

下に実際にやって見た動画を作成したので参考になれば。。。


Microbitで遊ぶ〜ボタンを押す〜

イントロダクション

マイクロビットで遊んでみようと思います。

スマホのアプリもあるのですが、調子が悪いのでPCでコードを作成して実行します。

手順

  1. ブラウザでエディターを開きます。
  2. コード(ブロック)を書きます。
  3. ダウンロードします。
  4. 起動確認します。

<作成したコード>

左下にある「Download」ボタンを押下してhexファイルをダウンロードします。

microbitにファイルをコピペしてやります。


MicrobitでHttpリクエストを飛ばすためのメモ

作戦その1:ブロックからC++を呼び出す

イベントハンドラを使用する

下のブロックは

下のコードに変換されるらしい

// このメソッド(関数)がイベントに反応して起動する
void onButtonA(MicroBitEvent e)
{
    uBit.display.print("A");
}

int main()
{
    uBit.messageBus.listen(MICROBIT_ID_BUTTON_A, MICROBIT_BUTTON_EVT_CLICK, onButtonA);
}

ということは、ブロックで作成したものを取得できるかもしれない。。。

→ブロック言語からC++が作成されるのであれば。。。

作戦その2:「ラジオ」ブロックを使用する

ラジオブロックのCコードは、uBit.serial.sendのようだ。

ここのサイトでは、以下の項目に関して記載がある

  1. MicrobitでのWifi接続手順
  2. TCP/IPでのリクエスト送信方法

しかし、なんで温度の表示を行う記事ばかりあるのかね?

 作戦その3

マイクロビットからUSBシリアルポートでのデータ通信を行う。

Javaでシリアルデータを受けてHttpリクエストを行う。参考サイト

Microbitで遊ぶ〜シリアル通信をする〜