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 | 1 Comment »

本日は、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..

ドコモ用にCSSをインライン化してくれるPHPライブラリ「toInlineCSSDoCoMo」がバージョンアップ

2008/8/7 木曜日 Posted in 記事紹介・リンク | No Comments »

以前ご紹介した、ドコモのCSSをインラインに埋め込む形に自動変換してくれるPHPライブラリである「toInlineCSSDoCoMo」がバージョンアップしたようです。 →　アシアルブログ　toInlineCSSDoCoMoをバージョンアップしました [asial.co.jp]   以前書いた紹介記事はこちらです。 →　ドコモのCSSをインラインに埋め込んでくれるPHPライブラリ「toInlineCSSDoCoMo」 →　ドコモのCSSをインラインに埋め込んでくれるPHPライブラリ「toInlineCSSDoCoMo」(続き)   ケータイサイト構築の中で、大きな課題となっているのが、ドコモ端末が外部CSSの読み込みに対応していないという点です。 この「toInlineCSSDoCoMo」を利用することで、外部CSSを自動で「style="xxx"」形式に置換してくれますので、ケータイサイトのHTML作成がぐっと楽になります。 今回のバージョンアップでは以下の点が修正されたとのことです。 内部での変換をUTF-8で行うように 数値文字参照と実体参照を実行時にエスケープ XML宣言の逆転現象を回避するように修正 エラー処理モードを追加し、strictモードのときのみ例外を投げて、それ以外の時は無視するように 私はお盆前進行により、まだ試せていないのですが、前回のバージョンで問題となっていた箇所の多くが改善されているようですね。 手が空きましたらすぐに活用したいと思います。 また上記ブログによると、ソフト名がイケてないとの指摘をうけたらしく、変更を考えているとのことです。 ステキなネーミングに期待したいと思います。（←プレッシャー）   関連： ドコモのCSSをインラインに埋め込んでくれるPHPライブラリ「toInlineCSSDoCoMo」 ドコモのCSSをインラインに埋め込んでくれるPHPライブラリ「toInlineCSSDoCoMo」(続き) 絵文字ライブラリ「sfPictogramMobilePlugin」がバージョンアップし、PEARパッケージ化されたようです Read more..

90秒で理解するiPhone JavaScript（マルチタッチ編）

2008/7/28 月曜日 Posted in iPhone | 3 Comments »

仕事でiPhone向けサイトを作ることになるかもしれず、色々と調査中です。 まずはiPhoneならではの機能ということで、マルチタッチについて調べてみました。 ここまでわかったことをメモ代わりに記載したいと思います。 今回はひとまず座標の取得までです。 ゆくゆくは、こちらのムービーのように凝ったギミックを作りこみたいと思っています。   マルチタッチの座標を取得するのは思ったより簡単で、抑えるポイントは4つだけです。 Safari自体のスクロールや拡大・縮小は動作しないようにした方が無難 タッチのイベントは、リスナーまたは「onTouchXXX」から取得 タッチ数は「event.touches.length」で取得 座標は「event.touches[i].pageX (or pageY)」で取得   1. Safari自体のスクロールや拡大・縮小は動作しないようにした方が無難 マルチタッチを行う前の下準備として、Safari自体のスクロールや拡大・縮小を、動作しないようにしておいた方が無難です。 対象をドラッグしようとしているのか、画面をスクロールしようとしているのか、プログラム側で判断するのは難しいためです。 今回は次のように調整しました。 <meta name="viewport" content="width=480, user-scalable=no, maximum-scale=0.6667" /> 横スクロールと拡大・縮小を禁止しています。　→　参考エントリ 縦スクロールは、「event.preventDefault();」で抑止できるようです。 （後述のサンプルプログラム内でご確認ください）   2. タッチのイベントは、リスナーまたはonTouchXXXから取得 タッチ関連のイベントには onTouchStart onTouchMove onTouchEnd onTouchCancel の4つがあり、それぞれonClick()などと同じような形で、イベントを取得できます。 またリスナー方式の場合は、 document.addEventListener("touchstart", touchHandler, false); document.addEventListener("touchmove", touchHandler, false); document.addEventListener("touchend", touchHandler, false); document.addEventListener("touchcancel", touchHandler, false); のような形で利用します。 touchcancelはどのようなケースで使われるのかは不明です。 もしご存じの方がいましたら教えてください。   3. タッチ数は「event.touches.length」で取得 これは簡単です。 タッチ情報は「event.touches」に配列の形で格納されますので、その数を見ればOKです。 （event変数が何かについては、後述のサンプルプログラムでご確認ください）   4. 座標は「event.touches[i].pageX (or pageY)」で取得 タッチ座標は「event.touches[i].pageX」のような形で取得します。 シングルタッチの場合は「event.touches[0].pageX」。 ダブルタッチの場合は、上記に加え「event.touches[1].pageX」にも値がセットされます。 最大5個（touches[4]）まで機能するようです。   サンプルプログラムは下記の通りです。 <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" ... Read more..

« Previous Entries