Node.jsでSocket.IOなアプリをHerokuにデプロイ

Socket.IOサーバーとしてHerokuを使ってみよう。 実験中 https://shielded-caverns-4913.herokuapp.com/ Heroku練習 以前作ったユーザーが生きていたので改めてチュートリアルを実践。 Getting Started with Node.js on Heroku gulpでexpressなサーバを作る 普通にnpmなプロジェクトを作る。 > mkdir bvh_sio > cd bvh_sio > npm init > mkdir src > mkidr src/server > mkdir src/client > cd src > tsd init > tsd query node -rosa install > tsd query express -rosa install > tsd query serve-static -rosa install > tsd query socket.io -rosa install Herokuにデプロイする場合はでdevDependenciesじゃなくてdependenciesに書くらしいのでそのようにした。 package.json { "name": "bvh_sio", "version": "1. [Read More]

Three.jsでbvh

/ BVH labsを参考にやってみる。 モーションは 続 BVHファイルを探してみたで紹介されていた https://sites.google.com/a/cgspeed.com/cgspeed/motion-capture から拝借。 上記のサイトのコードをtypescript化しながら解読中。 THREE.Skeletonというクラスがボーンアニメーションをしているらしい。 Sliderつけてみた https://refreshless.com/nouislider/ [Read More]

Three.jsでpmd読み込み

こちらのモデルを使わせていただいております。 threejs_pmd_loader.ts source PmdLoader.ts source 変換せずに直接Pmdを読み込むべくカスタムローダーを作ってみよう。 まず、SJIS操作が必要なのでこちらを使わせて頂いた。 * https://github.com/polygonplanet/encoding.js あとはJSONLoaderを参考にしてArrayBufferから地道に情報を切り出していく。 ArrayBufferから情報を切り出すのはこつがわかれば簡単で以下のようなヘルパークラスを作れば さくさくできる。 BinaryReader class BinaryReader { m_buffer: ArrayBuffer; m_postiion = 0; constructor(buffer: ArrayBuffer) { this.m_buffer = buffer; } read(length: number) { var slice = this.m_buffer.slice(this.m_postiion, this.m_postiion + length); this.m_postiion += length; return slice; } readString(length: number): string { var slice = new Uint8Array(this.read(length)); let i = 0; for (; i < slice.byteLength; ++i) { if (slice[i] == 0) { break; } } return Encoding. [Read More]

node.js(Windows版)を自前ビルドする

謎のクラッシュ(FFIでネイティブプラグインがアクセス違反で死ぬ)を追跡するため、 VCのデバッガをアタッチするべく自前ビルドする。 node-v5.3.0.tar.xz 7zipで解凍。 python2系にpathを通してvcbuild.batをたたく。 > vcbuild.bat v8もlibuvも全部入りらしくあっさりとほぼビルドできた。 SignTool Error: No certificates were found that met all the given criteria. Failed to sign exe document https://github.com/nodejs/node-v0.x-archive/wiki/Installation#building-on-windows debugビルドの作り方はこう。 > vcbuild.bat nosign debug nodeをデバッグ実行 node-v5.3.0にnode.slnができているのでこれをVisualStudio2015で開く。 nodeをスタートアッププロジェクトに指定 nodeの設定のdebugタブで、カレントディレクトリとコマンドライン引数を指定 f5 例外が再現した void CallbackInfo::DispatchToV8(callback_info *info, void *retval, void **parameters, bool dispatched) { Nan::HandleScope scope; static const char* errorMessage = "ffi fatal: callback has been garbage collected!"; if (info->function == NULL) { // throw an error instead of segfaulting. [Read More]

node-ffiでstdcallが使いたい(頓挫)

Windows上でnode-ffiでdllから関数を呼びだしていたのだが、 dllにコールバックを登録した呼び出しを繰り返していると死ぬという現象に遭遇。 調べ始めた。 node-v5.3.0-x64.msi(Windows10) node-ffiはstdcallに対応してない 2014/01/25 http://stackoverflow.com/questions/21357502/calling-delphi-stdcall-function-with-panischar-from-node-js node-ffiはstdcall対応してないで。 そうなのかー。 github見るとIssueがあるけど解決されなかったぽい。 2012/01/13 * https://github.com/node-ffi/node-ffi/issues/34 残念。 ついで。node-ffiはffiにパッケージ名を改めたらしい。 https://github.com/node-ffi/node-ffi/wiki/API-changes-from-v0.x-to-v1.x node-ffiを改造できないか模索する node-ffiはlibffiのラッパーとわかる。 FFI_DEFAULT_ABI というのがcdeclになる様子でnode-ffiはそれしか対応していないのが問題。 で、調べていくと node_modules/ffi/deps/libffi/src/x86/ffitarget.h typedef enum ffi_abi { FFI_FIRST_ABI = 0, /* ---- Intel x86 Win32 ---------- */ #ifdef X86_WIN32 FFI_SYSV, FFI_STDCALL, FFI_THISCALL, FFI_FASTCALL, FFI_MS_CDECL, FFI_LAST_ABI, #ifdef _MSC_VER FFI_DEFAULT_ABI = FFI_MS_CDECL #else FFI_DEFAULT_ABI = FFI_SYSV #endif #elif defined(X86_WIN64) FFI_WIN64, FFI_LAST_ABI, FFI_DEFAULT_ABI = FFI_WIN64 #else /* ---- Intel x86 and AMD x86-64 - */ FFI_SYSV, FFI_UNIX64, /* Unix variants all use the same ABI for x86-64 */ FFI_LAST_ABI, #if defined(__i386__) || defined(__i386) FFI_DEFAULT_ABI = FFI_SYSV #else FFI_DEFAULT_ABI = FFI_UNIX64 #endif #endif } ffi_abi; STDCALL発見・・・。しかし、この書き方だと64bitビルドで消滅するのではないか? [Read More]

特定のHtmlElementを画面いっぱいにするToggleの実験

“W” translate | “E” rotate | “R” scale | “+” increase size | “-” decrease size Press “Q” to toggle world/local space, keep “Ctrl” down to snap to grid close ボタンが押されたら、最前面にposition: fixedの板($modal)を表示してそっちに Three.jsで使っているElement($renderer)の内容を付け替える。 let $children=$renderer.children(); $modal .appendTo($('body')) .css({ display: 'block', position: 'fixed', left: 0, width: '100%', top: 0, height: '100%', 'z-index': 100 }); $children.appendTo($modal); $(window).trigger('resize'); 概ねこんな感じ。 スクロールバーをbodyじゃなくて最大化表示用のdivより後ろにまわすなどの細工はしてある。 [Read More]

Three.jsのトランスフォームコントロールでメッシュをマウスで移動

"W" translate | "E" rotate | "R" scale | "+" increase size | "-" decrease size Press "Q" to toggle world/local space, keep "Ctrl" down to snap to grid source 今回は、本家サイトのサンプル http://threejs.org/examples/#misc_controls_transform をやってみよう。 まず、TransformControlsのtypescriptインターフェースを用意する。 というか書きながら作った。 TransformControls.d.ts。モジュールの細かいところがよくわからん・・・ declare module THREE { export class TransformControls extends THREE.Mesh { constructor(camera: THREE.Camera, element: Element); update():void; addEventListener(event: string, callback: Function): void; attach(mesh: THREE.Mesh): void; setSpace(space: string): void; setTranslationSnap(snap: number): void; setRotationSnap(radians: number): void; setMode(mode: string): void; setSize(size: number): void; space: string; size: number; } } TransformControlsを初期化する。カメラとhtmlノードを渡して初期化する CreateTransformControl(mesh: THREE. [Read More]

dat-guiを試してみる

view typescript view javascript たまにthree.jsのデモと連動して使われているGUIライブラリdat-guiを試してみる。 https://code.google.com/p/dat-gui/ http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage https://stemkoski.github.io/Three.js/#gui ライブラリを導入 > bower install dat.gui > tsd query dat-gui -rosa install dat.GuiControllerのnameプロパティがtypings/dat-gui/dat-gui.d.tsで未定義だった。 bower_components/dat.gui/dat.gui.jsでは定義されていた。 /** * The name of <code>GUI</code>. Used for folders. i.e * a folder's name * @type String */ name: { get: function() { return params.name; }, set: function(v) { // TODO Check for collisions among sibling folders params.name = v; if (title_row_name) { title_row_name. [Read More]

FontAwesomeを取り入れる

https://fortawesome.github.io/Font-Awesome/ 取り入れてみた。 cssをセットアップして アイコンを選択してコピペすると。 無駄にアイコンを配置してみよう。 fa-lg fa-2x fa-3x fa-4x fa-5x なるほど。 <i class="fa fa-wrench fa-5x"></i> iでアイコンタグを導入して、クラスで種類とサイズを指定する仕組み。 適当にサイトのテンプレートにアイコンを入れてみる。 わりとお手軽におされ?なサイトに。 [Read More]

Socket.IOな実験環境

Socket.IOを実験する環境のメモ。 Expressは、serve-staticで静的なファイルのhostingが目的兼後で拡張できるように coffee-scriptは無しでES6要素をなるべく入れる Socket.IOを手早く展開するのが目的なのでtypescriptは抜きにしようと思ったが、無い方がつらいので矢張り入れる https://github.com/ousttrue/sio_sample Project生成 > mkdir sio_sample > cd sio_sample sio_sample> npm init -y sio_sample> npm install gulp gulp-load-plugins gulp-nodemon browser-sync -D sio_sample> npm install express socket.io body-parser method-override connect-logger errorhandler serve-static --save vscodeでes6を使えるように jsconifg.json { "compilerOptions": { "target": "ES6" } } 後で拡張できるように以下のようなディレクトリ構成にする。 build <- srcから(加工して)コピーされる src <- 加工前のファイル置き場 + server + app.js + client + index.html + index.js src/server/app.js "use strict"; const http = require('http'); const express = require('express'); const port = process. [Read More]