HTML5: 明日は小雨が降るでしょう。あなたが立っている場所は晴れですか、それとも雨ですか?

HTML の明日は晴れでしょうか、それとも雨でしょうか?

王淮（元Facebook決済バックエンドおよび不正防止部門テクニカルマネージャー、現エンジェル投資家）

HTML5 とは何でしょうか? なぜこれほど多くの人が HTML5 に注目し、自社の将来を賭けているのでしょうか? しかし、なぜ Facebook は HTML5 を放棄して Objective C に切り替えたのでしょうか? HTML の将来は明るいでしょうか、それとも暗いでしょうか? HTML を受け入れるべきでしょうか? どのように判断すればよいでしょうか?

最近 HTML5 に興味を持ち、少し調べてみたところ、長年 HTML5 に取り組んできたシリコンバレーの大物 2 人と電話で話をしました<1>。その内容をこの記事にまとめました。この記事は HTML5 に関する啓蒙的な投稿ではなく、業界における HTML5 の発展に関する観察と考察です。

HTML5とは何ですか?

HTML5 は、その名前が示すように、HTML の 5 番目のバージョンです。現在さまざまなブラウザで使用されている多くの優れたプラグインや特別な調整が標準に組み込まれています。これの利点は、特別なブラウザ用に特別な最適化を行う必要がなく、一貫性のないプラグイン標準によって発生する多くのトラブルを回避できることです。

たとえば、Adobe の Flash + PDF プラグインによって発生するブラウザ クラッシュが、すべてのブラウザ クラッシュの半分以上を占めていることを知って驚きました。

HTML5 の登場と普及により、統一された標準規格を通じてこの混沌とし​​た状況は大きく変化するでしょう。最も重要なネイティブ サポートは次のとおりです。

オンザフライで描画（ウィジェットを自由にドラッグ）

ネイティブ ビデオ サポート (ネイティブ ビデオ サポート – さようなら、Flash)

地理位置情報（住所情報の取得）

オフラインアクセスサポート（オフラインサポート、ローカルストレージのサポート）

SEO に適したタグによるセマンティクス (Flash コンテンツはインデックス化できません - SEO が理解できるタグは検索エンジンのインデックス化に役立ちます)

ただし、HTML5 標準の実装の程度とペースは、各ブラウザの独立した選択に完全に依存しており、ブラウザは好きなように行うことができます。 html5readiness.com のこのチャートは、さまざまなブラウザがさまざまな機能をどの程度実装しているかを明確にまとめています。

HTML5 を採用すべきでしょうか?

この質問に答えるには 2 つのステップが必要です。

ウェブですか、それともモバイルですか?

「ウェブ上の場合は、100% 晴れていることが保証されます。モバイルの場合は、次のものを参照してください。」

Web にとって、HTML5 は完全なオペレーティング システムになります。これは、ブラウザの助けを借りてさまざまな基盤システムに実装され、開発されたプログラムをさまざまなデバイス (PC、Mac、スマートフォン) やプラットフォーム (Windows、MacOS、iOS、Android など) で実行できるようにする統一された標準 API をカプセル化します。

最大の利点は、1 か所で開発して複数の場所で使用できることです。新しいバージョンのリリースを確認するときに、Apple の顔を見る必要はありません。新しいコードをサーバーに直接プッシュするだけです。開発者にとって、これは効率を向上するための致命的な誘惑です。 「まず Web 向けに開発しますか、それともモバイル向けに開発しますか?」といった質問は、幸いなことに無意味です。

Web 開発では、HTML5 の統合カプセル化のメリットを享受できます。待つ必要があるのは、ブラウザのサポートが改善されることだけです。しかし、この完全性の到来は疑いなく確実です。

多くの起業家がこれに非常に注目し、自社の将来に賭けるのは、このメリットのためです。

しかし、モバイルデバイスの場合はそれほど単純ではありません。

モバイル端末の場合は、製品の形態によって異なります。

製品に必要な機能が、モバイル ブラウザーの HTML5 実装では適切に実装されない可能性があるからです。

「App Store のアプリケーションの 50% 以上はすでに HTML5 を使用して開発されています。将来的には、アプリケーションの 90% が HTML5 になり、残りの 10% は HTML5 に適さないものになる可能性があります。」

HTML5の天気予報によると、一部地域で小雨が降る見込みです。

かわいそうな開発者の皆さん、自分が立っている場所が晴れているか雨が降っているか、どうやってわかるのですか?

まず、ブラウザの HTML サポートを動的に検出するツール、ringmark.io <2> を紹介します。 図に示すように、現在お使いのブラウザをテストし、HTML5 仕様 (spec) に記載されている機能の実装度をテストします。 異なるリングは異なる機能レベルを表します。 実装されているものは緑色、実装されていないものは灰色で表示されます。灰色が多すぎる場合は、ブラウザを変更する必要があります。

冒頭の質問に戻りますが、Facebook が iOS アプリの実装で HTML5 を放棄し Object C を選択した理由は、Facebook アプリが写真に大きく依存しており、写真の共有や閲覧関連の機能は CSS Overflow Scrolling に大きく依存しており、iOS 上のブラウザー サポートが極めて貧弱であるためです。 Objective C のネイティブ実装に切り替えた後、速度が 2 倍に向上しました。

さて、一部の友人はこう尋ねるかもしれません。「将来的にはこれらの機能に対するブラウザのサポートが改善されるでしょうか？そうなったら可能になるのではないでしょうか？」

実のところ、その日が来ることは決してないかもしれない。

ブラウザのプログラミング モデルは、1990 年代に普及したシングル プロセス シングル スレッド (シングル プロセス シングル スレッド) のままですが、ネイティブに実装された (Object C を使用するなど) アプリではマルチ スレッドを使用できます。この影響は致命的です。

モバイル アプリを作成するときは、複数のスレッドを使用できます。最初のスレッドはメイン スレッドと呼ばれます。プログラミングの第一原則は、メイン スレッドで負荷の高い作業を行わないことです。通常、UI イベントなどの処理にのみ使用され、その他の負荷の高い作業は他のバックグラウンド スレッドによって実行されます。

しかし、ブラウザにはスレッドが 1 つしかなく、それがすべてを実行します。ブラウザプログラミングは最初から最初の原則に違反しています。

デスクトップ コンピューターでは、ブラウザー プログラミングは十分に高速であるため、それほど多くの問題は発生しませんが、モバイル デバイスでは、この欠点は明らかです。

例を挙げてみましょう。たとえば、ブラウザを使用して友人の写真を閲覧しているとします。コメントがサーバーに送信されます。次に、指を使用して画面を下に引っ張ります。このとき、サーバーはコメントが正常に投稿されたという情報を返します。ブラウザ内の唯一のスレッドは、サーバーから返された情報を処理するために、画面のスクロール処理を停止する場合があります。モバイルデバイスのプロセッサ（特にシングルプロセスブラウザは、マルチコアフォンでも1つのコアしか使用できません！）とメモリ（省電力のために低電力DDR1が使用され、現在のPCで使用されているDDR3とはかけ離れています）のパフォーマンスが低いため、スクロール処理が不連続になる可能性が十分にあります。通常、携帯電話のリフレッシュ レートは 60MHZ です。つまり、各フレームは 15ms を超えません。処理遅延が 15ms を大幅に上回ると、フレーム スキップが発生し、肉眼で確認できます。

これは、HTML5 で実装されている場合に、プル時に停止するインタラクティブな操作 (プル、スクロールなど) を多く含むアプリが発生する非常に重要な理由です。

したがって、アプリが比較的静的で、写真、マルチタッチ、多方向のプルなどの処理をあまり必要としない場合は、HTML5 で実装できます。そうでない場合、たとえば情報フローの表示、ゲームなどでは、ネイティブ実装を使用する方がよいでしょう。

どの種類のアプリにどの機能が必要かは、<3> を参照してください。

HTML5 は何を待っているのでしょうか?

HTML5 の実装は、すでに iOS アプリの 50% 以上で選択されています。処理能力の向上により、モバイルデバイスの処理能力の低さによって生じるエクスペリエンスが改善されると信じています。この処理能力の向上は、低電力で高性能な CPU/メモリの出現、またはバッテリー技術の大幅な改善に大きく依存します。

この日が来るまでには、10% のアプリは HTML5 を使用して実装できない可能性があります。

<1>

元Facebookモバイルプラットフォーム開発マネージャー、ルーク・シェパード

フェイスブックのシニアエンジニア、グーグルクロームの元創設メンバー、フェン・チアン氏

<2>

ringmark.io では、現在のブラウザをテストできるだけでなく、右下隅の「別のデバイスを選択」でさまざまなモバイル オペレーティング システムのバージョンを選択して、HTML5 がどの程度サポートされているかを確認することもできます。

<3>

ringmark.io にアクセスし、ring1 をクリックして、「各タイプのアプリに機能がどのように適用されるかを確認する」をクリックします。このツールによって作成されたさまざまなアプリ タイプの概要を確認できます。たとえば、写真機能を多用するアプリ（カメラ アプリ）の場合、どのような機能が必要かがわかります。グレーが多すぎる場合（現在のブラウザーで実装されていないことを示します）、アプリはこのブラウザーでの実行に適していません。

<4>

参考 Facebook ブログ

<5>

HTML5で書かれた興味深いウェブサイト

http://mrdoob.com/projects/harmony/#circles

http://html5demos.com/canvas-grad

http://hakim.se/experiments/html5/wave/03/

http://andrew-hoyer.com/andrewhoyer/experiments/cloth/

著者の王淮は『荘史記』に出版の許可を与えました。転載の際には著者と出典を明記してください。

元のタイトル: HTML5 は明日小雨が降るでしょう。あなたが立っている場所は晴れですか、それとも雨ですか?

キーワード: HTML5、明日、部分的、小雨、あなたのウェブサイト、晴れた日、雨、ウェブマスター、ウェブサイト、ウェブサイトのプロモーション、お金を稼ぐ