橋本商会

AndroidでADK開発している時に便利なツールを作った → http://dev.shokai.org/js/websocket-client/

ADKをAndroidに挿すと、1つしかないUSBポートが埋まってしまって、logcatでデバッグ情報を見れなくなってしまう。しかし、俺の使っているNexusSはネットワーク越しのADB(Android Debug Bridge)はrootを取らないと使えない。

素晴らしいことにブラウザからlogcatを見る – 明日の鍵で、「LogcatSocketServer」というlogcatを全てwebsocketに流してくれるサーバーを作ってくれていた。これは凄く良い。

俺は普段はlogcatを複数開いて、 ^[DE]/ やアプリ名などでgrepしてエラーだけを表示したりしている。LogcatSocketServerの出力を分割してそれぞれgrepできるしくみがあれば、普段と同じ快適なAndroidアプリ開発環境が手に入る・・・ので作った。



webブラウザでwebsocketを受信して、縦分割で複数表示し、それぞれgrepできる。（クリックで拡大）
「+」ボタンを押す毎に分割パネルが増える。
この例では4分割して、左から順に「全て表示」「IOIOに関するものだけ表示」「DebugとErrorだけ表示」「バッテリー情報を表示」している。

Androidのデバッグだけではなく普通のwebsocketを使ったwebアプリのテストにも使えるはず。



■LogcatSocketServerのインストール
ブラウザからlogcatを見る – 明日の鍵にあるLogcatSocketServerをAndroidにインストールする。


バイナリがあるのでダウンロードして、AndroidにUSBケーブルつないでインストール。

wget http://tomorrowkey.googlecode.com/svn/trunk/LogcatOnBrowser/LogcatSocketServer/bin/LogcatSocketServer.apk

adb install -r LogcatSocketServer.apk

起動させ、start serverボタンを押すとAndroidがwebsocketサーバーになる。



■webブラウザでlogcatを見る
http://dev.shokai.org/js/websocket-client/を開く。Google ChromeかSafariでしか動かない。

LogcatSocketServerの画面に表示されているIPアドレスとポート番号を、左上に入力してに接続する。
「+」ボタンを押すとパネルが増える。あとはgrep欄に正規表現を書けば表示をフィルタできる。

^[VEW]/アプリ名 とかでgrepしたりすると便利ですぞ。


ローカルで実行するならgithubに置いたのでどうぞ https://github.com/shokai/websocket-client

git clone git@github.com:shokai/websocket-client.git

open websocket-client/index.html

こういうGUIアプリ、VisualStudioとかで作ってたけど無名関数をばしばし使えるJavaScriptの方が作りやすいですね。

IOIOの10bit ADコンバータと10kHz PWM出力を試した。

今回のコード https://github.com/shokai/android-ioio-study/tree/master/AnalogInOut


Androidの画面上のシークバーを操作すると、PWMによる擬似的なアナログ出力でLEDの明るさを調整できる。
ブレッドボード上のCdSで明るさを計測して、Androidの画面上のシークバーの長さで表示したりした。



動画




■準備
まず久しぶりに秋葉原に行ったら秋月が改装工事中だったので、他の店を見て回った。IOIOの開発者が使っているピンヘッダを千石で発見したので買った。




このピンヘッダ、みっしりと敷き詰めるように装着できる。いつも使ってるメスピンヘッダは隣のピンにぶつかるので敷き詰められない。


これでブレッドボードに線を引き出す準備が整いました


■回路を作る
ブレッドボードに5Vか3.3Vと、GNDを引き出す。
4番ピンでデジタル入力を試すために、タクトスイッチを通して5Vを流し込む。IOIO内部でGNDにプルダウンするので直結で良い。ただし、Read This Before Connectingに書いてある通り5Vを入れて良いピンは決まっているのでよくわからなかったらブレッドボードに出すのは3.3Vにしておいた方が良い。

3番ピンをLEDに接続する。PWMを試すため。

アナログ入力は40番ピン周辺に16個ある。45番ピンにCdSをつけ、10kΩで分圧した。





■プログラムを書く
書いた。
AnalogInOutActivity.java

1からAndroidプロジェクトでIOIOを使う方法は前の記事を参考にされたし


このへんのドキュメント参考になる。

• Wiki: 'Digital I/O' for ytai's IOIO – Codaset
• Wiki: 'Analog Input' for ytai's IOIO – Codaset
• Wiki: 'PWM Output' for ytai's IOIO – Codaset

重要なのはAnalogInOutActivity.javaの49行目あたり。

class IOIOThread extends AbstractIOIOActivity.IOIOThread{

	private DigitalOutput led;

	private DigitalInput btn;

	private PwmOutput pwm;

	private AnalogInput ain;

	protected void setup() throws ConnectionLostException{

		led = this.ioio_.openDigitalOutput(0, true);

		btn = this.ioio_.openDigitalInput(4, Mode.PULL_DOWN);

		pwm = this.ioio_.openPwmOutput(3, 1000); // 1000hz

		ain = this.ioio_.openAnalogInput(45);

	}



	protected void loop() throws ConnectionLostException{

		try{

			led.write(!btnLed.isChecked());

			if(btn.read()) seekBarDigitalIn.setProgress(1);

			else seekBarDigitalIn.setProgress(0);

			pwm.setDutyCycle((float)seekBarPwm.getProgress() / seekBarPwm.getMax());

			seekBarAnalogIn.setProgress((int) (ain.read() * seekBarAnalogIn.getMax()));

			sleep(10);

		} catch (InterruptedException e) {

		}

	}

}

DigitalInputはMode.PULL_DOWNにしておく。PwmOutputは1kHzに設定した（最大10kHz）
PWMもAnlogInputも、0〜1の間のfloat値で入出力値を扱う。Androidの画面のSeekBarは最大値を1000にしておいたので、IOIO上での値を1000倍してintにcastすればSeekBarに表示できる。


デジタル入力の状態をAndroidの画面上に表示する時、IOIOThreadからUI Threadを操作するとデッドロックが起きてアプリが停止するが、なぜかSeekBarはデッドロックが起きないので長さ1の小さなSeekBarを作ってデジタル値を表現するように工夫した。

ほんとうは「android.os.Handlerクラスのpost()を使え」、とyoggyさんが言っていたので今度やってみます。

IOIOのデジタル出力を使った。
作ったものはテストなのでどうでもいいとして、IOIOLibをimportして自分で1からAndroidアプリプロジェクトにするところと、Eclipseの設定でハマった事について書いておく。


■できたもの
コード https://github.com/shokai/android-ioio-study/tree/master/LED_Blink


Androidの画面上のボタンが3つあって、IOIOのLED3つと対応している。
1つ前の記事で作ったUSB給電ケーブルとeneloopで外でも動かせる。下の4つ目のボタンは気にするな。


動画



■EclipseのCompiler Compliance Level
Eclipse->環境設定->Java->CompilerにあるCompiler Compliance Levelを1.6にする。
これをしないと後述のioio.lib.impl.*impl.java等で90個ぐらいのエラーが発生してビルド出来ない。

でもCompiler Compliance Levelを変更すると、Level 1.5等で作ったAndroidプロジェクトが今度はエラー表示を大量にだしてしまう。なのでIOIO用に新しいworkspaceを作ったほうが良いでしょう。


■最新のIOIOLibを使わない
IOIO for Android Beginners Guide – SparkFun ElectronicsにあるIOIOLib.zipを解凍して、Eclipseでworkspaceにimportする。

こうなればよし。

http://codaset.com/ytai/ioioに最新版のgitリポジトリがあって、毎日すごい勢いで実装されている。
だが、最新のIOIOLibでビルドして動かしてみるとLogcat上でもAndroidとIOIOが接続できているっぽい様子が見えるが、デジタル出力ができなかった。firmwareも修正しているのでプロトコルがupdateされているのかもしれない。とりあえずBeginners GuideのIOIOLibを使いましょう



■新規プロジェクト作成
まっさらからAndroidプロジェクトを作り、IOIOLibを使う方法。

まず普通にAndroidプロジェクトを作る。どうも2.3.x以降じゃなくても動くらしい。http://codaset.com/ytai/ioioのサンプルもAndroid1.6用とかで作ってた。


プロジェクトを右クリックしてプロパティで、Android->Libraryに ../IOIOLib を追加する。workspaceのIOIOLibが読み込まれる。

Eclipse使ってない人は default.properties に

android.library.reference.1=../IOIOLib

を追加する。


AndroidManifest.xmlに

<uses-permission android:name="android.permission.INTERNET" />

を追加する。（どうもADKじゃなくて、debug bridgeを使って通信している様だ）

あとはAndroidアプリとしてごプログラムを書く


■IOIOのプログラムを書く
今回作ったMainActivity.java

まずioio.lib以下で必要な物をimportする。
MainActivityはandroid.app.Activityではなく、ioio.lib.util.AbstractIOIOActivityを継承する。
サンプルのHelloIOIOと同様に、クラス内クラスでAbstractIOIOActivity.IOIOThreadを作ってその中に関数setup()とloop()を作った。

そしてMainActivityからIOIOThreadを呼び出す。

@Override

protected AbstractIOIOActivity.IOIOThread createIOIOThread() {

  return new IOIOThread();

}

あとはArduinoっぽく書ける。

どうもActivityがアクティブの時しかIOIOは動かないらしい。Intentで画面遷移させるアプリから使う時どうなるか気になる。



■IOIOはADKじゃないっぽい
IOIOはADKで通信してるんだと思ってたら、debug bridgeを使って通信してるっぽい。http://codaset.com/ytai/ioio/wiki/IOIO-Over-OpenAccessory-BetaにADKとして動作させる方法が書いてある。



■logcatを見る
IOIOとAndroidを接続するのにUSBポートが塞がれるので、logcatができない。またNexusSはrootを取らないとWiFi経由でのadb logcatができないので、ブラウザからlogcatを見る – 明日の鍵にあるツールを使う。

wget http://tomorrowkey.googlecode.com/svn/trunk/LogcatOnBrowser/LogcatSocketServer/bin/LogcatSocketServer.apk

adb install -r LogcatSocketServer.apk

wget http://tomorrowkey.googlecode.com/svn/trunk/LogcatOnBrowser/Client/logcat.html

open logcat.html

grepしたいので、後でlogcat.htmlを改造しようと思う

Androidへのapkのインストールはhttpからできるので、https://gist.github.com/1090762でhttpdを動かしてUSBケーブルを抜き差ししなくてもapkをインストールしてlogcatを見る事はできる。多少面倒くさいのでこの辺どうにかしたい。

sparkfunによるADK上に作られたphidgets的な環境であるIOIO for Androidのサンプルプログラムを動かした。

ADKはAndroidとデバイスとの接続の仕様なのだが、Androidとマイコン両方のプログラムを書かなければならないので面倒くさい。
IOIOはADKのプロトコルの上で、Androidから出された命令に従ってIOを操作するマイコンボード。Javaのライブラリが提供されているので、Javaを書くだけでAndroidでハードウェアが制御できる。
IOIOのボード上にI2Cのポートがあるので、IOIOにさらに他のマイコンを接続する事もできる。


■買う
スイッチサイエンスで買った
スイッチサイエンス/商品詳細 IOIO for Android


■5V電源を作る
Read This Before Connectingを見ると、

・USBコネクタそばのVINに5〜15V入れるか、5Vピンに5Vちょうどを入れるかして電源を与える
・Androidから給電はできない（ADKの仕様）
・裏の黒丸がついてるピンだけ、5Vを入力できる。他のピンは3.3Vまで。それ以上やると死ぬ
と書いてある。


外に持って行ける電源が欲しかったので、USBケーブルを剥いて赤(VCC)と黒(GND)の線にピンヘッダを付けて5V電源を作った。
パソコンかエネループに接続すれば5VがIOIOに供給できる。




■サンプルプログラムをAndroidにインストール
IOIO for Android Beginners Guide – SparkFun Electronicsにサンプルがある。
0番ピンに接続されている基板上のLEDを光らせるプログラム。


ビルドされたapkが入っているのでインストールする

wget https://www.sparkfun.com/tutorial/ioio/HelloIOIO.zip

unzip HelloIOIO.zip

cd HelloIOIO

adb install -r bin/HelloIOIO.apk

■Androidと接続する
USBケーブルでAndroidとIOIOを接続する。
IOIOのUSBコネクタ近くの可変抵抗をドライバーか何かで回して、Androidの画面の上のバーに「USBデバッグが接続されました」と表示されるように調節する。


■サンプルを動かす
Hello IOIOを起動して、ボタンを押すとLEDが光る。もう一度押すと消える。

研究室の後輩にSinatraとhamlとjQueryを教えるために作ったテンプレートについて、ここにも書いておく

ソースコード https://github.com/shokai/sinatra-template
実際動いているもの http://masui.sfc.keio.ac.jp/sinatra-template/

git clone git://github.com/shokai/sinatra-template.git

■Sinatraを何に使うか
Sinatra+haml+jQueryが便利。
Railsと似てるけど、ちょっと違う。

個人的には
Rails → HTMLのページをいっぱい作るのに便利
Sinatra → 画面遷移あまりしなくて、同じURLのままjsonのAPIをjQueryのajaxで取得して動的に表示を変えるwebページを作るのには便利

に感じる。
でもSinatra自由すぎるので、ある程度実装パターンを知らないとメチャクチャになるのでこのテンプレートを参考にすると良いよ

個人的にはserial-http-gatewayと一緒に使ってデバイスと連動したwebページを作る、とかが手軽にできてよく使う。



■動かし方
gemでsinatra入れて、ruby development.ru
詳しくはREADME嫁


■テンプレートの解説
最低限の動作するおみくじアプリです
おみくじ結果をJSONで返すAPIがある
jQueryでajaxでJSON読んで表示する
hamlでhtmlを作る
開発用とデプロイ用の2種類のRackUp(*.ru)ファイル付き


■ファイルの説明
・README.md
　まず読め
・development.ru
　開発サーバーを起動し、main.rbとhelper.rbを読み込んでSinatraアプリを実行するスクリプト
・config.ru
　本番サーバーのapacheやnginxでsinatraアプリを実行するためのPassenger用スクリプト
・config.yaml
　”やむる”形式の設定ファイルです。アプリのタイトルしか書いてない。
　ここに設定値を書くようにするとアプリを配布するのに便利
　（必要になったら）DBの接続設定などを書くと良い。
・Gemfile
　アプリで使うgemを書いておく
　bundlerでgemを管理する時に使う
・helper.rb
　起動時に一回だけ読み込まれる
　必要なライブラリをロードするコードはここに書く
　（必要になったら）データベースへの接続などをここで行うと良い。
　app_rootという関数が定義されている（重要）
　これにより、開発サーバー・サブドメインでの運用・サブディレクトリでの運用でも内部のURLがズレない
　jsからサーバーのAPIにアクセスする時、hamlでcssを読み込む時などに便利
・main.rb
　Sinatraアプリ本体
　HTTPでアクセスしてきた時のresponseを書く
　app_root/omikuji.json でアクセスしてきた時に、ランダムなおみくじを返す
・views/
　hamlを置くディレクトリ
・views/index.haml
　http://(app_root)/ にアクセスした時に表示されるhamlファイル
　index.hamlをどのURLの時に表示するかは、main.rbで指定している
　main.js, main.cssを読み込んでいる
　rubyの変数のapp_rootをjsの変数app_rootに渡している（重要）
・public/
　画像やjavascriptなどの静的ファイルを置くディレクトリ
・public/js/jquery.js
　最新版のjquery
・public/js/main.js
　index.hamlから読み込まれるJavaScript
・public/css/main.css
　index.hamlから読み込まれるcss

SinatraやjQueryの基本的な使い方についてはググる。ライブラリの入門サイトとかを頭から読むよりも既に動いているアプリのソースを読んでわからない所を調べるのが一番速い。


■工夫しているところ
そんなに多いわけでもないけど、
・config.ruとdevelopment.ruを分ける。developmentから起動した時だけsinatra/reloaderを使ってアプリを毎回リロードさせている
・helper.rbの中身は1プロセス毎に1回しか呼ばれないので、DBとの接続や設定ファイルの読み込みはmain.rbと分けてここに書いておくといい
・app_rootという関数を定義してあって、開発環境や本番環境でAPIのURLがずれないようにしている
・haml内に書かれたRubyコードの動作についてはここにまとめた


■アプリの動作
ruby development.ruする→helper.rb読む→helperがyamlの設定ファイルを読む、app_rootという関数を作る→port8080でサーバーがthinに設定される→Sinatraアプリ(main.rb)を起動→main.rbは”/”へのアクセスにindex.hamlを返す、”/omikuji.json”にはランダムなおみくじと時刻を返す

ブラウザで”/”にアクセスする→cssとjsを読む、ajaxでおみくじを取得する関数がボタンに関連付けられる→ボタン押す毎におみくじ表示される



こんな感じで、ajaxでデータ取ってきてhtmlを書き換えるアプリの最低限のテンプレートを用意しました。
意外とDB無くてもglitchtweetやTweetButtonや増井研オーディオAPIのようなものは作れるので、まずはDBなしでSinatra+Haml+jQueryで何か作ってみるのが良い。


DB使うときは、SQL系ならActiveRecordsかSequelかDataMapperあたりがメジャーなのかな？多分。そのへんをまず単体で使ってみて、適当にtwitterのクローラーとか作ってみると良い。
それからSinatraの中に混ぜて使ってみる。いきなりjsで画面が書き換えて、Sinatraもいじって、DBも使うとかやると確実に破滅するので一つずつやるのオススメします