2013-07-16

webGLでローカルにあるテクスチャファイルを使用したい場合

webGL

Google ChromeでwebGL使う場合、テクスチャが表示される所が真っ黒に描画されることがあります。
これは、Chromeの起動オプションをつけないで起動し、ローカルにあるテクスチャファイルにアクセスしようとして起こります。

解決方法

ターミナルからChromeを--allow-file-access-from-filesオプションをつけて、起動することによって解決します。

$ /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files

また、以下のエラーはChromeを完全に終了していないときに起きます。Command+Q等でプロセスを終了させてから上記のコマンドでChromeを起動すれば解決します。

[3060:1799:0716/180328:ERROR:process_singleton_mac.cc(104)] Unable to obtain profile lock.

参考

起動オプション - Google Chrome まとめWiki

2013-07-12

node-serialportで起きたinvalid ELF headerエラーの対処法

node.js JavaScript web

node-serialportは、node.jsでシリアル通信ができるライブラリです。

voodootikigod/node-serialport · GitHub

node-serialportライブラリを使ったプログラムをgit cloneして実行しようとしたところ、エラーがでたのでその対処方法を忘備録として残りておきます。

エラー

$ node app.js 

/home/username/demo_program/node_modules/serialport/node_modules/bindings/bindings.js:83
        throw e
              ^
Error: /home/username/demo_program
 node_modules/serialport/build/Release/serialport.node: invalid ELF header
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at bindings (/home/username/demo_program/
node_modules/serialport/node_modules/bindings/bindings.js:76:44)
    at Object.<anonymous> (/home/username/demo_program/
/node_modules/serialport/serialport.js:7:44)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)

対処法

以下のように一度serialportをuninstallしてinstallしたら解決しました。

$ npm uninstall serialport
$ npm install serialport

2013-07-10

Mobile Safari用のviewport設定

HTML iPhone

デバイスのディスプレイ幅に表示を固定する

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

ホーム画面から起動した時にURLバー等をなくし単一アプリのように表示する

<meta name="apple-mobile-web-app-capable" content="yes">

ホーム画面に追加する時のタイトルを指定する

<meta name="apple-mobile-web-app-title" content="このタイトルになる">

2013-07-08

/socket.io/socket.io.jsの読み込みに失敗するとき

node.js JavaScript

Express(node.js)でSocket.ioをつかったアプリを開発している時にエラーがおきました。
その対処法がなかなかわからなかったので、忘備録として残しておきます。

環境

Mac OSX 10.8.4 Mountain Lion
Node.js v0.10.12
Express v3.3.1
Socket.io v0.9.16

ローカル開発です。

起きたエラー

クライアント側でsocket.io.jsが読み込まれない。
ChromeのConsoleに以下のように表示される。

Failed to load resource: the server responded with a status of 404 (Not Found)  http://localhost:3000/socket.io/socket.io.js
Uncaught ReferenceError: io is not defined

対処方法

app.jsを以下のように書き換えた。
コードの該当部分のみを抜粋。

変更前

var app = module.exports = express.createServer();

http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

var io = require('socket.io').listen(app);

変更後

var app = express();

var server = http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

var io=require('socket.io').listen(server);

2013-07-03

macのlocalhostに同じLAN内のiPhoneからアクセスする方法

iPhone mac

iPhone向けのwebページやアプリをローカルで開発している時等に使えます。

Terminal.appでifconfigコマンドを叩く
en1:の項目中に書いてあるinet 192.168...... がmacのIPアドレス。
そのIPアドレスをiPhoneのSafari等で開く

2013-06-19

textareaを選択した時に全選択をする

jQuery

前回記事(iPhoneのSafari(Mobile Safari)のselect()は、代わりにselectionStart, selectEndを使わなければいけない - yohtnのブログ)の応用で、textareaを選択した時に全選択をするjQueryコードです。

<textarea id='id'></textarea>

というtextareaがある前提です。

$('#id').click(function(){
  id = document.getElementById('id');
  id.selectionStart = 0;
  id.selectionEnd = id.value.length;
});

2013-06-05

iPhoneのSafari(Mobile Safari)のselect()は、代わりにselectionStart, selectEndを使わなければいけない

jQuery

textareaの全選択をJavaScriptで実装しようとして、普段通りにjQueryのselect()を使ったんですが、Mobile Safariではうまく動作しませんでした。

$('#text').select();

どうやらMobile Safariのバグのようで、以下のようにselectionStart, selectEndを使用して解決しました。

var text = document.getElementById('text');
text.selectionStart = 0;
text.selectEnd = text.value.length;

参考リンク