モバイルWebアプリケーションの開発：いつ、なぜ、そしてどのように

地球上には68億人の人々がおり、そのうち51億人が携帯電話を所有しています。 そして今日、これらのデバイスの増加し続ける割合はスマートフォンです。 最近のPewResearchCenterの調査によると、スマートフォンでインターネットにアクセスするユーザーの数は、モバイルアプリをダウンロードして使用するユーザーの数と同様に、過去5年間で2倍以上になっています。 インターネットや携帯電話での電子メールを使用する人のうち、3分の1以上が主にハンドヘルドデバイスを介してオンラインになります。

確かに、モバイルコンピューティングはますますユビキタスになりつつあります…そしてそれは素晴らしいです。

もちろん、そうでない場合を除いて。

モバイルデバイスのユーザーとして、デザインが不十分なモバイルWebアプリ、さらにはネイティブアプリほど、イライラしてファットフィンガーナビゲートするのが難しいものはほとんどありません。

また、モバイルアプリの開発者として、可能な限り幅広いモバイルクライアントをサポートしようと努力するほど、非常に苛立たしいことはほとんどありません。各クライアントには、独自の苛立たしい一連の特異性があります。 モバイルWeb、ネイティブ、またはハイブリッドアプリのいずれを開発する場合でも、複数のモバイルブラウザー、よりエキゾチックなデバイスをサポートし、さまざまなプラットフォームを理解することは、実に痛烈な経験になる可能性があります。

もちろん、今日のすべての開発者がモバイルクライアントのサポートについて心配する必要があるわけではありません。 しかし、モバイルデバイスとアプリケーションのますます遍在する性質は、今日モバイルクライアントをサポートする必要がない人は、それほど遠くない将来にサポートする必要がある可能性が高いことを強く示唆しています。 したがって、モバイルアプリの開発についてまだ考えていない場合は、おそらく考えるべきです。

モバイルWebアプリとネイティブアプリとハイブリッドアプリ

ほとんどのテクノロジーの選択に当てはまるように、開発するモバイルアプリの種類に関しては、万能の答えはありません。 考慮すべきWebアプリのベストプラクティスは多数ありますが、すべてが技術的なものではありません。 あなたのターゲットオーディエンスは誰ですか？ 彼らはモバイルウェブまたはネイティブアプリを好む傾向がありますか？ ネイティブアプリとハイブリッドアプリの違いは何ですか？ どのような開発リソースがあり、どのモバイルテクノロジーに最も精通していますか？ 製品に対して想定しているライセンスおよび販売モデルは何ですか？

一般的に言えば（常に例外はありますが）、特に目的が幅広いデバイスをサポートすることである場合、モバイルWebアプリルートはネイティブモバイルアプリルートよりも高速で安価です。 逆に、モバイルデバイスにネイティブな機能（動きセンサーなど）がアプリに不可欠である場合がありますが、これらの機能にはネイティブアプリを介してのみアクセスできます（したがって、モバイルWebアプリの選択は非あなたのためのスターター）。

また、古いWebアプリとネイティブアプリの質問を超えて、要件とリソースの制約によっては、ハイブリッドモバイルアプリが正しい答えになる場合があります。 ネイティブアプリと同様に、ハイブリッドアプリは（ブラウザー内ではなく）デバイス自体で実行されますが、Webテクノロジー（HTML5、CSS、JavaScript）で記述され、通常はハイブリッドアプリフレームワークによって支えられています。 具体的には、ハイブリッドアプリはネイティブコンテナー内で実行され、デバイスのブラウザーエンジン（ブラウザーではない）を利用してHTMLをレンダリングし、JavaScriptをローカルで処理します。 Webからネイティブへの抽象化レイヤーにより、加速度計、カメラ、ローカルストレージなどのモバイルWebアプリケーションではアクセスできないデバイス機能にアクセスできます。

ただし、モバイルWebアプリ、ネイティブアプリ、ハイブリッドアプリのいずれを選択する場合でも、想定を適切に調査して確認するように注意してください。 例として、このモバイルWebアプリ開発チュートリアルの目的で、製品を販売するためのeコマース用のネイティブモバイルアプリを開発することを決定した場合があります。 しかし、Hubspotによると、スマートフォンユーザーの73％が、ネイティブアプリよりもモバイルウェブを使って買い物をしていると答えています…したがって、この場合、間違った馬に賭けている可能性があります。

そしてもちろん、時間と予算の実際的な考慮事項があります。 私の好きなことわざの1つにあるように、 「より速く、より良く、より安く…2つ選んでください」 。 Webアプリケーションの開発では、市場投入までの時間とコストの制約が最も重要ですが、プロセスの品質に過度の妥協をしないことが重要です。 最初の経験が悪いユーザーの自信を取り戻すことは非常に困難です。

実際、モバイルWeb、ネイティブ、およびハイブリッドアプリはすべて根本的に異なる獣であり、それぞれに独自の利点と課題があります。 このモバイルWeb開発チュートリアルは、高機能で直感的で使いやすいモバイルWebアプリケーションの開発において、採用する方法論とツール、および回避するための落とし穴に特に焦点を当てています。

モバイルWebアプリの開発には詳細な計画が必要

あなた（またはあなたの顧客）の要件を特定することは、モバイルまたはその他のアプリ開発における最も重要なベストプラクティスの1つです。 ターゲットとする機能を注意深く調べて、モバイルWebアプリで実現可能かどうかを判断します。 Webベースのインターフェイスとサポートインフラストラクチャを設計するために時間とリソースをすでに費やしているときに、1つ以上の重要なクライアント機能がサポートされていないことに気付くのは、非常に苛立たしく、非常に非生産的です。

モバイルWebアプリ開発者の初心者にとってもう1つの一般的な落とし穴は、デスクトップブラウザーのWebベースのコードがモバイルブラウザーで「そのまま」機能すると想定することです。 いいえ。 間違いなく違いがあり、あなたがそれらに気づいていない場合、それらは間違いなくあなたを噛む可能性があります。 たとえば、HTML5 <video>タグの自動再生機能は、モバイルブラウザでは機能しません。 同様に、CSSのtransitionとopacityのプロパティは、現在ほとんどのモバイルブラウザでサポートされていません（または少なくとも一貫してサポートされていません）。 また、ほとんどのモバイルデバイスでサポートされていないAdobe Flashを必要とするSoundCloud音楽ストリーミングAPIなど、モバイルプラットフォームの一部のWebAPIメソッドでも問題が発生します。

モバイルWebアプリケーション開発で特に複雑な要因は、モバイルデバイスの寿命がデスクトップディスプレイの寿命よりもはるかに短い傾向があることです（米国の携帯電話の平均寿命は約21か月です）。 これらの短いデバイス寿命は、新しいモバイルデバイスとテクノロジーの絶え間ないリリースを伴い、ターゲットとなるデバイスの絶え間なく変化する状況を生み出します。 ブラウザでの作業は、デバイス固有の問題からユーザーを保護することでこの問題をいくらか軽減しますが、さまざまな画面解像度をサポートするブラウザベースのビューを設計する必要があります（横向きと縦向きに適切に調整する必要があります）。 ）。

AppleのRetinaディスプレイ（人間の目が通常の表示距離で個々のピクセルを識別できないほど高いピクセル密度を持つ液晶ディスプレイ）をサポートすることにも配慮する必要があります。 iPhone、iPod Touch、iPad、MacBook Pro、iPad Mini、iPad AirなどのいくつかのApple製品は、Retinaディスプレイを提供しています。 特にモバイルWebアプリの場合、Retinaディスプレイでは、低解像度の画像（通常はモバイルデバイスに提供されます）がぼやけて見え、ピクセル化が発生する可能性があることに注意することが重要です。 このような場合の最良のアプリ開発ソリューションは、リクエストがRetinaデバイスからのものであることをサーバーに認識させてから、代替の高解像度画像をクライアントに提供することです。

クールなHTML5のものを使用したい場合は、探している機能が、顧客が使用する可能性のあるデバイスランドスケープ全体でサポートされていることを事前に確認することを忘れないでください。 たとえば、iOS 6以降では、カメラにはネイティブアプリからのみアクセスできるため、ナビゲーターのgetUserMedia機能はサポートされていません。 特定のデバイスとブラウザでサポートされているものを確認するための2つの優れたリソースは、caniuse.comとhtml5test.comです。

CSS3メディアクエリは、デバイスごとにカスタマイズされたコンテンツを提供するのにも役立ちます。 ピクセル密度、画面解像度、向きなど、さまざまなデバイス特性をキャプチャするためのサンプルコードを次に示します。

 /* For lower than 700px resolutions */ @media (max-width: 700px) { ... } /* Same as last but with the device orientation on land scape */ @media (max-width: 700px) and (orientation: landscape) { ... } /* Including width and orientation you can add a media type clause, in this case 'tv' */ @media tv and (min-width: 700px) and (orientation: landscape) { ... } /* for low resolution display with background-image */ .image { background-image: url(/path/to/my/image.png); background-size: 200px 300px; height: 300px; width: 200px; } /* for high resolution (Retina) display with background-image */ @media only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { -repeat; background-size: 200px 400px; /* rest of your styles... */ } }

パフォーマンスのためのモバイルWebアプリケーションの最適化

「OMG、これはすごい遅い！」 モバイルWebアプリの開発者として、これらはおそらく、ユーザーの1人から聞きたい最後の言葉です。 したがって、ユーザーの待機時間を短縮するために、各バイトとサーバー転送を削減および最適化する方法について慎重に検討する必要があります。 転送が常にWiFiネットワーク経由で行われることを期待するのは非現実的であり、モバイルWebユーザーの60％が、サイトが3秒以内に携帯電話に読み込まれることを期待していることを知っておく必要があります（出典）。 同様に、Googleは、読み込み時間が5秒増えるごとに、トラフィックが20％減少することを発見しました（検索エンジンがページ品質スコアの計算の一部として読み込み時間を見ることも注目に値します）。

このモバイルウェブアプリ開発チュートリアルの一部として、モバイルウェブアプリケーションのパフォーマンスを最適化し、レイテンシを最小限に抑えるのに役立つヒントをいくつか紹介します。

• 画像の最適化。 画像の読み込み時間は、モバイルデバイスのページの読み込みに影響を与える最大のパフォーマンスの問題の1つとしてよく知られています。 smushit.comなどのオンライン画像オプティマイザーを使用すると、この問題に対処するのに役立ちます。
• コード圧縮。 使用しているコードの量によっては、JavaScriptファイルとCSSファイルを圧縮すると、パフォーマンスに大きな影響を与える可能性があります。
• データベースクエリ。
  • 一部のモバイルデバイスブラウザは、デスクトップブラウザほど多くのCookieを受け入れないため、通常よりも多くのクエリを実行する必要が生じる可能性があります。 したがって、サーバー側のキャッシュは、モバイルWebアプリクライアントをサポートする場合に特に重要です。
  • 適切なフィルターを使用して、サイトとサーバーのセキュリティを危険にさらす可能性のあるSQLクエリインジェクションを排除することを忘れないでください。
• コンテンツ配信ネットワーク（CDN）。 大量のビデオ、画像、オーディオファイル、またはその他の種類のメディアを提供することを計画している場合は、CDNの使用を強くお勧めします。 より一般的な商用CDNには、Amazon S3、Microsoft Windows Azure、MaxCDNなどがあります。 CDNを使用する利点は数多くあり、次のようなものがあります。
  • ダウンロードパフォーマンスが向上しました。 CDNのリソースを活用することで、負荷を分散し、帯域幅を節約し、パフォーマンスを向上させることができます。 より優れたCDNは、より高い可用性、より低いネットワーク遅延、およびより低いパケット損失を提供します。 さらに、多くのCDNは、グローバルに分散されたデータセンターの選択肢を提供し、ユーザーの場所に近いサーバーからダウンロードを実行できるようにします（その結果、ネットワークホップが少なくなり、ダウンロードが高速になります）。
  • より多くの同時ダウンロード。 ブラウザは通常、単一ドメインへの同時接続の数を制限します。その後、前のダウンロードの1つが完了するまで、追加のダウンロードはブロックされます。 同じサイトから多数の大きなファイルをダウンロードするときに、この制限が実際に機能していることがよくわかります。 （異なるドメイン上の）追加のCDNごとに、追加の同時ダウンロードが可能になります。
  • 強化された分析。 多くの商用CDNは、独自のWebサイト分析を補足し、ビデオの視聴とダウンロードのより良い定量化を提供する可能性のある使用状況レポートを提供します。 たとえば、GTmetrixには、サイトにロードされたソースを監視および最適化するための優れたWebサイトレポートツールがあります。

モバイルWebアプリ開発ツール

「適切な仕事のための適切なツール」は、他のドメインと同じようにソフトウェア開発にも適用される古くからの格言です。 このチュートリアルでは、モバイルWebアプリ開発で広く使用されているツールのいくつかを紹介しますが、モバイルWebアプリケーションの開発に「適切な」ツールであるツールが他にもある可能性があることに注意してください。要件と利用可能なリソース。

適切なJavaScriptモバイルWebアプリフレームワークの選択

モバイルWebアプリの開発では、ブラウザー間の互換性やモバイルブラウザーでのHTMLとCSSの一貫性の欠如など、同じ一般的な課題の多くが発生する傾向があるため、これらの問題に対処するために特別に設計されたフレームワークが開発されました（HTML5とCSS3に基づく）。さまざまなスマートフォンやタブレットで可能な限り完璧に動作します。 これらのモバイルWebアプリフレームワークのほとんどは軽量であるため、サイトのルックアンドフィールを損なうことなくモバイルWebブラウジングを高速化できます。

モバイルの世界を超えて私たちの見方を広げます。言及する価値のある人気のあるJavaScriptフレームワークが1つあるとすれば、それはjQueryです。 デスクトップバージョンに精通している場合は、モバイルWebアプリにjQueryMobileを試すことをお勧めします。 セマンティックマークアップをジェスチャに適した形式に変換するウィジェットライブラリがあり、タッチスクリーンでの操作が簡単になります。 最新バージョンは、UIを実際に改善できる多くのグラフィック要素を備えた、非常に軽量なコードベースで構成されています。

もう1つの選択肢であるSenchaTouchも、急速に市場シェアを獲得しています。 全体的に優れたパフォーマンスを提供し、ネイティブのように見えるモバイルWebユーザーインターフェイスを作成するのに役立ちます。 そのフル機能のウィジェットライブラリは、SenchaのExtJSJavaScriptライブラリに基づいています。

jQueryMobileとSenchaTouchを比較する際に考慮すべきいくつかの重要な違いは次のとおりです。

• ルックアンドフィール。 一般的に、Sencha Touchアプリのルックアンドフィールは、jQueryモバイルアプリよりも鮮明で優れていますが、そのような反応は非常に主観的な傾向があることを覚えておくことが重要です。
• 拡張性。 jQuery Mobileは多くのサードパーティ拡張機能を提供し、本質的に高度に拡張できるように設計されていますが、SenchaTouchは現在はるかに「クローズド」フレームワークです。
• デバイスのサポート。 jQuery Mobileは現在、SenchaTouchよりも多くのデバイスを対象としています。
• HTML「vs」 JavaScript。 jQueryは主にHTML中心です（つまり、JavaScriptで既存のHTMLを拡張および操作します）が、SenchaTouchコーディングは完全にJavaScriptベースです。 （これは、ちなみに、テクノロジを選択するときに考慮することが重要な開発チームのスキルセットの例です。）
• 外部依存関係。 jQuery mobileではDOM操作にjQueryとjQueryUIが必要ですが、SenchaTouchには外部依存関係がありません。
• 学習曲線。 ほとんどの開発者は、jQueryの立ち上げ時間がSencha Touchの立ち上げ時間よりも短いと感じています。これは、おそらく、標準のjQueryライブラリにすでに精通しているWeb開発者の大部分に支えられています。

レスポンシブフレームワークとモバイルWebアプリケーション

近年、レスポンシブフレームワークの数が増え始めており、現在最も人気のある2つはBootstrapとFoundationです。 つまり、レスポンシブフレームワークは、WebベースのレスポンシブUIの設計と実装を簡素化および合理化し、最も一般的なレイアウトとUIパラダイムを再利用可能なパフォーマンス最適化フレームワークにカプセル化します。 主にCSSとJavaScriptに基づいており、これらのフレームワークの多くはオープンソースであり、無料でダウンロードでき、簡単にカスタマイズできます。 非常に特殊な一連の要件がない限り、これらのフレームワークのいずれかを使用すると、モバイルWebアプリケーションの設計と実装の労力が軽減される可能性があります。

BootstrapとFoundationという2つの主要なオプションを検討すると、考慮すべき主な違いは次のとおりです。

• ターゲットプラットフォーム。 Bootstrapはモバイル、タブレット、およびデスクトップデバイスをサポートしますが、主にデスクトップでの使用を目的としています。 一方、Foundationは、基本的にすべての画面サイズとタイプに対応するように設計されています。
• ブラウザの互換性。 BootstrapはIE7以降と互換性がありますが、FoundationはIE9以降とのみ互換性があります。
• レイアウトとコンポーネントの多様性。 Bootstrapには、Foundationが提供するものよりもはるかに多くのUI要素のコレクションがあります。
• 自動サイズ変更。 Foundationを使用すると、グリッドは現在のブラウザの高さと幅に応じて縮小および拡大しますが、Bootstrapは、標準の画面サイズのセットに基づいて事前定義されたグリッドサイズのセットのみをサポートします。

モバイルWebアプリのデバッグとテスト

モバイルWebアプリのデバッグは、特に、テストするさまざまなデバイスを探し回ったり、対象のクライアントプラットフォームの（通常は不完全な）エミュレーション用のSDKをインストールしたりする必要がある場合は、注意が必要で、ややイライラする可能性があります。

このコンテキストでは、（ネイティブアプリ開発と比較した）モバイルWeb開発の明らかな利点の1つは、標準のブラウザーベースの開発者ツールを使用してアプリケーションをデバッグできることです。 私の個人的なリモートデバッグの好みに基づいて、このアプリ開発チュートリアルで推奨するのは、DevToolsを備えたChromeです。 その他の標準オプションには、FirebugまたはOperaのDragonflyツールを備えたFirefoxが含まれます。

私がDevToolsでChromeを好む理由のいくつかは次のとおりです。

• ChromeのDevToolsのモバイルエミュレータ。 これはおそらく、モバイルWebアプリのデバッグにChromeを選択する十分な理由です。 主な機能には、タッチイベントのエミュレーション、ユーザーエージェントのなりすまし、ネットワーク帯域幅の調整、地理的位置のオーバーライド、デバイスの向きのオーバーライド、およびCSSメディアタイプのエミュレーションが含まれます。
• インタラクティブエディタ。 JavaScriptまたはCSSをオンザフライで編集する機能。
• 優れたJavaScriptデバッガー。 DOMブレークポイントを許可し、JavaScriptコードの実行時間をプロファイリングする機能を提供します。
• 組み込みのJSONおよびXMLビューア。 サーバーの応答を検査するためのプラグインの必要性を回避します。
• USB経由で直接AndroidDebugBridge（ADB）プロトコルをサポートします。 リモートデバッグセッションの簡単なインスタンス化を容易にします。 （これは、Chromeでリモートデバッグを開始する方法に関するGoogleによる優れたチュートリアルです。）
• リソースの動的検査。 IndexedDBまたはWebSQLデータベース、ローカルおよびセッションストレージ、Cookie、アプリケーションキャッシュリソースなど、アプリのローカルデータソースを検査できます。 また、画像、フォント、スタイルシートなどのアプリケーションのビジュアルリソースをすばやく調べることもできます。

Webアプリのレイアウトとクロスブラウジングの互換性をテストするために、BrowserStackなどの便利なオンラインツールを使用することもできます。 アプリケーションのURLを入力し、ブラウザー、バージョン、およびオペレーティングシステムを選択するだけで、その環境でのサイトのエミュレートされたビュー（および読み込み速度）を取得できます。 この目的に役立つもう1つのツールは、CrossBrowserTestingです。

要約

市場に出回っているモバイルデバイスの数、種類、洗練度が急速に拡大し、今日使用されているため、効果的でユーザーフレンドリーな高性能モバイルアプリケーションの必要性が大幅に高まる可能性があります。 したがって、これらのアプリケーションをインテリジェントかつ効率的に開発できることは、引き続き最も重要です。

モバイルデバイス用のウェブ、ネイティブ、ハイブリッドモバイルアプリのオプションを選択する際には、多くの要素を考慮する必要があります。 それぞれに独自の利点がありますが、モバイルWebアプリは、多くの場合、最も効率的な開発（したがって市場投入までの時間）オプションを表します。 その道を進むことを選択した場合は、このモバイルWebアプリ開発チュートリアルが、目的地に直接かつ正常に到達するのに役立つことを願っています。