2009-11-02 9 views
9

iPod touch(と​​iPhone)にいくつかのWebページが表示されていました。iPhoneのWebアプリケーション - ネイティブのiPhoneアプリのようにスタイリングする

これはスタイルで行うことができ、必要に応じて、ユーザーエージェントの要求に基づいて、サーバー側で別のHTMLを表示することもできます。

この効果はどうやって得られますか?また、iPhone OSブラウザのエミュレータがあるので、実際に起動する前にアプリケーションをテストして表示することもできますか?

答えて

13

iuiは良い解決策ですが、私はまた、jqueryに基づいてhttp://www.jqtouch.com/を提案します。それは放射状に成長しています。また、Googleグループを使用することもできます。http://groups.google.com/group/iphonewebdev

+2

確かに最高のものを使用する。 –

+0

素晴らしいこと、ありがとう。私はこのプロジェクトでjQueryを使用していますので、試してみましょう。 – kender

+0

前にこれを見たことがありません。私は間違いなくこれをチェックします。 – tahdhaze09

1

がネイティブに見えるiPhoneのWebアプリケーションのためのジョーヒューイットのCSSとJavaScriptでの情報についてはこちらをご覧ください:http://www.testiphone.com/http://ajaxian.com/archives/iphone-native-looking-skin

をiPhone上のWebページのルックアンドフィールをシミュレートするために、あなたはこれを試すことができます。 (あなたはこの真剣に考えている場合しかし、もちろん、本物のiPhoneまたはiPod touchを使用しています。)

+2

をiPhoneブラウザはWebkitのに基づいているので、私はWebkitのブラウザを使用してtestiphoneサイトを使用します。それはあなたに実際のiPhoneブラウザに最も近い近似を与えるはずです。 –

0

あなたが必要とするすべてのCSS/Javascriptの機能は、アップルの開発者向けサイトに記載されています。ここ

スタート:http://developer.apple.com/safari/

AppleはあなたがiPhoneとiPodのためにカスタマイズする何をする必要があるかについて説明したPDFのシリーズを持っています。

WindowsとMac用のSafariをダウンロードできますが、iPhoneまたはiPodと同じ解像度に設定されているわけではありません。

1

jqtouchフレームワークを使用すると、ウェブページが見た目になり、ネイティブのiphoneアプリケーションのように動作するようになります。著者はあなたのiPhoneでチェックアウトできるホームページのデモへのリンクを持っています。

アップルについてアップルデベロッパーとして登録していれば、アップルはiphone SDKをダウンロードできます。しかし、現在、私は私のdevサーバーに私のiPhoneを指してテストしています。

+0

それは私が実際にiPhoneを持っていない場合は問題です:) – kender

+1

あなたはiPhoneのWebサイトを行うつもりなら、1つを得ることをお勧めします。 Simulatorはすばらしいものですが、実際のiPhoneよりはるかに高速です(実際のものとは異なる場合があります)。 – ceejayoz

+0

私は確かに1つを得るでしょう(私はまだ別の電話が必要ないので、おそらくiPod touchです)。 WebアプリケーションはiPhone専用のものではありません。iPhoneユーザーのためにアプリに似たアイディアです。 したがって、私は実際のデバイスを手に入れる前に、それを避けることができます: – kender

0

実際、AppleのiPhone SDKには、実際のバージョンのMobile SafariでページをテストできるiPhone Simulatorが付属しています。私は、このソフトウェアはMac OS X専用だと信じています。

あなたは、ダウンロードを得るためにあなたのiTunesの資格情報を使用して認証する必要があります。

+0

XコードとDashcodeがインストールされていれば、iPhoneシミュレータはそれと一緒です。私はちょうどDashcodeのiPhoneのための空のプロジェクトを開始して、それを実行すると、シミュレータがポップアップ怠惰です。 – PurplePilot

0

Macをお持ちの場合は、実際にはDashcode(iPhone SDKの一部)を試してみる必要があります。

4

私は現在、プロジェクトの現在のCSSスタイルについてiUI開発チームと協力しています。私は小さなブローワーの力に非常に感銘を受けています。ほとんどのWebkit関数は、-webkit-gradientsを含むエンドユーザが利用できるため、ほとんどのUI要素をゼロ画像で得ることができます。 User-Agent文字列に基づいてページを異なる方法でレンダリングすることはできますが、スタイルシートのパラメータを使用してiPhoneをターゲット設定することができるので、これを避けることができます。

<link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" /> 

これにより、同じHTMLマークアップを使用して、iPhoneの外観を変更することができます。

iPhone OS Emulators, apple has you coveredの場合は、WindowsサイドでSafariを使用していますが、devオプションでuseragentをiPhoneに変更するのを忘れないでください。しかし、私はChromeをWebkitエンジンも使用しているので、ほとんどのCSSは構文的に同じです。

しかし、この種の開発作業を行う場合、ほとんどの人はiTouchまたはiPhoneを持っています。最善の賭けは、最高レベルの制限(およびすべてのCPUの中で最も遅い)を持つ2G電話でテストすることです。これは、あなたが容認している場合は、3Gと3GSを持つ人々のためのより良いになるだけであることをあなたの事件ソリナロを与える。

テーマに関するいくつかの偉大なリソースが含まれます:

Apple's Webapps Page

Apple's Developer Safari Pageは - iPhoneシミュレータ(MAC ONLY)へのリンクが含まれています。

ADC: Safari Reference Library

ADC SRL: Getting Started with Web Apps

ADC SRL: Getting Started with iPhone Web Apps

READしなければならない:iPhone Human Interface Guidelines for Web Applications - Metrics, Layout Guidelines, and Tips

Submit your WebApp

関連する問題