Google Chrome 5のリリースが刻一刻と迫ってきました。その注目の新機能と開発者向けの変更点に加え、Chrome 6を見据えた今後のスケジュールなどを詳細にお届けしたいと思います。
まず、Chrome 5の最大ニュースはなんといってもMac版、Linux版がそれぞれ正式にリリースされる予定という点です。これまで、Mac版とLinux版はベータ版と開発版が提供されていましたが、ついに安定版がリリースされる予定です。特にMac版はMac OS Xに馴染むようにかなりの改良が加えられているので、注目のリリースとなりそうです。
さて、これまでのリリースを簡単に振り返ってみます。シンプルで高速なブラウザとしてChromeがリリースされてから、Chrome 2では基本機能の充実と高速化、Chrome 3ではテーマのサポート、Chrome 4では拡張機能のサポートとブックマーク同期、Chrome 4.1は翻訳機能にCookieやJavaScriptなどの制御するプライバシー機能の充実などが目玉となってきました。
そして、今回のChrome 5では、HTML5とその関連APIのサポートの充実が図られています。ほかにも、CSS3やECMA-262 5th edition(通称ECMAScript 5)のサポートなど、主にウェブアプリケーションのための機能追加がメインとなっています。Chrome 5は開発者にとって注目のリリースです。
Chrome 5とHTML5
Geolocation APIのサポート
これまでGoogle Gearsの機能として提供されていた位置情報を取得するAPIを、Chrome 5ではネイティブにサポートするようになりました。
Geolocation API
navigator . geolocation . getCurrentPosition ( function ( geo ){
console . log ( geo );
console . log ( geo . coords . latitude );
console . log ( geo . coords . longitude );
});
Geolocation APIのサンプル
Application Cacheのサポート
こちらもやはりGearsの機能としてオフラインAPIが提供されていましたが、Chrome 5からHTML5の仕様に準拠したAPIが実装されました。なお、同じくGearsの機能であるDatabaseとWorkerもChrome 4で対応済みなので、Gearsが提供するAPIは基本的にChrome自体が持つようになりました(そういった事情をもって、Google Gearsは開発を終了しています) 。
Web Workers内でWebSocketが可能に
Web Workers(JavaScriptをマルチスレッドで実行するAPI)からWebSocketを行うことが可能になりました。Web Workers、WebSocketどちらも最新仕様への対応やWebInspectorでのデバッグ対応など改良が引き続き進行中です。
ドラッグ&ドロップのサポート
ブラウザの外からファイルをドロップして受け渡すAPIが実装されました。
Gmailではメールにファイルを添付する際にローカルからブラウザにファイルをドラッグ&ドロップで添付することができるようになっています。
sessionStorageのサポート
Chrome 4ではlocalStorageのみをサポートしていましたが、Chrome 5でsessionStorageもサポートするようになりました。
Magic IFRAMEのサポート
フレーム(Window)間で内部のフレーム(Window)をリロードを発生させずに受け渡しできる機能です。
サンプル のように、インラインフレーム間で地図を表示したままフレームを移動できます。Gmailのような読み込みに時間がかかるアプリケーションをChrome拡張から利用するケースでの利用が想定されています。
history.pushState/history.replaceStateのサポート
JavaScriptからブラウザの履歴を追加、置き換えできるAPIです。( Gmailのような)ページ遷移を伴わないウェブアプリケーションにおいて、戻る・進むで操作のやり直しをする機能などを実装することができます。
Desktop notificationsの改良とサポート
ブラウザの外(デスクトップ)に通知用の小窓を表示するAPIです。Chrome 4でもサポートはしていましたが、インターフェースなどが改良されました。また拡張からはmanifest.jsonのpermissionsにnotificationsを指定することが可能になりました。
Notificationsのサンプル
HTML Formsのサポート(一部)
フォーム要素について、新しいtypeやバリデーション機能などが追加されました。インターフェースを伴うものはChrome 6で実装される予定です。詳細はThe Chromium Projects の HTML5 Forms Status で確認できます。
Sectioning要素のサポート
HTML5で新たに追加されたsectionやheader、footer、navなどの要素を正しく解釈できるようになりました。
このほか、HTML5やCSS3のサポート状況はWeb Designers' HTML5 & CSS3 Checklist や、The Chromium Projectsn の Web Platform Status などにまとまっています(WorkersからのDatabaseへのアクセスや、File API、XMLHttpRequestのFormData送信サポートなどはChrome 5での対応からChrome 6への対応に先送りされています) 。
Chrome5がサポートする拡張API
History API
まず、大きな変更としてHistory APIが追加されました(http://code.google.com/chrome/extensions/beta/history.html ) 。履歴の検索などが可能なAPIが追加され、同時に chrome://history/ で表示されるページを拡張で置き換えることも可能になっています。
History APIを使った拡張として、History2 などがあります。
ファビコンの取得
manifest.jsonのpermissionsに "chrome://favicon/" と加えることで拡張からChromeが内部に持っているファビコンを扱うことができるようになりました。
データベース容量の拡大
manifest.jsonのpermissionsに "unlimited_storage" と加えることで拡張から扱えるデータベース容量が無制限になります。この指定がない場合や通常のウェブページからでは1つのドメインあたり5MBに制限されています。
Popupのデバッグ
BrowserAction、PageActionのアイコンから表示されるポップアップをWebInspectorでデバッグできるようになりました。アイコンを右クリックして、メニュー一番下の「ポップアップを検証」でデバッグできます。拡張開発者には嬉しい機能です。
シークレットモードでの拡張
Chrome 4ではシークレットモードの際はすべての拡張が無効でしたが、Chrome 5では任意の拡張をシークレットモードでも有効にすることが可能になりました。
未パッケージ拡張の読み込み
パッケージされていない拡張の読み込みが再起動後も維持されるようになりました。こちらも開発者には嬉しい機能です。
その他
そのほか、細かい変更として、拡張の一覧ページのデザインの変更や、インストール時に表示される注意書きがわかりやすくなりました(パーミッションに複数のサイトを指定すると「いくつかのサイト」とまとめていたのが、個別のドメインを表示するようになったなど) 。
ブックマークマネージャー
ブックマークマネージャーがタブで開くようになり、内部的に拡張機能として(つまり、HTMLベースで)実装されました。機能的にはエクスポートが可能になった以外に大きな変更はありません。一部(インポート・エクスポートなど)に先行実装APIを使用していますが、それ以外は通常の拡張として作られているので拡張のサンプルにもなります。
同期機能の強化
Chrome 4で追加されたブックマーク同期が強化され、Chrome 5ではテーマ、フォーム自動入力ルール、URL入力履歴についても同期できるようになりました。さらに、Chrome 6では拡張の同期、タブの同期、パスワードなども同期できるようになる予定です。
プラグイン
GoogleやMozillaを中心として、ブラウザの内蔵プラグインをより安全に拡張しようというプロジェクトが進行中で、その成果としてPepper と呼ばれるプラットフォームが登場しました。
Flashを内蔵
PepperをベースとしてFlashプラグインをChrome内部に持つようになりました。Chromeがアップデートされれば、同時にFlash Playerも更新されるのでユーザーがFlash Playerのアップデートする必要はなくなり、同時にFlashの安全性が向上しました[1] 。
プラグインの選択
about:plugins を開くとChromeが認識しているプラグインが表示されますが、ここで任意のプラグインを無効化することが可能になりました。例えば、デバッグ版のFlash Playerを使いたいといった場合は、内蔵のFlash Playerを無効化する、といったことが可能です。
ECMAScript 5サポート
ChromeのJavaScriptエンジンであるV8はECMAScript 5を積極的に実装しています。以下、Chrome 5で新たにサポートするECMAScript APIを紹介します。
Object.getPrototypeOf
引数に渡したオブジェクトのprototypeを取得する。一部のブラウザ(といっても実質IE以外)で実装されている __proto__ に相当します。
Object.getOwnPropertyNames
Object.keysと似ていますが、getOwnPropertyNamesは本来なら列挙されないプロパティ(配列のlengthなど)も取得できます。
Object.create
prototypeを指定して新しいオブジェクトを作るメソッドです。
ECMAScript 5ではオブジェクトのプロパティに対して、writable、enumerable、configurableという属性が追加されました。
writableはそのプロパティの値を書き換え可能であるか、enumerableはそのプロパティがfor inループで列挙されるかどうか、configurableはこれらの属性を書き換え可能であるかをそれぞれ真偽値で設定します。また、value、writableの代わりにget、setのAccessorを定義することも可能です。
Object.create
var nullObject = Object . create ( null );
console . log ( Object . getPrototypeOf ( nullObject ));
prototypeにnullを指定することでtoStringすら持たないオブジェクトを作ることができます。
Object.createと属性
object = Object . create ( Object . prototype ,{
a :{
value : 1 ,
writable : false ,
enumerable : false ,
configurable : false
}
});
object . a = 10 ;
object . b = 10 ;
console . log ( object . a );
console . log ( Object . keys ( object ));
console . log ( Object . getOwnPropertyNames ( object ));
Object.defineProperty、Object.defineProperties
既に存在しているオブジェクトに属性付きプロパティを定義できるメソッドです。prototypeを(比較的)安全に拡張することができます。
Object.defineProperty
if ( Object . defineProperty &&! NodeList . prototype . map ){
Object . defineProperty ( NodeList . prototype , 'map' ,{
value : ( function ( map ){
return function ( func , that ){
return map . call ( this , func , that );
}})( Array . prototype . map ),
writable : true ,
enumerable : false ,
configurable : false
});
}
document . querySelectorAll ( 'a[rel="next"]' ). map (
function ( a ){
return a . host ;
});
Chrome 6の計画
いつリリースになるかは明らかではありませんが、既に実装が進んでいる機能も多数あります。特に実装が進んでいて試すことができるものを中心にいくつか見ていきたいと思います。
なお、Chrome 6を(自己責任の元で)試すには、開発版のGoogle Chrome をインストールするか、最新のChromium をインストールする必要があります。またChromeは実験的な機能などを起動オプションを指定することで利用可能にするという方法を取っています。Windowsの場合、ショートカットのプロパティを編集して起動オプションを指定する方法が比較的手軽です。
Aero Peek
Aero PeekはWindows 7の機能であり、タスクバーのアイコンにフォーカスした際にタブのサムネイルを表示します。
図1 Aero Peek
当初はもっと早い段階でリリースされる予定でしたが、タブをいくつも開いていた場合の表示などに問題があるため、この機能のリリースが延期されました。現在はいくつかのタブをまとめるなど表示方法を検討中です。こちらは起動オプションで --enable-aero-peek-tabs を指定することで実際に試すことができます。
アプリケーションランチャー
こちらはChrome OSを見据えた機能の一つと思われるもので、Chromeの新規タブページにアプリケーションへのショートカットを表示します。また、新規タブページ自体もタブというよりもポップアップに近い形で表示することも可能です。
図2 App Launcher
このApp Launcherを試すには以下の起動オプションを指定します。最近の変更でオプションが変更されているのでご注意ください。
App Launcherの起動オプション
--app-launcher-new-tab --enable-extension-apps
--apps-panel --enable-apps --apps-debug
このアプリの登録方法は拡張機能とほぼ同じです。Chromeのインストールフォルダ内にサンプルが用意されており、そこから読み込むことができます。
サンプルのパス(Windows7の場合)
C:\Users\shogo\AppData\Local\Google\Chrome\Application\6.0.401.1\Resources\gmail_app
図3 App Panel, App Tab, App Windowの表示
このように、起動したアプリはOmniboxが省略され、よりシンプルなインターフェースになっています(注:現時点での実装がこうなっているだけで、この仕様で確定しているわけではありません) 。
現在はアプリの登録に数手間かかってしまいますが、将来的には簡単に登録できるようになると思われます。
拡張用Experimental API
Chrome拡張の実験的な新機能として、experimental API が提供されています。
こちらは起動オプションで --enable-experimental-extension-apis と指定することで利用可能になります。APIを利用する拡張を使うユーザーが個々にこの指定をしなければいけないので、Experimental APIを使った拡張を配布することは現実的ではありませんが、コンテキストメニュー やクリップボード のAPIなど魅力的な機能が提供されています。
まとめ
今回紹介したもの以外にも、縦置きタブ や、Cookie API、ダウンロードAPIなどなど、様々な機能が着々と実装されてきています。この機会に最新のChromeをお試しいただいて、Chromium Project へフィードバックされてみてはいかがでしょうか?