Opera Mobileには、パソコン版OperaとWi-Fi経由で接続してページの構造やスクリプトの動作を解析するリモートデバッグ機能も搭載されている。単にデバッグするだけならパソコン版単体でも可能だが、Opera Mobileと連携すれば、パソコン版では正しく表示できないページも解析できるぞ。

デバッグ機能は、Web開発者だけでなく一般のユーザーにも使い道がある。例えば、ページ上のファイルの読み込み時間を表示するネットワーク統計機能を使えば、無駄に読み込みに時間がかかっている項目のURLを調べてurlfilter.iniに登録する作業をスムーズに行なえる。また、不要な要素を非表示にしたりするユーザースタイルシートを自作するときは、ページの階層構造を表示する機能で、対象要素を指定するためのIDやクラス名を調べるといいぞ。

Wi-Fi経由でパソコン上のOperaに接続するために、パソコンのローカルIPアドレスを知っておく必要がある。「ファイル名を指定して実行」で「cmd」を実行するなどして、コマンドプロンプトを起動しよう。

「ipconfig /all」というコマンドを入力し、「IP Address」という箇所の右に表示される「.」区切りの4つの数字を覚えておこう。

パソコン版Operaを起動したら、メニューの「ページ」→「開発者用ツール」→「Opera Dragonfly」を実行しよう。

ウィンドウ下部にこのような画面が表示されたら、右のツールバーの「リモートデバッグの設定」をクリックする。

このような画面がポップアップ表示されたら、「適用」をクリックしよう。

次に、Opera Mobileをパソコンと同じWi-Fiネットワークに接続して、「opera:debug」というURLにアクセスしよう。このような画面が表示されるので、「IPアドレス」の欄に先ほど調べておいたパソコンのIPアドレスを入力し、「接続」ボタンを押す。

次に、解析したいページにアクセスしよう。通常状態でアクセスした場合と違い、ページ上をタップすると、このようにタップした箇所が青くハイライトされるぞ。

パソコン側のDragonflyの「ドキュメント」の欄に、Opera Mobileで表示されているページのHTMLの要素の階層構造が表示され、タップによる選択に連動して該当要素が選択される。また、パソコン側でツリー項目をクリックした場合は、Opera Mobile側のハイライト箇所に反映される。自作CSSを適用したい箇所を選択して、その要素や上位階層の要素に「id=""」や「class=""」という属性が記述されていないかを探そう。

「Opera Mobileのユーザースタイルシートでサイトの見栄えを変更」の記事を参考にユーザースタイルシートを作成して、「id=""」の「""」内に書かれていた内容の前に「#」を付けた文字列や、「class=""」の内容の前に「.」を付けた文字列に続いて「{}」を書き、その中に当該要素に適用したいスタイルシート定義を記述しよう。複数の条件を「,」で区切って書けば、同じ定義をいっぺんに適用できるぞ。

表：ページの見やすさを改善するスタイルシート定義の一例

スタイルシートで「display:none」を指定することで、このようにサイドバーなどをごっそり非表示にしてしまえたぞ。スタイルシートファイルへの変更は、ページをリロードするだけで反映されるので、うまくいかなかったら結果を確認しながら定義を調整しよう。

ページ上の不要コンテンツのURLを特定してコンテンツブロックに追加したければ、Dragonflyの「ネットワーク」の画面を表示してみよう。表示中のページに組み込まれているファイルが、読み込みにかかった時間のタイムラインと共に表示されるぞ。

不要と思われる項目をクリックして詳細を表示し、URLをコピーしよう。

「Opera Mobileのコンテンツブロック機能で邪魔なブログパーツなどを除去」の記事を参考に「urlfilter.ini」を設置し、コピーしたURLを貼り付け、URL中の変動すると思われる部分を「*」に置き換えて保存しよう。