西村宗晃

進化するWebプラットフォーム!Chrome OSとFirefox OSが変えるWebの未来

近年、ネイティブのアプリをHTML5だけで開発できるOSが、注目を集めています。本記事では、2014年内に日本での製品発売が期待されるGoogleのChrome OSとMozillaのFirefox OSの概要を紹介します。

Chrome OS

PCの利用時間の大半をWebに費やしている人や、Webブラウザ以外のアプリは使用しないという人は少なくありません。Chrome OSはこのように、WebのためにPCを利用するユーザーにとって、最適なブラウズ環境を提供することを目的として開発されたOSです。米NPDの調査によれば、Chrome OSを搭載したノートPCであるChromebookは、2013年内に米国で販売されたノートPCの21%を占め、着実にシェアを伸ばしています。

Chrome OSのアーキテクチャ

Chrome OSは、Chromium OSというオープンソースのOSを、Chromebookに最適化したものです。Chromeブラウザのエンジンをアプリの実行環境に採用しているため、デスクトップアプリをHTMLやJavaScript、CSSだけで開発することができます。また、ネイティブのコードをプラグインとして実行するNaCl/PNaClという仕組みもサポートしているため、C/C++で書かれたソフトウェア資産を活用することも可能です。

Chrome OSのアーキテクチャは他のクライアントOSと比べると、非常にシンプルです(下図)。低レイヤーのOSにはLinuxカーネルを採用し、その上にChromeとWindow Managerという2つのコンポーネントを実装しています。OSの主要な機能は全てChromeに含まれています。Window Managerはデスクトップの表示やマルチウィンドウの管理を担当しています。

Chrome OSのアーキテクチャ

このアーキテクチャからも読み取れるように、Chrome OSはChromeを動作させることに特化したOSです。逆に言えば、Chrome以外の機能をほとんど何も持ちません。このためChrome OSは、安価な低スペックの端末上でも快適に動作します。例えば、下図はChrome OSが起動時に行う処理を他の一般的なクライアントOSと比較したものです。Chrome OSは起動時に行う処理が少ないので、高速に起動します。多くのChromebookは、電源を入れて15秒ほどで、インターネットが利用できる状態になります。

一般的なクライアントOSとChrome OSにおける起動処理の比較

Chromeアプリ(Chrome Apps)

Chromeには、これまでにもタブの上でアプリを実行するWeb Appsという仕組みがありましたが、2013年9月にこの仕様が改定され、Chromeアプリという名前で生まれ変わりました。Chromeアプリはネイティブのアプリのように独自のウィンドウを持ち(下図)、Chromeが起動していなくても実行できます。

Chromeアプリはデスクトップアプリとして起動する

Chromeアプリはクロスプラットフォームをサポートしており、Windows、Mac、Linuxで共通のアプリが実行できます。2014年1月にはAndroidとiOS上でChromeアプリを動かすMobile Chrome Appsというフレームワークが公開され、スマートフォンの動作環境も整いつつあります。

Chrome OSのネイティブアプリは、このChromeアプリです。このため、他のOS向けに作られたChromeアプリはChromebookの上でも互換性を持って動作します。

Chromeアプリはchrome.*というプリフィックスで始まる特殊なJavaScript APIを利用することができます。これらのAPIを用いることで、通常のWebページには許可されていないハードウェアの制御や、PCのローカルファイルへのアクセスが可能となります。

ChromeアプリはChromeウェブストアからインストールすることができます。第三者によるアプリの配布は許可されていないため、自作のChromeアプリを公開する際はChromeウェブストアへの登録が必要となります。アプリを公開する前にはGoogleの審査が行われますので、任意のアプリが配布できるという訳ではありません。

Firefox OS

現在のスマートフォン市場は、一部のプラットフォームベンダーがシェアを握る独占状態となっています。これらのベンダーは自身のプラットフォームで動作するアプリに対しても強い影響力を有しており、アプリの開発者はこれらベンダーの意向に沿わないアプリを公式のマーケットで配布することができません。こうした制限が自由競争やイノベーションを阻害していると指摘する人も少なくありません。Firefox OSはこうしたスマートフォン市場のオープン化を促すことを目的として、非営利組織であるMozillaによって開発されました。日本ではKDDIが2014年度中にFirefox OSの搭載端末を発売することを公表しているほか、パナソニックが2014年内に次世代スマートテレビにFirefox OSを採用することを表明しており、次第に国内での注目度が高まってきました。

Firefox OSのアーキテクチャ

Firefox OSは、FirefoxブラウザのレンダリングエンジンであるGeckoを、アプリの実行環境に据えたOSです。アプリの開発言語にはHTML、JavaScript、CSSのみをサポートしており、Webのフロントエンドと同じ技術でスマートフォンのアプリを開発することができます。

Firefox OSのアーキテクチャはGonk、Gecko、Gaiaという3つのレイヤーで構成されています(下図)。Gonkは多種多様なスマートフォンの上でGeckoを実行させるための移植レイヤーで、現在はAndroid OSをベースにしています。Geckoは、Firefoxブラウザのエンジン部を機能拡張してハードウェア制御などを行うWeb APIを追加したもので、Webページのレンダリングとアプリの実行という二つの用途で使用されます。Gaiaはユーザーインタフェースを提供するレイヤーで、全てHTML5で書かれています。

Firefox OSのアーキテクチャ

Firefox OSは、他のモバイルOSと比べて非常にシンプルな構成をしており、低スペックの端末上でも快適に動作するように作られています(下図、Mozilla Japan 浅井氏の資料より引用)。この成果の一つとして、2014年のMWCでは25USドルという原価の端末が発表され、話題となりました。Mozillaのこうした取り組みは、主に新興国に住む何十億人という人々(next billion)にスマートフォンを手にする機会をもたらしています。

Firefox OSとAndroidのアーキテクチャ比較

Firefox OSアプリ (Open Web Apps)

Firefox OSは、ホスト型アプリとパッケージ型アプリという2種類のアプリをサポートしています。ホスト型アプリはHTMLなどのリソースを全てサーバーから配信するもので、端末はネットワークアクセスを通じてアプリを実行します。一方のパッケージ型アプリは、アプリのリソースをZIPファイルにパッケージ化して端末にインストールするもので、オフラインでアプリを実行します。

ホスト型アプリは常にサーバーから最新のリソースを取得することができるので、アプリの迅速なアップデートが可能となります。しかし、サーバー上にあるソースコードが常に安全であるとは保証できませんので、セキュリティ上の理由から、ホスト型アプリはWebページとほぼ同等の機能しか利用できないように制限されています。パッケージ型アプリはアプリの利用する権限に応じてWeb、Privileged、Certifiedの3種類に分類されます。

アプリの種類 特徴
Web 通常のWebサイトとほぼ同等の権限を持つアプリ
どのWebサイトからでもアプリをインストールできる
Privileged Mozillaの審査を受けて一部の特権的なWeb APIの利用が許可されたアプリ
Firefox Marketplaceからのみアプリをインストールできる
Certified 端末メーカーや通信事業者により全てのWeb APIの利用が許可されたアプリ
プリインストールアプリにのみ許可された権限であり、利用者はインストールできない

Web権限を持つアプリはその名の通りWebページとほぼ同等の権限で動作します。Privilegedアプリは端末のローカルファイルや電話帳などの個人情報にアクセスするといった一部の特権的な機能の使用が許可されます。Certifiedアプリは最も高い権限で動作し、課金や端末の設定情報などを含む全ての機能にアクセスできます。Privilegedアプリの公開にはMozillaの審査が必要となり、Firefox Marketplaceのみから配信できます。Certified権限は端末メーカーや通信事業者によるプリインストールアプリにのみ与えられる権限で、第三者のアプリには利用できません。

Firefox OSアプリはGeckoに含まれるWeb APIをJavaScriptから利用することで、ハードウェアへのアクセスや他のアプリとの連携が可能となります。MozillaはW3Cを通じてこれらのWeb APIの標準化を進めています。理想的には今後、Firefox OSアプリを作ればそれが様々なOS上で互換性を持って動作するようになるでしょう。

まとめ

本記事では、Chrome OSやFirefox OSのアーキテクチャ、さらにそれぞれのOSがサポートするアプリの概要を紹介しました。これら二つのOSはとてもよく似た特徴を持っています。ChromeアプリやFirefox OSアプリが使用しているWeb APIなどの技術もW3Cによる標準化が進み、プラットフォームの差異を意識せず、アプリを開発できるよう次第に整備されてくるでしょう。

html5j Webプラットフォーム部について

html5j Webプラットフォーム部ロゴ

Webプラットフォーム部は、HTML5でネイティブのアプリを開発できるプラットフォームの動向に着目し、これらのプラットフォームで動作するアプリを開発するためのノウハウを発信、共有する部活動です。アプリを様々なプラットフォームに向けて開発する方法や各種マーケットでのマネタイズに至るまで、知っておくと得をするノウハウをアプリの開発者の皆さまに届けていきたいと思います。第一回目の勉強会を近日開催予定です。皆さんも一緒にWebの未来を追いかけていきましょう!

html5j Webプラットフォーム部スタッフ一同

'; js_seriesContent.className = "js_seriesContent"; js_seriesContent.innerHTML = js_seriestitle.innerHTML; js_seriesContent.appendChild(js_serieslist_ul); if ( js_parent.lastChild == js_superior ) { js_parent.appendChild(js_seriesContent); } else { js_parent.insertBefore(js_seriesContent, js_superior.nextSibling); } if (js_serieslist_li_length > 5) { document.getElementsByClassName('moveToSeriesTop')[0].style.display = 'block'; document.getElementsByClassName('moveToSeriesTop')[0].href = document.getElementsByClassName('seriesmeta')[0].getElementsByTagName('a')[0].href; } })(this, this.document); // ソーシャルボタンをクリックされたらgaに送信 var elements, i; elements = document.querySelectorAll('.sns-buttons > li > a.facebook-btn-icon-link'); for (i = 0; i < elements.length; i++) { elements[i].addEventListener('click', function() { ga('send', 'social', 'Facebook', 'like', '/nishimunea/5773/'); }, false); } elements = document.querySelectorAll('.sns-buttons > li > a.twitter-btn-icon-link'); for (i = 0; i < elements.length; i++) { elements[i].addEventListener('click', function() { ga('send', 'social', 'Twitter', 'tweet', '/nishimunea/5773/'); }, false); } elements = document.querySelectorAll('.sns-buttons > li > a.google-plus-btn-icon'); for (i = 0; i < elements.length; i++) { elements[i].addEventListener('click', function() { ga('send', 'social', 'Google+', '+1', '/nishimunea/5773/'); }, false); } elements = document.querySelectorAll('.sns-buttons > li > a.hatena-btn-icon'); for (i = 0; i < elements.length; i++) { elements[i].addEventListener('click', function() { ga('send', 'social', 'Hatebu', 'bookmark', '/nishimunea/5773/'); }, false); } elements = document.querySelectorAll('.sns-buttons > li > a.pocket-btn-icon'); for (i = 0; i < elements.length; i++) { elements[i].addEventListener('click', function() { ga('send', 'social', 'Pocket', 'bookmark', '/nishimunea/5773/'); }, false); }

週間PVランキング

新着記事

Powered byNTT Communications

tag list

アクセシビリティ イベント エンタープライズ デザイン ハイブリッド パフォーマンス ブラウザ プログラミング マークアップ モバイル 海外 高速化 Angular2 AngularJS Chrome Cordova CSS de:code ECMAScript Edge Firefox Google Google I/O 2014 HTML5 Conference 2013 html5j IoT JavaScript Microsoft Node.js Polymer Progressive Web Apps React Safari SkyWay TypeScript UI UX W3C W3C仕様 Webアプリ Web Components WebGL WebRTC WebSocket WebVR