今までさんざん canvas やら SVG やらで遊んでおいてなんですが、そういった華やかな部分だけではなく、AJAX の要である通信の技術も忘れてはいけません。

まだ先の話ですが、Cross-Site XMLHttpRequest や、Web Sockets がメジャーなブラウザに実装されれば、JSONP や Comet 等の小手先のハックで無理矢理実現しつつも根本的には Google Suggest の頃から進歩していなかった、という状況が変わりつつあります。

しかしながら、上に挙げた方法は、ネットワークに接続されているマシン同士でしか通信できないという欠点があります。ネットワークに繋がっていない機器と Javascript で通信したい、という需要が年に一度ぐらいはあるかもしれません。

そこで今日は、WiFi や Ethernet が無くても通信を行える方法をご紹介します。

物理層が無ければ自分で作ればいいじゃない

はい、出オチでした……

ネタ元は↑これです。個人でもクレジットカードでの支払いを受けることができる Square というサービスがあるのですが、カードの読み取り機と iPhone 等との通信をフォーンジャック経由で行っているわけですね。原理は、昔懐かしい8ビット機のデータレコーダとか、アナログモデムのピーガガ音と（多分）同じです。これを Javascript で真似しようと。

非常に雑な言い方をすると「Javascript で実装されたモデム」ですが、JS側は送るだけで受信してないので、正確に言うとモデムの「モ」だけ実装したということになります。尚、受信側のiPhoneアプリはネイティブコードです。

最初は Flash で実装してましたが、せっかくなので pure Javascript で…… ということで悪ノリしてこれができました。WAV ファイルを生成する部分は id:moriyoshi さんの Adobe MAX のデモをベースにしています。

↓受信用のプログラムが無いと面白くないですが、一応ここで聞けます。

http://gyu.que.jp/private/jsfsk/ (Firefox 3.5, Opera 10.51, Safari 4.0.4 専用)

ちなみに

QRコードを使った方が速くて確実です。

参考書籍

昨年稼動開始した Twitter bot 「ねる」をバージョンアップし、ソースコードを公開しました。 基本的に、表から見える機能はほとんど変えず、内部の改良をしました。

機能変更などについて

OAuth 対応

BASIC 認証は既に非推奨になっており、廃止の噂も出ています（まあ、6月に廃止の噂はガセだと思いますが…）ので、OAuth 認証の API に切り替えました。

bot コアの分離

開発者向けの話。bot の基本的な動作（Twitter とのやりとり）の部分を分離しました。これを再利用して別の bot を簡単に作れる……かどうかは試してないのでまだ分かりません。

通信方法の変更

完全に裏側の話。昔は App Engine から直接 Twitter に post できなかった（…ハズ）ので、他のサーバを経由して Reply するという、App Engine を使っている意味が無いような仕様になっていました。現在はどうやらその制限はなくなったようなので、直接 post するように変更しました。

以前は、経由サーバが落ちているせいで Reply が飛ばなくなるといったことがありましたが、今後そのような事は起こり得ません。

Dashboard 追加

http://twneru.appspot.com/dashboard

表から見てわかる変化はこれ。いままでトップページに「最近の"ねる"」というリストを出していましたが、これに「起きた」のリストや、システムの状態なども追加して独立したページを作りました。

細かい部分の作りこみ

例えば、トップページでIDを指定せずにボタンを押したときに、無愛想なエラーメッセージを返すだけじゃなくて、使い方を表示する… など。多少マシになりました。

ロゴ変更

わかる人にはわかるロゴです

ソースコード公開について

Google Code でホスティングしています: http://code.google.com/p/twneru/

ライセンスについて

AGPL です。（但し、一部のモジュールは MIT ライセンスです。コードの先頭のコメントを見て確認してください）

Google Code に AGPL の選択肢が無かったので GPL と出ていますが、正しくは AGPL です。

その他

Reply の仕様変更について

バージョンアップした当初、「おはよう」「おやすみ」の Reply の先頭にピリオドをつけるよう仕様変更しました。が、これはかなり不評ですぐに再変更しました。

ピリオドをつけるようにした理由としては、

• 先頭の @ が見知らぬ人（フォローしていない人）の場合、Home 上で bot からの返事が見えない（Twitter の仕様） ので、確実に全員に見えるようにする
• 他の人の生活が Home 上に流れてきたほうが面白いと思った

というところですが、一方で

• Home が bot に占領されて困る
• 知らない人の寝起きの時間なんて知りたくない

という反応もあったので、今のところ

• Reply の相手が2人以上の場合だけピリオドをつける

という仕様にしています。

Following が100ぐらいあると bot の発言が流れてきても気にならないのですが、10 ぐらいの人だと、 bot に占領されて困るということも確かにありえます。

謝辞

ねる子(仮称)を描いていただいたアサヌさん、コードの助言をしていただいたとぴあさん、ありがとう！

前回試さなかった goroutine を使ってポリゴンラスタライザとか書いてみました。 並列化といえばシェーダだよね？ ということでシェーダ対応です（というのはちょっと詐欺。理由は後で）

こんな感じで、ポリゴンに法線マッピングを施して出力します。

複数の出力をつなげて動画にしたもの→ http://www.youtube.com/watch?v=XwB16g3vNBk&fmt=22

ベンチマーク

まずは、goroutine を使わない場合（計測のため、同じ処理を50回ループしています）

$ ./main 
 start
 10169 ms
done

次に、ポリゴンの描画処理を goroutine として呼び出してみます。ポリゴン単位で分散させてるのが「ちょっと詐欺」の理由です（描画順を指定できないので実用にならない）

$ ./main 
 start
 9838 ms
done

あれ、あんまり……

大丈夫。こうすると Go さんが本気を出してくれるらしいです。

$ GOMAXPROCS=2 ./main 
 start
 6917 ms
done

けっこう速くなった！（こんなもんか、という感じも）

CPU利用率も100%超に。

その他

複数個の返り値が気持ちいい。

vec3.X, vec3.Y, vec3.Z, _ = func_returns_vec4();

とかして、関数から返ってきた4次元ベクトルを（4要素目は捨てて）3次元ベクトルにそのままつっこんだり

func (v *Vec3) Components() (float, float, float) {
	return v.X, v.Y, v.Z;
}

としておいて

calcLength(0.0, 1.0, 2.0);
calcLength(vec3.Components()); // ← そのままパラメータに

とか。でも、

calcLength(vec2.Components(), 0); // ← これはダメ

これはできないみたい

よくわかってないこと

同期の方法。go した数だけ chan 空読みしかないの？

source code: http://github.com/gyuque/shadergo

噂の Go をちょっと使ってみました。開発者が興味ないのか、あんまり充実してないグラフィックスまわりにあえて突撃。

こんな感じのpng画像を出力します。ソースは以下の gist に。

• main.go
• canvas.go

プログラムの構造は以下のような感じ

1. プログラムの最終的な目標は、標準ライブラリの image.png.Encode 関数を使ってPNGファイルを書き出すこと。
2. image.png.Encode 関数は io.Writer と image.Image インターフェイスの実装を要求してくるので、必要な関数を実装する（黄色の部分）。
3. さらに、ファイルを開いたり、画像に描画したりといった独自の動作を実装する（緑色の部分）

という流れでプログラムが出来上がっていきます。io.Writer や image.Image はライブラリ集ではなく、インターフェイスだけが定義されている「規約集」で、io.Writer の中身（この場合、syscallによるファイル操作）や、image.Image の中身（典型的には、配列にビットマップを保持）は各自で実装してね、ということになってます。

ファイル操作に関しては Tutorial のを切り貼りしただけですけどね……

→すいません、ファイル操作に関しては os パッケージに実装済みのものがありました。

---

あんまり Go らしい機能（goroutineとか）は使ってないですが、

func minmax(a, b int) (min, max int, reversed bool) {
  if a < b {
    min = a;
    max = b;
    reversed = false;
  } else {
    max = a;
    min = b;
    reversed = true;
  }
 
  return;
}

このへんはGoっぽいですね（なんかVBがこんな書き方してたような……）

あと、オブジェクト指向まわりはJavascriptっぽいなーと思いました。

The JUI 2009 Returns で Paul が CSS Transforms をプッシュしていたので、それにつられてデモを一つ作ってみました。

http://gyu.que.jp/giftbox/google/

見てのとおり、普通の検索ボックスです。

普通にクエリ入力できます

普通に検索結果を見られます

箱の中にまた箱があることもあります。

…という感じで、また3Dネタですが、単なる画像ではない「生きている」HTML要素がグリグリ画面上を動き回れるというのは、何か新しいことができるんじゃないかという可能性を感じます。Canvas のほうは環境マッピングとかやって見た目は派手でしたが、いずれ O3D やら 3D Canvas やらが普及するまでの「つなぎ」です（だから、ライブラリ化したりする気がおきなかったんですが）

しかし、IFRAME を変形させながらネストしてもしっかりレンダリングしてくれる Gecko は大したもんですね（Keith Schwarz の素晴らしい仕事のおかげです）。

Webkit のほうは今のところ、IFRAME に transform をかけると、再描画とヒットテストがバグってしまいます（スピードは速いんですがね……）