iPhoneのCSSで拡大・縮小・回転などのアニメーションさせる方法

2008/8/20 水曜日 Posted in iPhone | No Comments »

先日「iPhoneでJavaScriptを使わずCSSだけでアニメーションする方法」という記事を書きましたが、今回はその続きです。 前回は、左から右にすーっとアニメーションするだけでしたが、今回は拡大・縮小・回転といったアニメーションをさせてみたいと思います。 また前回は「-webkit-animation-name」を使う方法でしたが、今回はやり方を変えてみました。 　 静止画なのでわかりづらいですが、左からクルクルと回転しながら縮小して、右のようになります。   サンプルコードは次の通りです。 <html> <head> <meta name="viewport" content="width=320, user-scalable=no, maximum-scale=1.0" /> <script type="text/javascript"> function animationStart() { var el = document.getElementById("target"); el.style.webkitTransition = '-webkit-transform 3s ease-in-out'; el.style.webkitTransform = 'translate(180px,40px) rotate(180deg) scale(0.1)'; } </script> </head> <body> <input type="button" name="hoge" value="animation" onClick="animationStart();" /> <div id="target" style="width:120px; height:120px; background-color:red; position:absolute; ... Read more..

iPhoneでJavaScriptを使わずCSSだけでアニメーションする方法

2008/8/13 水曜日 Posted in iPhone | No Comments »

iPhoneはJavaScriptを使わなくても、CSSのみでアニメーションができるようです。 今回はその方法をご紹介します。 サンプルとして、ボタンを押すと赤い四角が右にツーっと動く、というものを例に解説しようと思います。 この赤い四角が 「move right」ボタンを押すことで、右にアニメーションします   サンプルのHTMLは次の通りです。 <html> <head> <meta name="viewport" content="width=320, user-scalable=no, maximum-scale=1.0" /> <style type="text/css"> .slide { -webkit-animation-name: "slide-right"; -webkit-animation-duration: 2s; } @-webkit-keyframes "slide-right" { from { left: 10px; } to { left: 190px; } } </style> <script type="text/javascript"> function slideStart() { document.getElementById("target").className = "slide"; document.getElementById("target").style.left = '190px'; } </script> </head> <body> <input type="button" name="hoge" ... Read more..

iPhone向けサイト作成のベースに便利なテンプレート集「iPhone Universal」

2008/8/11 月曜日 Posted in iPhone | No Comments »

本日は、iPhone向けサイトを作成する際に、ベースとして利用できそうなテンプレート「iPhone Universal」をご紹介します。 →　Google Code　iphone-universal [code.google.com]   「iPhone Universal」は、iPhone向けのページを作成するためのサンプルとなるHTML, CSSのテンプレートです。 ライセンスはGPL v3で公開されており、リストやボタン、フォームやパネルなど、一通りのサンプルが収録されています。 シンプルなリスト 入力フォーム パネル   上記画像はネイティブアプリではなく、すべてHTMLとCSSを使って作られたiPhone風インターフェイスです。 なお、こちらにサンプルもアップしてみましたので、iPhoneをお持ちの方はどうぞご確認ください。 →　iPhone Universal デモ   関連： 90秒で理解するiPhone JavaScript（ジェスチャー編） iPhone用JavaScriptデータベースプログラミング入門(JavaScript++かも日記) 90秒で理解するiPhone JavaScript（マルチタッチ編） Read more..

90秒で理解するiPhone JavaScript（ジェスチャー編）

2008/7/30 水曜日 Posted in iPhone | 1 Comment »

先日のマルチタッチ編に続き、今回はジェスチャー編になります。 対象を拡大縮小したり、回転させたりするには、座標を取得して自分でガリガリ計算しないといけないと思っていたのですが、どうやら「gestureXXX」イベントを使えばそんな必要がないということを知りました。　→　参考 [iphone.wikiwiki.jp] というわけで、今回はgestureイベントの使い方をまとめてみます。   ジェスチャーのイベントには次の3つがあるようです。 gesturestart gesturechange gestureend それぞれ、ジェスチャー開始時、ジェスチャー中、ジェスチャー終了時にイベントが発生します。 使い方は、touchXXXのときと同じようにイベントリスナーに登録するか、「onClick」のような感じで「onGestureStart」属性を追加します。   拡大縮小・回転をさせるのに、押さえておくべきポイントは2点だけです。 「event.scale」で、拡大・縮小用の倍率を取得 「event.rotation」で、回転の角度を取得 下記のサンプルでは、赤いdivタグの拡大縮小・回転を行うためのサンプルです。 width（幅）, height（高さ）, rotation（角度）をグローバル変数に格納し、ジェスチャーイベントから取得した数値に合わせ、styleを変更しています。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=480, user-scalable=no, maximum-scale=0.6667" /> <script type="text/javascript" charset="utf-8"> <!-- var width = 120; var height = 120; var rotation = 0; function init() { document.addEventListener("touchmove", touchHandler, false); document.addEventListener("gesturechange", gestureHandler, false); document.addEventListener("gestureend", ... Read more..

iPhone用JavaScriptデータベースプログラミング入門(JavaScript++かも日記)

2008/7/29 火曜日 Posted in iPhone | No Comments »

昨日に続きiPhone＋JavaScriptネタです。 ネットを巡回していて、興味深い記事を見つけましたのでご紹介させていただきます。 なんと、iPhone用のSafariにはSQLiteが組み込まれており、JavaScriptからそれを利用できるようです。 JavaScript++かも日記さんのところで、「iPhone用 JavaScriptデータベースプログラミング入門」というエントリーが連載されており、詳しく解説されています。 →　JavaScript++かも日記　iPhone用 JavaScriptデータベースプログラミング入門(目次) [jsgt.org]   JavaScriptで次の一文を実行することで、データベースが自動で生成されるようです。 db = openDatabase("[DB名]"); 普段は何も表示されていません。 データベースを作成すると「Database」という項目が追加されます。 ドメイン名とDB名の一覧が表示されます。 ＤＢ名をタップすると、サイズなどの詳細情報が表示されます。 DBの最大サイズは5Mとのことなので、あまり多くのデータを入れることはできませんが、DBは複数個作成できるようなので、そちらでカバーできるかもしれません。 機能的には「Google Gears」に近い感じでしょうか。 うまく使えば、ローカルにデータをキャッシュして、電波の届かないところではそれを表示するといった、モバイルに適したアプリケーションが作れるはずです。   関連： 90秒で理解するiPhone JavaScript（マルチタッチ編） CSSの変更だけでPCサイトをiPhoneに対応させる方法 ソフトバンクのiPhone3Gを買ってきました Read more..

« Previous Entries