Opera Presto 2.2 と Opera 10 概観

By saito

はじめに

2008 年の終わりが迫ってきた今、Opera から一足早いクリスマスプレゼントのお知らせをいたします。改良された新 Opera Presto 2.2 レンダリングエンジンのお披露目です。開発チームの努力によって、新エンジンは速度、安定性、Web 標準への準拠などすべての分野にわたって改良がなされました。

この文書は、先のバージョン 2.1 以降に施された主要な改良点を、例示とあわせて紹介するものです。Presto 2.2 エンジンはリリースされたばかりの Opera 10 アルファ版で使われていますので、実際にダウンロードしご自身でお試しいただけます。ぜひこの機会に新技術の数々を試し、コメントをお寄せください。

このアルファ版は将来公開される Opera 10 のすべての機能を備えたものではない点に留意してください。Opera 10 で使われる Opera Presto 2.2 レンダリングエンジンが初めて一般公開されたので、新しい Web 技術のサポート具合をご自身でお試しいただけるようになりました。また、以下の例示は Opera 10 アルファ版でないと動作いたしません。

取り上げる項目

• Web Font：Web におけるタイポグラフィが容易に
• RGBA と HSLA による透過
• Selectors API
• SVG の改良
  • SVG での FPS 指定
  • SVG での Web Font
• 改良型 Opera Dragonfly
• Acid3 テスト：100/100!
• 要約

実例で使われているコードをダウンロードいただけます。

謝辞：ここで使われている例示は、われわれの同僚の手によるものです：Selector API は Lachlan Hunt、Web font は Andreas Bovens、SVG は David Vest と Erik Dahlström に感謝いたします。

Web Font：Web におけるタイポグラフィが容易に

長年にわたって Web デザイナーを悩ませてきた大問題の一つが、Web サイトで使えるフォントの制約でした。システムに必要なフォントがインストールされていれば、Web デザイナは CSS によって指定し活用出来ますが、サイトの訪問者の環境に希望のフォントがインストールされているかを確かめる術はありませんでした。主要なプラットフォームで共通にインストールされていることが確実なフォントの数というのは極めて少なく、そのためプラットフォームごとに明朝、ゴシックに別のフォントを指定しデザインの意図が実現されているかを検証する必要がありました。

こうした問題は Web Font の導入によって解決されようとしています。Web Font とは CSS 3 モジュール で、サイトの訪問者のコンピュータに指定されたフォントが存在しない場合、あらかじめ指定しておいたダウンロード元からフォントを入手して使うよう指示しておける仕組みです。記述法は以下の通りです：

@font-face {
  font-family: "My font gothic";
  src: url("http://www.myweb.com/fonts/myfont.ttf") format("truetype");
}

このように @font-face 中にカスタムフォントの指定を行います（他のフォント関連の指定よりも前にこのスタイル指定を行う必要があります）。利用するフォントについて一度決めてしまえば、以下のようにスタイルシート中で使うことが出来ます：

p {
  font-family: "My font gothic";  
  ...
}

Andreas が Web Font を試せる例を作成しました。この例では Forgotten Futurist と Minya Nouvelle を利用しましたが、 Free Font Manifesto page にはその他のフリーなフォントの一覧があります。より複雑な作例は Web Fonts Demo page を参照ください。

RGBA と HSLA による透過

Presto 2.1 でも CCSS 3 の opacity（不透過度）属性はサポートされていました。要素の不透過度を div { opacity: .7; } のように指定可能でした。

Presto 2.2 ではこれに加えて HSL の値としての色指定にも対応しました。HSL による色指定は、結果の予想が困難である RGB による色指定よりも自由度があり（HSL によって明るい色調を得るには単独で明るさを変えられます）、ハードウェアの制約にとらわれにくくなります。HSL による色指定は次のように行います：

div { background-color: hsl(240, 100%, 50%); }

理論上 Opera Presto 2.1 は次のような RGB 色指定に対応していました:

div { background-color: rgb(255, 0, 0); }

これらに加え、Opera Presto 2.2 はページの透過をより容易にする手段に対応しました。HSL と RGB の第 4 の引数としてのアルファ透過です。すなわち RGBA と HSLA の値に対応いたしました。従来の opacity 属性と同様に、HSLA と RGBA 透過性は 0 から 1 の値で定義されます。0 は完全な透過、1 は完全な不透過となります:

div { background-color: hsla(240, 100%, 50%, 0.5); }

div { background-color: rgba(255, 0, 0, 0.5); }

これに少しばかり JavaScript を組み合わせ、DOM スクリプトで 1 つの CSS の値を変化させてやれば、表示/非表示時に動画的効果を加えるといった楽しいことも可能となります。その際、opacity を用いた透過はすべての子要素に適用され、HSLA や RGBA は指定した要素のみに適用される点に留意してください。

CSS 3 の構文を使った例で違いをご覧ください。以下の 2 つは同一の要素を使っています。

<p id="caption">Lovely trees</p>
<img src="trees.jpg" alt="A nice tranquil picture of some trees" />

画像とキャプションに注目してください。最初の例では CSS は以下のようになります。

#caption {
  position: absolute;
  font-size: 2em;
  top: 10em;
  left: 1.5em;
  background-color: rgb(255, 0, 0);
  opacity: 0.3;
  color: #222;
}

直にお分かりかも知れませんが、background-color と opacity 要素にご注目ください（opacity の例）。先に言及した点、すなわちテキストと背景が 30% の透過になっているのに気付かれるでしょう。これによって画像は背景との対比によって際立ちますが、キャプションのテキストが読みにくくなってしまいます。

問題を解決するために、RGBA を用いて背景に色だけでなくアルファ透過の値を指定します。第二の例では、background-color に RGB と opacity 属性の組み合わせに代わって RGBA 指定のみを行います。

background-color: rgba(255, 0, 0, 0.3);

RGBA を使った例でお分かりの通り、背景色だけが透過処理されるのでキャプションが読みにくくなることはありません。

既存の background-color を同等の HSLA に置き換えると次のようになります。

background-color: hsla(0, 100%, 90%, 0.3);

HSLA の例で確認するか、実例で使われているソースをダウンロードしてご覧ください。

ちなみに、Opera Presto 2.2 はテキストの透明度を指定する color: transparent の値にも対応しています。

後程紹介する簡略ながらも有益な SVG の改良の項に関連して言うと、RGBA と HSLA は SVG でも使えます。これは Opacity とは別に fill-opacity と stroke-opacity を使うことによって実現されます。

Selectors API

Selectors API を利用して DOM 要素の選択を簡単に出来るようになりました。

以下の例をご覧ください。ドキュメント中から alert という class を持つすべての要素を選択します。

document.querySelectorAll(".alert");

この例ではドキュメント中から最初に出現する div 要素を選択します。

document.querySelector("div");

JavaScript になじみのない方でも、CSS に似た構文により容易にお使いいただけます。

上掲のように、Presto 2.2 では querySelector() と querySelectorAll() の 2 つをサポートしています。前者は DOM ツリー中で最初に該当する要素を返し、後者は NodeList として該当する要素のすべてを返します。現行の規格は Document、Element と DocumentFragment ノードに関する手段を定義していますが、われわれの現時点での実装は Document と Element ノードのみに対応しています。

querySelector() は最初に該当する要素を抽出する際に有用で、querySelectorAll() よりもそうした場合には効率的です。

従来の API と比較してどれほど簡単になるか、以下の HTML で比べてみましょう。

<ul id="fruits">
  <li><input type="checkbox" name="fruit" value="apples"> Apples</li>
  <li><input type="checkbox" name="fruit" value="oranges"> Oranges</li>
  <li><input type="checkbox" name="fruit" value="bananas"> Bananas</li>
  <li><input type="checkbox" name="fruit" value="grapes"> Grapes</li>
</ul>

利用者がこれらの項目すべてにチェックを入れたとします。従来の API ではチェックの入っている input 要素のすべてを順に調べる必要がありました。

var fruits = document.getElementById("fruits");
var checkboxes = fruits.getElementsByTagName("input");
var list = [];
for (var i = 0; i < checkboxes.length; i++) {
  if (checkboxes[i].checked) {
    list.push(checkboxes[i]);
  }
}

新しい API を使うと、上記の操作はたった1行のコードに減らせます。

var list = document.querySelectorAll("#fruits input: checked");

このコードは、利用者がチェックを入れたすべての input 要素を含むノードを返します。このスクリプトによってお望みの動作が可能となります。

SVG の改良

Opera Presto 2.2 では SVG 対応に関してもいくつかの改良が加えられました。この項ではそれらを概観します。

SVG での FPS 指定

JavaScript によって SVG アニメーションの速度（秒あたりのフレーム数 = FPS）をコントロール出来ます。Web ページ中の最上位 svg 要素に ID を指定し、getElementById を使ってその要素を選択した後、targetFps 属性を増減させます。例えば Erik が作成した例示では、2 つのボタンに以下のコードが付与され、アニメーションの速度を増減出来ます。

function incFps() {
  svg = document.getElementById("o").contentDocument.documentElement.targetFps++;
}

function decFps() {
  svg = document.getElementById("o").contentDocument.documentElement.targetFps--;
}

現行の FPS の値に currentFps 属性を使ってアクセスすることもできます。Erik の SVG FPS の例 あるいはこの文書に付属する zip でお試しいただけます。

targetFps は（ソフト、ハードに依存するという意味で）少々不正確ですが、アニメーションの速度を一定程度コントロール出来ます。ただし DOM の操作に際して再描画の頻度は変化しない点にご注意ください。宣言的アニメーションにのみ有効となります。

SVG での Web Font

Web Font だけでも十分素晴らしいのですが、われわれは SVG font にも対応しました。これによって Web Font と同じようにして SVG font ファイルを使って（HTML と SVG ファイル中の）CSS でテキストの装飾が可能となりました。以下の例をご覧ください。

@font-face {
  font-family: "My SVG font";
  src: url("http://www.myweb.com/fonts/myfont.svg#myFont") format("svg"); 
  font-style: normal, italic;
  font-weight: 500;
}

Erik の作成した SVG における Web Font の例で SVG 中でのテキスト装飾法をご覧いただき、コードを読んで動作原理への理解を深めてください。UbuntuTitleBold が SVG font で他は TrueType font となっております。

従来の普通の HTML でも動作することを修正版 Web Font 実例で確認してください。SVG font を CSS で呼び出し HTML を装飾しています。

SVG font は font や font-face 要素を使って SVG ファイル内で定義し、個々のグリュフは glyph 要素でマッピングされます。複雑そうに思えるかも知れませんが、そんなことはありません。フォント形式を変換してくれる FontForge というフリープログラムが使えます。

Erik の作成した UbuntuTitleBold font の例にあるソースを読み、SVG font がどんなものかご覧ください。

整形された XML であるので、DOM を使ってクライアント側でフォントを操作出来るのも SVG font の素晴らしい点です。誰でも Web アプリケーションを書くことによってフォントを操作出来ますし、サーバーサイドでそこからカスタムした TrueType font ファイルを作成することが可能です。

改良型 Opera Dragonfly

以前 Dev.Opera で紹介して以来、多くの素晴らしい新機能が Opera Dragonfly に付け加わりました。ぜひ以下の新機能をお試しください。

• ネットワークタブ：未完成の機能ですが、サーバ、クライアント間の HTTP 通信を検査することによって、Ajax アプリケーションのデバッグに大変役立つことでしょう。
• DOM 編集：DOM 編集への対応は Opera Dragonfly Alpha 3 の目玉の 1 つです。属性とテキストノードをリアルタイムに編集、追加、削除出来るモードがあります。このモードは、操作したい属性、値やテキストノードをダブルクリックして使います。もう 1 つのモードは、新規の DOM ノードを追加する際などに使うフリーフォーム編集です。要素のタグをダブルクリックすると、その要素全体と子要素がフリーフォーム編集の対象となります。前者のモードには、エンター/リターンキーを押してもフォーカスが編集状態のままになるという既知の問題がありますが、修正され次第自動修正いたします。

Opera Dragonfly に関する最新情報は Opera Dragonfly blog でご覧いただけます。

Acid 3 テスト：100/100!

今年前半、Acid 3 テスト で 100/100 を出す Opera WinGogi を公開しました。今後 Opera Presto 2.2 を有するすべての Desktop ビルドがこの結果を出すことになります。

要約

テスト版 Opera 10 アルファと新レンダリングエンジン Opera Presto 2.2 のお披露目をお楽しみいただけたでしょうか。今後のさらなる改良にご期待ください。次のリリースをより良いものとするため、感想をお聞かせください。

他の有用なリンク：

• チェンジログ：更新を網羅したリストはこちら。
• Opera Presto 2.1 - Web standards supported by Opera’s core：一つ前のレンダリングエンジン Opera Presto 2.1 の対応している Web 標準に関する Dev.Opera の記事。

This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.