@masuidrive blog » Javascript

【Titanium Advent Calendar 2011：五日目】Titanium Mobileでソケット通信

masuidrive — Mon, 05 Dec 2011 01:40:23 +0000

　この記事は、@astronaughtsさんの「Titanium Advent Calendar 2011」企画で書いています。

　2011年もTitnium Mobileを使って頂きありがとうございました！まだ使ってない方は、この年末のお休みにでも、ぜひ試してみてください。来年は、日本法人設立など前半から大きな動きがあると思いますので、来年も引き続きよろしくお願いします。

　さて、本題ですが、ソケット通信の話になります。Titanium Mobile(以下Ti)では1.7からTCP通信の機能が充実しました。

　いままでTiの通信と言えばHTTPでしたが、これからはTCPソケットを使って、色々なサービスと通信することができるようになりました。

　ソケットと同時に、Tiでバイナリを扱うための、T.BufferとTi.Codecをサポートされ、ちょっと面倒ですがHTTP以外のプロトコルもバリバリ実装することができます。

　早速、ソケット通信の簡単な例を見ていきましょう。

var win = Ti.UI.createWindow({ title: "Win1" });
var textarea = Ti.UI.createTextArea({value: ''});
win.add(textarea);
win.open();

// 読み込み用バッファ
var readBuffer = Ti.createBuffer({length:1024});

// ソケット本体
var socket;
socket = Ti.Network.Socket.createTCP({
  host: "blog.masuidrive.jp",
  port: 80,
  connected: function(e) { // ソケットに接続された
    textarea.value += ">> Connected to host " + socket.host + "\n";
    // 書き込むためのバイナリを作る
    var data = Ti.createBuffer({value:"GET /tmp/test.html HTTP/1.1\r\n"+
      "Host: blog.masuidrive.jp\r\n\r\n"});
    // ソケットに書き込む
    var bytesWritten = socket.write(data);

    var bytesRead;
    // 終わるまで読み込みループ
    while( (bytesRead = socket.read(readBuffer)) >= 0 ) {
      // 読み込んだバイナリを文字列に変換
	    var stringData = Ti.Codec.decodeString({
	      source: readBuffer, length: bytesRead });
  	  textarea.value += bytesRead + "> " + stringData + "\n";
  	  // 読み込みバッファをクリア
  	  readBuffer.clear();
    }
    // ソケットを閉じる
    socket.close();
  },
  closed: function(e) { // ソケットが閉じられた
    textarea.value += ">> Socket closed";
  }
});
socket.connect();

　同期IOでは、上記のように書きます。ソケット通信の詳細は省きますが、他環境でソケットを扱ったことのある人であれば、分かると思います。ここまでは本家のブログでも解説されています。

　実際にソケットプログラムをするときは、ほとんど非同期IOになると思います。しかし、本家記事では書いてない！と言うことで、

　非同期IOでの書き方は下記の様になります。

var win = Ti.UI.createWindow({ title: "Win1" });
var textarea = Ti.UI.createTextArea({value: ''});
win.add(textarea);
win.open();

var socket;
var readBuffer = Ti.createBuffer({length:1024});

// データが読み込まれたときに呼ばれる
var readCallback = function(e) {
    // データが終了であれば、ソケットを閉じる
    if (e.bytesProcessed == -1) { // EOF
    	textarea.value += ">> Received socket closed\n";
    	socket.close();
        return;
    }

    // 読み込んだデータを表示
    var str = Ti.Codec.decodeString({source:readBuffer, length:e.bytesProcessed});
    textarea.value += e.bytesProcessed + "> " + str + "\n";

    // 次のデータが読み込まれる時のバッファとコールバックを設定
    Ti.Stream.read(socket, readBuffer, readCallback);
};

socket = Ti.Network.Socket.createTCP({
    host: "blog.masuidrive.jp",
    port: 80,
    connected: function(e) {
        // データが読み込まれる時のバッファとコールバックを設定
	    Ti.Stream.read(socket, readBuffer, readCallback);

        textarea.value += ">> Connected to host " + socket.host + "\n";

        // 書き込み処理
        var data = Ti.createBuffer({value:"GET /tmp/test.html HTTP/1.1\r\nHost: blog.masuidrive.jp\r\n\r\n"});
        var bytesWritten = socket.write(data);
    },
    closed: function(e) {
        textarea.value += ">> Socket closed";
    }
});
socket.connect();

　今度はデータが読み込まれる度に、readCallbackが呼ばれるようになりました。これを駆使する事で、TCPを使うほぼ全てのプロトコルを実装することができます。

　私はこれを使って、WebSocketプロトコルを実装してみました。ソースは、https://github.com/masuidrive/ti-websocket-clientで公開しています。

　リアルタイムチャットなど、長時間のセッションを張りたい時にはHTTPを使えないので、このWebSocketを使う事で実現することができるようになります。

　手元ではSocketIOでも動くようになっていて、本家にコミットしたいのですが、なんかSocketIO方向で大きな動きがあったので、色々追いかけないと行けないみたい orz

　ソフトバンクの回線は80番ポートの通信にTransparency Proxyが入ってるようで、WebSocketなどHTTP 1.1以外のプロトコルが通ると一部通信内容がフィルタされるようです。iPhoneで通信をする場合は、80番ポート以外を使うことをオススメします。

　明日は、ryugoo_さんです！よろしくお願いします！！

nodejs本体をdebugする方法

masuidrive — Wed, 10 Mar 2010 21:42:40 +0000

　nodejsでsegmentation faultが出た場合は、下記のようにdebug付きnodeをコンパイルして、gdbで実行。

(extract source code)
./configure --debug && make
gdb --args ./node_g myscript.js
run
(make it crash)
backtrace

via Segmentation Fault, how to debug? – nodejs | Google Groups.

Google V8ってruntimeのドキュメントないのか

masuidrive — Sun, 21 Feb 2010 09:36:07 +0000

　Google V8ってruntimeの仕様とかドキュメントないのかー。orz

　ECMAScript 3rd editionベースなんだけど、5th editionの機能もちょこちょこ入っていて、どれをサポートしているかソースを読まないとわからないんだよなぁ。

　どっかまとまってるところ知りませんか？＞誰か

[訂正版] Javascriptでクラスを継承する

masuidrive — Tue, 16 Feb 2010 02:44:18 +0000

Photo by spud murphy

　先ほどの記事のコードにミスがあり、継承を行うと、親クラスも書き換えてしまうバグがありました。コメントやTwitterで報告いただいた方々ありがとうございます。

　あの後、調べて見れると、あまりスマートに継承を実現する方法は無いみたいですが、ユーザが作ったクラス(StringなどのAtomic型を除く)は下記のコードで継承が行えます。
　特に、Array型を継承するのは、無理なようです。[]を上書きできないので、どうしようも無いみたいです。残念。

参考　

[間違え] Javascriptでクラスの継承をする [訂正予定]

masuidrive — Sun, 14 Feb 2010 15:16:33 +0000

Photo by GLUEKITS

　すみません。下記記事は間違っています。近々訂正記事を書きます。

→訂正記事

~~Javascriptでクラスベースっぽく書いてる時に、継承したくなった場合の書き方。~~
ググってもすぐ出なかったのでメモ。

IE6,7,8 Firefox2,3,3.5 Safari 3,4で確認。

p.s
node.jsに、MySQLドライバがないので、書き始めました。

[メモ] サーバサイドJavascriptのNode.jsをOSXにインストールする。

masuidrive — Wed, 10 Feb 2010 10:33:41 +0000

　自分メモ。Node.jsを、OSX上にインストールする。

node.jsのインストール

curl -O http://s3.amazonaws.com/four.livejournal/20100209/node-v0.1.28.tar.gz
tar xfz node-v0.1.28.tar.gz
cd node-v0.1.28
./configure
make
sudo make install

dbslayerのインストール (要MacPorts)

sudo port install apr apr-util db46

curl -O  http://code.nytimes.com/downloads/dbslayer-beta-12.tgz
tar xfz dbslayer-beta-12.tgz
cd dbslayer
./configure
make
sudo make install

CSSを拡張するプリプロセッサを考える

masuidrive — Wed, 20 Jan 2010 10:18:17 +0000

Photo by Aaron Landry

　CSSで、式とかマクロが使えたらなーと思うことがよくあるので、この際だからプリプロセッサを作ろうと思っています。

　文法としては、CSSの構造を大きく変えないで行きます。あくまでプリプロセッサ的な役割で。Sassの様に構文を変えてしまうと、デザイナーの人が取っつき難くなりそうで。

　今のところ、考えている文法の例を下に置きました。誰でも考えそうな所で、includeによる読み込み、ネストをサポート、式と制御構造のサポートを行います。

　このプリプロセッサはサーバサイドで動的に生成するのではなく、一度静的にCSSに変換して使うことを考えています。その為、User agentなど外部からの変数はサポートしません。

　使い方としては、コマンドラインツールによる変換と、Javascriptによる動的な読み込みをサポートする予定です。
開発中は、HTML内にと書くことで、サーバに何も導入することなく、動的に拡張されたCSSを読み込むことが出来るようにします。

　文法や機能のアイディア、同じようなプロダクトを知っている！と言う方がいましたら、ぜひコメントお願いします。

例)

%include "common.ecss";
%focus_color = "#4444ff";
%w = 32;
%property x-opacity $value
  opacity: $(value);
  filter: alpha(opacity=$(value*100));
%end

#mailbox {
  width: $(w+2+"px");
  border: 1px solid gray;
  .item {
    width: $(w+"px");
  }
  .focus {
    background-color: $(focus_color);
  }
  .disable {
    x-opacity: 0.5;
  }

%for x in ['red', 'green', 'blue']
  $(".item-"+x): background-color: $(x);
%end

%if debug==1
    .item {
      background: red !important;
    }
%end
}

緯度経度を文字列で表すGeoHash

masuidrive — Wed, 13 Jan 2010 07:34:20 +0000

　なんか世間的に位置情報アプリが流行ってるらしいし、Google App Engine(GAE)も楽しそう。どうせだから、GAEでなんか位置情報アプリでも作ってみよう！と思ってTwitterに書き込んだところ、Geohashという、位置情報のプロトコル？を教えてもらいました。

　これは、その名の通り、位置情報をハッシュで表す規格なのですが、いろいろおもしろい特徴があり、調べているうちに楽しくなってきたので、勢い余ってPure Rubyのライブラリまで書いちゃいました。

　そのあと、結局ライブラリを作ったところで満足して、アプリは何も作らなかったので、せめてGeohashの解説でも書いておこうと思います。

　位置情報は通常、緯度経度で表します。たとえば東京タワーの緯度経度は35.65861, 139.745447です。
北を上にした地図でいうと、緯度がY座標で経度がX座標です。英語では緯度をlatitude、経度をlongitudeと呼びます。

　この緯度経度は測地系によって値が違いますが、ここではGPSなどで使われている世界測地系を前提にします。

　位置情報系のアプリでは、「今いる場所をGPSで取得して、その近くにあるランドマークを表示する」ということがよく行われます。
　これをGoogle App EngineのDataStoreで行おうと思うと、2つのカラムで比較ができないという、DataStoreの制約が問題になります。(例: x>1 and y>1の様なことができない)

　そこで、GeoHashの登場です。GeoHashは、緯度経度の二つの座標を、一つの文字列にまとめたものです。

　東京タワーをGeoHashで表現すると「xn76ggrw26」になります。GeoHashはグリッドになるので、緯度経度のようにポイントではありません。
　先のハッシュが8文字あると、19m*31mのグリッドになります。

　GeoHashの最大の特徴は、その長さによって精度が変わることです。
東京タワーを中心とした 19m*31mのエリアは「xn76ggrw」ですが、これを頭5文字「xn76gg」だけ取り出すと、下の図の様なエリアを表します。

　データベースから、「xn76gg」の前方一致で検索することで、エリア内のポイントを簡単に取り出すことができます。

　しかし、これでは、上の図の様に、ランドマークがメッシュの端にある場合、すぐ近くのポイントもヒットしなくなってしまいます。
　
　そこで、geohashで検索する場合は、右の図の様に隣接するブロックも同時に検索します。東京タワーの周りを探す場合は、「xn76gg」だけを検索するのではなく、’xn76gu’,'xn76gf’,'xn76u5′,’xn76ge’,'xn76gs’,'xn76uh’,'xn76u4′,’xn76gd’,'xn76gg’も同時に検索することで、おおよそ2km*3kmの範囲で検索が可能です。

　多くのGeohashライブラリには、隣接するGeohashコードを計算する関数が用意されています。
それを使い、上記のように近接のブロックのGeohashコードを同時に検索することで、東京タワーからおおよそ1〜1.5kmのポイントを割り出すことができます。

　GAEのDataStoreは、文字列の前方一致が高速に行えるので、Geohashで場所の絞り込み検索などを容易に行うことができます。

　緯度経度から、Geohashで計算するライブラリは各種言語用にリリースされています。
Pure Rubyで書かれたライブラリが無かったで、自作したライブラリもありますので、Rubyの人はぜひ下記のコマンドでインストールしてみてください。
gem install pr_geohash
使い方は、READMEをご覧ください。

　実際にGeohashを試すことの出来るデモを下記のURLに設置しました。興味のある人は、直接触ってみると簡単に使い方が分かると思います。
http://blog.masuidrive.jp/wp-content/uploads/2010/01/geohash.html

　緯度経度を精度も含めて、文字列一つで扱えるのでURLに位置情報を入れたい場合など、便利なケースがあるんじゃないかと思います。

　Twitterでも緯度経度じゃなくて、Geohashで位置情報を管理してくれたらよかったのに。
そしたら、5文字ぐらいにすることで「だいたいシアトルにいる」みたいな大まかな位置情報だけ公開するとかできて、プライバシー的にも利点があったのになー。

p.s
　Geohashのエンコーディング方法の解説も欲しいって人います？
もし居たらコメントください。

追記 01/13 0:34
　Geohashのアルゴリズムを書きました。

参考データ:

=begin
東京付近のGeoHashの精度を算出するRubyスクリプト

|文字数|   南北  |   東西  |
|    6 | 609.08m | 988.77m |
|    7 | 152.27m | 123.60m |
|    8 |  19.03m |  30.90m |
|    9 |   4.76m |   3.86m |
|   10 |   0.59m |   0.97m |
=end

puts (6..10).map {|i|
  lng_bit = (5 * i / 2.0).ceil
  lat_bit = (5 * i / 2.0).floor
  lng_grid_size = sprintf("%6.2fm", (360.0 / (2 ** lng_bit))*(25.0*60*60))
  lat_grid_size = sprintf("%6.2fm", (180.0 / (2 ** lat_bit))*(30.8*60*60))
  [i, lat_bit, lng_bit, lat_grid_size, lng_grid_size]
}.map{|r| "|#{r.join('|')}|"}.join("\n")

Javascriptだけでコンテンツの言語を切り替えするスクリプト

masuidrive — Mon, 22 Sep 2008 08:00:05 +0000

Photo by keepps

　前回のブラウザの言語をJavascriptから調べるを元に、ページのメッセージを言語切り替えするスクリプトを作ってみました。

　実際のページは、これです。

　一つのHTMLの中に複数の言語のメッセージを書き、それぞれの言語をCSSのクラスで指定することで、ブラウザに合わせた言語のみが表示されるようになります。

　日本語版のブラウザで見ると「こんにちは世界」、英語版やポルトガル語版のブラウザで見ると、それぞれの言語でメッセージが表示されます。
　デフォルトの言語は英語に設定しているので、日本語やポルトガル語以外のブラウザで見た場合は、英語のメッセージが表示されます。

　このスクリプトでは、JSでブラウザの言語を取得したあと、表示するCSSを切り替えることで、メッセージ切り替えを実現しています。使い方などはページのソースを参考にしてください。
　設置する前には、CSSとこのスクリプトはなるべく先頭で実行するようにしてください。あまり下の方で読み込むと画面がちらつく可能性があります。

　言語の切り替えするなら、Apacheのcontent negotiationでいいじゃん！ってご意見を複数から頂いたのですが、Railsのpage cacheで使いたい、複数言語のHTMLを作ると修正が面倒なので、1つのHTMLで全部の言語を記述したい、Google翻訳APIとも組み合わせたいなぁ、などの理由で作ってみました。

　なお、動作確認は、FF3 (3.0.1), FF2 (2.0.16), IE6 (SP2 6.0.2900), IE7 (7.0.5730), Safari3 (3.1.2), iPhone Safari (OS 2.1), Opera9 (9.27), Google Chrome (0.2.149.30)、Wii ブラウザで取れていますが、Windows MobileのIEやOperaでは動かない事を確認しています。

　Window MobileのIEやOperaでJavascriptのデバグの方法をご存じの方は教えていただけますか？

　圧縮前のソースです。

function browserLanguage() {
  try {
    return (navigator.browserLanguage || navigator.language || navigator.userLanguage).substr(0,2)
  }
  catch(e) {
    return undefined;
  }
}

function setLanguage(default_language, languages) {
  var addCSSRule = (document.createStyleSheet)
    ? (function(sheet) {
      return function(selector, declaration) {
        sheet.addRule(selector, declaration);
      };
    })(document.createStyleSheet())
    :
    (function(sheet){
      return function(selector, declaration) {
        sheet.insertRule(selector + '{' + declaration + '}', sheet.cssRules.length);
      };
    })((function(e){
      e.appendChild(document.createTextNode(''));
      (document.getElementsByTagName('head')[0] || (function(h) {
        document.documentElement.insertBefore(h, this.firstChild);
        return h;
      })(document.createElement("head"))).appendChild(e);
      return e.sheet;
    })(document.createElement("style")));

  var removeCSSRule = function(ruleName) {
    for(var i = 0; i < document.styleSheets.length; i++) {
      var styleSheet = document.styleSheets[i];
      var ii = cssRule = 0;
      do {
        cssRule = (styleSheet.cssRules ? styleSheet.cssRules : styleSheet.rules)[ii];
        if(cssRule && cssRule.selectorText.toLowerCase() == ruleName) {
            styleSheet.cssRules ? styleSheet.deleteRule(ii) : styleSheet.removeRule(ii);
            return true;
        }
        ii++;
      } while(cssRule);
    }
    return false;
  }

  var array_include = function(ary, v) {
    for (var i in ary) {
      if (ary[i] == v) return true;
    }
    return false;
  };

  var lang = browserLanguage();
  if(lang==default_language || !array_include(languages, lang)) return false;

  addCSSRule("." + default_language, "display: none;");
  removeCSSRule("." + lang);
  return true;
}

ブラウザの言語をJavascriptから調べる。

masuidrive — Fri, 19 Sep 2008 09:32:16 +0000

Photo by midnightglory

　多言語対応のサイトを作っていると問題になるのが、メッセージの切り替えです。PHPやRailsを使っている場合は、HTTP_ACCEPT_LANGUAGEを見てメッセージ生成を切り替えれば良いのですが、静的ファイルの場合は、そうは行きません。

　そこで、今回はJavascriptだけでブラウザの言語を取得する方法を調べてみました。

　ググっていると、ブラウザ依存ですが取得する方法が見つかったので、各ブラウザで検証した所、navigator.browserLanguage、navigator.language、navigator.userLanguageのいずれかで取得できることが分りました。

　ただ、この値はブラウザのデフォルト言語環境のなので、HTTP_ACCEPT_LANGUAGEとは違う値が返ってきます。たとえば、日本語OSに英語版のFirefoxを入れている場合は、”en”が返ります。

　それでまとめてみたのが、このbrowserLanguage()です。
実行すると”en”や”ja”などの言語情報が返ってきます。

function browserLanguage() {
  try {
    return (navigator.browserLanguage || navigator.language || navigator.userLanguage).substr(0,2)
  }
  catch(e) {
    return undefined;
  }
}

　あなたのブラウザの言語設定は「」です。

「」内に何も表示されていなかった場合は、コメントでブラウザの種類とバージョンを教えてください。

　動作確認ができているのは、FF3 (3.0.1), FF2 (2.0.16), IE6 (SP2 6.0.2900), IE7 (7.0.5730), Safari3 (3.1.2), iPhone Safari (OS 2.1), Opera9 (9.27), Google Chrome (0.2.149.30), Windows Mobile IE (7.7), Windows Mobile Opera (8.65), Wii ブラウザ (Opera 9.30)です。
思いつく限りの環境で試しました。

　これだけでは役には立たないので、次はコレを使った言語切り替えライブラリを作ってみます。

追記
　言語によるCSS切り替え実験中

　このリンク先で、メッセージが出ていなかったり、「Sorry. We don’t support your language.」と表示されている、もしくは、日本語が表示されても、読み込み時にちらついているなどありましたら、コメントいただけると助かります。

参考資料

　各言語の実行結果。

FF3 (3.0.1): navigator.language: ja-JP; navigator.browserLanguage: undefined; navigator.systemLanguage: undefined; navigator.userLanguage: undefined
FF2 (2.0.16): navigator.language: ja; navigator.browserLanguage: undefined; navigator.systemLanguage: undefined; navigator.userLanguage: undefined
Safari3 (3.1.2): navigator.language: ja-jp; navigator.browserLanguage: undefined; navigator.systemLanguage: undefined; navigator.userLanguage: undefined
iPhone Safari (OS 2.1): navigator.language: ja-jp; navigator.browserLanguage: undefined; navigator.systemLanguage: undefined; navigator.userLanguage: undefined
Opera9 (9.27): navigator.language: ja; navigator.browserLanguage: ja; navigator.systemLanguage: undefined; navigator.userLanguage: ja
IE6 (SP2 6.0.2900) / IE7 (7.0.5730): navigator.language: undefined; navigator.browserLanguage: ja; navigator.systemLanguage: ja; navigator.userLanguage: ja
Google Chrome (0.2.149.30): navigator.language: ja-JP; navigator.browserLanguage: undefined; navigator.systemLanguage: undefined; navigator.userLanguage: undefined
Windows Mobile IE (7.7): navigator.language: undefined; navigator.browserLanguage: undefined; navigator.systemLanguage: ja; navigator.userLanguage: ja
Windows Mobile Opera 8.65: navigator.language: ja; navigator.browserLanguage: ja; navigator.systemLanguage: undefined; navigator.userLanguage: ja
Wii ブラウザ (Opera 9.30): navigator.language: ja; navigator.browserLanguage: ja; navigator.systemLanguage: undefined; navigator.userLanguage: ja