新春特別企画

2016年のウェブブラウザ拡張機能

この記事を読むのに必要な時間:およそ 5 分

あけましておめでとうございます。よういちろうです。毎日のように新しいニュースが飛び込んでくるウェブブラウザの世界ですが,2016年は「拡張機能」という分野において大きな動きがありそうです。本稿では,ウェブブラウザの拡張機能のこれまでとこれからについて紹介します。

進化が止まらないウェブブラウザの歴史

1993年にMosaicウェブブラウザが登場してから,早いもので23年が経過しました。インターネットが人々に浸透していく中で,ウェブブラウザの重要性はとにかく増していく一方です。今日では,Chrome,Internet Explorer(IE)⁠Firefox,Safari,Opera,そしてEdgeといった代表的なウェブブラウザがシェアの奪い合いを繰り広げています。

インターネットの進化は,ウェブブラウザの進化と言い換えることもできるでしょう。ウェブブラウザの登場から今日までの進化をわかりやすく表現したウェブサイトウェブの進化がありますので,ぜひご覧になってみてください。

図1 ウェブの進化

画像

以前はウェブブラウザの機能は「ホームページを閲覧する道具」でしたが,今日では「インターネット上のほぼすべての活動を行う場」になっています。つまり,単なるネットサーフィンではない,もっと高度で複雑なことをユーザが行うようになりました。

例えば,閲覧したウェブページを友だちにシェアしたり,母国語に翻訳したり,数多くのユーザIDとパスワードの組を記憶して必要に応じてウェブページにセットしたり,いちいちウェブページを移動せずに検索を行ったり,といったことが挙げられます。

これらはウェブページ側でサポートされるのではなく,ウェブブラウザ側でサポートされる機能だと言えます。ただし,ユーザによって必要とされる機能は全く異なってきます。ユーザの好みに合わせて柔軟に機能追加が可能であること,それが理想的な姿です。

ウェブブラウザ自体の機能をユーザが追加していくことは,比較的初期から実現されていました。過去に一世を風靡したものとして,以下があります。

  • Netscape Plug-in:FlashやJava Appletなど,新しいコンテンツをウェブページ内に表示させるために後から追加するプラグインモジュール。
  • IEツールバー:Yahoo!ツールバーGoogleツールバーなどが有名。それぞれのサービスが提供する各種機能を迅速に利用可能にするツールバーモジュール。

これらの開発にはC++などを利用する必要があり,比較的難しいものでした。

図3 Googleツールバー

画像

当時はウェブブラウザの機能を独自に改良するという発想自体がなかったと思いますが,2002年にリリースされたFirefoxによってこの認識は覆されることになります。

Firefoxが切り開いた「ウェブブラウザを機能拡張する」時代

Netscape NavigatorやIEと違い,Firefoxは「自分でFirefox自体の機能を開発することが可能なウェブブラウザ」でした。アドオンと呼ばれたその機能は,Firefoxの中の人ではない開発者が機能を追加することができるように,数多くのカスタマイズポイントを提供していました。

アドオンの中でも,Firefoxでネットサーフィンをする際に便利な機能群は「拡張機能」と呼ばれ,Add-ons for FirefoxにてFirefoxユーザは自由に公開された拡張機能の中から気に入ったものを自分のFirefoxにインストールできるようになりました。

図4 Firefox Add-ons

画像

Firefoxの拡張機能は,XML,JavaScript,CSSといった「比較的手軽な技術要素」を使って開発できるようになっていました。そもそも,XUL(XML User Interface Language)と呼ばれるXMLにて,Firefox自体のUI構成がすべてマークアップされています。簡単に表現すると,Firefoxの拡張機能は,Firefoxが持つXULを上書きしてUIを追加あるいは変更し,それらの振る舞いをJavaScriptで与えたものです。本当に深いところまで変更できるようになっていたため,様々なアイディアが世界中の開発者の手によって実現されていきました。

その後のFirefoxの拡張機能の開発は,Add-on SDKが提供されたことによってXULを深く理解せずとも拡張機能の開発ができるようになりました。さらに2015年には,Add-on SDKに含まれていたcfxコマンドを置き換えるnode.jsベースの開発環境「JPM」が登場しました。これにより,例えばソースコードの変更が直接Firefox上で反映されるなど,生産性を従来よりも向上させることが可能になりました。

拡張機能の開発をさらに簡単にしたChrome

2008年に登場したChromeにおいても,バージョン4から拡張機能がサポートされました。Firefoxと同じように,JavaScriptでコードを記述していくことが開発の中心的な作業です。XULほどの自由度はありませんが,その分必要となる前提知識が少なく,主要な拡張機能があっという間に開発され,広く利用されるようになりました。バージョン8からは,ユーザがChromeウェブストアから拡張機能を探してインストールできるようになりました。

図6 Chromeウェブストア

画像

Chromeの拡張機能は,必須のmanifest.jsonファイルを記述し,あとはHTML,JavaScript,CSSを駆使して開発します。Chromeが提供するJavaScript APIを使って,Chromeに独自の機能を追加します。バージョン5では8個のAPIしかありませんでしたが,現在では63個まで増えました。その中には,Chromeが持つ開発者向けのDevToolsを拡張するためのAPIや,画面やウェブページのキャプチャ画像を撮るためのAPIなど,面白いものも多く含まれています。

いまでは,1つも拡張機能を入れずにChromeを使っているユーザは皆無と言えます。また,Chromeの開発自体が「シンプルさを保つ」ことに注力していることも,拡張機能の利用が促進された要因でしょう。

ほとんど拡張機能に力を入れてこなかったIE

FirefoxやChromeの拡張機能がJavaScript,CSSなどのウェブ標準技術に近いもので開発可能なのに対して,IEのそれは真逆な環境です。

IEでは,ショートカットメニュー,ツールバー,エクスプローラバー,ブラウザヘルプオブジェクト,といった拡張がバージョン4から可能だったのですが,それらのほとんどはWindows OSのレジストリを書き換える必要があります。そして,各機能に応じたインターフェイスが規定されていて,その実装を基本的にはC++で開発しなければなりません(現在ではC#など他の選択肢もあります)⁠新規に追加するUIは,もちろんHTMLなどではなく,Windows OSが持つUI部品群を利用する,あるいは自分で描く,といったことが求められます。

Browser Extensionsという名前のウェブページから,IEの拡張機能を作るための方法を知ることができます。

図8 Browser Extensions

画像

開発したものを動作させるためにはレジストリの書き換えが必要になるため,IE向けの拡張機能(実際にはアドオンという名称です)はインストーラを作る必要が出てきます。ユーザに配布する際にも,FirefoxやChromeのように「拡張機能ギャラリーからボタンクリックで即インストール完了」にはなりません。削除する場合も,アンインストーラを使う必要が出てきます。FirefoxやChromeと違って,IE向けの拡張機能の個数が非常に少ないのも,こういった事情があるからだと考えられます。

著者プロフィール

田中洋一郎(たなかよういちろう)

Google Developer Expert(Chrome担当)。Mash up Award 3rd 3部門同時受賞。『開発者のためのChromeガイドブック(Google Expert Series)』を出版。

Blog:https://www.eisbahn.jp/yoichiro
Twitter:@yoichiro

コメント

コメントの記入