Opera Mobileのリモートデバッグ機能で上級機能の設定を補助 特集その7
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!important; | 要素を非表示にする |
---|---|
font-size:large!important; | 文字サイズを大きくする。「x-large」や「xx-large」に変えれば、さらに大きくできる。 |
font-size:small!important; | 文字サイズを小さくする。「x-small」や「xx-small」に変えれば、さらに小さくできる。 |
color:white!important; | 文字色を変更する。使用できる色名は、ここにまとめられている。 |
background-color:black!important; | 背景色を変更する。 |
スタイルシートで「display:none」を指定することで、このようにサイドバーなどをごっそり非表示にしてしまえたぞ。スタイルシートファイルへの変更は、ページをリロードするだけで反映されるので、うまくいかなかったら結果を確認しながら定義を調整しよう。
ページ上の不要コンテンツのURLを特定してコンテンツブロックに追加したければ、Dragonflyの「ネットワーク」の画面を表示してみよう。表示中のページに組み込まれているファイルが、読み込みにかかった時間のタイムラインと共に表示されるぞ。
不要と思われる項目をクリックして詳細を表示し、URLをコピーしよう。
「Opera Mobileのコンテンツブロック機能で邪魔なブログパーツなどを除去」の記事を参考に「urlfilter.ini」を設置し、コピーしたURLを貼り付け、URL中の変動すると思われる部分を「*」に置き換えて保存しよう。
関連記事
Opera Mobileのターボ機能でページ読み込みを高速化 特集その5
Opera Mobileのコンテンツブロック機能で邪魔なブログパーツなどを除去 特集その2
Opera Mobileの上級カスタマイズの準備をしよう特集その1
Opera Mobileの隠し設定を編集しプロキシサーバを使用する 特集その4
Opera Mobileのサイト別設定機能でJavaScriptやモバイル表示の有無を制御 特集その3
Opera Mobileのユーザースタイルシートでサイトの見栄えを変更 特集その4
Opera Linkでパソコン版OperaとOperaMobileのデータを同期 特集その3
Opera MobileにoAutoPagerizeを導入して「次のページ」を自動読み込み 特集その6
PrivoxyならOpera Mobileより確実にモバイル版とパソコン版を振り分け可能 特集その3
2011年08月05日13時19分 公開 | カテゴリー: ネット情報活用 | キーワード:特集 | Short URL
ツイート
最新記事
- 気分に合わせて選べるアタッチメントホルダー!ストラップやネックストラップをスマホに手軽に取り付け!
- カラバリ豊富なスマホベルト!スマホ背面に貼り付けるだけ!
- 簡単取り付け簡単利用!高い粘着性能で安心して使えるスマホリング!
- スマホの充電もできるヘッドフォンスタンド!ケーブルホルダー付きで整理整頓できる!
- スマホサイズで携帯便利な自撮り棒!わずか140gの超軽量設計!
- ゲームを楽しむだけで無く、おしゃれにも使えるカラバリ!有線でも無線でも使えるゲームコントローラー!
- 小さく運ぶ、大きく使う!移動中も効率的に休める枕!
- 柔軟なケーブル管理!すべてのケーブルが絡まないようにする結束バンド!
- 一瞬でくるっとまとまる充電ケーブル!急速充電も高速データ伝送も対応!
- 小型化とスタイルの融合!テンキーレスで一日ゲームをするのも快適!
- 太めのケーブルも使えるマグネット式ケーブルクリップ!6個セットで家中どこでも使える!
- クランプで手軽に設置できるケーブルトレー!使い方によって小物入れとして使うことも!
- 配線を整理してスッキリ!デスク裏に設置する布製ケーブルトレー!
- 液晶ディスプレイの上を小物置きに!設置も取り外しも簡単なディスプレイボード!
- 照明の常識が変わる究極のモニターライト!自動調光で常に最適な明るさ!
- 狭いデスクを広々使う!可動域の広いモニターアーム!
- 大きな文字で見やすいデジタル時計!壁掛け時計としても置き時計としても!
- 3in1のヘッドホンスタンド!USBハブや 3.5mmオーディオ機能も!
- ゲームやテレワークを快適に!目に優しい設計のモニターライト!
- 便利なUSB電源のPCスピーカー!Bluetooth接続にも対応!
- 高さと向きを自由に調整可能!様々なゲーム周辺機器を収納できるスタンド!
- 安定性抜群!スマホを安定して置いておける折りたたみ式のスマホスタンド!
- 片手で脱着できるスマホホルダー!ダッシュボードでもエアコン送風口でも!
- AUX経由で音楽再生!Bluetoothでワイヤレスに再生できる!
- 小さい空間のあらゆるところで空気を浄化!プラズマクラスター搭載のコンパクトな空気清浄機!
- 2台の機器を立てて収納できるクラムシェルスタンド!重量感があるので安心して置ける!
- 超スリムで持ち運びも簡単!ノートPCを最適な角度に出来るスタンド!
- ボタン1つで締めるも緩めるも手軽に!シンプル操作で高精度作業!
- 最大8台同時充電可能!スマホスタンド付きの電源タップ!
- 一台6役の猫足型電源タップ!コンセントもUSBポートもこれ一台!