WebOS Goodies

WebOS の未来を模索する、ゲームプログラマあがりの Web 開発者のブログ。

WebOS Goodies へようこそ! WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。
Subscribe       

Opera の Web Developer Toolbar を試す

最近、Opera の Web Developer Toolbar という拡張機能(?)を使い始めたので、今日はそれをレポートしてみたいと思います。多くの機能が詰め込まれた、とても便利なツールバーです。これだけのものが JavaScript だけで実現できているのは驚異的ですね。なんというか、Opera フリークの魂を見た気がしました(笑)。いくつかスクリーンショットも掲載しましたので、読んでみてください。

インストール

Web Developer Toolbar は、その名のとおり Opera のツールバーセットアップとして実装されています。ですので、インストールは非常に簡単。Web Developer Toolbar のページ に行って「Install Web Developer Toolbar Setup」、「Install Web Developer Menu Setup」の 2 つのリンクをそれぞれクリックするだけです。必ず両方セットでインストールするようにしてください。

インストールすると、ツールバーが以下のように変更されます。

なお、スキンとして BreezeSkin, TTT Skin, KDE HighCrystal, Tango CL, I-Shilver, Expedition, Opera Standard Compact のいずれかをインストールすることで、 Web Developer Toolbar の各項目にアイコンが表示されるようになります。お好みでインストールすると良いでしょう。

当然ながら、既存のツールバーの設定を変更してしまうので注意してください。なじみのボタンが消えてしまったりして、最初は戸惑うかもしれません。ツールバー上の右クリックメニューから「Customize」を選び、「Buttons」タブから必要なボタンをドラッグ&ドロップで復活できます。もしツールバーをインストール前の状態に戻したければ、以下のようにしてください。

  1. メインメニューから [Tools]-[Preferences] を選択。
  2. 「Advanced」タブをアクティブにする。
  3. 左のリストから「Toolbars」を選択。
  4. 右の「Toolbar setup」で元の項目を選択。
  5. 同様に、「Menu setup」でも元の項目を選択。
  6. 「OK」ボタンを押す。

アンインストール

アンインストールの方法も念のためご紹介しておきます。Web Developer Toolbar は単なる Toolbar Setup なので、単にそれを削除すれば OK です。手順は以下のとおりです。

  1. メインメニューから [Tools]-[Preferences] を選択。
  2. 「Advanced」タブをアクティブにする。
  3. 左のリストから「Toolbars」を選択。
  4. 右の「Toolbar setup」で「Web Developement V1.20」を選択し、「Delete」ボタンをクリック。
  5. 同様に、「Menu setup」でも「Web Development V1.20」を選択し、「Delete」ボタンをクリック。
  6. 「OK」ボタンを押す。

使ってみる

それでは、Web Developer Toolbar を使ってみましょう。と言っても、非常にたくさんの機能があるので、とても全部はご紹介しきれません。まずは Web Developer Toolbar に並んでいるボタンをざっとご説明します。

Display
ボタンをクリックすると Author mode と User mode が切り替わり、右の▼をクリックするとメニューが表示されます。メニューはメインメニューの [View]-[Style] と重なる項目が多いですが、CSS 関連の機能が追加されています。
Forms
フォームに関する機能を集めたメニューです。POST/GET メソッドの切り替え、隠しフィールドの表示・編集などといった機能があります。
Images
画像関連のメニューです。画像表示モードの切り替え、画像情報の取得などの項目があります。
Page Info
ページの HTML に関する詳細情報を表示する機能を集めたメニューです。DOM/CSS ツリーの表示、JavaScript による加工後の最終的な HTML ソースの表示、QirksMode(下位互換モード)の確認など、多くの機能があります。
Utils
正規表現検索、HTML の加工、JavaScript シェル、文字列のエスケープ処理などといった便利な機能を集めたメニューです。
Reset
Web Developer Toolbar の機能の中には、ページ内容を加工するものがあります。このボタンを押すと、それらを元に戻します。ページのリロードを行うのでフォームに入力したデータなどは消えてしまいます。ご注意を。
Validate
各種バリデータやリンクチェックなどを手軽に利用できるようにするメニューです。
Spces
Web 開発関連の各種資料へのリンクを集めたメニューです。
id:xxxx
クリックすると、User Agent が順番に切り替わります。
HTML
クリックすると、ページの HTML ソースを確認できます。
CSS
クリックすると、そのページで使用している CSS を確認できます。
ALT
クリックするとそのページの RSS を購読しようとするようですが・・・よくわかりません。(^^ヾ
InFF
Firefox で同じページを開きます。
InIE
Internet Explorer で同じページを開きます。
PageRunk
現在表示しているページの Google PageRank を表示します。
Tidy HTML
クリックすると、Tidy HTML にページソースを転送します。ただ、私が試したところうまく動きませんでした。
Time〜
ページの表示にかかった時間です。

いや、たくさんありますね。ざっと説明するだけでも大変です(^^;

それでは、代表的な機能をいくつかピックアップして、スクリーンショットとともにご紹介します。

CSS の表示

[Display]-[View Computed CSS for Elements] を選択すると、マウスカーソルの下にある要素に適用されているスタイルがポップアップで表示されます。Ajax な感じですねー(^^)

DOM/CSS Inspector

[Page Info]-[DOM/CSS Inspector] を選択すると、ページの DOM ツリーを階層的に表示するページが開きます。CSS の表示と同様にマウスオーバーで表示することもできます。

フォームの隠しフィールドを表示

フォームの隠しフィールドをこのように表示できます。値を編集して送信することも可能です。フォームのデバッグなどに使えそうですね。

JavaScript シェル

インタラクティブに JavaScript を実行できるシェルです。JavaScript の学習に最適です。

その他の Tips

ツールバーの表示・非表示

アドレスバーの右に表示されている顔のアイコンをクリックすると、Web Development Toolbar の表示・非表示を切り替えられます。普段は隠しておいて必要なときだけ表示させる、という使い方ができてとても便利です。

ツールバーの横にはみ出した部分の対処

Web Development Toolbar は項目数がとても多いので、ブラウザの横幅をかなり広げないと全部の項目が表示できません。そこで、ツールバーが横にはみ出したときは残りの項目をメニューで表示するように設定するとよいでしょう。設定方法は以下のとおりです。

  1. Web Development Toolbar の右クリックメニューから [Customize] を選択。
  2. 「Wrapping」を「Show extender menu」に変更。
  3. 「OK」ボタンを押す。

ツールバーの空白部分を詰める

標準状態だと、アドレスバーの右側に大きな空白が空いてしまいます。ステータス表示の領域がここにあるからなのですが、慣れてきたら削除してしまってもよいと思います。削除の方法は、空白の部分で右クリックして、メニューから「Remove from toolbar」を選択すれば OK です。

以上、駆け足ですが Opera の Web Developer Toolbar をご紹介しました。Web サイトの開発者はもちろん、一般ユーザーでも便利な機能がたくさんありますので、ぜひ試してみてください。

関連記事

この記事にコメントする

Recommendations
Books
「Closure Library」の入門書です。
詳しくはこちらの記事をどうぞ!
Categories
Recent Articles