イナヅマTVログ

Chrome WebGL three.js

2013.05.19
02:27
author: taikiken
0件のコメント

覚えた、Android ChromeのWebGLを有効にする方法

Android 4.x Chrome だと WebGL が見れるとうわさが…
早速three.jsのexampleを見たけど、Browserは対応してるみたいだけどGraphic boardが対応してないよ、みたいなメッセージが表示されて真っ黒な画面のまま。

ガセだったかと思ったけど、Chromeなので設定いじればどうにかなるかな〜と思い、URLに
chrome://flags
と入力してみた。
続きを読む →

2013.05.15
07:01
author: taikiken
0件のコメント

TextMate 2でメールアドレスをEncryptしてHTMLへ挿入

Sublime Text 2が人気なのは承知してはいますが、TextMate 2を起動しちゃうんだな〜
一時期なんでもこれで書いてた、Perl, PHP, SQL, HTML, CSS, JavaScript, ActionScript全部。
Rubyの端っこかじったのもTextMate 2だった。

今でこそ主役はIntelliJ IDEAになったけど、コードを参照したり、軽くテストしたりと毎日使ってます。

今さらなんだけど初めて気がついた機能があったのでメモっとく。
別にメニューの深い階層にあったわけでなく多分他の人は普通に使ってたはず…

メールアドレスをEncrypt

メールアドレスをHTMLに表示するとき、ソースにベタ書きしませんよね。
何らかの方法で、難読化と言うか、暗号化処理を施します。
続きを読む →

cubic-bezier

2013.05.12
14:43
author: taikiken
0件のコメント

CSS3, transition-timing-function: cubic-besierの4つの引数

CSS3でアニメーションするための方法のひとつ、transition。
easing は transition-timing-function プロパティに設定します。

以下の5種類が定義されています。
ease, linear, ease-in, ease-out, ease-in-out。

イージングのかかり具合が気になったのでGoogle先生にお聞きすると丁寧に説明してくれてるサイトが色々見つかりました。

roblaplaca.com

roblaplaca.com: Understanding CSS cubic-bezier

cubic-bezier(P1x,P1y,P2x,P2y)

続きを読む →

WebCode

2013.05.11
23:40
author: taikiken
0件のコメント

WebCodeは便利かもしれない

Facebookで教えてもらったWebCodeってアプリが便利かも。

WebCode – PixelCut s.r.o.
4,300円
$49.99なので、App Store はまだ円安の価格改定が行われていないようです。

書き出し(Export)できるのは
・HTML(Canvas) + JavaScript
・HTML5 + CSS3
・SVG
画像(PNG, TIFF)の書き出しもできます。
続きを読む →

2013.05.09
01:08
author: taikiken
0件のコメント

[JavaScript][CSS3] animation, transitionのEvent名をメモ

CSS3のanimation, transition のイベントを知りたかったのでメモっとく。

ネタ元
【CSS3 Animation】
MDN: CSS アニメーション
MDN: Detecting CSS animation support
w3school: CSS3 Animations

【CSS3 transition】
Stack Overflow: CSS3 transition events
MDN: CSS transitions
続きを読む →

2013.05.06
21:59
author: taikiken
0件のコメント

[JavaScript] fps(フレームレート)を設定したい

JavaScriptのloop処理はrequestAnimationFrameを使用すると実現できます。
requestAnimationFrame, cancelAnimationFrame はこう使ってる

requestAnimationFrameはモニタのリフレッシュレートに依存しているようで概ね60fpsになります。
そこまでのフレームレートが必要ない場合や、待機状態の時にもう少し低いレートでloopを実行したいことがありました。

可変にできる仕組みを作れないかと思い、一定間隔でサーバーのプログラムを呼び出すために以前作っていたコードを改造してみました。
続きを読む →

2013.05.05
17:11
author: taikiken
0件のコメント

[JavaScript] requestAnimationFrame, cancelAnimationFrame はこう使ってる

以前、requestAnimationFrame, cancelAnimationFrame のネット上の下位互換実装コードを紹介する記事を書いてました。
requestAnimationFrameを下位互換実装するために
実践に投入しようとするとおかしなところもあったのであらためて投稿しました。
続きを読む →

2013.05.05
00:05
author: taikiken
0件のコメント

[JavaScript] TweenMax / TweenLite, onUpdateでゴニョゴニョしたい時のおまじない

名前空間汚染が著しい GreenSock のjavaScript Tween Engine, TweenMax / TweenLite ですが、なかなか便利なので使うのを止められません。

モーション対象をtargetに指定すれば、勝手にプロパティ値を変更しアニメーションしてくれます。

でもそうじゃなくて、tween計算の値を使い自前で変更したい時の作法が分かりにくかったのでメモっときます。
続きを読む →

2013.03.27
21:27
author: taikiken
0件のコメント

ChromeのCanvas inspectionを有効にする方法、自己責任でね

stackoverflowにChromeのCanvas Inspectorを有効にする方法がのってた。
http://stackoverflow.com/questions/9143209/html5-canvas-inspector/14466889#14466889

ChromeにCanvas Inspectorがあったなんて…
名称は”Canvas inspection”でしたけど。
開発中の機能なので何があっても知らないよっていう扱いらしいです。
続きを読む →