Category: 技術的なこと

HPリニューアル中

最近、HPの外観に不満が溜まってきたので、春休みということもあって作りなおしています。

jsやらHTMLやらCSSやら、書くのは別段苦手じゃないのですが、作りなおすたびに1から勉強している感じになってしまってううむ。

Webはブラウザのバージョンや仕様が頻繁に変わるので、2年くらいたって作りなおそうと思うと、やりたいことを実現するための手段が変わってたりするので厄介なんですよね。

記述のスタイルも推奨されるものが変わっていたりして、やはり作り直すなら最新の書き方で……とか思うといままでの知識(しかも半分くらい忘れてる)が通用しないことが多く、面倒くさいです(。>‿‿<。 )

 

さて、新しいサイトは、
・今までよりさらにわかりやすく、シンプルに
・動的に、ダイナミックに

というテーマで作っています。

いまのサイトを作った頃は丁度スマホが普及してきた頃とかで、まだユーザー数も少なく、プロセッサや回線も非力だったのでできるだけ静的にページを作った記憶がありますが、今回は趣向をかえて、ダイナミックな動きがあるサイトにしたいなーと思っています。ただ扱いがちょっと難しい。試行錯誤しています。

 

前置きが長くなりましたが詰まったところや忘れてたTipsをメモしておきます。割りと自分用ですが

 

canvasを背景として使い、上にボタンをのせる

canvasで描画している領域の上にリンクボタンを設置したい場合、canvasの機能で(canvas内で)ボタンを描画し、js側でマウスイベントを拾って飛ばす方法が一般的です。
ただ、条件を限定すれば、普通のリンクボタンをcanvas上に表示させることができるみたいです。

canvasに

を追加して、リンクボタンに

を追加すればOK。

canvasとボタンの透過を重ねたままで、表示&クリックさせることが出来ます。うまくやらないとボタンでcanvasの表示領域が隠れてしまったり、ボタンがクリックできなくなるのですが、上のようにして一応動きます。

 

canvasでアニメーションを書く

ゲームとかを作るときと同じように、

①clearRectで領域をリフレッシュ

②シーンを描画

③繰り返し

でOK。

繰り返しは、whileループとかで回すと制御を奪ってしまって問題になるので、手っ取り早く、jQueryのanimeteのstepオプションで描画関数を呼んでもらうのが楽ちんでした。

ループさせたい場合はsetTimeoutを使う。

 

canvasのサイズはHTML側にハードコードしないとダメ

html側のwidth,height指定で描画サイズのバッファを作っているみたいです。css側のwidth,height操作ではスケール変更を行うだけなので意図した表示にならない

 

background-colorのeasingにはjquery.cookie.jsが必要

インクルード忘れててあれ? って暫く悩んでました。

rbgaも使える。

 

.hoverでアニメーション中はマウスオンを反応させない

stop()を使う。忘れそうなので

$(this).stop().~

 

Sassを使おうと思ってたんだった

次つくりなおすときはSassかless使おうと思っていたんだった。CSSの拡張メタ言語ですね。

とりあえず秀丸の強調定義ファイルがあるSassを使います。

コンパイラはRuby入れる必要のないPreprosを。オートコンパイルしてくれるので楽ちん。

Gumroadで音楽のDL販売をする

少し前から、GumroadというECサービスを使って音楽のダウンロード販売をしてみています。今日はそれについて書きます。

 

委託って結構面倒だよね

僕は同人音楽をやっていて、年4回くらいアルバムを(即売会で)リリースしています。
作品の頒布(販売)も、基本的には会場でのみ行ってきました。

ただ、会場にいらっしゃることのできない方からも作品を購入したいという声はあります。
この声をうけて、以前はとらのあなで現物を委託販売していたのですが、

・手続きが煩雑
・手数料が高い(30%程度)
・予想より売れなかった時の対処が面倒(返本にもお金がかかる)

等であまりよい方法ではないと感じていました。

 

一般的なDL販売は敷居が高い

そこで委託ではなくDL販売の方法を模索していたわけですが、これが結構難しい。

音楽のDL販売というと、iTunesストアやBeatportでの配信を思い浮かべますが、この手のサービスは作品登録や配信を維持するためにまずお金がかかる仕組みになっています。
したがって、初期コスト分をペイできるほどの収益を見込めないユーザーには、手が出しづらいです。

かといって、メロンブックスやとらのあなでのDL販売では、一定期間売れなかった場合に取り下げられてしまいますし、やはり手数料がかかるためあまりよい方法とは言えません。

自宅鯖にデータを置いて、DL販売させる方法も検討しましたが、銀行振込にしか対応できませんし、払う方も売る方も手続きが煩雑です。

 

そこでGumroad

そんな中、いろいろ検討していて見つけたのがGumroadというDL販売サービスです。
Gumroadのメリットは
・初期コストがかからず、手数料が比較的少ない(5% + 25セント)のみ
・販売ページがリンクで保持でき、簡潔なためプロモーションがしやすい

等です。まだあまり普及してないように思えるのですが、同人作品のDL販売にはとても親和性が高いと思っています。

例えば、僕がCDを売るばあい、こんな感じになります。

https://gumroad.com/prhyzmica

Gumroad sample

 

幾つか作品を登録すると、こんなページを作れます。個別にSoundcloudのクロスフェードのリンクを指定しているので、それを利用してプレイヤーを埋め込んでくれます。
購入したい場合は、CDのイラストをマウスホバーするとでてくる購入ボタンを押して、その後クレジットカードの番号を打ち込んで決済します。

 

Gumroad sample2

 

提供される販売ページは固定リンクなので、Twitterとかに貼り付ければよいだけで、楽ちんです。
また、個別のページを表示することも出来て、もちろん表示はある程度カスタマイズできます。

 

Gumroadの欠点

個人でちょっとだけものをDL販売したい場合、Gumroadはピッタリのサービスだと思います。
ただ、まだ使いづらい点はあります。

例えば、
・日本語の翻訳がたまに変
・作品一覧ページから作品個別ページに飛ぶ方法が無い
・デザインを優先しすぎて、ぱっと見購入方法がわかりづらい
・Soundcloudとの連携機能をあまり詳細に設定できない(画像表示ができるようになったのも最近です。以前は波形表示のみでした。)

はやく改善されるとよいなー、という感じです。

 

おわりに

現在、僕の3作目のCD「Stelo da Fragmento」を無料DL可能にしています。

https://gumroad.com/l/Prhyzmica-03

クレジットカード番号の入力も不要なので、購入手順等をためしたい方はぜひご利用くださいヾ(๑╹◡╹)ノ"

Arduino + Max + Xbee でシリアル通信 その2

遅延をなんとかした

前回、とりあえずシリアル通信できたはいいものの、遅延が大きくて使い物にならないレベルだった。

以下の二点を変更することで、そこそこ使えるようにはなった。

・子機のDestination Address(送信先アドレス)に親機の番号を指定するようにした。
(今まで設定していた0でも親機に飛ばせるのだけど、個別に指定したほうが早いようだ。今回は親1体子2なのでこれでOK。)

・Xbee(とArduino)のボーレートをデフォルトの9400→38400にあげた。
38400はMaxのシリアル通信対応の上限。

 

変える前は体感0.1秒くらいの遅延が出ていたが、あまり気にならない程度までは軽減できた。
もしかしてBluetoothじゃなきゃ不味かったか…と思ったけどとりあえずなんとかなったので一安心。

ただ、軽減されたと言ってもまだ遅延は認識できるレベルだ。
今のところ、Arduino側Xbee→PC側Xbeeはほぼ同時なのだけど、PC上Maxでの表示の時点では遅延を感じる。

 

どのくらい遅延が発生してるのか?

Maxでのシリアル通信では、シリアル通信オブジェクトにbangを送って、COMポートにたまってるデータをポーリングする必要がある。ポーリングレートは1msに一回が最大なので、タイミングによって最大これが上乗せされる。
また、Xbeeの通信速度は今38.4kbpsで、ヘッダが25byte=200bitくらいあるので、5msくらい遅延が発生していることになる。
加えて、Maxのソフトウェア的な遅延がかかって…6ms+αか。このαが意外と大きい気がしている…

αがどのくらいなのかわからないので、XbeeのAPIモードを使ってMaxと通信するMaxbeeuinoというライブラリを試してみようと思う。ただAPIモードはフレームヘッダがさらに大きくなるからもっと遅くなるかも…

ちなみに、bluetoothなら通信速度ももっとあげられて(Xbeeは上げれてもこの10倍くらいが限度)、ヘッダも5byteなので、遅延が重要なものをXbeeで作るの失敗だったかもしれない。

 

とりあえずつづく。

Arduino + Max + Xbeeでシリアル通信 その1

自分はハードはからっきしなので、まずはArduinoからということで手を出してみてます。しらないことがたくさんあったのでメモ

やりたかったことは「ArduinoからZigbeeでPCまでシリアル通信を飛ばして、それをMaxで拾う」ということ。

 

1.知らなくて困ったこと

・抵抗器の抵抗の大きさはラインのカラーで表現されている(!)
・スイッチの状態を得るためには「プルアップ抵抗(プルダウン抵抗)」というものを使う
・LEDは長いほうがプラス極。あと抵抗付けないでそのままぶっさしてはいけない(焼けます。)

 

 

 

2.Xbeeの基本

Arduinoで無線通信する方法はイーサネットやBluetoothもあるけど、今回はZigbeeを扱えるXbeeモジュールを使うことにした。

 

Xbeeはファームウェアによって挙動が変わる

Xbeeはメッシュネットワークを形成することができ、ネットワーク内での役割によって3つのタイプになれる。

①Coordinator(親機)
一つのネットワークに一つ必要。

②Router(中継機)
終端端末としての機能に加えて中継機能をもち、リープしない。

③End Device(終端装置)
データを収集する。スリープする

 

Xbeeはコマンドモードによって対話方式が変わる

ATモードとAPIモードがある。
ATモードは機能が少ないが、シリアル通信だけならこれでOK(というか有線シリアル通信の無線板のようなもの)。コンソールが使える。
APIモードは
センサーの値をずっと垂れ流しにしたい、みたいなケースで使う。APIモードではデータはパケット(フレーム)として送られる。(もしかして音声とかも送れるのかな? いずれ試してみたい)

 

XCTUなどのソフトを使って、Xbeeのモジュール自体に情報を書き込む必要がある。
いじる必要がある場所は、ネットワークID(同一IDのものでネットワークを形成する)、Xbeeのファームウェアタイプとコマンドモード(例えばCoordinator AT)など。

Xbeeの基本については
こことか
http://www.inetclub.gr.jp/Total_collection_volume.htm

こことか
http://todotani.cocolog-nifty.com/blog/2010/12/xbee-f604.html

が詳しい。

 

3.Xbeeまわりで詰まったこと

X-CTUで、Arduino経由でのXbeeを認識しない事が多い

X-CTUで情報を書き込む際、まずCOMポートを選び、「Test/Query」ボタンを押すことでチェックを行うのだが、これがとにかく成功しないことが多い。

Arduino UNO-ワイヤレスプロトシールド-Xbeeみたいな感じでつないでいるのだけど、(おそらくArduinoのシグナルが邪魔をして)認識できないことが多い。(Action Requiredという表示が出る。)

次のようにやるとうまくいく事が多い。

①ワイヤレスプロトシールドのSERIAL SELECTスイッチを、USB側に倒す。ArduinoのリセットとGNDをつないでショートさせる。

②USBでPCにつなぐ。

③X-CTUでTest/Queryを行う。

これで、Action Requiredとか言われた場合は、USBをはずして、もう一度①からやりなおす。

 

Xbee同士のペアリングがひたすらうまく行かなかった

有線では、ここ http://mag.switch-science.com/2012/07/20/startup_xbee_s1/ を参考にして、とりあえずシリアル通信ができるようになった。ただ、無線でどうしてもうまくいかない。

PAN IDもきちんと設定できているのに、なぜつながらないんだろうか悩んでいたけど、どうやらペアリング自体がうまくいっていなかったことがわかった。

X-CTUのコンソールからATモードでネットワーク設定をリセットするATNRコマンドを双方(CoordinatorとRooter両方で)叩いて、とりあえずはうまくいくけど、
せっかくの無線通信なのにいちいち有線で設定をしないといけないのじゃ意味が無い。

そこでArduino側から内部でATコマンドを叩いてネットワーク設定をリセットする方法もやってみたけれど、イマイチうまくいかない。

一応:内部から叩く場合、
”+++(ATコマンドモードに入る)”→"ATNR(ネットワークリセット)"→”ATCN(でATコマンドモードを抜ける)”
というのをやる必要があって、またGuardTimeというのがあってそれぞれの処理の間で決められた時間待たないとコマンドを受け付けない。
(ここに詳しい http://nora66.com/zigbee/

 

ネットに転がっている資料だと、どれも一発でペアリングがうまく行っていたのにひたすら謎で、かなり時間を食われたけれど、
結果的に電源を入れる順番とタイミングの問題だということがわかった。

①PC側XBeeの電源を入れる(PCにUSBでつなぐ)

②10秒くらい待つ ←超重要

③Arduino側Xbeeの電源を入れる

しばらくすると、ペアリングが成功して、シリアル通信を行えるようになる。
Arduino側のリセットだけじゃダメで、PC側も電源を入れなおさなきゃいけないというのが盲点だった。あとは挿し直した後にしばらく待たないといけないというのも。

 

4.遅延

というわけで、無線でシリアル通信はできるようになり、Maxで中身を拾えたはいいが、

致命的な遅延がある。

音を扱おうとしているので、遅延少なくする方法をいろいろ探してみているけど、とりあえずつかれたので今日はここまで。

WindowsでMaxを使う際に注意すべきこと

何回かトラブルにあっているのでまとめ。
ちなみに使用バージョンはMax 6(6.3)、Windows 7です。

 

Max 64bitバージョンでJitterを使ったパッチがうまく動かない

Quick TimeはWindowsの64bit環境をサポートしていないため。映像入出力にQuickTimeの機能を使っているパッチはうまく動かない。今後サポートされることがあるのかはわからないので、32bitを使う。
64bitOSだと起動遅いけど。。

ちなみに、2014年でもなお64bit版アプリケーションには不都合がちらほら。
CubaseでもQuickTimeの機能を使って映像にあわせて曲を作れる機能があるけれど、もちろん64bit版では動かない。
http://japan.steinberg.net/jp/support/support_pages/64bit_version.html

 

jit.qt.grabが動かない

たとえMaxの32bitバージョンを使っていても、Windows環境ではカメラ入力などを行うために使うjit.qt.grabは動かない。
(openメッセージを送った時にエラーが出る。)

Windows環境では、かわりにjit.dx.grabが用意されているので、これを使う。使い方は似ているけれど、細かいメッセージとかが違うので注意。
なお、環境によってDXライブラリとQuickTimeのどちらかを勝手に選択して使ってくれるjit.grabというのもある。場合によってはこちらのほうが良いかも。

VSTi開発メモ(CSliderの問題とノイズ)

またまた詰まったのでメモ。

 

一つ目は、vstcontrolが提供しているGUIパーツのCSliderで、透過PNGが扱えない問題。

CKnobのほうでは透過pngを使えているのだけど,CSliderではうまく表示できなくて詰まった。

どうやら、CSliderではCknobと違ってオフスクリーン描画ができるようになっていて、それが原因っぽい。オフスクリーンへの描画時(もしくはオフスクリーンからメインへの描画時)にアルファ情報が抜け落ちるようで、ここの内部処理はまだ読んでいないけど、とりあえず、

CSlider::drawでオフスクリーン描画をするかどうかのフラグ pOScreen を無理やりFALSEにすること

で今のところ解決している。

 

2つ目は発音するボイスを切り替えるタイミングとか、エンベロープジェネレータでの状態(AttackとかDecayとか)の切れ目でクリックノイズが発生してしまう問題。

クリックノイズというかもはやインパルスで、これが発生していると、DAWで作ったシンセを使おうと思った時にインパルスでだいたいのエフェクトプラグインが落ちる。とても困る。

内部のバグなのか、それとも設計が悪いのかがよくわからなくて、まだ解決できていない。解決策は
・バンドパスフィルタを通す
・発音の最初と最後に全部フェードをかける
とかだけど、2つ目の解決策はエンベロープ中にノイズがなる問題は解決できないし、ううん

VSTi開発メモ(GUIまわり)

最近、guiに手を出してみたら思った以上に闇が深かった。

かなり詰まったのでメモ。

VSTのGUパーツIは、サンプルコードではBMPを使うようになっているが、PNGもサポートしている。
PNGを使いたい場合、libpngを使う。
libpngはzlibに依存しているのでビルドには両方入手する必要がある。導入については以下。

http://xeo.sakura.ne.jp/wordpress/201202/program/361/

ビルドできたら、ライブラリディレクトリの設定からzlib.libとlibpng.libを取り込み、
インクルードディレクトリの設定からzlibとlibpngの各種ヘッダを取り込む。

 

次に、プリプロセッサの定義 で USE_LIBPNG を定義する。僕はこれをしていなくて詰まりました。
参考:http://teragonaudio.com/article/How-to-make-VST-plugins-in-Visual-Studio.html

 

さらに、僕が使った最新版のlibpngとzlibでは、vstgui.cppでエラーがでた。
http://planet.racket-lang.org/trac/ticket/292

上のリンクのように、
png_set_gray_1_2_4_to_8(png_ptr)

png_set_expand_gray_1_2_4_to_8(png_ptr)

と書き換えるとビルドが通り、GUIが表示される。

 

(なお、僕の環境はVS2012,vstsdk2.4,dllのテスト環境はVSTHostです。)

Ableton LiveでUA-25EXを認識しない問題(解決済み)

出先で録音するときにLive 9 liteを使おうとおもったら、UA-25EXを認識しないで困った。
「ドライバを開けません」的なことを言われて使えないことがある。

 

解決方法

UA-25EXの背面パネルの「ADVANCED DRIVER」スイッチをONにしてUSBを挿し直すと認識する。

Maxでvstプラグインを書く

どうやら、Max6.1で、Genに(Vstプラグインとかを書くときに使える)Cのコードを吐き出す機能が追加されたようです。

僕の記憶では、確かMaxの4(Max/MSPと呼ばれてた時代)のときには、vstを吐き出す機能があったと思うのだけれど、5,6でなくなっていました。それが復活したと。

なお、この記事は既にC++でvstプラグインを書いたことがある人を対象にしています。あんまりイメージがつかめていないひとは、こことかを読むと良いと思います。

 

手順は、Cycling’74のwikiに乗っている通りですが、解説します。僕はwinユーザーなので、VisualStudioを使ってコンパイルする場合で書きます。

http://cycling74.com/wiki/index.php?title=Gen_Code_Export_VST

 

①Maxを6.1にアップグレードする

上にもかきましたが、Max6.1じゃないとこの機能は使えません。あと当たり前ですが、Genも買ってないとだめ。

 

②コンパイル環境を入手する

vstプラグインを書く人なら大丈夫だとは思いますが、XcodeもしくはVisualStudioの2010以降が必要。(僕はVS2012で試しました。)

 

③SteinbergからVST2.4のSDKを落とす

http://www.steinberg.net/en/company/developer.html

から3rd Party Developer登録をして、SDKを入手します。Genのexportcode機能はVST2.4までしか対応してなくて3.x以降は未対応なので注意。

 

④Max上で,gen~の中にvstプラグインに吐き出したい処理を書く

 

⑤作ったgen~オブジェクトにexportcodeメッセージを送る

この辺はMax上でgen~のヘルプを読んでも良いかもですね。

メッセージを送ると、gen_exported.cppとgen_exported.hというファイルが生成されます。

 

⑥wikiからサンプルコードを落とす

http://cycling74.com/wiki/index.php?title=Gen_Code_Export_VST

からMyVSTPlugin.zipをダウンロードします。

 

⑦落としたサンプルコードのプロジェクトを開く

winの場合はVS2010用のプロジェクトが用意されてますが、VS2012で開いて、それ用にコンバートしてしまっても大丈夫みたいです。

開いたらリソースに、先程落としたVST2.4のSDK内のvstsdk2.4\public.sdk\source\vst2.xの中身を加えます。ここは普通にC++で直接vstプラグインを書く時と同じですね。

さらに、さっきgenでexportした2つのファイルを、サンプルコードのフォルダにある同名ファイルに上書きします。

 

⑧コンパイル

コンパイルします。するとdllが吐き出されます。

動きます。ヽ(‘ω’)ノ三ヽ(‘ω’)ノ

普通にVS2012でvstプラグインを書くときは、プロジェクトの設定とかdll吐き出すときの設定をしないといけないですが、今回はサンプルコードを改造する形で作るのでそのへんは必要ないです。すばらしい└( ‘ω’)┘

 

 

まとめ

音声処理を行う部分を、genで吐き出すことができる感じです。いきなりdllが吐き出されるわけではない。
ただそれでも十分有用なので、max6.1+genを持っているvstプラグイン開発者の人は、使ってみると面白いと思います。

とにかく、Maxでvstプラグイン書けるって、すごいことです。
実際にどんな音がでるのか確かめながらパッチを作っていって、完成したらそれがそのままCのコードになるんだからすごい。

手で書くときは、いちいちコードを書き換えて→コンパイルして→聴いて確かめて→ってことを繰り返さないといけないわけですからめっちゃめんどいわけです。

 

まだこの機能はベータ版らしいですが、十分使えます。僕も折角持っているので、使っていこうと思います。

 

だいぶ雑な感じでしたが、おしまい。

 

※余談ですが、Max6.1の日本語化パッチが出てるっぽいです。
https://www.mi7.co.jp/products/cycling74/downloads/
6.0は日本語から英語にもどすのがファイル操作とかしなくちゃいけなくてちょっと面倒でしたが、6.1では楽になってます。

Twitterでホームページが誤スパム検知されてしまった(解決済み)

一昨日くらいですが、Twitterのbioに貼っている自分のホームページのリンクをクリックした時、今までは直で飛んでいたのが、
「あなたが訪問するサイトは、安全ではない可能性があります」というメッセージが表示されてリンクに飛べなくなっていることに気づきました。

同時に、Tweetに自分のホームページのアドレス(prhyzmica.com)を含めると、つぶやけなくなっていることにも気づきました。

どうやら調べてみると、Twitterに僕のホームページのサイトがスパムだと誤検知されてしまったようです。

 

1.SpamhausのDBから削除する

解決方法ですが、下のサイトに詳しいです。
自分のサイトがTwitterに「有害なサイト」認定されたときの対策メモ

まず、原因はおそらく、Spamhausというスパム情報サイトのデータベースにスパムサイトとして間違って登録されてしまったことです。
登録の解除はhttp://www.spamhaus.org/lookup/から簡単に行うことができます。自分のサイトのドメインが登録されているかをチェックし、されていれば削除申請を送ります。
僕もこの方法ですぐにDBから削除をすることは出来ましたが、Twitterの方でも独自にスパムDBを持っているみたいで、問題は解決しませんでした。
(今回はこれで解決しませんでしたが、ここに登録されたままだと不都合なことが多いので、削除申請を出しておくと良いと思います。)

 

2.Twitterのサポートに解除申請を送る

仕方ないのでもう少し調べてみると、Twitterのヘルプから解除申請を送ることができるようなので、やってみました。
https://support.twitter.com/groups/55-troubleshooting/topics/231-tweets-direct-messages/articles/258650-

を読むと、問い合わせを作成してサポートに連絡しろと書いてあるので、指示通りに報告したら治りました。
問い合わせリンクに飛ぶときは、英語表示に切り替えないと報告できないので注意して下さい。

 

おしまい。