モバイル開発におけるHTML5-選択すべきもの

今日は、モバイルアプリケーションの開発でWebテクノロジーを優先する価値がある場合、およびネイティブ開発ツールを使用する方が良い場合についての意見を共有したいと思います。



HTML5またはネイティブSDKを使用したクロスプラットフォーム開発の利点に関する一貫した意見：



HTML5

• Web開発者向けの簡単な入力
• 安い開発
• 大きなカバレッジ（ブラウザはどこにでもあります）
• 統一されたコードベース

Cordovaなどのツールを使用すると、HTML5（インターネット上ではなく、ネイティブコンテナー内にある）上でハイブリッドアプリケーションを作成できます。 このようなアプリケーションは上記の利点を兼ね備えており、プラグインを介してブラウザーを超えてデバイスの機能と緊密に統合することができます。 ハイブリッドアプリは、AppStore、Google Play、およびその他のアプリストアを通じて公開および配布できます。



ネイティブ

• ネイティブの感覚と外観
• 無制限のハードウェアとの統合
• ソフトウェア部分との統合（たとえば、アプリケーションからTwitterまたはFacebookを呼び出す）
• ブラウザバインドなし
• アプリケーションを開発およびデバッグするための完全なIDE

当然、これらは経験に基づいて誰でも補足できる基本的な声明です。 アプリケーションの開発にHTML5を選択する価値はありますか？ 答えは明確にすることはできません-それは多くの要因に依存します。



問題や知識の分野を分析するとき、質問の歴史的な部分を掘り下げることは有用です。 この場合、興味深い傾向に気付くことができます。







1995年には、Mac OS、Windows 95、およびLinuxを自由に使用できました。 各オペレーティングシステムには独自のソフトウェアがありましたが、クロスプラットフォーム性に関する考え方はすでに浮上してきました。



1996年、Sun MicrosystemsはJavaと呼ばれる製品を発売しました。 この製品には、異なるオペレーティングシステム用の単一のコードを記述するための高度な抽象化がありました。 確かに、それは私たちがそれを見るために使用した形で、すでにクロスプラットフォームでした。 しかし、UIは各システムで同じでした。



その後、WebKit、OpenGL、gitなどのクロスプラットフォーム抽象化の特定のレベルを実装するエンティティが登場する開発段階がありました。 これらは、アプリケーションを作成するときに使用する必要がある標準でした。 UIはシステムごとに異なる場合がありますが、同じOpenGLは同じでした。



同時に、ウェブの方向性は積極的に発展していました。 当初、これらはリンクによってリンクされた静的ページでした。 しかし、すぐに、ますます多くのダイナミクスがそれらに現れ始めました。 AJAXテクノロジーとGMail電子メールクライアント（最初の本格的でかなり複雑なWebアプリケーションとして）の導入により、Web 2.0について話しました。



この侵入を阻止できるのは、FlashとSilverlightだけでした。 これは、新生HTML5と同様に、1つの問題を解決しました。ブラウザで本格的な「シック」クライアントを作成することです。



その結果、HTML5はそのニッチを見つけました。 これは、いくつかの要因によって促進されました。

• オープンプラットフォーム
• すべてのWeb開発者が他のマークアップ言語とプログラミング言語（AdobeとFlex + ActionScript、MicrosoftとXAML + C＃）を習得したいわけではありません。
• FlashとSilverlightは、高品質のクロスプラットフォームソリューションを提供しませんでした。 Linuxでは、Flashサポートに永続的な問題があり、Silverlightの実装はMonoの背後にありました。 モバイルプラットフォーム（iOS以降のAndroid）でFlashをサポートすることを拒否したため、「Flash is dead。」と言われました。

同時に、HTML5の基盤であるJavaScriptには、明らかで迷惑な欠陥がいくつかあります。 しかし、クロスプラットフォーム機能、開発の容易さ、およびWeb開発者の間での広範な使用により、それが保存され、トレンドを維持することさえできます。



そのため、2005年頃から、ブラウザはクロスプラットフォームの別のレベルになりました。 Googleマップ、GMail、Facebookなどのアプリケーションがますます使用されています。 あらゆるオペレーティングシステム上のブラウザで作業することが非常に便利であり、追加のデスクトップソフトウェアをインストールする必要がないことが判明しました。



したがって、クロスプラットフォーム開発には4つのレベルがあります。

• 各OSには、独自のルールに従って記述された個別のアプリケーションがあります。
• 統合コード、単一UI、ランタイムレイヤー（JavaやSilverlightなど）。
• 一般仕様、各システムのネイティブUI（OpenGLなど）。
• ブラウザ内のアプリケーション。

問題が発生しますが、このグラデーションをモバイル開発に適用することは可能ですか？

ネイティブに記述する場合、モバイルOSごとに独自のコードと独自のUIを完全に作成する最初のポイントに到達します。 プラットフォームごとにアプリケーションを書き直す必要があります。



当然、この状況では、単一のコードベースでさまざまなプラットフォームの開発を最適化するソリューションが生まれました。 現時点でのソリューションは次のとおりです。

• HTML5フレームワーク
• 独自のランタイムを備えたプラットフォーム：たとえば、AS3 Adob​​e AIR、.NET Xamarin
• Appcelerator Titaniumのようなトランスレーターとクロスコンパイラー

これらのソリューションは、さまざまなプラットフォームのデスクトップアプリケーションの2〜4ポイントの卒業を対象としています。 それぞれをさらに詳しく見ていきましょう。

AS3 Adob​​e AIR

AIRはJavaに最もよく似ており、デスクトップおよびモバイルアプリケーション用にランタイムを提供します。 もちろん、実行しているデバイスを追跡し、適切なUIを強制的に設定できます。 ただし、ほとんどの場合、アプリケーションには単一のUIがあります。 典型的なAIRアプリケーションは、Angry Birdsなどのゲームです。 Photoshop Touchなどのビジネスアプリケーションがあります。

.NET Xamarin

.NET Xamarinはネイティブ開発に近いですが（たとえば、Xcodeインターフェイスデザイナーを使用できます）、同時に、Mono DevelopおよびVisual Studioで開発を行うことができます。 このソリューションは、C＃のクロスプラットフォームの性質を実証しています。 アプリケーションのパフォーマンスは、ネイティブのパフォーマンスよりも劣っていません。 ただし、各プラットフォームのUIは個別に作成する必要があります。

HTML5フレームワーク

HTML5を使用してモバイルアプリケーションを作成するという考えは理解できます。これは、既製のコードベースと知識に基づいた、ブラウザーからモバイルデバイスへの最短ステップです。 多数のWeb開発者向けの低参入しきい値であり、あらゆるデバイスをカバーしています。 また、各プラットフォームに既製のUI要素があれば、労力とコストは最小限に抑えられます。



それは素晴らしいように聞こえますが、世界は残酷であり、奇跡は起こりません。 HTML5の7年間の積極的なプロモーションと開発が実を結びました（ Habréで優れたインフォグラフィックを見ることができます ）。 高品質のハイブリッドHTML5アプリケーションの例を見つけることができます。

• PhoneGapとAzure Mobile Servicesを使用して構築された KnockoutJS iOS開発者のTouralotアプリ。
• Senchaによる高速Facebook
• Delta Airlinesのお客様向けに100万インストールされたDeltaアプリ
• TradeMonsterアプリケーション。これは、 techcrunchに関する議論の機会になりました。

ただし、モバイルHTML5アプリケーションの開発にはまだ問題があります。

1. UIパフォーマンス
   
   
   • UI操作は単一のスレッドで動作します（ただし、Webワーカーはアプリケーションロジックに使用できます）。
   • 以来の高いメモリ消費 アプリケーションコードに加えて、WebViewを実行する必要があります。
   • JavaScriptの実行速度が遅い。
   • DOMを使用すると、多くのリソースが消費されます。
2. プラットフォーム統合なし
   
   
   • WebKitが優勢ですが、IEをサポートする必要があるWindows Phoneがあります。 Mozillaなどの他のプレーヤーも市場に参入しようとしています 。
   • 各プラットフォームは、携帯電話とタブレット用に独自の画面サイズを提供します。
   • プラットフォームごとのUIの異なる要件。 そして、もちろん、特定のフレームワークのバグに依存しないプラットフォームのバグ。
3. エイリアンUI
   
   
   • アプリケーションは単なるHTMLページです。
   • Sencha Touch、jQuery Mobileはネイティブアプリケーションとは異なります。
   • UIシミュレーションは「不吉な谷」効果に苦しみます。この効果は、時間の経過とともに現れることがあり、アプリケーションの使用頻度に依存します
4. すぐに使用できる開発およびデバッグツールの欠如
   
   
   • HTML5は、開発環境で使用できるツールとして位置付けられています。 しかし、実際には、デバイス上のHTML5アプリケーションのデバッグは最も簡単なプロセスではありません。 ネイティブツールであるAIRおよびXamarinは、開発およびデバッグ用の完全なIDEを提供します。
5. 制限されたハードウェアアクセス
   
   
   • すぐに使えるPhoneGapプラグインのセットは少なく、独自のプラグインを開発することは、ネイティブSDKを使用して開発することと同等です。

そのため、HTML5モバイルアプリには多くの開発リスクがあります。 しかし、デバイスカバレッジの可能性は素晴らしいです。 PhoneGapは、デバイスのハードウェア機能へのアクセスを提供し、ブラウザーと実際のデバイス間のブリッジを提供します。 この問題に関するネットワーク上の多くの記事を見つけることができます。興味深い詳細なレビューの良い例です-「 なぜモバイルWebアプリケーションがそんなに遅いのですか？ 」。



HTML5を使用する場合

• たとえば、Webテクノロジーに精通している場合、あなたはプロのWeb開発者です。
• 単一のコードを維持する場合。
• プラットフォーム全体をカバーするアプリケーションが必要な場合。
• UIに厳密な要件がない場合、シンプルで複雑な効果は含まれません。

ほんとに？

以下は、 最近の記事の一部として実施した調査の結果です（507人が投票しました）。

• 各プラットフォームのネイティブツール46％（287）
• AS3 Adob​​e AIR 15％（96）
• HTML5フレームワーク30％（186）
• .NET Xamarin 9％（56）

（お気づきのように、 ChartJSは 猫の視覚化だけでなく素晴らしいです）



明らかに、モバイルプラットフォーム向けのHTML5開発のニッチは空ではありません。 DevExpressでは、HTML5バリアントを実装することを決定しましたが 、 結果についてはすでに投稿がありました 。



PhoneJSモバイルアプリ開発フレームワークをリリースしました。 HTML5には、技術開発のこの段階でいくつかの制限があります。 私たちの解決策も奇跡の領域には該当しませんが、いくつかの問題を克服し、解決する準備を進めています。 開発者がHTML5アプリケーションに懐疑的である主な理由であるUIパフォーマンスの排除に取り組んでいます。



良いアイデアの実装を提供します。 HTML5の知識を使用して、すべてのプラットフォーム用のモバイルアプリケーションを作成し、PhoneJSを取得し、PhoneGapを追加すれば機能します。 すべてのデバイスに対して1回。 HTML5の長所と短所を受け入れ、さらに、HTML5がデフォルトで解決しない問題のいくつかを解決します。



そのため、UIを管理し、ユーザーはUIに依存しないロジックを作成します。これは、99％ブラウザーに依存しません。 実際、ユーザーはアプリケーションを作成し、フレームワークは、プラットフォームの要件に従って、各プラットフォームで可能な限りネイティブに見えるようにします。 当然、パフォーマンスの問題が発生する可能性がありますが、アプリケーションが問題を解決し、開発とサポートの費用をネイティブのものより10倍少なくした場合、このようなソリューションは有益です。



実際、ユーザーインターフェイスの生産性と応答性が重要なタスクのサークルがありますが、通常、これらは私たちのフレームワークが目指しているタスクではありません。 そしてここで、私たちが目指しているニッチを明確に理解する必要があります。



フレームワークの使用の優れた例は、 BYODの傾向に従うことを決定したタクシー隊または航空会社のアプリケーションです。 アプリケーションは、さまざまなデバイスで動作し、社内および社外の両方で十分に便利である必要があります。 この場合、アプリケーションは、社内にすでに存在するシステム全体のクライアント部分になります。 既に説明したFly Deltaアプリは良い例です。



これは、 PhoneJSを使用して解決するのが簡単で安価なタスクの例です。 経験に基づいて、費用と時間を節約しながら、適用範囲を簡単に拡大できます。



結論として、モバイルプラットフォームの数が増えているという事実を追加する必要があります。 新しいFirefox OS 、 SamsungのTizenプラットフォームが登場し、地位を固めています。 HTML5ハイブリッドアプリは、真のマルチプラットフォームアプリを作成する良い方法です。 これらの事実は、特にビジネスアプリケーションの分野で、この分野が発展するという自信を呼び起こします。



PhoneJSフレームワークを使用すると、さまざまなプラットフォームについて考えるのではなく、特定のビジネス上の問題に対処するために、テクノロジーの波に乗ることができます。