3月302014
0

全天球アニメーションするRicoh THETAビューア作った

Category: 未分類 | Tags: , , , | Author: shokai

全天球写真が取れるリコーのTHETAの写真を、複数枚アニメーションするビューアを作った。
Three.jsのOrbitControls.jsのサンプルをいじってたらできてた。


質問や機能要望はgithubのissueかtwitterにお願いします

デモ

http://shokai.github.io/theta-viewer.js


ドラッグで視点移動、マウスホイールで拡大縮小
safariだと[開発]→[WebGLを有効にする]を設定しないとWebGLが動かない。
ChromeかFirefoxなら動く。
Nexus7のChromeでは動くけどAndroidでもHTC One Jのchromeだと動かない。
WebGLすごくて、ChromeのCPU使用率5%もいかないけど、まだ全てのブラウザで動くわけではない。

ソースコード

https://github.com/shokai/theta-viewer.js


使い方

theta-viewer.jsをダウンロードして、自分のサーバーに設置する。
Three.jsとasync.jsとOrbitControls.js（Three.jsのexamplesの中にある）も必要。
<script src="./lib/async.js"></script>

<script src="./lib/three.js"></script>

<script src="./lib/OrbitControls.js"></script>

<script src="./lib/theta-viewer.js"></script>

適当な描画用div等を作って
<body>

  <div id="viewer" style="width: 100%; height: 100%;"></div>

</body>



var viewer = new ThetaViewer( document.getElementById("viewer") );

viewer.images = ["01.jpg", "02.jpg", "03.jpg"];

viewer.interval = 200; // ミリ秒

viewer.autoRotate = true;

viewer.load();
これで読み込める。

詳しくはgithubのREADMEや、index.htmlのソースコード見るとわかると思う。

それなりに簡単に設置できる。
設置しやすいようにasync.jsとthree.jsも一緒に1つのjsに固めてしまおうかと思ったけど、async.jsのライセンスがMIT Licenseのようで1行目にMIT Licenseと書いてないちょっとMIT Licenseじゃないライセンスだったのでやめた。

1月232014
0

HTML内のJavaScriptへのJSON埋め込み

Category: 未分類 | Tags: , , | Author: shokai

Jadeでこういう風に書いている箇所があった


http://node-linda-base.herokuapp.com/test?a=%3C/script%3E%3Cmarquee%3E

script.

  var name = "#{name}";

  var tuple = !{JSON.stringify(tuple)};

script(src='/socket.io/socket.io.js')
ユーザーからの入力によって生成されたサーバー側の変数tupleをjsonにしてから、ブラウザ側のjsの変数に渡している

こういうHTMLが出力される


ただし</script>という文字列がjson中に現れるとそこでscriptタグが終わって、なんでも出来てしまい

こうなる

もちろんmarqueeではなくscript src=も埋め込める


最終的にこう書いた

script.

  var name = "#{name}";

  var tuple = JSON.parse(unescape("!{escape(JSON.stringify(tuple))}"));

script(src='/socket.io/socket.io.js')
サーバー側の変数tupleをescape済みのjson文字列にしてブラウザに渡し、ブラウザ側でunescape後にJSON.parseしてJSの変数にした。

こういうHTMLが出力される。


これで正しいのかな？

1月102014
0

jade内のJavaScriptに変数を渡す

Category: 未分類 | Tags: , | Author: shokai

expressからjadeに変数を渡す

tuplespace: (req, res) ->

  name = “delta”;

  tuple = {sensor: “light”, value: 80};

  return res.render 'tuplespace', name: name, tuple: tuple

jadeでは.scriptと書くと複数行のインラインJavaScriptscriptが書けるので
script.

  var name = "#{name}";

  var tuple = !{JSON.stringify(tuple)};
文字列はクオートして、オブジェクトはJSONにしてviewのjavascriptに渡せた。


追記 XSSが可能だった HTML内のJavaScriptへのJSON埋め込み

12月062013
0

node-methodmissingを高速化した

Category: 未分類 | Tags: , , , | Author: shokai

methodmissingというnpmがあって、rubyのmethodmissingと同じく存在しなメソッドを呼び出した時にno method errorにするのではなく、メソッド名と引数を横取りできる。


使用例

mm = require 'methodmissing'



class Foo

  baz: "bazbaz"



foo = new Foo()



## methodmissingを適用

foo = mm foo, (func_name, args) ->

  console.log "missing-method '#{func_name}' called"

  console.log args





## 普通のメソッド呼び出し

console.log foo.baz



## 存在しないメソッドを呼び出す

foo.kazusuke("niku", "beer", "rice")

実行結果
bazbaz

missing-method 'kazusuke' called

{ '0': 'niku', '1': 'beer', '2': 'rice' }


存在しないメソッドが呼び出された時に、動的にメソッドが存在するフリをできるのはWebAPIのラッパーを作る時などに便利。


高速化


ベンチマークを取ってみたら、
存在しないメソッド呼び出しをキャプチャーするのは6〜7倍ぐらい速くなった。普通のメソッド呼び出しと比べて10倍遅い程度。
また、methodmissing適用した後のオブジェクトは通常のメソッド呼び出しが100倍ぐらい遅くなっていたのを、9倍遅い程度に抑えられた。

（methodmissingでメソッドを呼び出すコストが通常のメソッド呼び出しに比べて10倍ぐらい遅くなるだけで、呼び出されたメソッド全体の速度が遅くなるわけではないので、ループで何万回も呼び出す等でない限りこのコストは無視していいと思う）


といっても修正したの1行だけなんだけど、けっこうこういうので変わるものだな

存在しないプロパティを呼び出した時の動作が遅いのがまだ気になる。

12月052013
0

preタグを全てgoogle prettyprintする

Category: 未分類 | Tags: | Author: shokai

class=”prettyprint”書くのが面倒だったのでこうなった

<script src="http://shokai.org/js/jquery.min.js"></script>

<script type="text/javascript">

$(function(){

  $("pre").addClass("prettyprint").each(function(){

    this.innerHTML = this.innerHTML.replace(/<br>/gi, "");

  });

  $.getScript("http://shokai.org/style/google-code-prettify/run_prettify.js");

});

</script>

« 前ページへ — Previous page Next page — 次ページへ »