ejsでテンプレートのパスが通らない件

Node.js + express + ejsの環境で、下記みたいに書いてたが、ejsのテンプレートファイルが見つからないって、エラー(Error: Cannot find module ‘views/’)になる。

app.get("/", function(req, res) {
    res.render('./views/temp.ejs', { title: 'SAMPLE'});
});

で、どうしたもんかと2日ばかり悩んだが、express.staticで、ルートのパスを指定すれば、動いた。

app.use(express.static('./views'));

app.get("/", function(req, res) {
    res.render('temp.ejs', { title: 'SAMPLE'});
});

…ただ、これが正解かどうかは怪しいので、どなたか正解プリーズ!

ラズパイ3にgoogle-home-notifierを入れるメモ

Raspberry Pi 3 にgoogle-home-notifier入れようと思ったら微妙に手間取ったので、メモ。

$ npm init
$ npm install google-home-notifier

※「fatal error: dns_sd.h: そのようなファイルやディレクトリはありません」 ってエラーが出た場合は下記を実行してから、再度インストールする。
$ sudo apt-get install libavahi-compat-libdnssd-dev

Goome homeのアドレスをサクッと調べるために、「multicast-dns」も入れとく。
$ npm install multicast-dns
参考サイト:
Raspberry PiからGoogle Homeを喋らせる
Google Homeの名前とIPアドレスを検出する方法

Monacaデバッカーがコケる件

Android版のMonacaデバッカーを7.0.2にアップデートしたら、プロジェクトの再生で急にコケる様になった。

●端末が縦固定に設定されてる。
●プロジェクトがLandscape(横)設定にしてる。

この組み合わせの場合に発生するっぽい。
ちなみに、アプリにしたらこの問題は発生しない。

ついでに、ダッシューボードにログインする度にアカウントの言語設定がリセットされちゃうのも、地味に困る

iOSのSafariでColorboxの表示がセンターに来ない件

モーダル表示で何かと便利なColorboxだが、iOSのSafariだと、ウィンドウがが縦センターじゃなく上の方に出る。どうも、表示時のアニメーションが原因らしい。

なので、’transition’を’none’にしてアニメーションを切ってみたら、ちゃんと出てきた。(デフォルト値は’elastic’)

$(".colorbox").colorbox({transition:"none"});

古いスマホでe.preventDefault()が効かない件

ちょっと古いスマホ(iPhone5SとかAndroidの4.x 辺り)のブラウザだと、e.preventDefault()が効かないので、a タグの処理が走ってしまう….

で、ググったりテストしたりして、分かったこと。

  • onClickだと、どうやっても無理。
  • onTouchEndでも、どうにも無理。
  • onTouchStartなら行けそう!
  • e.stopPropagation()はなんか、効くっぽい。

って事で、以下の様な感じにしたら、なんとか動いた。


$('a').on("touchstart",function(e){
	e.preventDefault(); 	 ←普通はこれでキャンセル
	e.stopPropagation();	 ←問題スマホは、これでキャンセル
	//処理内容
}

線を描くアニメーション

Canvasでサクッと描画できるのはいいけど、描画過程を見せたくて、線を引っ張る過程をアニメーションさせる方法を模索中。

Line Animation

始点のと終点の座標から、角度と線分の長さを割り出し、始点から終点に向かって、ちょっとづつ線を描いては消す…ってのを繰り返すってだけがが、そこそこ成功。

なお、描画にはタイマー関数ではなく、「requestAnimationFrame」を使ってます。

>>Canvasアニメーションの要点

肘の位置を調べる

ふと思う所があって、手先の座標から肘の座標を調べる方法を調べてたら、そのものズバリな師匠サイトがあった。

>>三角形の2点の座標と各辺の長さから、残る1点の座標を求める

説明も理解できないままに、素直にサンプルスクリプトをJavaScriptに置き換えて試してみたら、上手く行った。

Elbow finder

そして、未だに仕組みは分からない。

HTML5ビデオをJavaScriptでシンクロさせてみる

サイト上で、動画とコンテンツのシンクロができるか…ってことでやってみた。
HTML5 Video Synchro Test

作り方は極めてシンプルで、videoタグで貼られた動画はタイムが変更されると

timeupdate

イベントが発行されるので、これを拾って、どうこう処理すれば良いだけだった。

こんな感じ

$("Video ID").on("timeupdate",function(){
	var xTime = this.currentTime //現在の再生時間
	if(xTime >= 10.0 && xTime < 11.0){
		console.log("10秒たった!");

	}

});

その他のイベントは、この辺を見てみてください。