iPhoneでCSSを使って要素を3Dっぽく回転させる方法
    このエントリをはてなブックマークに登録

2008/10/16 木曜日 matsui Posted in iPhone 2 Comments »

最近iPhoneをいじっていなかったので、久々にiPhoneネタです。

今回はiPhoneでJavaScriptを使って、要素を3Dっぽく回転させる方法をご紹介いたします。

静止画なのでわかりづらいのですが、右にクルクル回転しながら進んでいきます。


この状態からアニメーションスタート（モアレがひどくてすいません）


クルクルと回転していきます。


文字が裏返っているのが面白いですね

 

サンプルコードは次の通りです。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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) rotateY(180deg)';
}
</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; top:120px; left:10px;">ABCDEFG</div>
</body>
</html>

ポイントは「rotateY(180deg)」の部分で、rotateYのように書くと、横方向にクルクルと回転します。

iPhoneをお持ちの方はこちらのページからお試しください。
→　3D回転のサンプルページ

この方法を使えば、苦労せずに3Dっぽいアニメーションを表現することができます。

 

参考にさせていただいたサイトはこちらです。

→　iPhone向けサイトを考える　iPhone・Safariで要素を3D回転 [blog.livedoor.jp]

 

関連：

タグ: ,



アップルがiPhoneソフトウェアに関するNDAを一部撤廃したようです
    このエントリをはてなブックマークに登録

2008/10/2 木曜日 matsui Posted in iPhone, ニュース No Comments »

iPhoneのソフトウェア開発情報は、NDA(機密保持契約)によって厳重に保護されていましたが、その一部が撤廃されたようです。

→　YOMIURI ONLINE　アップル、「iPhone」アプリ向けNDAを緩和-開発者の不満に対応 [yomiuri.co.jp]

→　ITmedia +D モバイル　Apple、iPhoneアプリ開発の秘密保持契約を撤廃 [itmedia.co.jp]

→　ITpro　米アップル，iPhoneソフトウエアに関するNDAを撤廃 [nikkeibp.co.jp]

 

契約内容変更は即日発効となり、すでにリリースされたiPhone用ソフトウェアに関して、開発者はNDAの制約を受けなくなるとのことです。
これは開発者にとってはうれしいですね。

ただし、全面的にではなく、あくまで「一部」解禁という形のようです。

→　builder by ZDNet Japan　あのiPhone NDAが緩和、しかし…… [zdnet.com]

 

以下記事からの引用です。

iPhone OSには、多くのAppleのアイデアと革新的技術が含まれており、盗用を防ぐためNDAの制約を課してきた。しかしながら、iPhoneアプリ開発者からNDAが重荷であるとの指摘が多いため、リリース済みのソフトについてNDAの対象から外すことにした。なお、リリース前のアプリについては、従来通り NDAの対象となる。

リリース後、つまりAppleの審査を通過したアプリに関してはNDAの対象外となる形のようです。
ですが、開発中のアプリに関してblog等に書くことは、依然としてできないようです。

ルータ化のような違法アプリを出回らせないためには必要なのかもしれませんが、これではちょっと中途半端な感じがしますね。

 

関連：

タグ: ,



iPhoneのCSSで拡大・縮小・回転などのアニメーションさせる方法
    このエントリをはてなブックマークに登録

2008/8/20 水曜日 matsui 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; top:120px; left:10px;"></div>
</body>
</html>

ポイントは、7～8行目のJavaScriptです。

el.style.webkitTransition = '-webkit-transform 3s ease-in-out';

ここでアニメーションの定義を行っています。
「3s」というのがアニメーションさせる時間で、この例では「3秒」です。
「ease-in-out」というのがアニメーションの動きの強弱で、この例では「最初と最後をゆっくり」ということです。

こちらは「default | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2)」のいずれかの値をとることができるようです。

詳しくはこちらのページに書かれています。（英語です）
→　Surfin’ Safari – Blog Archive » CSS Animation [webkit.org]

 

el.style.webkitTransform = 'translate(180px,40px) rotate(180deg) scale(0.1)';

続いてこの部分で、移動・拡大縮小、回転の数値を設定しています。

「translate(180px,40px)」の部分で、移動する位置を指定しています。
この例では右に180ピクセル、下に40ピクセルです。（左や上に移動する場合はマイナスの値を指定します）

「rotate(180deg)」は回転です。
この例では、半時計周りに180度回転させています。

「scale(0.1)」は拡大・縮小です。
ここでは0.1倍と1/10の大きさにしています。

この他にも、skew(変形)や、matrix（変換行列）なども使えるようです。

 

iPhoneをお持ちの方はこちらのページからご確認ください。
→　縮小・回転のサンプルページ

 

またこの辺りの話は、こちらのページがサンプルが豊富でとても参考になります。

→　iPhone向けサイトを考える : リッチっぽいiPhone向けサイトを作るためのCSS3アニメーション [livedoor.jp]

 

関連：

タグ: , , ,



iPhoneでJavaScriptを使わずCSSだけでアニメーションする方法
    このエントリをはてなブックマークに登録

2008/8/13 水曜日 matsui 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" value="move right" onClick="slideStart();" />
<div id="target" style="width:120px; height:120px; background-color:red; position:absolute; top:120px; left:10px;"></div>
</body>
</html>

 

ポイントとなるのは「-webkit-animation-xxx」の部分です。

上記の例では、クラス名「slide」に対して、上記のようなアニメーションのような定義を書いています。

-webkit-animation-name: "slide-right";
-webkit-animation-duration: 2s;

1行目で名前を定義します、この名前は下と一致していれば適当なもので構いません。
2行目でアニメーションの速度を定義しています。
今回の例では2秒です。こちらの数字を少なくすれば早く移動することになります。

 

@-webkit-keyframes "slide-right" {
	from { left: 10px; }
	to { left: 190px; }
}

こちらの部分で、移動開始位置と終了位置を設定します。

以上でアニメーションの定義は終わりです。

 

あとはアニメーションさせたいオブジェクトのクラス名を「slide」とセットしてやれば、アニメーションが開始されます。

document.getElementById("target").className = "slide";

なお、上記でアニメーションは開始されるのですが、アニメーション終了後は元に位置に戻ってしまうので、その後に座標を終了位置に変更しています。

document.getElementById("target").style.left = '190px';

 

厳密にはアニメーションの発動時にJavaScriptを使ってしまっているので、タイトルの「CSSだけで」というのはちょっぴり嘘になりますが、まあ使わないでもできないことはないということでお許しください。

サンプルＨＴＭＬをアップしましたので、iPhoneをお持ちの方はこちらから実際にお試しください。
→　iPhone用　アニメーションのサンプル

 

このアニメーションのテクニックは、応用すれば次のようなflick動作などに使うことができます。

→　Ajaxian » iPhone Safari Flick Navigation By Example [ajaxian.com]

→　iPhoneから見れるflickのサンプル　myDailyPhoto [mydailyphoto.com]

このようなインターフェイスは、なかなか便利そうです。
iPhoneをお持ちの方は試してみてはいかがでしょうか。

 

関連：

タグ: , , ,



iPhone向けサイト作成のベースに便利なテンプレート集「iPhone Universal」
    このエントリをはてなブックマークに登録

2008/8/11 月曜日 matsui 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 デモ

 

関連：

タグ: , , ,



« Previous Entries
Next Entries »