Google Street View 上に Three.js の 3D グラフィックを表示

実行結果は

http://psychedesire.webcrow.jp/stmon/

キャラクタがボヨンボヨンします。
WebGL対応のブラウザで開いてください。Chromeとかなら大丈夫だと思うよ。

コチラより。
今のところGoogleに怒られていません。
まぁ、アクセス自体が無いからねぇ。

3D オブジェクトは、メタセコイアで作り、それを Blender にインポートして、Blender から .js に変換しました。
mesh.rotation.x とかが動かない？よくわからないので、
camera.rotaion.x とかで無理矢理キャラクタをボヨンボヨン動かしています。

殆どのやり方は、

空が狭い: Three.jsでMQOデータを表示するまで

こちらを参考にしましたが、違うやり方をしたのが2点あって、
1点が、
Blender に メタセコイアのデータ .mqp をインポートする場合は、

　Blender2.5～2.6 - とあるPGの研究記録Ⅱ（レコーダー）

このインポータを使いました。Blender の最新 2.6.1 にも対応しています。

2点目が、
Blender から Three.js への エクスポータが、現状 2.6.0 にしか対応していないので、
 \Blender\2.61\scripts\addons\io_mesh_threejs\__init__.py
の28行目の 2.6.0 を 2.6.1 に書き換えました。

苦労した点、というわけじゃないけど、
ブラウザで3Dオブジェクトを表示したときに、どこにオブジェクトがあるのか、わからなかったので、
カメラの位置とかを色々動かして、なんとか最適なカメラポジションとか設定しました。
なんせ、3Dがわからないので。
コツとしては（？）オブジェクトを、ステージに対して、凄く巨大にすればいいみたいです。
あと、何故か、上下逆転する？ので、Blender上でY軸に180度回転させたりしています。

画像的に言うと、メタセコで

こうやって作って、
Blenderで

こうしてから、Three.js にエクスポートしてる感じです。。。
よくわからないけど、 これでうまくいった。
取り合えず、素材を６個作るので限界だった～。
3Dで凄い造型を作る人って、凄いよね。

マウスのイヴェント処理に応じて、3Dオブジェクトのカメラ位置を変えたり、
連動してストリートビューの表示を変えたり出来たら、見た目部分はOKかなーと思います。
あとは、部品だよね。これは。あまりにショボすぎるけど、
フリーのやつ使うのもねー。せっかくだから自作したいもんねー。

Googleに怒られるまで、チョコチョコイジって遊びたいですね。

Google Street View にモンスターが出現するWebアプリ作った。

超適当です。アハハハハ。
 ストモンと言います。ここで見れますよ。
http://psychedesire.webcrow.jp/stmon/

Google Map API の v3 というのが出ていて、
それだと、 Flash ではなく、 html5 で Street Viewが見れるようなので、
思い切ってやっちゃいました！エヘヘヘヘ。
知らなかったわぁ～。

Googleストリートビュー内で銃を撃てる『Google Shoot View』が閉鎖

まぁ、こういう前例があるので、直ぐに使えなくなると思いますけども。

GoogleChromeでしか動かないかも知れません。
他のブラウザは試してないです。

郵便番号を入れると、
その郵便番号近辺の地域で卵が孵ります。
で、勝手にモンスターの種類が決まります。

その内容でよければ、名前をつけて保存してください。
保存したモンスターは、ストモンって書いたアイコンを押せば見れます。
他は何も出来ません。

ほんとは、Three.js で作った3Dオブジェクトを表示させたかったけど、
心の中の悪魔が、
『どうせGoogleに消せって言われるんでしょ？』
と言ったので、凄く適当になりました。


製作時間10時間ほどです。
データストレージは WebStorage(localStorage) なので、
サーバ側に何か残したりしていません。
郵便番号投げると住所のJSONを返してくれるAPIがあったので、
使わせていただきました。

郵便番号検索API by グルーブテクノロジー株式会社

スマホと連動すれば楽しいのになぁとか、
夢が広がるんですけどね。残念だなぁ。

Titanium Mobile で WebSocket

できねーだろーと思ってたけど、ありました。
いや、まだ動かしてないけど。

http://blog.masuidrive.jp/index.php/2011/12/04/socket-with-titanium/
https://github.com/masuidrive/ti-websocket-client

が、元になってるやつで、

↑を改良したものが、
https://github.com/nowelium/socket.io-titanium
みたい。

WebView 内では WebSocket 使えたかも、とは思ったけど、
TitaniumMobile 自体では、WebSocket っていうプロトコルに対応してないので、
実装したみたいです。てか、MoonGift で記事を見たな。

Beholdr に関して考えると、WebView 上に更新内容が表示されるようになってるから、
本体（Android アプリ 自体）のほうでそれをやる理由もあんまりないのかも知れないけど、
なんか、利点とかあるかなー。うむー。

WebSocket といえば、絡めて使いたくなるのが、StreamAPI。
Twitter の StreamAPI は、ここが詳しかった。というか、わかりやすかった。

http://www.antun.net/tips/api/twitter.html

Facebook、FriendFeed も確か、StreamAPIがあった気がするなー。どうだっけ。

こんな感じにして、

Android 端末は、ユーザ情報とかを持ち運ぶだけにして、
今まで端末でもやっていた更新のデータを持ってきたりとかを、
サーバサイドにやらせりゃあいいのか？も？し？れ？な？い？でもない？
なんか、もう、全くの別なアプリになる気がするんだけど、
まぁ、便利ならいいか。

こうやって図にしてみて、無理が無いから、出来るよな。うん。
まぁ、なんとなく怖いかも、なのは、
RSSと２ちゃんねるは別な方法を使うとして、
タイムライン取得してるWebサービスが14個くらいあるから、
1) １ユーザにつき14個のループが最大でサーバで発生する事と、
2) ユーザAに渡すべき更新内容がユーザBに渡ってしまわないか
っていうことだなー。

1) は、今Beholdrダウンロードしてる人が全然いないから大丈夫。
2) は、WebSocketを信じようぜ！って感じか。


サーバサイドでIDとかパスワードとかアクセストークンとか保存すれば、
Webアプリ化することも出来るし、
Webアプリとしてユーザアカウントを発行したりすれば、クライアント開発も、凄い楽なんだろうけどなぁ。
そこで、OpenIDなのか。BrowserIDなのか。

なんか、発想が、逆だよな。
普通、Webアプリを作って、それを便利に使える携帯端末用クライアント作るんだろうけど、
携帯端末用クライアントがあるから、Webアプリも作りますっていうのは。
あー。でも、Instagram とか、こんなニュアンスだよね。

色んなサービスがOAuth対応してくれりゃ、アクセストークン保存するだけだから、
気持ちが楽なんだろうけど、ベーシック認証のみのサービスがあるから、なんともねぇ。

WebSocket っていうところから、夢が膨らんだり、萎んだりしたのでした。

続々・Titanium Mobile で mixi Graph API

おめたんコメントを、FacebookとかGoogle+とかWassrとかでいただきました。
ありがとうございます！
同居している人達からは、何もお祝いを言われていないまま、誕生日が終わろうとしています！やったね！
あ、昔の同僚がおめでとうとLINEで言ってくれました。ええ子やで。keiちゃんええ子やで。

というわけで、mixi Graph API で文字化けする原因？と、対処法がわかりました～。
なんで文字化けしてしまったのかは、わからないんだけど、
（UTF-8エンコード宣言しているにもかかわらず、EUCで書いて保存しているっぽいのではと思う）
前回のエントリで紹介した jcode.js と utf8.js (?) 的にいうと、

var str = "わっかっさー！わっかっさーってなぁんだっ！";
str = _to_utf8(_to_euc(str));

こういうエンコード状態になっているみたいです。

なので、

str = _from_euc(_from_utf8(str));

こうすることで、元に戻ります。

で、きれいに文字が表示されるようになりましたよーひゃっほーう！

で、mixiボイス投稿とmixiボイス返信とイイネ！を実装しようとしたんだけど、
投稿についてはできるんだけど、
mixiボイス返信とか、イイネ！が出来ない。
理由は、UpdateAPI でデータを取得すると、
VoiceAPIで取れば取得できる、POST-ID という一意なIDが取得できないため。

http://developer.mixi.co.jp/connect/mixi_graph_api/mixi_io_spec_top/voice-api/

これがないと、返信もイイネも出来ない。
ていうか、mixi のWebサイト上だと、mixi　チェックだろうが日記だろうがなんだろうが、
イイネ！出来るはずなのに、 UpdateAPI に POST-ID が無い限り、どうしようもない。

UpdateAPI で取得できる JSON データ上で、id というカラムはあるんだけど、
中身が id ではなくて、URI になってる。

http://mixi.jp/view_check.pl?post_time=20120129202439#owner_id=cqs7s4qrou1ae_1327836279

アクセスしても、データがありませんと言われる。
これに対して何かアクションを起こせば、POST-ID が取れるのなら、取りに行くんだけどなぁ。
あ。でも、待てよ？

VoiceAPI の POST-ID のサンプルを見ると、

[
  {
    "id" : "1FZ3P4ACUWBBC-2010061010321",
    "created_at" : "Thu Jun 10 01:32:13 +0000 2010",
    "text" : "つぶやきの本文",
    "user" : {
      "id" : "1FZ3P4ACUWBB",
      "screen_name" : "Becky",
      "profile_image_url" : "http://profile.img.mixi.jp/photo/user/1FZ3P4ACUWBBC_301280930.jpg",
      "url" : "http://mixi.jp/show_friend.pl?uid=1FZ3P4ACUWBB"
    },
    "photo" : [
        {
            "thumbnail_url" : "http://id.photo.mixi.jp/....",
            "image_url" : "http://id.photo.mixi.jp/....",
        }
    ],
    "favorited" : false
  }
]

こうなってるので、
URLを分解して、 post_time= と owner_id = をくっつけりゃいいじゃんねぇ。
でも、なんかよくよくみると、 user.id (1FZ3P4ACUWBB) と id (1FZ3P4ACUWBBC) だと、
id の 方が、最後にCが余計だよね。関係あるのかな？なんでもいいからCつけてみりゃいいか。

    var id = "http://mixi.jp/view_check.pl?post_time=20120129202439#owner_id=cqs7s4qrou1ae_1327836279";
    id = id.replace("post_time=","").replace("owner_id=","").split("?")[1].split("#");
    id = id[1].split("_")[0].toUpperCase() + "C-" + id[0];
    alert(id);

こんな感じでどうだろ。やってみよう。
やってみたけど、ん～。NotFoundって言われるわぁ。
ん～。困ったわおん。チョイ調べる。

続・Titanium Mobile で mixi Graph API

あ、誕生日です。ありがとうございます。
31歳になりました。
コメント欄に皆さんからの温かい言葉が沢山で、とても嬉しいです。

…

ス　パ　ム　コ　メ　ン　ト　す　ら　来　な　い　け　ど　ね　。

はい。というわけで、mixi の文字コードの問題が解決しそうなので、書きます。
色々とインターネットを調べたら、

日本語URL変換ツール： ドメインのピュニコード(Punycode)変換とUTF-8など文字列のエンコード・デコード

こういうところがあって、どーやってんだろーと思って、ソースを開いたら、
jcode.js って書いてあったので、それでぐぐったら、

Unicode と JIS / EUC / シフトJIS 間の変換

こういうのがありました！

追記！こっちもです！

Unicode ⇔ UTF-8

ソースコードの使用、配布に制限はありません。ご自由にお使いください。

って書いてあるから、使っていいのであろう。ありがたや。
結局自分の力では解決できなかったのである。なさけねーなー。
こっちのコードを見たら、ecl.jsより判りやすかった。
でも、結局判らないけど(笑)
テーブルから文字列を引っ張ってきたりしてたりするのとかは判るので、
なんか、うん、えーと、わからない。でも、わかる。

取り合えず、なんとかなりそうだ！ということで。

Titanium Mobile で mixi Graph API

というわけで、取得してデータを表示はできました。
ロケタッチと同じく、OAuth 2.0 な感じなので、
特段何か複雑だったわけではないものの、前回のエントリに書いたように、
AccessToken の有効期限が短いので、
mixi だけ、更新をとりに行く前に、RefreshToken を使って、 AccessToken を最新のものに書き換える処理を入れるようにしました。

で、ちゃんとデータを表示は出来るんだけど、
何故か、文字化けする…おいおいおいおい！

そういえば、なんか文字コードがどうとか書いてあったなーというのを思い出した。

API共通仕様

下のほうにある、絵文字のところで、文字コードの部分があったので、
emoji_carrier=au&emoji_charset=utf8
にしてみたんだけど、変わらず文字化け…おーまいがーっど。
絵文字のキャリアをAUにしたのは、AUはお猿さんの絵文字が可愛いからです。はい。

だいたい、JSONってUTF8以外はダメでしょ？そういう決まりじゃなかったっけ？
なんで文字化けするのかわからん。わーけがわからん。
ブラウザでチェックした、前回のエントリの時には
文字化けなんかしなかったのに、である。

これ、escape() とか そういうので文字化けしてるように見えるってもんじゃないもんなー。
Titaniumに問題があるのだろうなー。うむ。

ちょっと調べてみるけど、なんだかなーもう。
で、調べたら、

Escape Codec Library

これで出来るみたい。

ライセンスとか、どうなっているのであろうか…
転載可としか書いてない…うごー。これ困るパターンのやつじゃないですかー。
ソースを ecl.js のソースを見たけど、意味がわからない。
コード圧縮とか、難読化とか、そんなレベルじゃねー。すげー。これ。感動した。

とりあえず、別な方法を模索しますわー。

続々々・Titanium 1.8 のHTTPClient で Could not find class 'org.apache.http.entity.mime.content.StringBody' というエラー

余裕でさっき書いた文章は嘘っぱちのクソ文章でした。ごめんなさい。
plusapi.js は直さなくてもいいです。多分。
server.js のContent-Length がちゃんと指定されてないから問題なのだみたいでした。
YungSang はちっとも悪くないのである。俺はやっぱりだめな男だ。ごめんねYungSang。

var body = JSON.strigify(json) したもののバイト数と、
body.length が同じだと、エラーは発生しないけど、その誤差があると、
JSONファイルが正しく外に出ないで、エラーが出るみたい。

というわけで、server.jsの下のほうを

// 改行とスペースを改行だけにする
        while(body.match(/\n\s/gi)){
            body = body.replace(/\n\s/gi,"\n");
        }
// 改行を取り除く
        body = body.replace(/\n/gi,"");
// バイト数を得る（後述）
        var bodyByte  = (function(body){
            var c = 0;
            for(var i = 0,l = body.length; i < l; i ++){
                c += (escape(body.charAt(i)).length < 4) ? 1 : 2;
            }
            return c;
        })(body);
// バイト数とbody.length の差を バイト数に追加。
        bodyByte += (bodyByte - body.length);
// ヘッダをセットして送信
        res.header('Content-Type', 'application/json');
        res.header('Content-Length', bodyByte);
        res.send(body);


改行を取り除く辺りが必要なのか否かは、ちょっと不明。
取りあえず、そうやったら動いているので、そうしています。
正規表現を理解していないのが露呈している感じです。

で、バイト数を得るってところは、

文字列のバイト数を求める

ここを参考にしました。無駄に無名関数。
というわけで、UTF-8コードにしなくても、activity.access をいじらなくても、データが取れました。
よかったよかった。ありがとうYungSang。グレイトフル・リスさん。

続々・Titanium 1.8 のHTTPClient で Could not find class 'org.apache.http.entity.mime.content.StringBody' というエラー

というわけで、全ての原因がわかったー！のである？かも。
着地、JSONが壊れている？のが原因だった。
ていうか、
try{var json = JSON.parse(str);}catch(e){alert("dame-");}
て、やってなかったから、ハングアップしてたんだけども。

取りあえず、前回書いたUTF-8コードに置き換えて、
更にescape(responseText)して、WebViewにぶん投げて、
WebViewのｊQueryで$("body").html(escapedJSON);ってして、結果を見てみた。
Stringが壊れてるってなって、どんなデータなのか把握も出来ない感じになるので、
そこが困った。

対処法としては、 items[i].access が今回変になるのを確認したので、
plusapi.js の
1023～1027行辺り の access{} をコメントアウトして、
1152行辺りに、activity.access.items.push();しているIFが３つあると思うんで、
そのIFを３つ全部コメントアウトしたら、取りあえず大丈夫になった。
でも、今一旦動くだけで、
なんか例外的に変なものが投げられたりすると、JSONパースエラー起こすかもなーとは思う。
細々書き直していたので、行数は目安で。

でも、この、activity.access.items.push() のところ、別に変になる理由ないんだけどなー。なんなんだろ？
わけが判らないなー。
オブジェクトの{ } がちゃんと閉じられてなかったんだよねぇ。謎。

前回だったか、Content-Length : body.length ってサーバ側でやってて、
クライアント側でresponseText.length ってやったときの、数字が違うことがあったりした。

xhr.onload = function(){
 var contentLength =  this.getResponseHeader("Content-Length")
 var bodyLength    = this.responseText.length;
 Ti.API.info("contentLength - " + contentLength);
 Ti.API.info("bodyLength - " + bodyLength);

}

Titanium側でこんなのやったんだけども。
うむー。わけがわからないなー。まぁ、とりあえず、一旦動くようになったので、報告でした。

全体的なまとめとしては、
　サーバ側
　　server.js
　　　・ res.header('Content-Length', body.length);　をつける。
　　　・ if (req.query.callback) {}　をコメントアウトする（俺だけ）
　　plusapi.js
　　　・ 前の記事の utf8ize() で全部の文字をUTF-8コードにしておいた（必要ないかも）
　　　・ activity.access オブジェクトを全部削除してみた。
　クライアント側
　　ちゃんとJSONは try{} のなかでパースしましょう。基本です。

こんな感じでした。