iphone - モバイル専用サイト開発。どこから始めれば？

Question

私は、モバイル Web ブラウザー用のサイトを開発するための詳細を学習するプロセスを開始しています。モバイル固有のサイト開発の問題について話し合うオンラインの優れたリソース/コミュニティはありますか?

私の最初の理解では、さまざまな電話をカバーするには、Webkit エンジン (iphone、android など) を備えたブラウザーに対応した 1 つのサイトと、他の古いブラウザー用のより基本的なサイトを構築する必要があるということですが、この仮定は正しいですか?

また、webkit の開発とは正確にはどういう意味ですか? javascript/css/html を使用するのとどう違うのですか? Webkit 固有の関数と css に限定する以外は同じですか? webkit のサイトを見たのですが、そういう意味での説明はありませんでした。

モバイルブラウザー向けに開発する際に注意する必要があるその他の問題はありますか?

score 1 · Accepted Answer

あなたのサイトが非常に単純な場合 (コンテンツ配信のみ)、mobify のようなサービスをお勧めします: http://mobify.me/

多くの大きな出版物がそれを使用しており、私も使用しています. 実際、Ars Technica (以前の返信で Nate Bross が指摘した) は、このサービスを使用してモバイルコンテンツを表示しています。

あなたはスタイルをコントロールすることができ、それだけです。あなたのサイトがより複雑な場合、それはあなたのためではないかもしれません. そうでなければ、それは良いサービスです。モバイルサイトのアドレスの DNS が更新されるのとほぼ同じ速さで、モバイルサイトを立ち上げることができます。

score 1 · Accepted Answer

古いブラウザーをサポートする場合は、複数のサイトが必要です。ただし、最初にモバイルブラウザの統計を見て、価値があるかどうかを判断してください。既存の Web サイトを iPhone/Android または A グレードのブラウザーを搭載したその他の携帯電話で機能させたい場合は、モバイルフレンドリーな CSS (小さな画面用) を使用してカスタマイズできます。ただし、接続が低速で信頼性の低いモバイルデバイスで良好なパフォーマンスを得るには、おそらく、別の簡易化された html が必要です。

Apple には、サイトを iPhone 向けに最適化するのに役立つ非常に優れたガイドがあります。そのほとんどは最新のモバイルブラウザでも動作します: http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Peter Paul Koch は、さまざまなモバイルブラウザーについて優れた調査を行いました。彼にはいくつかの記事がありますが、これは良いスタートです: http://www.quirksmode.org/mobile/browsers.html

Nate Bross が述べたように、タッチデバイス向けに最適化する必要があります。残念ながら、メディアクエリがないため、デバイスにタッチがあるかどうかを知ることは非常に困難です。一部のデバイスではユーザーエージェントスニッフィングを実行できますが、お勧めしません。ここでの詳細な議論:タッチデバイス用に Web サイトを最適化する

今のところ、タッチイベントを検出します (Chrome を除く)。これが true を返す場合、タッチ CSS を挿入します。少し厄介ですが、他のオプションはもっと悪いです:

function() {
    if( /Chrome/i.test(navigator.userAgent) ) {
        return false;
    }
    try {
        document.createEvent("TouchEvent");
        return true;
    } catch (e) {
        return false;
    }
}

具体的には、モバイル Web ブラウザー用のサイトを求めましたが、モバイル Web アプリを作成する可能性を検討することもできます。これは iPhone アプリ (または Android アプリ) のように見えますが、HTML5 を使用して構築されています。Webkit イメージの CSS3 を使用すると、非常に洗練されたアニメーションを作成できます。iPhone には、Safari のナビゲーションツールバーを非表示にするためのメタタグもあります。ユーザーはそのページをホーム画面にブックマークすることができ、通常の iPhone アプリと同じように機能します。もちろん、あなたはブラウザに限定されており、それはパフォーマンスです. しかし、マルチプラットフォームアプリを作成することはできます :) HTML5 + JS は、Steve Jobs が承認した唯一のマルチモバイルプラットフォーム言語であり、PhoneGap の助けを借りて、AppStore に入れることさえできます! Web アプリが面白そうなら、jQTouch をチェックしてみてください。jQuery CSS Transition プラグイン、そしてもちろん、Jonathan Stark によるHTML、CSS、JavaScript を使用した iPhone アプリの構築。

score 1 · Accepted Answer

複数のバージョンの Web サイトを構築する必要があるという意見には同意しません。

1 つの単純な HTML5 Web サイトは、すべてのモバイルブラウザーとデスクトップブラウザーでも機能します。

HTML5 の最新開発の優れた点は、Geolocation などの新しい Iphone/Android 機能を使用できることです。古いブラウザーは、慎重に try catch ステートメント内に JS コードを配置すると、単純に無視されます。

「太い指」タイプの問題については、必要に応じてボタンを大きくする別の CSS を提供できます。優れたブラウザは、デフォルトのボタンを押しやすくする必要があります。

シンプルにしておけば、これらの断片的でコストのかかるデバイス依存のアプローチを見る必要はありません。HTML5 を手で書き、バリデーターを使用します。幸運を！

score 1 · Accepted Answer

あなたの仮定は正しいです。さまざまな種類のブラウザーを対象としたサイトの複数のバージョンを開発する必要があります。

Webkit は、Safari (モバイル Safari)、Chrome、および Andriod ブラウザ (モバイル Chrome?) で使用されるエンジンであり、標準の Javascript、XHTML、および CSS を使用できます。主なことは、サイトを「太った指に優しい」ものにすることです。デバイスはすべてタッチスクリーンによって駆動されます。

「太い指に優しい」とは、指で簡単に押すことができる大きなリンク/ボタンがあることを意味します。ほとんどのモバイルブラウザーは、どのリンクをタッチしようとしているかを近似するのに優れていますが、多くのものが詰まっている場合一緒に、それはしばしば間違っています。

もう 1 つの考慮事項は、画面サイズ、つまりサイトの幅/高さです。

Ars Technica のサイトをデスクトップブラウザでチェックアウトしてから、モバイルブラウザでサイトをチェックアウトしてください。サイトの非常に滑らかなバージョンです。( http://www.arstechnica.com/ )

score 1 · Accepted Answer

Webkit は、Web ブラウザーが Web ページをレンダリングできるように設計されたレンダリングエンジンです。Web コンテンツをウィンドウに表示し、ブラウザによって提供されるさまざまな機能 (リンク、進む/戻るなど) を実装するための一連のクラスを提供します。

Webkit などのさまざまなレンダリングエンジン用にさまざまなサイトを構築する必要はありません。モバイル Web サイトの設計では、画面サイズと、さまざまなレンダリングエンジンでさまざまなコンポーネントがどのように表示/動作するかを考慮する必要があります。

モバイルフレンドリーなサイトを構築する方法の詳細については、この質問を参照してください。

iphone - モバイル専用サイト開発。どこから始めれば？

5 に答える 5

Related

Reference