僕はiPhoneを持ってないので詳しいことを紹介できないんですが、自分用のメモもかねて、今日はお手軽にiPhoneのWEBアプリを作れるフレームワークを二つご紹介します。
iPhoneではflashを使うことができないので、JavaScriptで開発します。また、いまのところブラウザはSafariだけなのでHTML5とCSS3をじゃんじゃんつかうことができますよ。
iWebKit
最初にご紹介するのはiWebKitです。
このフレームワークでは、要素とクラスを指定することでタイトルやチェックボックスなどをiPhone風にすることが可能です。
How to Make an iPhone and iPod touch Website from iWebKit on Vimeo.
以下の記事でコードなども詳しく紹介されています。
How-To: Create an iPhone Web App
ちなみにiWebKitのデモページはこちら。iPhoneからアクセスできます。
The iWebKit demo.
jQTouch
次に紹介するのはjQTouchです。
名前からわかるとおり、このフレームワークはjQueryを使っているので、動作させるにはjQueryが必要です。
こちらもあらかじめ用意されたCSSのクラスを読み込むことでJSのアニメーションを実現しています。アニメーションはデフォルトで用意されているもののほか、自分でオリジナルのものを作ることもできますよ。ページをAJAXで読み込んだり、なんてことも可能みたいです。
JQTouch from Jeremy Le Van on Vimeo.
jQtouchのサポートページはGoogleCodeにあります。jQtouchのダウンロードもこちらからどうぞ。
jqtouch – Project Hosting on Google Code
ちなみにこちらのサポートページのドキュメントをそのまま和訳したようなのがマイコミジャーナルの記事にあります。
【ハウツー】jQuery on iPhone – jQTouchを使ったWebアプリ開発 (1) jQTouchとは | エンタープライズ | マイコミジャーナル
以下おまけ。
HTML5
MobileSafariで使えるHTML5ですが、iPhone用にサイトをつくるのであれば以下が参考になると思います。
XHTMLとHTML5の組み方を見比べてみる | CSS Lecture
XHTMLとの違いがよく分からない人にはこちら。HTML5のシンプルさがよくわかると思います。
HTML5 のリセット・スタイルシート – html5doctor – HTML5.JP
HTML5.JPはHTML5の情報を日本語で発信している貴重なサイトですよね。HTML5用のリセット・スタイルシートが載っていましたので使ってみてはいかがでしょうか。
iPhone向けサイト構築 基礎文法最速マスター – EC studio デザインブログ
iPhone向けのサイト構築術です。コードも例示してあり、iPhone向けのサイト特有の話もあってとても良くまとまっています！最後のまとめリンクもありがたいですね。
[HTML/CSS]iphone対応サイトの製作 : ma-creators
iPhone用のサイトを制作するときの注意点など。文字の大きさなど、言われてみると確かに、と思うTipsがまとまってます。
だれかWindowsでiPhone用のサイトをちゃんと確認できる環境の構築術とかまとめてくれないかな…。
