html5-ロケット

過去数年にわたってWebブラウザーは成長しています。 Internet Explorer 6のWebに対するホールドが崩れたため、ブラウザーは、Webサイトが今日利用しているさまざまな優れた新機能を実装しています。

この記事では、今日の実際のWebページで使用できる新しいWebテクノロジーに焦点を当てています。 確かに、あなた方の何人かは間違いなくこれらの多くを聞いたことはありませんが、大多数の人々はそれらのすべてを聞いていません。

ドラッグアンドドロップでアップロード

多くのWebサイトでは、ブラウザーウィンドウにファイルをドラッグアンドドロップするだけでファイルをアップロードできるようになりました。ほんの数年前とは異なり、参照ボタンをクリックしてファイルチューザーを使用する必要がなくなったことを歓迎する変更です。 ファイルをGmailのメールに添付する場合でも、画像をimgur.comにアップロードしてすばやく共有する場合でも、ファイルをWebページにドラッグアンドドロップできます。

ドラッグアンドドロップでアップロード

ブラウザで3Dグラフィックスをレンダリングする

ChromeやFirefoxなどのブラウザーはWebGLをサポートするようになり、プラグインなしでWebページが3Dグラフィックスをレンダリングできるようになりました。 WebGLはゲームやその他の3Dモデルに使用できますが、WebGLを使用する最も人気のあるWebサイトはおそらくGoogleマップです。 ChromeのGoogleマップでは、「MapsGL」を有効にできます。 これにより、GoogleマップでOpenGLを使用してマップがレンダリングされ、アニメーションがよりスムーズになります。 ストリートビューを使用すると、マップがズームインするとアニメーションが表示されます。ストリートビューもAdobe FlashではなくOpenGLでレンダリングされます。

Googleマップの印象が不十分だった場合、Quake 3エンジンはブラウザーのWebGLで動作するように調整されています。 このWebサイトでは、ポインターロック(またはマウスロック)仕様を使用して、マウスポインターを取得し、ゲームエリア内に保持しています。

quake-3-in-webgl

WebSocketsと通信する

HTMLは、WebページがWebサーバーとやり取りできるようには設計されていません。 HTMLは静的なWebページ用に作成されており、現在、ほとんどのWebページはサーバーとの通信にハッキングポーリングベースの方法を使用しています。 WebSocketを使用すると、WebページがTCP接続を介して完全な通信チャネルを作成できるため、Webページがサーバーとの間でデータを送受信する必要がある場合に、レイテンシとネットワークトラフィックが大幅に削減されます。

WebSocketはMozillaのBrowserQuestゲームで使用され、ブラウザ内で実行されているゲームがサーバーとの間でイベントを送受信できます。 WebSocketは、ブラウザーで実行されるIRCクライアントの作成にも使用されています。 おそらく最も印象的なのは、WebSocketがブラウザで実行されるJavaScriptトレントクライアントの作成にも使用され、Chrome OSユーザーにネイティブトレントクライアントを提供していることです。 JSTorrentはまだ完全に安定しているようには見えませんが、WebSocketで何ができるかを示す良い例です。

browserquest-connecting-to-server

フラッシュなしでビデオと音楽を再生する

HTML5ビデオは非常に注目されており、FlashをインストールしなくてもH.264(MP4)、WebM、Ogg Theora形式のビデオを再生できるようになったことを多くの人が知っています。 YouTubeを含む多くのビデオWebサイトは、HTML5ベースのビデオ再生を提供しています。 残念ながら、多くのウェブサイトはDRMが必要であると主張しています。そのため、YouTubeは広告付きのビデオにFlashを使用し、NetflixはまだビデオにSilverlightを使用しています。 HTML5の「ビデオタグ」は、Flashベースのビデオプレーヤーのように見えるため、WebサイトがHTML5を使用していることに気付かない場合があります。ただし、ビデオ再生はモバイルデバイスで機能し、パフォーマンスが向上します。

html5-video-on-vimeo

Webアプリをオフラインで実行する

ブラウザーにより、Webアプリがオフラインで動作できるようになり、データにアクセスするために使用できるローカルデータベースストレージが提供されます。 GoogleのオフラインWebアプリ(Gmail、ドキュメント、カレンダーなど)の多くはChromeでしか動作しませんが、AmazonのKindle Cloud ReaderはFirefoxなどの他のブラウザーでもオフラインで使用できます。 Kindle Cloud Readerを使用すると、インターネットに接続していなくても、後でブラウザでオフラインで読むことができる電子書籍をダウンロードできます。

kindle-cloud-reader-offline

Webカメラとビデオ会議にアクセスする

これで、WebページからWebカメラにアクセスできるようになります–もちろん、あなたの許可が必要です。 Webページは、この機能を使用して、Webカメラから写真を撮り、プロフィール写真やビデオを録画することができます。 ただし、プラグインを必要とせずに、異なるWebブラウザー間のビデオ会議に新しいWebRTC APIを使用することもできます。 今後、Googleのハングアウトではプラグインがまったく不要になり、Skypeもブラウザで実行できるようになります。

通知ポップアップを作成する

ブラウザで、Webページにデスクトップ通知を表示できるようになりました。 たとえば、今後のイベントのリマインダーを作成すると、Googleカレンダーでポップアップ通知を表示できます。 チャットおよび電子メールのWebサイトでは、ポップアップを表示して新しいメッセージを通知できます。

google-calendar-reminder-pop-up

あなたの場所を特定する

これで、Webページで位置情報へのアクセス許可を求めることができます。 専用のGPSチップを搭載したタブレットやその他の種類のデバイスを使用している場合、ブラウザはGPSハードウェアを使用して現在地を特定します。 GPSチップのないデバイスでは、近くのワイヤレスネットワーク名またはISPの場所を使用して、現在の場所を概算できます。 ジオロケーションにより、ローカルコンテンツを表示するWebサイトに住所を入力する必要がなくなり、ポータブルコンピューターのGPSチップを使用して正確な位置を特定できます。

google-maps-geolocation

Webアプリをデフォルトのアプリケーションにする

ブラウザーでWebアプリをデフォルトのアプリケーションにできるようになったため、ブラウザーのGmailを使用して、mailto:リンクをクリックしたときにコンピューターの任意の場所(ブラウザーの外側でも)にメールを送信できます。

chrome-use-gmail-as-default-email-app

ブラウザでネイティブコードを実行する

議論の余地がありますが、ChromeにはGoogleのネイティブクライアントが含まれています。 Native Clientを使用すると、CまたはC ++などの言語で記述されたネイティブコードをWebページで実行できます。 コードはセキュリティのためにサンドボックスで実行され、ほぼネイティブの速度で実行されます。

Native Clientを使用すると、ゲームエンジンやローカルビデオエンコーディングなどの高性能コードをWebページで実行できます。 これは、Chrome OSでより高度なアプリケーションを入手するための道となる可能性があります。 Chromeウェブストアには、非常に高く評価されているバスティオンのポートを含む、Native Clientで記述されたさまざまなゲームが含まれています。

要塞インクロム

ブラウザーは急速に新しいWeb機能を獲得しています。 Internet Explorer 6が業界標準ではなくなったことに感謝します。

画像クレジット:FlickrのChristian Heilmann