モバイルWeb開発

最近、ますます多くの人々が生活を簡素化するために電子機器を使用しています。 かさばるPCの使用は、ラップトップにスムーズに移行し、今ではスマートフォンに移行しました。 Apple、Dell、Microsoftなどの大企業は、スマートフォン市場の一部を手に入れたいと考えています。2011年末までに、世界のスマートフォンの売上は世界のPCの売上を上回る見込みです。







そのため、モバイルWeb開発が現在非常に重要になっています。 スマートフォンの売り上げは日々伸びており、これはモバイルデバイスのインターフェイスへの注意を高める必要性を示しています。 ますます要求が厳しくなっているユーザーからのすべての要求を満たす方法は？ フルHDモニターと携帯電話の両方でサイトを視聴できるようにする方法は？

Web開発者は常にクロスブラウザの問題を抱えています。 AndroidアプリケーションはiPhone上では機能せず、その逆もまた同様です。

この記事の目的は、スマートフォンの出現に関連するWeb開発者の問題を検討し、それらを解決する方法を提案し、Sencha Touchフレームワークを使用して実際に効果的なソリューションを示すことです。 主な問題は、モバイルデバイスでインターネットを使用する人が増えていることですが、すべてのサイトでこのサービスを提供できるわけではありません。

モバイルWebの概要

まず、人々が本当にモバイル版のサイトが必要な理由を理解することが重要です。 たぶん誰かが、自分の携帯電話を使ってウェブサイトにアクセスし、それについて考えるのは少なすぎると言うでしょう。 実際、彼は間違っています。 Facebookの統計によると、「2億5000万人以上のアクティブユーザーが現在モバイルデバイス経由でFacebookにアクセスしています。 »[1] Facebookには5億人以上のアクティブユーザーがいるため、その50％がモバイルユーザーです。 YouTubeユーザーの75％は、モバイルがコンテンツにアクセスする主な方法であると報告しています。 [2]

なぜそう 人々は常にコンピューターやラップトップを持ち運ぶことができるわけではなく、携帯電話は常に近くにあるからです。

モバイルデバイスを使用している訪問者の割合を調べる最も簡単な方法は、Google Anlyticsを起動することです。 ユーザーが使用するデバイスとオペレーティングシステムの種類に注意することを忘れないでください。 ユーザーがモバイルデバイスを使用してサイトにアクセスする理由と、必要な機能を理解してください。







現在、多くの開発者は、Webサイトを作成した後、さまざまなブラウザー（IE、Firefox、Chrome、Opera、Safari）でテストし、モバイルデバイスでの作成がどのように見えるかについて考えていません。 企業は、BBCが行っているように、スマートフォンやその他のモバイルデバイスが顧客がインターネットにアクセスする方法をどれだけ迅速に変更するかを正しく評価する必要があります。

作成オプション

スマートフォンアプリケーションを作成する方法はいくつかあります。 最初の方法：iPhoneとiPad用のコードを書くObjective-Cプログラマー、AndroidとBlackBerry用に書くJavaプログラマーを雇います。 Windows Phone 7用に作成するNETプログラマー。

ご覧のとおり、これは最も簡単な解決策ではないため、もう1つ、Webアプリケーションを提案します。



ネイティブではなく、Webアプリケーションを構築する主な利点は次のとおりです。

•クロスプラットフォーム。

•Objective-CのエキスパートよりもHTMLプログラマーを見つける方がはるかに簡単です。 NET

•ネイティブアプリケーションごとに再設計するよりも、1つのWebサイトをやり直す方がはるかに簡単です。

•サイトはいつでも更新できます。

•ユーザーは、ネイティブアプリケーションよりもブラウザを好みます[4]。







多くの場合、企業は、ユーザーがこれらのプラットフォームだけを使用しているのではなく、「iPhoneまたはAndroidアプリケーションが必要」という事実からモバイル版について考え始めます。

AndroidまたはiOSオペレーティングシステムを搭載した多くのスマートフォンアプリがありますが、 Windows Phone 7、Blackberry、Symbianはどうですか？ 別のSDKを学びたい人、別の言語を学びたい人は誰ですか？ わずかな変更ですべてのプラットフォームのコードを更新するのは誰ですか？

カメラ、加速度計などにアクセスする必要がある場合にのみ、ネイティブアプリケーションを開発する価値があります。 それでさえ、当分の間 。



すべてのプラットフォームをサポートする方法は1つしかありません。Web標準を使用し、現在はこのHTML5標準を使用しています[5]。

モバイル開発の問題

上で書いたクロスプラットフォームの問題に加えて、どのデバイスにも異なるWebブラウザーが存在する可能性があります。 たとえば、Androidフォンを使用しているユーザーは、デフォルトのブラウザーとOpera MiniまたはFirefox Mobileの両方を使用してサイトにアクセスできます。



モバイルデバイスの開発者に共通する問題：

•画面サイズ。 多数のディーバがあり、240 x 320から800 x 480で終わるさまざまなサイズがあります。これは、開発者が固定幅のデザインを作成できないことを意味し、デバイスによって異なります。

•オリエンテーション。 さらに、これらの240 x 320は、簡単に320 x 240に変換できます。

•タッチ可能。 異なるクリック可能な要素の間には十分なスペースが必要です。

モバイルアプリケーションを作成するための推奨事項

モバイルデバイスの主な開発目標は、小さなディスプレイのレイアウトを変更することです。

モバイルWebページは、ポートレートとランドスケープの2つのモードで表示できます。 JavaScriptを使用して、 window.orientationにアクセスできます。

•0-縦向き

•-90および90-横向き



また、 orientationchangeイベントを使用して、ユーザーがデバイスをフリップしたときにアクションを実行することもできます。 この例では、現在の方向が変更されたときにクラス属性を設定するだけです。

 window.onorientationchange = function() { var orientation = window.orientation; switch(orientation) { case 0: document.body.setAttribute("class","portrait"); break; case 90: document.body.setAttribute("class","landscape"); break; case -90: document.body.setAttribute("class","landscape"); break; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ページがモバイルデバイスに読み込まれた後、URLバーはスクロール時にのみ消えます。

ただし、プログラムでこれを行うことができます。

 window.addEventListener ('load',  () { setTimeout (ScrollTo, 0, 0, 1); }, False);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

モバイルサイトの最適化は、サーバーリクエストの数を減らす必要があることを意味します。



•1つのCSSを使用します。

•CSSスプライトを使用します。

•HTML5ローカルストレージを使用してデータをキャッシュします。

設計のヒント

•画面上のすべての空白スペースを埋めようとしないでください。 すべてのユーザーが異なる接続速度を持っているので、サイトは「重くなりすぎてはなりません」。 過剰な数の画像、テキスト、コードなど サイトユーザーの認識を悪化させるだけでなく、ダウンロード時間も大幅に増加します。

•小さな画面であっても、ユーザーはテキストの読み取りに問題がないはずです。

•サイトのインタラクティブな要素の近くには、それらをクリックするのに十分なスペースが必要です。 ユーザーがタッチするものはすべて、少なくとも中指のサイズでなければなりません。

•ダウンロードの進行状況をアニメーションで表示します。

モバイルアプリのテスト

非常に幅広いモバイルデバイスがありますが、残念ながらWeb開発者はPC上で行うほど簡単にWebアプリケーションをテストできません。 一方では、テストは実際のデバイスで行う必要がありますが、各プラットフォーム用のデバイスの購入はバカです。 ほとんどのプラットフォームにはデバイスエミュレータがあり、その一部はオンラインです。 [6]約1人がhabrについて書いた 。

Upd：ありがとうeasyman ： テストのためにNokia Live 。

独自のモバイルアプリケーションを作成する

モバイルアプリケーションには十分なフレームワークがあります。jQTouch、iWebKit、Wink Toolkit、jQuery Mobile、Sencha Touchの5つを試しました。 最初の3つはあまり良くありません-1つまたは2つのプラットフォームのみをサポートします。 残りの2つは選択するものです。 これを読んだ後、私はSencha Touchから始めることにしました。 さらに、Ext JS（Senchaファミリーの製品）の経験もあります。 最近、私は新しいプロジェクトのこのようなスキームに導かれました：多数のプラットフォームのサポートが必要な場合はjQuery Mobileを使用しますが、通常はiOS + Androidで十分です。私の選択：Sencha Touch-本当に素晴らしいドキュメントがあります。

Sencha Touchは、iOS、Android、WebOS、ChromeのBlackBerry +、Safariのプラットフォームでサポートされています。



例として、上記のすべてのプラットフォームの簡単なゲームを示します。



これは私の最初のテスト記事です。このトピックにユーザーがどれだけ興味があるかを理解したいと思います。一般的に、Sencha TouchとjQuery Mobileフレームワークを使用したモバイルWebアプリケーションの開発に関する記事/チュートリアルを作成します。

参照資料

[1] Facebook統計www.facebook.com/press/info.php?statistics

[2] YouTubeモバイルユーザーレポートgooglemobileads.blogspot.com/2010/11/75-of-youtube-mobile-users-report-that.html?m=0

[3] BBCモバイルの未来www.bbc.co.uk/blogs/bbcinternet/2010/02/bbc_online_our_mobile_future.html

[4]モバイルユーザーはアプリよりもブラウザを好むwww.emarketer.com/Article.aspx?R=1008010

[5] HTML5 diveintohtml5.orgに飛び込む

[6]モバイルエミュレーターwww.mobilexweb.com/emulators