Opera Softwareは9月18日、同社事業や最新技術に関する説明会を実施。PCや携帯電話、PDA、ゲーム機など、各種プラットフォームに対応した同社製Webブラウザ「Opera」を中心に、さまざまなトピックスが紹介された。

ここでは、説明会の中で触れられた、Operaに付属のWebデバッガ「Opera Dragonfly」の最新機能について紹介しよう。

Webデバッガ「Opera Dragonfly」

説明を行ったOpera Software International AS, Web EvangelistのDaniel Davis氏

Opera Dragonflyは、HTML、CSS、JavaScriptなど、WebページのUI周りのコードに対する修正/デバッグ機能を備えた開発ツールだ。本誌読者には、Firebugと同じような機能を提供するツールと説明したほうがわかりやすいだろうか。

同ツールは、現在alpha 3というステータスにあるものの、Opera 9.5以降のすべてのOperaにデフォルトで組み込まれている。Opera上部のメニューから[ツール]→[詳細ツール]→[開発者用ツール]と選択するだけで、画面下部に現れ、すぐに利用できる。

Opera Dragonflyの画面。青枠の部分のソースコードが下部に表示されている

Opera Dragonflyでは、Webページ表示部分の各要素をクリックしてソースコードの該当個所に飛んだり、CSSやHTMLの値を変更してそれをWebページ表示部分に反映させたりといったことはもちろん、JavaScriptのソースコードにブレイクポイントを設定し、ステップイン、ステップオーバー、ステップアウトといった処理を行うことも可能だ。「ネットワーク」タブをクリックすれば、画像ファイルやhtml/css/jsファイルなどの取得にかかった時間を一覧することもできる。

ネットワークタブでは、各要素の取得にかかった時間が表示される

説明会で、現在のOpera Dragonflyの最も特徴的な機能として挙げられたのが「リモート・デバッグ」である。これは主に、携帯電話やPDA、ゲーム機などの組み込み機器向けのWeb UIを開発/修正するためのものだ。

開発段階で組み込み機器のUIを確認するうえではエミュレータを使うことが多いが、エミュレータで実機の環境を完全に再現するのはやはり難しいため、エミュレータでテストしたWebアプリを実機で確認しようとすると想定どおりに動かなかったり、色味が変わってしまったり、といった問題が生じるケースも少なくない。そうした問題を解決するために開発されたのがリモート・デバッグだ。同機能を使うと、開発用の端末とテスト用の実機を直接連携させ、WebアプリケーションのUIを実際の端末上で確認することができる。開発端末で行った変更もリアルタイムに反映されるため、極めて効率的に開発作業を進めることが可能だ。

以前の展示会で披露されたリモート・デバッグ機能のデモ。PC上のOpera Dragonflyで携帯電話向けWebアプリケーションのHTMLを変更する(aqua→fuchsia)と、携帯電話で表示していたWebアプリケーションの色がその場で変わった

説明会では、同機能の使い方も紹介。PCとPCをつないだデモではあったが、OperaからIPアドレスやポートを指定するだけで、リモートの端末にアクセスできる様子が示された。

まずは開発側の端末でOpera Dragonflyを呼び出し、「設定」タブの「リモート・デバッグ」で開放するポート番号を指定	次にテスト側(アプリケーションを閲覧する側)の端末でOperaを起動し、アドレス欄に「Opera:debug」と入力
すると、IPアドレスとポート番号を入力する画面になるので、ここで開発端末の値を指定する	これだけで設定は完了。開発端末でHTML等を変更すると、それがテスト端末に反映される(ここでは「Opera Mini 5」を「Opera Mini 5!!!」に変更している)

なお、Opera Dragonflyという機能名の由来だが、トンボ(Dragonfly)が肉食性の昆虫であり、カ、ハエ、チョウ、ガなどの虫(Bug)を食べることから、デバッグ機能にふさわしい名前として採用されたという。

Opera Dragonflyには、ここで紹介した機能以外にも便利な機能が多数用意されている。簡単に利用できるので、Web開発者の方々はぜひ一度試してみてほしい。