音楽プレイヤーその2

とりあえずページをすっきりさせることだけはできました。

曲名をクリックすれば説明とURLとプレイヤーが出る。

jquery.collapseを使ったんだけど、作業中、IEだけフリーズしてすごく悩んだ。

結論から言うと、このプラグインが原因でなくて読み込むflashのファイルが無くて読み込みに時間がかかってたようで。うん、ごめんなさい。

しかしファイルがちゃんとあるアップ後もダメだったので、いかんせん謎。

内容を記述してるテキストファイルの処理行数を1行にしたら一瞬だった。

少しずつ増やして、68行まで耐えた。ちなみにファイルにはタイトル・説明・URL・空白の4行で1曲になるようになってる。17曲まで表示できたということに。

んで、コンテンツはインスト版とボカロ版で分けてるので、それぞれ半分の34ずつにした。

そしたら変なとこで区切ってしまってレイアウトが崩れた。

ソース見て即理解。

んで安定したのでインスト版の読み込み数をちょっと増やしてみた。

あまり重たくない。

いっそフルで読み込み→問題なさそう。

じゃあボカロの方もフルで読み込み→そんなに重くない。

・・・とりあえず完成。

どうも最初に戻った気がするんですが。どっかケアレスミスでもしてて、度々弄ってていつの間にか消えたのかな?

今はIEで閲覧されるのが怖いです。

プレイヤーはとりあえずflashで作り直してます。

絶賛四苦八苦してるのでまだまだ暫くは旧プレイヤーに頼りそう。

音楽プレイヤー

自サイトで音楽再生に使ってるFlashのプレイヤーを作り直したいと常日頃思ってます。

…ですが、今作り直すのにFlashを使うべきなのか?と思いHTML5とかを軽く調べてみました。

どうもHTMLの<audio>で再生できる形式はブラウザ毎に全然違うようです。mp3やらoggやら…

複数形式を用意しておけばとりあえずほとんどのブラウザで再生できるようには作れるみたいですが、いかんせん音データを複数で持つと管理&容量的に負担がでかいのでできません。

色々考えつつ、結局いつも待ちの姿勢になって落ち着きます。

とりあえず今のところはFlashでもいいんだけどね…

Arduino→Android→ネットワークの実験その2

Androidを使った実験として、今度はネットワークからの制御をしてみました。

我が家は普通のコンセントから繋いだ間接照明を利用してる為、それに使用することで、世界中誰でもブラウザで私の部屋の照明をオンオフしやがれって企画です。

Twitter等で告知して公開実験したときの特設サイト↓

http://pocomo.skr.jp/android/

手書きのラフなブロック図ですが、下記の通りとなります。

  • ハードウェア&Arduino

コンセントのオンオフはリレーで行います。

リレーにはomron製G5CA-1A(5VDC入力 耐圧10A 200VAC)を使用しました。

Arduinoからコイルの直接駆動は厳しいので、トランジスタ(2SC1815)で駆動します。ベース抵抗に3K程度。

これであとは普通にArduinoのIOをoutputにし、HIGH/LOWさせればコンセントの電源をオンオフできます。

Arduinoのソースはこちら

—–


#include <LiquidCrystal.h>

const int analogOutPin = 9;//LED PWM出力ピン
const int relay = 13;//リレー用ピン
int sensorPin = A0;//CdS入力ピン
int sensorValue = 0;
int outputValue = 0;
int temp = 0;
char sRead;
char cnt=0;
int reflesh=100;//LCD 照度更新レート
int frame=0;

//LCD設定
LiquidCrystal lcd(11, 12, 2, 3, 4, 5);

void setup()  {
 //IO初期化
 pinMode(relay, OUTPUT);
 digitalWrite(relay, LOW);

 //シリアル初期化
 Serial.begin(115200);

 //LCD初期化
 lcd.begin(16, 2);
 lcd.setCursor(0, 0);
 lcd.print("Input :");
 lcd.setCursor(0, 1);
 lcd.print("Output:");
}

void loop() {
 //シリアル受信
 //LED輝度調整とリレーオンオフを兼用
 if (Serial.available()){//受信データ有り
  sRead = Serial.read();
  if(sRead=='B'){//LED最大輝度
   analogWrite(analogOutPin, 255);
   digitalWrite(relay, HIGH);//リレーオン
  }else if(sRead=='N'){//LED普通輝度
   analogWrite(analogOutPin, 50);
  }else if(sRead=='D'){//LED暗め
   analogWrite(analogOutPin, 20);
  }else if(sRead=='O'){//LEDオフ
   analogWrite(analogOutPin, 0);
   digitalWrite(relay, LOW);//リレーオフ
  }else if(sRead=='R'){//CdS情報リクエスト
   VRout();
  }

  if(!cnt){
   lcd.setCursor(7, 0);
   lcd.print("         ");
  }
  if((sRead!='\r')||(sRead!='\n')){//デリミタ受信時LCD書き換え
   lcd.setCursor(7+cnt, 0);
   lcd.print(sRead);//受信データ表示
   cnt++;
  }
  if((sRead=='\n')||(cnt>9)){//LCDは9文字目まで
   cnt=0;
  }
 }
 if(frame >= reflesh){
  sensorValue = analogRead(sensorPin);//CdS読み取り
  outputValue = sensorValue/4;//10bit→8bit

   if(outputValue !=temp ){
    lcd.setCursor(7, 1);
    lcd.print("   ");
    lcd.setCursor(7, 1);
    lcd.print(outputValue);//LCDにCdS値表示
    temp = outputValue;
   }
   frame=0;
  }

 frame++;
 delay(2);

 }

 void VRout(){
 Serial.println(outputValue);//CdS値をシリアル送信
}

—–

  • Android

Arduinoの制御は前回記事同様にAndroid側にFTDriverを使わせていただいてUSB接続しています。

ついでに前回の名残でArduinoで取り込んだCdSセルの照度をサーバーに送信してますので、そちらも部屋の明るさログとして流用しました。

20秒毎にサーバーにアクセスするポーリング方式です。GCM APIを使えばPUSH送信のシステムも組めるようですが、今回は手っ取り早く済ませました。

Androidのソースは現在ひどい状態なので勘弁してください。

  • サーバー

Androidからアクセスする先のサーバーに置いてあるperlソースはこんなかんじです。

—————————————————-


#!/usr/local/bin/perl

#POST送信されたデータを受け取る
if ($ENV{'REQUEST_METHOD'} eq 'POST') {
 read(STDIN, $alldata, $ENV{'CONTENT_LENGTH'});
} else {
 $alldata = $ENV{'QUERY_STRING'};
}

foreach $data (split(/&/, $alldata)) {
 ($key, $value) = split(/=/, $data);
 $value =~ s/\+/ /g;
 $value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack('C', hex($1))/eg;
 $value =~ s/\t//g;
 $in{"$key"} = $value;
}

#status.txt(照明の状態)を読み込み
open(IN,"status.txt");
@file = <IN>;
close(IN);

#log.txt(照度ログ)を上書き
open(OUT,">log.txt");
print OUT $in{'message'};
close(OUT);

#POST送信元(Android端末)へのレスポンス
if(@file[0] == "1"){
 print"On";#Androidに"On"を返答
}else{
 print"Off";#Androidに"Off"を返答
}

exit;

——————————

‘message’はAndroidからのアクセス時に照度情報を送ってlog.txtに書き込んでます。(実験中につき名前の付け方がおかしいのは気にしない方向で…)

照明のオンオフはstatus.txtに入ってる1か0の数字を読み取り、1のときはAndroidに”On”、0のときは”Off”を送信。

このstatus.txtをウェブブラウザのフォームで書き換えできる、という仕組みです。

Android側は受信した”On””Off”をもとにArduinoにシリアル送信して出力制御します。

  • 所感

Twitter,facebook,mixiでページを公開し、2時間ほど実験してみましたが、時折、平均すると1,2分に1度ほどパチパチされました。

物理的に自分にアクセスされることは、ネット上でコメントなどやり取りするのともまた違った感覚があって面白い体験ができました。同時にすごく見られてる感じがして落ち着かなくもありました。

  • 課題

問題点は、2時間程でスマホが再起動して動かなくなってたことです。やはりAndroidは手で持って運用することが第一で、固定して遠隔操作させるには安定性など不都合が面が多いことを実感しました。組み込み用などの為にウォッチドッグ機能とかあれば心強いのですが…

また普通に家で使うならArduinoにEthernetで繋げば早いので、そもそもAndroidを使う利点も薄くなってます。

今回のシステムについて、遠隔操作で他人に弄ってもらうのは面白いのですが、面白いのは9割方私自身だという事も弱点です。

せめて7割くらいにしようとUstreamで配信していましたが、演出として実に微妙です。フィードバックが弱い→すぐ飽きるのは致命的。

  • 今後の改善案

・物理的に動かしたものをみんな楽しめる

→アコースティック楽器をモーター等で鳴らして、それをwebラジオ配信、BGMとして使えるレベルに仕上げる

・操作先が多人数の施設およびイベント

→ライブ中の照明コントロール、ライブカメラ移動、音色チェンジ等…

なにかそういうもので使えるといいかなと考えてます。

あまりに混雑しても意味不明になるので参加人数調整が必要だったり、同時に弄られたときの対処、その他リアルタイム更新のブラウザ画面とか、特にコンセプトとインターフェース周りは課題は色々ありますが、とりあえず今回はAndroid実験として色々学べたので良しとします。

Arduino→Android→ネットワークの実験


Androidのアプリ開発を始めてみました。開発環境だけは整えてたものの、きっかけが無くてン年放置してました。

今回I/O制御とかしたいのでArduinoと繋げました。こういうとき、やりたいことはあくまでAndroidの勉強なんで、一瞬でハード・ソフトともに組めるArduinoはものすごく便利です。

私の所有しているArduinoはシリアル-USB変換にFTDIのFT232RLのチップが使われてます。イマドキはADKとかあるみたいですが。

ここもArduinoの魅力であるユーザーの多さが功を奏し、これのドライバを作ってる方がいらっしゃいました。ksksueさんのFTDriver(https://github.com/ksksue/FTDriver)。すげえ。

こうなればこっちの方が便利です。FT232RLは300円程度で売ってますし、これさえブリッジさせればシリアル通信ができるマイコンなら何でもOKですし。

そちらのドライバ&サンプル「FTSampleTerminal」を流用させていただきつつ加工し作業してます。アプリ名がそのままです。

Android側がUSBホストになるので、Arduinoはバスパワーで動きます。

Arduino側はLEDとCdSセルとLCDを接続。

LCDはシリアル通信のデータ確認用。

Android側で「送信」ボタンを押すとArduinoにリクエストが行き、CdSでADにとりこんだ照度を返すという処理をさせてます。

ついでに10秒間隔の自動送信やラジオボタンでLEDの明るさ制御(PWM)とかを実装。

んで取り込んだデータはAsyncTaskによる非同期処理でサーバーにPOST送信し、cgiでテキストファイルを書き換えてます。

折角定期的に送信されるのでブラウザからもリアルタイムで更新されると面白いと思って、慣れないJavascriptで表示させてみました。

うっかり処理をミスって時間が変わってませんが、10秒おきに増えてます。

”68”とかの数字が明るさ。LEDライトくっつけて大体200、手で塞いで4,5くらいになります。

照度センサとしてならAndroid単体でもやりようがあるかもしれませんが、マイコンと繋げるのは色々先が考えられてワクワクします。

Androidのアプリ開発も、まだまだブラックボックスだらけで自分自身理解してないことが多すぎます。とりあえず動かせたよってレベル。

でもやっぱりLCDに出したりAD値を取り込んだりするとモチベーションが上がってやる気が沸きますね。

webkit,geckoエンジンでcgiが表示されない

ローカルで作成してたページを外部サーバーにアップした際に上手く表示することができませんでした。

メモ。

1.パーミッションの設定ミス

705にするところを707にしてました。

発生したのは”Internal Server Error“でした。

2.ontent-Type指定ミス

perlのprint <<内で

Content-type:text/html

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd“>

としないといけなのですが、

という状態でした。これはいままで気づかなかったけど、なんで出来てたんだろう。

…と疑問に思い、今過去のものを見てみると
print “Content-type: text/html; charset=shift_jis\n\n”;
print <<~
としてました。無意識にしてたようです。
ヘッダ回りはいつも過去のものをコピペしてたので気付きませんでした。
おそらくこれも初めに勉強したときの模写から行ってたものだと思います。理解してませんでしたね。
しかして、IEだけは表示されるという状態になっておりました。
たまに趣味でやる程度だから良いですが、商売にするとなると品質維持は大変そうだなあと思うのでした。

Webサイトもリニューアルしました。

blogに引き続き、本家サイトもリニューアルさせました。

※8/24 16:26追記:cgiが不安定です。。目下確認中。

※8/24 16:31追記:cgi修正。これで大丈夫だと思う…

http://pocomo.skr.jp/

すっきり。

今までの構成だと、トップページの更新情報と各種ページ、更にはblog記事の内容が被ってました。

更新するときに毎回気付いてました。musicページに曲の説明書いて、トップページにも一言書いて、blogにも同じようなことを書いて。これはイマイチだと。

これからは

  • トップはデザイン変更や、側近で伝えたいニュースの更新。
  • 音楽のページは一言。
  • blogにはその曲について書きたいことがあれば書く。

という感じでやっていこうかなと思います。

更にその辺突き詰めたら、やたらごちゃごちゃあったコンテンツも4つに。

実質音楽専用ページになりました。

万一絵とかも載せたくなったらそれくらいは増えるかもしれませんが、その時もフットワークが軽くなるように、メニューに画像は使わないようにしました。

音楽ページのプレイヤーはもっとシンプルなデザインで作り直してる最中なのですが、中身をすっかり忘れてて1から勉強してます。時間がかかりそう。

あとこのページだけはurl書くだけでリンクとプレイヤーを載っけたかったのでperlで作りました。

あとはどんどん伸びていくページを整えたいところです。プレイヤーもその分増えていくし…

1画面毎でページ切り替えにしようかとも思いましたが、今の仕様だと切り替えると音楽が止まってしまいます。これも微妙。

ちなみに当初は画面サイズをjavascriptで取得してフレームサイズを可変にしようとしてたのですが、どうしてもOperaで上手く動作せず、また上手くいったところで見栄えも微妙だったのでもうスクロールバー出しました。こっちの方がすっきり。

そのうちプレイヤーだけは別枠に1つだけ、というスタイルに持って行きたいです。

トップ画像になぜ山田がいるかというと、山田が好きだからです。

これは気分でほいほい変えます。もちろん、画像が変わっても山田が好きだということは変わりません。