公式サイトの情報はこちら（英語）。

→　jQuery Mobile　Announcing jQuery Mobile 1.0 [jquerymobile.com]

日本語のサイトだと、いつもjQueryの記事をいち早く公開してくれる、こちらのPublickeyさんの記事がわかりやすいです。

→　Publickey　jQuery Mobile 1.0正式版が公開！ モバイルアプリケーション開発の新時代へ

jQuery Mobileは、既にあちこちで使われていると思いますが、今回の正式版リリースにより、その流れは更に加速していきそうです。

関連：

• もう知らないでは許されない！！「これからはじめる」という人のためのjQuery Mobile情報まとめ
• ASCII.jpに「jQuery Mobileデザイン入門」という連載記事が掲載されています
• スマートフォン向けJavaScriptフレームワークであるjQueryMobileの使い方がわかりやすく解説されている記事「はじめてのjQueryMobile」

→　@IT　スマホ用JavaScriptフレームワーク5つ＋1を徹底研究 [atmarkit.co.jp]

最近はスマホサイトを作成する際に便利な、jQuery MobileをはじめとするJavaScriptフレームワークがいろいろと出ています。
この記事ではそんなフレームワークとして次の5つが紹介されています。

1. jQuery Mobile
2. iUI
3. jQTouch
4. Sencha Touch
5. Wink toolkit

そして更に+1ということで、アプリ開発に使える「PhoneGap」にも触れられています。

前半の3つはどちらかというとデザイナー向け、後半3つはプログラマ向けのものになっているとのことです。

このようにデザイナー、プログラマーのどちらの方にとっても役に立つ記事となっていると思いますので、ぜひチェックしてみてはいかがでしょうか。

関連：

• もう知らないでは許されない！！「これからはじめる」という人のためのjQuery Mobile情報まとめ
• ASCII.jpに「jQuery Mobileデザイン入門」という連載記事が掲載されています
• 無料で読めるTitanium Mobileの書籍風PDF「Titanium MobileではじめるiPhoneアプリケーション開発」

→　株式会社インフィニットループ技術ブログ　初心者でも２週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件 [www.infiniteloop.co.jp]

JavaScriptもMacもほとんど触ったことがない新人、「Titanium Mobileでアプリを試しにつくってみる」という、はじめてのお仕事を通じて身につけたことがまとめられています。

サンプルコード（プロジェクト作成時に自動生成されるものですが）が掲載されていますので、JavaScriptを使って書かれたアプリのコードがどのようなものなのかが理解しやすいと思います。

また、JavaSciprtにコンパイル可能な言語で開発の効率を上げる「CoffeeScript」という言語についても解説されています。

他にも「Titanium mobileの得意分野と苦手分野」についてや、「参考サイト・おすすめ勉強法」などについてもまとめられており、Titanium mobileをはじめて学ぶ方にとってはためになる内容になっていると思います。

ぜひチェックしてみてください。

関連：

• エフェクト機能がすごいiPhoneやAndroid向けのJavaScriptフレームワーク「Wink Toolkit」
• ブックレビュー：WEB+DB PRESS vol.61(2011年2月発売号　特集：実践!Titanium JavaScriptでiPhone&Android本格アプリ開発)
• JavaScriptを使ったスマートフォンアプリの開発方法を解説した連載記事「Titanium Mobileで作る！ iPhone／Androidアプリ」

→　かちびと.net　iPhoneやAndroid向けのJavaScriptフレームワーク・Wink Toolkitが割と良かったので日本語サンプル作った [kachibito.net]

WinkToolkitは、JavaScriptで作られたスマートフォン向けのフレームワークで、エフェクトなどのデザイン面に特化した作りになっているようです。

→　WINK TOOLKIT　公式サイト [winktoolkit.org]

上記のかちびと.netさんの解説記事はサンプルが豊富でわかりやすいですね。

見て貰えると分かるのですが、iPhoneやAndroidのブラウザに対応した実用的なエフェクトがかなりの数用意されているようです。

今後スマートフォン向けサイトもどんどん凝った物になっていくでしょうから、この手の技術は要チェックですね。

関連：

• ブックレビュー：WEB+DB PRESS vol.61(2011年2月発売号　特集：実践!Titanium JavaScriptでiPhone&Android本格アプリ開発)
• IBM developerWorksにHTML5モバイルアプリ用フレームワーク「Sencha Touch」の記事がありました
• JavaScriptでiPhone/Android向けのソーシャルアプリが作成できるという「ngCore」について解説されたスライドが公開されていました

→　IBM developerWorks Japan　モバイル Web アプリケーション・フレームワークの比較: 第 4 回 完全なモバイル Web ソリューションとして Sencha Touch を利用する [ibm.com]

「Sencha」は、何度も名前が変わっておりややこしいのですが、むかし「Ext JS」（さらに前はYUI-Ext）と呼ばれていたJavaScriptのフレームワークで、「Sencha Touch」はそのスマートフォン版という位置づけです。

公式ページはこちらになります。

→　Ext Japan　Sencha Touch機能概要 – HTML5モバイルアプリ用フレームワーク [extjs.co.jp]

IBMの記事では、モバイル Web アプリケーション・フレームワークの比較という形で、その「Sencha Touch」について解説しています。

簡単なサンプルと、特徴を紹介しているだけの簡単な記事にはなりますが、Sencha Touchに関する記事はあまり見たことがないので、参考になるのではないでしょうか。

関連：

• jQueryをスマートフォンなどのモバイルデバイスへ対応させるためのライブラリ「jQuery Mobile」の関連記事まとめ
• ケータイのダメダメなJavaScript実装について解説された記事「携帯電話事業者に学ぶ”XSS対策”」
• FlashをHTML5・JavaScriptに変換して動かすSmokescreenというものがあるそうです

→　jQuery Mobile　jQuery Mobile Alpha 3 Released [jquerymobile.com]

上記のリリースノートによると、480のコミット、150個のバグFIX、240個のユニットテスト項目の追加が行われているとのことです。

合わせてドキュメントも更新されています。

→　jQuery Mobile: Demos and Documentation [jquerymobile.com]

以前のアナウンスではAlpha版は3までという話だったので、そろそろ1.0版正式リリースも近そうですね。

期待したいところです。

関連：

• スマートフォン向けJavaScriptフレームワークであるjQueryMobileの使い方がわかりやすく解説されている記事「はじめてのjQueryMobile」
• jQueryをスマートフォンなどのモバイルデバイスへ対応させるためのライブラリ「jQuery Mobile」の関連記事まとめ
• @ITのJavaとGoogle App Engineを使ったケータイ開発に関する連載記事「クラウドとフレームワークで超簡単ケータイ開発」

→　Mach3.laBlog　はじめてのjQueryMobile [blog.mach3.jp]

1ページの短い記事ですが、前提知識の解説から、HelloWorld、ページ遷移、コンポーネントの使い方と、基本的な部分が抑えられている感じです。

サンプルソースも用意されていますので、そのままコピペで試せますし、初めてjQueryMobileを触るにはぴったりの内容となっていると思います。

また作者のJohn Resig氏が日本に来てセミナーをやっていたようです。
こちらの記事でその内容について触れられています

→　INTERNET Watch　【WDE2010】John Resig氏、JavaScriptライブラリ「jQuery Mobile」を紹介 [internet.watch.impress.co.jp]

このように国内でも流行の兆しを見せるjQueryMobileですので、マスターしておいて損はなさそうです。
興味のある方はぜひ触ってみてはいかがでしょうか。

関連：

• jQueryをスマートフォンなどのモバイルデバイスへ対応させるためのライブラリ「jQuery Mobile」の関連記事まとめ
• ケータイのダメダメなJavaScript実装について解説された記事「携帯電話事業者に学ぶ”XSS対策”」
• FlashをHTML5・JavaScriptに変換して動かすSmokescreenというものがあるそうです

私が知ったのはこのエントリーがきっかけです。

→　kurainの壺　Titaniumが楽しすぎてやばい [d.hatena.ne.jp]

さらに元ネタをたどるとnaoyaさんのブログでした。

→　naoyaのはてなダイアリー　Titanium – JavaScript で iPhone/Android アプリを作る [d.hatena.ne.jp]

→　naoyaのはてなダイアリー　Titanium Mobile についての勉強会資料 [d.hatena.ne.jp]

「Titanium Mobile」については、以前にもご紹介したことがあるのですが、バージョンアップが重ねられ、当時よりもだいぶ進化しているようです。

今も頻繁にバージョンアップされているとのことですので、今後もどんどんよくなっていくのではないでしょうか。

日本語ドキュメントはまだ少ないようですが、こちらに日本語の連載記事があり、参考になりそうです。

→　@IT　Web技術でネイティブアプリを作れるTitanium　連載インデックス

ゲームなどのゴリゴリしたアプリでなければ、普通に実用になりそうとのことなので、私も暇ができたら触ってみたいと思います。

関連：

• JavaScriptでiPhoneやAndroidのアプリを作れるTitanium Mobile
• avaScriptでiPhoneアプリを作る方法 – AppStore登録も可能
• iPhone開発について解説された連載記事「目指せ！iPhoneアプリ開発エキスパート」

プログラマにもデザイナにも人気のあるjQueryですし、スマートフォン向けサイトの需要が日に日に増している状況ですので、これは期待のプロジェクトだと思います。

そんな「jQuery Mobile」の情報を簡単にですがまとめてみました。

まず本家のサイト。

→　jQuery Mobile　トップ [querymobile.com]

→　jQuery Mobile　Alpha 1 リリース情報 [jquerymobile.com]

→　jQuery Mobile　対応ブラウザ [jquerymobile.com]

jQuery Mobileが何なのか、というのはこちらの日本語の記事がわかりやすいです。

→　マイコミジャーナル　jQueryモバイルプロジェクト登場 [journal.mycom.co.jp]

日本語訳やリファレンス作成をしてくれていたり、感想を掲載しているブログなど。

→　Bstyle = LOlita + Gothic 4th Trial　jQuery Mobile alpha 1 Relase! ＆ リリースノート超訳 [d.hatena.ne.jp]

→　H2O Blog.　jQuery Mobileがアルファリリース。サイトを日本語訳してみた。 [h2o-space.com]

→　へっぽこプログラマーの日記　jQuery Mobile リファレンス的なもの [d.hatena.ne.jp]

→　zudolog　jQuery Mobile Alpha 1　ざっくり見た感想 [zudolab.net]

英語ですが、RSSリーダーを作るチュートリアルとサンプルコード。

→　Nettuts+　How to Build an RSS Reader with jQuery Mobile [net.tutsplus.com]

まだアルファ版ですし、出たばかりですので、もう少しまとまった情報が集まりましたら、また掲載したいと思います。

関連：

• ケータイのダメダメなJavaScript実装について解説された記事「携帯電話事業者に学ぶ”XSS対策”」
• FlashをHTML5・JavaScriptに変換して動かすSmokescreenというものがあるそうです
• ケータイサイトのセキュリティチェック方法について解説された記事「自分でできるかんたんログインDNSリバインディング耐性のチェック」

ケータイのセキュリティに詳しい徳丸氏による、ケータイのJavaScript実装についてのブログエントリーです。

→　ockeghem(徳丸浩)の日記　携帯電話事業者に学ぶ「XSS対策」 [d.hatena.ne.jp]

XSS脆弱性のあるスクリプトを用意して、ドコモのiモードブラウザ2.0端末と、ソフトバンクのJavaScript対応でテストを行うという内容なのですが、なかなかダメダメな実装となっています。

詳しくは上記のリンク先を見ていただくとして概要だけ触れると、ドコモはalertやconfirmを殺しているので一見動作せず。
ソフトバンクも「<」「>」「”」をカットしている、しかしパーセントエンコードを使うと入力できてしまう、という状況のようです。

どちらも一見XSSが起きないように対策を取っているようで（ドコモの方はXSS対策したつもりではないのかもしれませんが）、まったく意味がないという状態です。
特にソフトバンクの対応はひどいですね。

当たり前のことですが、ケータイサイトを作成する際にもPCサイトと同じようにXSS対策はしっかり行おう、というそんなお話でした。

関連：

• 6月25日にモバイルWebセキュリティの無料セミナー「スマートフォン時代のモバイルWebセキュリティ対策の極意」が行われるとのことです
• FlashをHTML5・JavaScriptに変換して動かすSmokescreenというものがあるそうです
• Yahoo!ケータイのかんたんログイン脆弱性について詳しく解説された講演資料「ケータイ2.0が開けてしまったパンドラの箱 」

なんとiPhoneやiPadにも対応しているらしいです。

→　engadget日本語版　動画：FlashをHTML5に自動変換する Smokescreen、iPadでも動作 [japanese.engadget.com]

→　マイコミジャーナル　HTML5+JavaScriptでFlashコンテンツを再現する「Smokescreen」 [journal.mycom.co.jp]

→　Appleウォッチ　iPad/iPhoneでFlashを実行可能にするJavaScriptが登場 [www.computerworld.jp]

SmokescreenはFlashのswfファイルを解析して、HTML5+JavaScriptに変換するライブラリです。

Smokescreen自身はJavaScriptなので、ウェブページ側で読み込むように設定しておけば、ユーザ側に何かソフトをインストールする必要はないとのことです。

残念ながら（というか当たり前ではありますが）まだ全てのFlashが変換できるわけではなく、限定的な機能のみとなっているようですが、バナー広告などの単純なものであれば問題なく動作するようです。

Firefox、Safari、Opera、Google Chromeなどのプラウザに対応しており、iPhoneやiPadなどでも動作するとのことなので、Flashに対応していないこれらの端末にとっては、うまく使えばかなり便利なものになるのではないでしょうか。

関連：

• ソフトバンクのAndroidフォン「HTC Desire X06HT」にはFlash Lite 4.0が搭載されるようです
• 携帯Flashの操作ストレスとなるポイントをまとめた記事「携帯Flashサイトのユーザビリティ基礎」
• ブックレビュー： Flash Liteで作る携帯コンテンツ実践教科書

→　HTML＋JavaScriptでiPhone/Androidアプリを作れるTitanium Mobileとは（1/3） – ＠IT [www.atmarkit.co.jp]

通常アプリを作るには、iPhoneはObjective-C、AndroidではJavaで作成するのが一般的ですが、この記事によると「Titanium Mobile」という開発環境を使って、HTML+JavaScriptでアプリ開発が可能なようです。

またiPhone・Androidだけではなく、「Titanium Desktop」を使うことで、MacやWindows向けのアプリも出力できるとのことです。
イメージとしてはAirに近い形なんですかね。

1年程前にご紹介したこちらの記事と同じ著者ですね。
このときは「PhoneGap」を使って開発する例が挙げられていました。

→　ke-tai.org　JavaScriptでiPhoneアプリを作る方法 – AppStore登録も可能 [ke-tai.org]

1つのコードで多くのプラットフォームで動くアプリが開発できるのは魅力ですね。
興味のある方はチェックしてみてはいかがでしょうか。

関連：

• JavaScriptでiPhoneアプリを作る方法 – AppStore登録も可能
• iPhone開発について解説された連載記事「目指せ！iPhoneアプリ開発エキスパート」
• 90秒で理解するiPhone JavaScript（マルチタッチ編）

→　 はてな広報ブログ　”ふるふる”でブックマークしよう！はてなブックマーク for iPhoneリリース！ [d.hatena.ne.jp]

こちらがマンガもついていてわかりやすいです。

→　川o・-・）＜2nd life　まほう少女はてなちゃん！ iPhone のまき [d.hatena.ne.jp]

ふるふるブックマークとは、iPhoneを傾けて、画面を回転させることでブックマークするというものです。

これは結構面白いインターフェイスだと思います。
このようなインターフェイスは、他にも何か応用が利きそうですね。

※寝っころがりながら見てると勝手にブックマークしようとすることもあるのが難点ですｗ

導入方法は簡単で、上記ページに公開されているscriptタグをページに貼るだけです。
当サイトはWordPressでできているので、共通ヘッダ部に一箇所貼るだけで全ページ対応することができました。

iPhoneでこのページをご覧の方は、是非ためしにふるふるしてブックマークしてみてください。

関連：

• はてなブックマークモバイル版の脆弱性とその対策について
• JavaScriptとかんたんログインのセキュリティについて解説した記事「携帯JavaScriptとXSSの組み合わせによるかんたんログインなりすましの可能性 」
• iPhone OS 3.0のSafariでコピーふきだしを無効にするには

ドコモのiモードブラウザ2.0に搭載されているJavaScript機能と、かんたん認証を組み合わせた不正アクセスの方法について話題になっているようなので、ご紹介させていただきます。

まず時系列的にはこちらのエントリーが発端となっているようです。

→　mpw.jp管理人のBlog　iモード専用サイトのhtmlソースの閲覧方法 [mpw.jp]

JavaScriptとDNSの書き換えを使って、IPアドレス制限がかけられたサイトからhtmlソースを抜き出す方法がまとめられています。

こちらの情報をベースに、HASHコンサルティングの徳丸浩さんが報告書の形にまとめたものがこちらです。

→　HASHコンサルティング　セキュリティ情報　iモードIDを用いた「かんたんログイン」のDNS Rebinding脆弱性 [hash-c.co.jp]

各種ニュースサイトでも取り上げられています。

→　CNET Japan　iモードブラウザ2.0の「かんたん認証」を利用した不正アクセス手法が発見される [japan.cnet.com]

実際の不正アクセス手法は、上記HASHコンサルティングさんのサイト上で図解入りで説明されていますので、そちらを参照されるのがわかりやすいと思います。

通常JavaScriptのXMLHttpRequestは、他ドメインと通信できないようになっていますが、DNS Rebindingを使ってそれを抜けている形のようですね。

コンテンツ開発側としてまず気になるのは対策方法ですが、上記のサイトでは次のような回避方法が記載されています。

• iモードIDをかんたんログインおよびセッション管理に使用しない
• HTTPリクエストヘッダのHOSTフィールドの正当性をチェックする

DNSの書き換えを利用した不正アクセスですので、ホスト名のチェックで対策できるようです。

他にも「VirtualHostを利用し、デフォルトのドメイン領域にはコンテンツを置かない」という方法でも回避できるようです。

また下記のサイトではmod_rewriteを使った対策方法が提案されています。

→　 ぱらめでぃうす　【対策編】iモード専用サイトのhtmlソースの閲覧方法 [parame.mwj.jp]

本件については、あの高木先生も「建設予定地」として準備しており、近いうちに何らかの記事にまとめてきそうな感じになっています。

→　高木浩光＠自宅の日記　ドコモはXMLHttpRequestにiモードIDを載せるのを止めるべきだ [takagi-hiromitsu.jp]

かんたんログイン機能をご利用のサイトを運営中の方は、まずご自身のサイトをチェックしてみてください。

関連：

• ＠ITで開始されたセキュリティに関する連載記事「再考・ケータイWebのセキュリティ」
• 不具合により停止されていたドコモのJavaScript機能が復活するようです
• JavaScriptとかんたんログインのセキュリティについて解説した記事「携帯JavaScriptとXSSの組み合わせによるかんたんログインなりすましの可能性 」

あれから数ヶ月、停止されていたJavaScript機能がようやく復活するようです。

→　ITMedia +D Mobile　ドコモ、拡張iモードブラウザのJavaScriptを利用可能に [itmedia.co.jp]

→　CNET Japan　iモードブラウザ、ようやくJavaScript対応へ [cnet.com]

JavaScriptはソフトウェアアップデートで利用可能になります。

対象となるのは、2009年夏（iモードブラウザ2.0）モデルで、SH-05A、SH-06A、SH-06A NERVが10月27日。
それ以外の機種は11月から順次提供されるとのことです。

一説には他端末のユーザIDを騙れてしまうのでは？などという話もあったドコモのJavaScriptですが、ようやく対応が終わり復活となったようです。
かなり長かったですね。

該当機種をお持ちの方は試してみてはいかがでしょうか。

関連：

• JavaScriptとかんたんログインのセキュリティについて解説した記事「携帯JavaScriptとXSSの組み合わせによるかんたんログインなりすましの可能性 」
• iモードブラウザ2.0についてのまとめ（ウノウラボ）
• ドコモのiモードブラウザの仕様が2009年夏モデルから大幅に変更になるようです

下記のブログ記事が大変面白く、参考になる良エントリーでしたのでご紹介させていただきます。

→　徳丸浩の日記　携帯JavaScriptとXSSの組み合わせによる「かんたんログイン」なりすましの可能性 [www.tokumaru.org]

今年の5月にドコモから発売されたJavaScript対応端末ですが、販売開始後すぐにソフトウェアアップデートによりJavaScript機能が停止されてしまいました。

上記エントリーでは、この停止の原因となった脆弱性について仮説を立てて検証しています。

詳しい内容は上記ブログを読んでいただくとして、概要としては、XMLHttpRequestのsetRequestHeaderメソッドとXSS脆弱性とを組み合わせて、ユーザエージェントやiモードIDなどのリクエストヘッダを改ざんし、かんたんログインのなりすましを行うことができたのではないか、というものとなっています。

iモードIDは、ドコモサーバ側で付与されるヘッダ情報「X-DCMGUID」から取得します。
通常この情報はケータイ上からは改ざんできませんし、もし万が一改ざんできたとしてもドコモのサーバ側で上書きされるはずです。（現状改ざんできないので実際に試したわけではないですが）

もちろんPCからのアクセスであれば、容易にIDを騙ることができますが、通常ケータイサイトでは、Firewallや.htaccessなどによるIPアドレス帯域による制限を行うため、ケータイ以外からはアクセスできません。

しかしながら、ドコモ以外のキャリアを名乗ることによって、サーバ側で上書きされないX-UP-SUBNOやX-JPHONE-UIDを変更し、かんたんログインを突破できたのではないか、という仮説となっています。

ドコモからは、販売停止やJavaScript機能の停止の理由は公表されていないため、あくまで仮説ではあるものの、かなり興味深い内容ですね。

他にもソフトバンクに関しては、昨日ご紹介した記事「SoftBank Mobileの携帯用GatewayをPCで通る方法のメモ [d.hatena.ne.jp]」で示されたような、かんたんログイン機能への脅威についても言及しています。

よく「かんたんログインは使うな」「かんたんログインの利用を推奨するような記事を書くな」というご意見をいただくことがあります。

もちろんごもっともな意見ではあるのですが、セキュリティと利便性は裏表な部分もあり、キャリアが代替手段を出すまでは、サイトの内容やクライアントの意向によっては導入せざるを得ない場合も多々あると思います。

我々に出来ることは、できる限り正しい情報を把握し、より安全に使える保険を一つ一つ積み重ねていくことが大事なのではないかと思っています。

セキュリティに関する記事の場合は特に、はてなブックマーク上からの突っ込みコメントが多くなる傾向があります。

ご指摘いただいた内容に関しては、可能な限り再チェックし、記事に不適切な部分があるのであれば修正していきたいと思っています。

突っ込みをいただく場合は、出来ればはてなブックマークからのコメントだけではなく、コメント欄やフォーラムもご利用いただけると、内容の確認が行いやすく助かります。
ぜひご協力をお願いいたします。

関連：

• ソフトバンクの携帯用GatewayをPCで通る方法があるようです
• 実際に動いてすぐ使える「PHPによるかんたんログインサンプル」を作ってみました
• ケータイの認証用IDの現状をまとめたブログ記事「携帯各キャリアの固有IDについて (全キャリア対応)」

→　@IT　App Store登録もOK！ JavaScriptで作るiPhoneアプリ [atmarkit.co.jp]

iPhoneのアプリを作るには、通常Objective-Cを利用しなくてはならないのですが、この記事ではJavaScriptを使用したアプリの作成方法がまとめられています。

なんとこの方法であれば、AppStoreへの登録も可能とのことです。

HTML＋JavaScriptの技術を使った「ハイブリットアプリケーション」という開発手法で作成を行うようです。

Objective-Cのネイティブアプリケーションを作るのに比べて、JavaScriptであれば技術的障壁も低いですし、開発の容易さという点から見てもメリットが大きいように思えます。

ハイブリットアプリケーションを作成するためのベースとなるようなフレームワークが幾つかあり、それを利用して開発を行うようです。
この記事では「PhoneGap」を利用した場合の例が記載されています。

今までiPhoneアプリを作りたかったけれど難しそうで敬遠していた、というような方は、ぜひこの方法を試してみてはいかがでしょうか。

関連：

• iPhone開発について解説された連載記事「目指せ！iPhoneアプリ開発エキスパート」
• iPhoneでCSSを使って要素を3Dっぽく回転させる方法
• 90秒で理解するiPhone JavaScript（マルチタッチ編）

今回は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のCSSで拡大・縮小・回転などのアニメーションさせる方法
• iPhoneでJavaScriptを使わずCSSだけでアニメーションする方法
• iPhone向けサイト作成のベースに便利なテンプレート集「iPhone Universal」

前回は、左から右にすーっとアニメーションするだけでしたが、今回は拡大・縮小・回転といったアニメーションをさせてみたいと思います。

また前回は「-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だけでアニメーションする方法
• iPhone向けサイト作成のベースに便利なテンプレート集「iPhone Universal」
• 90秒で理解するiPhone JavaScript（マルチタッチ編）

対象を拡大縮小したり、回転させたりするには、座標を取得して自分でガリガリ計算しないといけないと思っていたのですが、どうやら「gestureXXX」イベントを使えばそんな必要がないということを知りました。　→　参考 [iphone.wikiwiki.jp]

というわけで、今回はgestureイベントの使い方をまとめてみます。

ジェスチャーのイベントには次の3つがあるようです。

• gesturestart
• gesturechange
• gestureend

それぞれ、ジェスチャー開始時、ジェスチャー中、ジェスチャー終了時にイベントが発生します。
使い方は、touchXXXのときと同じようにイベントリスナーに登録するか、「onClick」のような感じで「onGestureStart」属性を追加します。

拡大縮小・回転をさせるのに、押さえておくべきポイントは2点だけです。

1. 「event.scale」で、拡大・縮小用の倍率を取得
2. 「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", saveStyle, false);
}

function touchHandler(event) {
	// スクロール機能の停止
	event.preventDefault();
}

function gestureHandler(event) {
	// リサイズと回転
	var rect1 = document.getElementById('rect1');
	rect1.style.width = (width * event.scale) + "px";
	rect1.style.height = (height * event.scale) + "px";
	rect1.style.webkitTransform = "rotate(" + ((rotation + event.rotation) % 360) + "deg)";
}

function saveStyle(event) {
	// 変数に保存
	width *= event.scale;
	height *= event.scale;
	rotation = (rotation + event.rotation) % 360;
}
// -->
</script>
</head>

<body onLoad="init();">
<div id="rect1" style="width:120px; height:120px; background-color:red; position:absolute; top:120px; left:120px;"></div>

</body>
</html>

静止画なのでわかりにくいかもしれませんが、ダブルタッチでdivタグの拡大縮小・回転が行えます。

iPhone / iPodTouchをお持ちの方はこちらからお試しください。
http://ke-tai.org/test/gesture/gesture.html

関連：

• iPhone用JavaScriptデータベースプログラミング入門(JavaScript++かも日記)
• 90秒で理解するiPhone JavaScript（マルチタッチ編）
• CSSの変更だけでPCサイトをiPhoneに対応させる方法