iPhone（iOS4.2）の加速度センサーとジャイロセンサーの値をJavascriptで取得する | alt
去年の暮れにリリースされた「iOS4.2」から WEBブラウザ（Safari）で加速度センサー、ジャイロセンサーのAPIにアクセスできるようになりました。 せっかくiPhone持っているんだし、試しにそれぞれの値をブラウザに出力してみます。 センサー値の取得はJavascriptのイベントにて行います。 まずiPhoneの傾きが変化するとdevicemotionというイベントが発生するので window.addEventListenerで感知し、 関数に渡されるイベントオブジェクトのプロパティよりそれぞれの値を取得します。 別でdeviceorientationというイベントがありますが、 こちらでも回転の加速度のみ取得が可能です。 ・傾きの加速度は、accelerationオブジェクト。 （xが左～右、yが手前～奥、zが上～下） ・傾きの重力加速度は、acceler
javascriptでスマホのタッチ（タップ）イベントを取得する
どうも、俺＠仕事中です。お久しぶりです。 最近はクライアントjavascriptを書いたり、nodeを書いたり、やたらjavascriptばかりイジっています。 今日はスマホブラウザ（iphoneやandroid）でタッチ（タップ）に対するイベントをjavascriptで取得する方法をめもめもします。 // １）ontouchstart document.getElementsByTagName("body").item(0).ontouchstart = function() { alert("touchされたよ"); }; // ２）ontouchmove document.getElementsByTagName("body").item(0).ontouchmove = function() { alert("touchされて移動してるよ"); }; // ３）ontouchend
iPhone iPadで「position: fixed」を実現するiScroll « オモテメン（高山一登のブログ）
3日に書いたiPad readyの記事で紹介したNikeのサイトがヘッダーを固定していたのでてっきりiPadはiPhoneで使えなかったCSSの「position: fixed」が使えるのかなと思ったらやっぱりiPadでも「position: fixed」は使えなくて、代わりに「iScroll」というJavaScriptライブラリで実現していたと知ってびっくり。 これを使えばiPhoneでも「position: fixed」に相当するデザインを実現できそうです。デモはこちら ただしこれを使うと、逆に通常のブラウザではスクロールできなくなるので注意が必要です。上のデモもPCでは機能しません。 使い方は簡単で、JS読み込んでスクロールさせるdivにIDつけて、その親divにもIDつけてあとCSS指定するだけ。詳しくはデモのソースを見れば分かります。2つのdivの間に違う要素が入るとダメみた
iPhoneとWebサービスの連携手法
最近、iMovatwitterというiPhoneアプリを出しました。 iPhoneのブラウザは携帯電話のようにGPSやデジカメとインテグレーションすることを考えられていないので、GPSを使った「イマココ」や、デジカメと連携する「写ツ」をiPhoneで使うためにアプリ側で吸収しました。 このアプリでやりたかったことの一つが、UIWebViewというブラウザコントロールとWebサービス/アプリとの連携でした。 UIWebViewというのは、SafariをiPhoneアプリ内に組み込むコントロールです。 丁度、Flash PlayerをHTMLに組み込むようにWebブラウザをiPhoneアプリ上に表示することができます。 このiPhoneアプリ上のWebブラウザとWebサービスの主な連携ポイントとしては、大きく３つあります。 １．iPhoneアプリからWebページを制御する ２．Webページのメ
iPhone/SafariでjQueryを使ったイベントのバインドにおける注意点 : nogunogu
こんにちは。のぐちです。 先日、このブログの存在が社内に告知されました。 開始からしばらくはひっそりと生きようということで特に教えていなかったのです。 で、早速というか何というか、社内の開発者からの応援メッセージ（ツッコミ）が届きました。 そのひとつが 「何故jQueryを使ってるのに、addEventListener してるのか？」 でした。 確かにわざわざ次のように書きました。 box.addEventListener(“touchmove”, touchHandler, false); 僕も最初はjQueryを使って $(“#box”).bind(“touchstart”, touchHandler); なんて書いたのですが、タッチしても全然反応がないので、 「ああ、touch系のイベントはjQueryが対応してないんだろうな」 と思い込んでいました。 が、このツッコミを機
[iphone/safari] JavascriptとCSSアニメーションでフリック操作を実装してみる : nogunogu
とあるWebアプリをiPhone対応させようと思っています。 iPhone対応なんて、レイアウトをちょっといじる程度かと思って調べていたら、 なんとiPhone搭載のモバイルSafariはタッチ関連のイベントをJavascriptで扱えるというじゃないですか。 “iPhone Human Interface Guidelines for Web Applications” を見てみると、 ユーザーの操作として上げられている中に「Flick」があります。 ということは、フリックイベントを設定できて、ページをめくる的な操作がササッと作れるはず。 などと思って調べたところ、どうやらタッチ・ジェスチャー関連のイベントは下記の7つみたいです。 touchstart touchmove touchend touchcancel gesturestart gesturechange gesturee
ke-tai.org > Blog Archive > 90秒で理解するiPhone JavaScript（マルチタッチ編）
90秒で理解するiPhone JavaScript（マルチタッチ編） Tweet 2008/7/28 月曜日 matsui Posted in iPhone | 10 Comments » 仕事でiPhone向けサイトを作ることになるかもしれず、色々と調査中です。 まずはiPhoneならではの機能ということで、マルチタッチについて調べてみました。 ここまでわかったことをメモ代わりに記載したいと思います。 今回はひとまず座標の取得までです。 ゆくゆくは、こちらのムービーのように凝ったギミックを作りこみたいと思っています。 マルチタッチの座標を取得するのは思ったより簡単で、抑えるポイントは4つだけです。 Safari自体のスクロールや拡大・縮小は動作しないようにした方が無難 タッチのイベントは、リスナーまたは「onTouchXXX」から取得 タッチ数は「event.touches.length
Basic animations - Web APIs | MDN
« Previous Next » Since we're using JavaScript to control <canvas> elements, it's also very easy to make (interactive) animations. In this chapter we will take a look at how to do some basic animations. Probably the biggest limitation is, that once a shape gets drawn, it stays that way. If we need to move it we have to redraw it and everything that was drawn before it. It takes a lot of time to re
JavaScript: クロスブラウザでブロック要素内のクリック座標を得る方法:phpspot開発日誌
JavaScript: クロスブラウザでブロック要素内のクリック座標を得る方法 ちょっとやることがあって調べてみたら案外情報が見つからず、実現するのに時間がかかったのでメモしておきます。 <script type="text/javascript"> <!-- function clickhandler(event) { if (!event) { event = window.event; } var hx, hy; if (document.all) { // for IE hx = event.offsetX; hy = event.offsetY; } else { hx = event.layerX; hy = event.layerY; } alert("x:"+hx+",y:"+hy); // return [hx,hy]; } //--> </script> <div on
JavaScript : setTimeout
書式 タイマーID = setTimeout(処理, ミリ秒) タイマーID = window.setTimeout(処理, ミリ秒) タイマーID = フレームオブジェクト.setTimeout(処理, ミリ秒) 説明 指定されたミリ秒後に指定された処理を実行します。戻り値としてタイマーIDが返されます。設定したタイマーを解除するにはclearTimeout()のパラメータにタイマーIDを指定します。 サンプルコード [実行] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Sample</title> <script type="te
iPhone向けwebアプリを作ってみる-タッチイベント、ジェスチャーイベントに関するまとめ-
こんにちは。普段からiPhoneを愛用している橋本です。 最近、「せっかくiPhone持ってるんだし、iPhone向けのアプリ作ってみようかしら？」と思い立ったのですが、iPhoneのネイティブアプリを作るには、”Objective-C”と、”cocoa Touch”というiPhone/ipodTouch向けのフレームワークを理解する必要があり、また、自分で開発したアプリを実機に入れて動かしてみるには、そこそこの費用と各種手続きが必要だったり（iPhoneエミュレータ上で動かす分には問題ないのですが…）と、何かと大変です。 「何かもっと手軽にiPhone特有の機能を活かしたアプリを作る方法はないかなぁ。。」と考え、思い立ったのがWebアプリ。Webアプリなら、今までの知識＋αでアプリを作成することが出来るのではないかと。そこで、今回から数回に渡ってiPhoneとjavascriptを使って
[JS]JavaScriptで実装されたスーパーマリオカート
nihilogicのエントリーから、スクリプトで実装されたスーパーマリオカートを紹介します。以前、紹介した同サイトのスーパーマリオよりもパワーアップしている感じです。 Javascript Super Mario Kart スーパーマリオカート 対応ブラウザはFF2, FF3, Opera(9.27 and beta) and Safari 3.1.1となっており、IEでは動作しませんでした。
本気でやるならonclick属性は避けてライブラリを活用すべき - id:HolyGrailとid:HoryGrailの区別がつかない日記
第1回 そろそろ本気で学びませんか？ | Think IT これ、今この記事書いてる時点で650以上ものブクマがされているんだけれども、あまり内容がよろしくない。 というのも、解説はとても丁寧ですごくよい内容なのだけど、サンプルコードの書き方がどうも古くさい。 onclick属性とか、今時のフロントエンドエンジニアはそんな書き方はしない（と思う）。 なぜonclickをあまり推奨しないのか やっぱり、エンジニアとデザイナーorマークアッパーとの分業の点でHTMLの属性にスクリプトを書いちゃうのはあんまりよろしくない。 たとえばの話だけど関数の名前を変えたかったり、だとか、HTMLを変更したり、っていうときにミスが起こりやすくなってしまう。 これは分業していなくてもどちらにしろ発生してしまうことだと思う。 他にも前に書いたのだけど、aタグとかでonclickしちゃうとhrefにreturn
JavaScriptの配列キーの取得は、イテレーションで取得(するらしい)｜DIGITAL SQUADブログ
JavaScriptの配列キーの取得は、イテレーションで取得(するらしい) JavaScriptの配列キーをどうやって取得したらよいものやらあちこち探している間に、こんなエントリを発見。 [ Javascript ] 辞書(連想)配列の Key を取り出す方法 どうやら、単純にarray.keys()みたいな方法で取得はできず、イテレーションが必要だとか。 ■ソース var ary = { "key01":{ "subKey":"value" }, "key02":{ "subKey":"value" }, "key03":{ "subKey":"value" } } for (keys in ary){ document.write(keys+"<br />"); } ■出力結果 key01 key02 key03 となってめでたく配列のキーが取得できました。 うーん・・・ちょっと面倒で
次世代JavaScriptの形:Geekなぺーじ
8年間の標準化活動の成果として今後変化していくJavaScriptの形を紹介しています。 なお、JavaScriptの標準化は未だ過程であるため、ここで紹介された事が将来実装されない可能性もあるそうです。 いや、でも、聞いていて思ったのですがこれはもう違う言語ですね。。。 下位互換があるので今まで作られた物は問題なく動作するはずなのでしょうが、 CとC++に微妙な互換性があるように、互換性をつけたばかりにゴチャゴチャになる事も将来ありそうな予感がしますね。。。 まあ、でも全く違う物として出してしまうと「何それ？ハァ？」という感じで世界に華麗にスルーされてしまうでしょうし、悩ましいところなのだと予想します。 以下、ビデオの要約です。 私はJavaScript初心者なので、要約が間違っているかも知れません。 また英語の誤訳などが含まれているかも知れないので、詳細はビデオをご覧下さい。 Java
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サービス終了のお知らせ
Ben Joffe |Canvascape
1ka2ka.com
Event.isLeftClick - 左クリックが押されているかどうか調べる - prototype.jsリファレンス
URLが見つかりませんでした｜株式会社スタジオエムディ
