加速度センサーをiPhoneのSafariで取得（JavaScript）
本格的に冬ですね。寒いです。
おはようございます。
たすくです。
iOS4.2から、iPhoneのSafariでも加速度センサーが
JavaScriptで取得できるようになったようです。
こんなサンプルを作ってみました。
灰色の部分は<div>タグで、アメーバの部分は<img>タグです。
最初、画像はCSSで<div>タグの端に置いておいて、
JavaScriptで取得した加速度の数値を、
CSS3 -webkit-transformのtranslate3dで足してあげてるだけです。
で、肝心のJSの取得ですが、
devicemotionイベントのaccelerationIncludingGravityプロパティ（？）の中に入ってるみたいです。
こんな風にしてあげといて、
こんな風にしてあげればOK。
（余談ですが、jQueryのbindでは取れませんでした。
何か間違えてたのか、やっぱり対応するイベント、対応しないイベントがあるのか・・・）
上のサンプルは、devicemotionイベント発生タイミングで、単純に足してるだけなので、
重力がイマイチ考慮されてなくて少し気持ち悪くなりました。
setTimeoutで常に重力分を足して、その上で落下速度に重力センサーの値を使う方が、
どっちかというと自然なのかな、とか思ったり。
window.orientationと組み合わせて、
画面がどっちの方向に向いてても大丈夫なようにするともっと面白そうですね。
とりあえず、メモメモ。
【参考にしたページ】
http://webtech-walker.com/archive/2010/11/24184510.html
おはようございます。
たすくです。
iOS4.2から、iPhoneのSafariでも加速度センサーが
JavaScriptで取得できるようになったようです。
こんなサンプルを作ってみました。
灰色の部分は<div>タグで、アメーバの部分は<img>タグです。
最初、画像はCSSで<div>タグの端に置いておいて、
JavaScriptで取得した加速度の数値を、
CSS3 -webkit-transformのtranslate3dで足してあげてるだけです。
で、肝心のJSの取得ですが、
devicemotionイベントのaccelerationIncludingGravityプロパティ（？）の中に入ってるみたいです。
window.addEventListener("devicemotion",onDevicemotion);こんな風にしてあげといて、
function onDevicemotion(ev){
var aX = ev.accelerationIncludingGravity.x;
var aY = ev.accelerationIncludingGravity.y;
var aZ = ev.accelerationIncludingGravity.z;
}こんな風にしてあげればOK。
（余談ですが、jQueryのbindでは取れませんでした。
何か間違えてたのか、やっぱり対応するイベント、対応しないイベントがあるのか・・・）
上のサンプルは、devicemotionイベント発生タイミングで、単純に足してるだけなので、
重力がイマイチ考慮されてなくて少し気持ち悪くなりました。
setTimeoutで常に重力分を足して、その上で落下速度に重力センサーの値を使う方が、
どっちかというと自然なのかな、とか思ったり。
window.orientationと組み合わせて、
画面がどっちの方向に向いてても大丈夫なようにするともっと面白そうですね。
とりあえず、メモメモ。
【参考にしたページ】
http://webtech-walker.com/archive/2010/11/24184510.html
アニメPNG画像 JavaScriptとCSSを使った疑似アニメーション画像の作り方
かぜなどいじでもひくものか
こんにちは、たすくです。
先日、家で背景画像付きのGoogleの検索トップを見ていて、
ちょっと気になったことが。
なんだこれ？なんか動いてる。
「クリックすると今日のDoodle（ホリデーロゴ）を表示します」だそうです。
どんな風にやってるんだろう、と思ってCSSを調べたら・・・
（※↓長すぎるので小さくしています。実際は28px×2856px。）
長いパラパラマンガだ！
Firebugを見てみると、CSSの数字が増えたり減ったりしてる。
要するに、CSSの背景画像の位置をいじって、
疑似アニメーション画像を作ってるみたいな感じだとわかったわけです。
難読化されてるJSを読む気はしなかったので、自分で作ってみることにしました。
縦長のpng画像 (50px×400px)
参考までに、アニメgifでも書き出してみた。（50px×50px）
CSS
JavaScript
まぁ、要するに、setTimeoutを使って1コマ分背景画像をズラしてあげるわけです。
はい、できあがったのがこれです。
じゃーん
（静止画なのでわからないと思いますが、動いています。）
どっちも変わんないじゃん、と思うかもしれないですが、
背景色をつけてみると・・・
じゃーん！pngの方がキレイ！！
つまり、Googleの検索窓の背景画像は、人それぞれ色んな画像が入るわけで、
透過gifなんかを使っちゃうと、どうしてもカビガビしてしまうわけですね。
そこで、透過png画像を使いたいけど、pngではアニメーションができない。
だから、JSを使ってアニメーションさせてるのだと思います。
画像自体のファイルサイズはこんな感じです。
使い道はあんまり思い付かないけど、なんか面白いものが作れてよかったなー。
こんにちは、たすくです。
先日、家で背景画像付きのGoogleの検索トップを見ていて、
ちょっと気になったことが。
なんだこれ？なんか動いてる。
「クリックすると今日のDoodle（ホリデーロゴ）を表示します」だそうです。
どんな風にやってるんだろう、と思ってCSSを調べたら・・・
（※↓長すぎるので小さくしています。実際は28px×2856px。）
長いパラパラマンガだ！
Firebugを見てみると、CSSの数字が増えたり減ったりしてる。
要するに、CSSの背景画像の位置をいじって、
疑似アニメーション画像を作ってるみたいな感じだとわかったわけです。
難読化されてるJSを読む気はしなかったので、自分で作ってみることにしました。
縦長のpng画像 (50px×400px)
参考までに、アニメgifでも書き出してみた。（50px×50px）
CSS
#hoge{
display:block;
width:50px;
height:50px;
background:url(anime_part.png) no-repeat top;
text-indent:-9999px;
}
JavaScript
var el; //対象のエレメント
var h; //エレメントの高さ
var i = 0; //Loopごとに1増える
var imgNums = 8; //画像のコマ数
function onLoad(){
el = document.getElementById("hoge");
h = el.offsetHeight;
loop();
}
function loop(){
el.style.backgroundPosition = "left "+ -1 * h * i + "px";
// ↑"left -50px","left -100px","left -150px"...となっていく
i++;
if(i > imgNums-1)
i=0;
setTimeout("loop()",100);
}
まぁ、要するに、setTimeoutを使って1コマ分背景画像をズラしてあげるわけです。
はい、できあがったのがこれです。
じゃーん
（静止画なのでわからないと思いますが、動いています。）
どっちも変わんないじゃん、と思うかもしれないですが、
背景色をつけてみると・・・
じゃーん！pngの方がキレイ！！
つまり、Googleの検索窓の背景画像は、人それぞれ色んな画像が入るわけで、
透過gifなんかを使っちゃうと、どうしてもカビガビしてしまうわけですね。
そこで、透過png画像を使いたいけど、pngではアニメーションができない。
だから、JSを使ってアニメーションさせてるのだと思います。
画像自体のファイルサイズはこんな感じです。
使い道はあんまり思い付かないけど、なんか面白いものが作れてよかったなー。