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
ツイート
最新記事
- 脱着が簡単なスマホショルダー!ケースとスマホの間に挟むストラップカード付き!
- マルチ充電ケーブル4in1!PD充電対応で急速充電できる!
- 巻き取り式片引きタイプのUSB-Cケーブル!PD60W充電対応であっという間に充電が終わる!
- キーホルダー型で持ち運びに便利!高速データ伝送にも急速充電にも対応!
- デスクで正座・あぐら・片膝立て!様々な座り方が出来るバランスチェア!
- 3in1ワイヤレス充電器!取り外せるモバイルバッテリーが付属!
- 超薄いモバイルバッテリー!iPhone背面に貼り付けて使える!
- コンセント搭載の小型モバイルバッテリー!折りたたみ式プラグで持ち運びも簡単!
- MacBookやiPad用のクラムシェルスタンド!もちろんWindowsパソコンでも!
- ベッドに寄りかかるときに使ってほしい三角クッション!ポケット付きでスマホを入れておける!
- 超軽量な背もたれクッション!持ち運んで家中どこでもくつろげる!
- 高反発な三角クッション!ソファやベッドで背もたれとして使える!
- 幅広のフットレストで快適にパソコン作業を!無段階に調節できるチルトフットレスト!
- シリコン編組ケーブルでながーく使える!タブレットやパソコンの充電に!
- 縦型ノートパソコンスタンドでスマートにパソコンを置いておける!スロット幅は簡単に調整できる!
- 家庭やオフィスに最適な木製の足踏み台!血流を良くしてリフレッシュにも!
- 足ふみ運動でリフレッシュ!パソコン作業にも最適な動くフットレスト!
- 足裏マッサージでリフレッシュ!デスク下を快適に過ごせるフットレスト!
- デスクワークの姿勢を改善!足を置くためのフットレスト!
- 気分に合わせて選べるアタッチメントホルダー!ストラップやネックストラップをスマホに手軽に取り付け!
- カラバリ豊富なスマホベルト!スマホ背面に貼り付けるだけ!
- 簡単取り付け簡単利用!高い粘着性能で安心して使えるスマホリング!
- スマホの充電もできるヘッドフォンスタンド!ケーブルホルダー付きで整理整頓できる!
- スマホサイズで携帯便利な自撮り棒!わずか140gの超軽量設計!
- ゲームを楽しむだけで無く、おしゃれにも使えるカラバリ!有線でも無線でも使えるゲームコントローラー!
- 小さく運ぶ、大きく使う!移動中も効率的に休める枕!
- 柔軟なケーブル管理!すべてのケーブルが絡まないようにする結束バンド!
- 一瞬でくるっとまとまる充電ケーブル!急速充電も高速データ伝送も対応!
- 小型化とスタイルの融合!テンキーレスで一日ゲームをするのも快適!
- 太めのケーブルも使えるマグネット式ケーブルクリップ!6個セットで家中どこでも使える!