モバイル開発におけるHTML5開発の現状を深く理解する

「私たちは次の一連のモバイル製品を HTML5 で作成しています。」 「ええ、最近は多くの人が Appcelerator を使っていますし、私も使っています。」 「そうですね、私が話しているのはそういう種類の HTML5 製品ではありません。」

最近、HTML5 アプリケーションを開発しているせいか、同じような会話を頻繁にしています。 2005 年の「AJAX」と同様に、「HTML5」という用語はまだ明確に定義されていません。この新しいテクノロジーの利点が明らかになる前に、すでにあらゆる場所で使用され、運用も開始されていました。

新しいテクノロジーに熱心な管理者が経営する会社で働いている場合、運が良ければ、漫画のキャラクターであるディルバート氏が喜んであなたの隣のキュービクルに座るかもしれません。

2つの視点

モバイル デバイス上の HTML5 について議論する場合、通常は 2 つの異なる意見があります。

知覚的な観点から見ると、HTML5 テクノロジのレンダリング プロセスは、主にブラウザー、HTML5 パーサーが組み込まれたアプリケーション (PhoneGap など)、ブックマークを開くことをサポートするアプリケーション、または携帯電話製品 (iPhone および iPad) によって実行されます。この技術の利点は、既存の Web ページ デザインを再利用できるため、Web 開発者が作業を開始しやすくなることです。同時に、製品の品質が向上し、マルチプラットフォーム製品に適したものになります。また、エラーのデバッグや修正も簡単になり、バージョンの更新も速くなります。利点はその機能性です。PhoneGap のような組み込みアーキテクチャを使用すると、問題は少なくなります。欠点はパフォーマンスであり、これは HTML5 テクノロジが直面している最大の課題でもあります。

合理的な観点から見ると、HTML5 テクノロジーは、JavaScript エンジンを使用してローカル機能を直接制御し、モバイル デバイス上のブラウザー コンポーネントを変更することです。 HTML5 アプリケーションのパフォーマンスの問題は、JavaScript 解析ではなく、HTML/CSS レンダリング テクノロジによって制御されます。 HTML5 テクノロジーを正しく使用すれば、間違いなく多くの新しいパフォーマンス効果が得られます。 HTML5 テクノロジーの現在の例としては、Appcelerator Titanium、Mobage/ngcore、Game Closure、PhobosLabs などがあります。

Node.js ツールキット

PhobosLabs プロジェクトを例にとると、このプロジェクトは、WebKit の JavaScriptCore コンポーネントを使用し、デバイス側でのインターフェイスのレンダリングには OpenGL を使用し、開発には HTML5 キャンバス コンポーネント API を使用して完成しました。つまり、開発者はキャンバスを適切にサポートするデスクトップ ブラウザーで HTML5 ゲームを開発およびテストでき、モバイル デバイスのブラウザーでゲームを開いたときに、パフォーマンスも同様に良好 (またはそれ以上) になります。 HTML5 で開発した場合の効果は、Node.js ツールキットで開発した場合の効果と非常に似ています。Node.js を使用する場合は、JavaScript エンジンを有効にするだけで済み、アプリケーションで使用する必要のある Node.js コンポーネントを追加するだけで済みます。

Appcelerator の Titanium は HTML5 テクノロジの概念を詳しく説明し、UI ツールの完全な抽象化レイヤーを提供します。これにより、他のゲーム製品の生成に適用できるようになります。つまり、HTML5 アプリケーション開発者は Appcelerator の JavaScript UI ライブラリを使用してボタンを作成でき、Appcelerator の内部ロジックによってこのボタンが iOS のネイティブ インターフェイス ボタンに変換されます。 JavaScript を通じてインターフェース上のネイティブ ボタンを制御できます。理論上、開発者は Objective-C コードを 1 行も書く必要はありません。

HTML5 テクノロジには利点があります。JavaScript を使用してコードを記述している場合は、面倒な HTML/CSS レイアウト ロジックやスタイル宣言に別れを告げることができます。優れたデバッグ ツールにも別れを告げることができます。しかし、この技術にも欠点があります。たとえば、HTML5 ゲーム API Mobage にはいくつかの小さな問題があります。キャンバス コンポーネントは比較的小さな画面ではスムーズに表示できますが、Appcelerator の例のように画面が少し大きくなると、デバッグ時にインターフェイス レイヤーの複雑さが増すことも考慮する必要があります。 Appcelerator については否定的なレビューが数多くありますが、上記の点を念頭に置くと、それらの否定的なレビューも理解できます。

問題はブラウザにまだある

完全な HTML5 モバイル アプリケーションを開発する際の最初の難しさは、実行速度が遅すぎることです。 2 番目に大きな問題は、非常に愚かなツール制約です。jQuery Mobile のナビゲーション コンポーネントや iOS の innerHTML コンポーネントなど、多くのコンポーネントにはさまざまなブラウザーで脆弱性があります。そのため、脆弱性を回避するために機能を削減するか、これらの脆弱性を修正するために時間を費やす必要があります。

自分で実験してみることもできます。iOS アプリケーションで 1 つまたは 2 つのインターフェイス ライブラリと、自分で作成した少量の JavaScript コードのみを使用し、JavaScript ライブラリを追加しない場合、この HTML5 アプリケーションはスムーズかつ完全に実行されますが、機能がないことがわかります。 PhoneGap iOS プロジェクトを公開して iPhone 3GS で実行するには、わずか 1 ～ 2 秒しかかかりません。この事実だけでも、最も基本的な HTML5 アプリケーションでも非常にスムーズに実行されることがわかります。したがって、HTML5 アプリケーションの一部の操作に 10 ～ 15 秒かかったり、プログラム全体を読み込むのに 15 秒かかったりする場合は、すべて JavaScript インターフェイス ライブラリが原因です。

代表的なUIライブラリ2つ

HTML5 モバイル アプリケーション プログラマーに必要なのは通常、次の 2 つの要素だけです。1 つ目はネイティブ プラットフォームと Web インターフェイス間の接合レイヤー、2 つ目はモバイル UI ライブラリです。

PhoneGap は近年、徐々にデフォルトのグラフティング レイヤーの選択肢になってきました。これにより、HTML5 アプリケーションはモバイル デバイスのカメラを呼び出したり、携帯電話の連絡先にアクセスしたり、JavaScript を介してファイルを読み書きしたりできるようになります。最も人気のあるモバイル UI ライブラリには、jQuery Mobile や Sencha Touch などがあります。

jQuery Mobile は昨年作成されたばかりなので、非常に新しいものであり、明らかにまだ成熟していません。 jQuery Mobile のナビゲーション バー コンポーネントはひどいです。ページをめくるときにネイティブ ページングよりも大幅に遅く、ブラウザーを更新しないとリストのコンテンツを増やすことができません。 PC デスクトップ プラットフォームでテストしたところ、CPU 使用率も非常に高くなりました (バージョンは jQuery Mobile のアルファ 4)。私のプロジェクトでは主に、比較的単純 (クラックしやすい) であることと、このライブラリが jQuery 上に構築されているため、経験豊富な Web プログラマーであれば誰でも簡単に使い始めることができるという理由でこれを使用しています。

Sencha Touch は jQuery Mobile よりも成熟していて高速であると言われています。しかし、非常に複雑なものを見たとき、私は自動的にそれを嫌うわけではありません。なぜなら、私の潜在意識は、決して使わない機能がたくさんあると教えてくれるにもかかわらず、私はこれらの余分なものをアプリに強制的にロードしてしまい、アプリの全体的なパフォーマンスがかなり悪化してしまうからです。私が間違っている可能性もありますが、PhoneGap アプリ ページで最も強力なモバイル アプリは IGN Dominate です。非常にスムーズに動作し、Sencha Touch 上に構築されていますが、この製品の最適化には多くの時間を費やしたに違いありません。

デバッグと変更

HTML5 アプリケーションを開発する場合、HTML5 アプリケーションのデバッグや変更が非常に簡単であるという事実を見逃している人が多いかもしれません。大規模な HTML5 開発プロジェクトに携わったことがある開発者なら誰でも、デバッグとメンテナンスがプロジェクト ライフサイクルの 80% 以上を占めることがあると言うでしょう。つまり、チャット アプリケーションを 15 分で開発できると主張する開発ツールがあったとしても、15 分で解決できるのは作業の 20% だけである可能性があります。残りの 80% を完了するには、3 倍以上の労力を費やす必要があるかもしれません。

コンソール ログを印刷できないため、HTML5 モバイル アプリをデバッグするときにいくつかの問題が発生します。したがって、JavaScript コードに脆弱性やエラーがある場合は、エラーを alert() する必要があります。そうしないと、エラーを見つけることができない可能性があります。 PhoneGap はこの問題を修正しました。XCode のコンソールからコンソール デバッグ ログを出力できますが、機能は依然として非常に制限されています。

現時点で最も効果的な解決策は、weinre です。バグはたくさんあるものの、実行可能です。また、モバイル アプリケーションの UI をブレークポイントでデバッグすることもできます。Weinre は WebKit をベースにした Web インスペクターです。そのデバッグ ツール バックグラウンドは、リモート サーバーを介してデバッグ コードを取得して置き換えます。 2、3 週間前、Web インスペクタ コードについて調査したところ、リモート デバッガに変換するのはそれほど難しくないことがわかりました。今後数か月で Weinre の開発はさらに急速に進み、誰かがそれに代わるものを開発する可能性もあります。待って見てみましょう。

今後数年間で、モバイル アプリケーション開発における HTML5 テクノロジのデバッグ ツールは、ほとんどの開発者の作業負荷の 80% を解決できるため、間違いなくさらに重要になるでしょう。 Objective-C を使用してインターフェース デザインを変更したいですか?編集し、再コンパイルして実行します。満足するまで、この 3 つの手順を繰り返します。再コンパイル手順が多数ある場合は、これに 1 日かかることがあります。それを実現するために HTML5 テクノロジーを使用しますか? weinre を使用していくつかの CSS プロパティを編集し、テストします。デバッグを続行するためにアプリを閉じる必要さえありません。ある程度まで、デスクトップ ブラウザーで HTML5 モバイル アプリをデバッグすることもできます。しかし、信じてください。あなたのアプリはモバイル デバイス上で多くの脆弱性を抱えることになる可能性があるので、weinre を使用する必要があります。

残念ながら、ツールキットや機能はよく賞賛されますが、デバッグ ツールが優れていると賞賛される人はほとんどいません。したがって、HTML5 モバイル プログラマーが最もよく使用するツールであるにもかかわらず、これについて議論されることはほとんどないと思います。

概要: 現在の状況

この記事は少し長いですが、要約すると次のようになります。

1. モバイル デバイスで HTML5 アプリケーションを開発する方法は 2 つしかありません。HTML5 構文を使用するか、JavaScript エンジンのみを使用するかのいずれかです。

2. JavaScriptエンジンの構築方法により、モバイルWebゲームの作成が可能になります。インターフェース層は複雑なので、使用する UI ツールキットを予約しました。

3. 純粋な HTML5 モバイル アプリは実行速度が遅く、エラーが多くなりますが、最適化すると効果は向上します。このような最適化を実行する人は多くありませんが、試してみることはできます。

4. HTML5 モバイル アプリケーションの最大の利点は、Web ページ上で直接デバッグおよび変更できることです。ネイティブ アプリケーション開発者は、HTML5 の効果を実現するために、コーディング、デバッグ、実行を絶えず繰り返し、多大な労力を費やす必要がある場合があります。これは、最初に解決しなければならない問題です。

5. はい、HTML5 への移植は非常に簡単ですが、誰もがこれを自動化操作にすると想定しています。

モバイル開発における HTML5 の開発状況に関する上記の詳細な理解は、エディターが皆さんと共有する内容のすべてです。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。