KOJIKA17

WebデザイナーのためのOperaの15の便利機能

私自身凄く好きなブラウザ、Opera。私はOperaがないとWeb制作が行えません。
そこでWebデザイナーにとって、Operaの便利な機能をまとめてみました。
これから紹介する機能はほぼ標準で搭載されているため、Opera(現バージョン11)をインストールするだけでほとんどの機能を使用することができます。

01.マウスジェスチャー

2001年にOperaが標準搭載したことによって、広く知られることになったこの機能。
マウスの動きによって、ブラウジングすることができます。
マウスを多様する方にとっては検索スピード、作業スピードが向上するかもしれません。

02.アドレスバー検索

アドレスバーから直接ウェブ検索が行えます。
例えばアドレスバーに「g opera」と入力すると、Googleで「opera」という単語が検索されます。
また「y opera」だと、Yahoo!で検索。「b opera」だと、Bingで検索できます。

さらにこのアドレスバー検索には拡張できます。
例えば、Twitterの検索フォームで右クリック→[検索の作成]をクリックし、キーワードを「t」と設定すれば、アドレスバーに「t opera」と入力するとtwitterで「opera」という単語を検索できるようになります。

03.強力なテキスト選択

Webサイトを閲覧していると、分からない言葉、外国語など出てくることがあると思います。
その場合、その気になるテキストを選択して、右クリックを押して下さい。
下記の項目をクリックすることにより、コピー&ペーストをせずに、目的の情報を得ることができます。

  • データベースでの検索(検索エンジンを選べる)
  • 辞書(YAHOO!辞書)
  • 百科事典(Wikipedia)
  • 翻訳(YAHOO!Babel Fish)

さらに、リンクの張られていないURL。例えば
http://kojika17.com
のようなURLの場合も、URLのテキストを選択。
右クリック→[ウェブアドレスに移動]をクリックすると、そのページに移動することができます。

04.ブックマーク

Internet Explorerでいうところの「お気に入り」。
ただブックマークを登録する際に「ニックネーム」を入力することができます。
例えばニックネームを「kojika」とすると、アドレスバーに「kojika」と入力すれば、そのページに移動できるようになります。
Webデザイナーの方だとブックマークは多くなりがち、よく使うサイトをニックネーム登録しておけば、大量のブックマークから探すことなくアドレスバーから瞬時に目的のページに行くことが可能です。
もちろんFire Foxでいうところのブックマークツールバーも搭載しているので、クリックでページに移動することもできます。

05.メモ

Operaでメモをとっておくことができます。
例えば忘れがちなDOCTYPEやCSSリセット、IEのハックなどをメモとして残すことができます。

「わざわざOperaのメモ帳に記載しておく必要あるの?」と言われそうですが、次のOpera Linkを使うとこの機能は重要になります。

06.Opera Link

Opera Linkを使うと、ブックマークとメモやスピードダイヤルをクラウド化、同期することが可能になります。
またWeb上の「My Opera」にアクセスするとOperaブラウザでなくても、ブックマークやメモを見ることができます。
環境の違うPCで作業しなければならなくった場合、会社と自宅でブックマークを同期したい場合など使い方は、広がります。

07."ファイルを開くアプリケーション"

Webデザイナー、コーダーにとって地味に役立つこの機能。
Webサイトのコーディングを確認する場合、複数ブラウザで確認しなければなりません。
その場合、ブラウザをそれぞれ立ち上げて、ひとつのURLをコピペで検証・・・

Operaの場合は検証したいサイトで右クリック→[ファイルを開くアプリケーション]で検証したいブラウザをクリックして下さい。
そのブラウザが立ち上がり、URLもコピペすることもなく、Webサイトを確認することができます。

08.ページ情報

仕事でWebサイトをリニューアルする時、現状のサイトを把握する場合。
サイトが気になってソースを覗く場合。

そんな時に「ページ情報」を重宝します。
ページ情報には

  • title
  • エンコード
  • メタ情報
  • ナビゲーションリンク
  • スタイルシート
  • スクリプト
  • インラインフレーム

などを表示してくれます。

ページ情報を表示して、そのままCSSを確認することも可能です。
しかもCSSの中で@importされていても、全てCSSも表示してくれます。
Webでそのままソースを解読する場合など重宝します。

09.Opera Dragonfly

Fire Foxでいうところの「Firebug」
Google Chromeでいうところの「要素の検証」

ただOperaの違うところは、「Dragonfly」からでも「表示しているWebページ」からでも確認したい要素をクリックするとDOMが選択されます。
さらにDragonflyの「ユーティリティ」にはカラーピッカーが搭載されています。
Webサイトから色を調べたい場合、RGB, HSL, 16進数でカラーを取得できます。

10.ニュースフィード

日進月歩のWeb業界で情報収集にRSSを利用されている方も多いかと思います。
OperaのRSSリーダーはOpera Mailを利用しているため、メーラーのような感覚でRSSを管理することが可能です。
新しい情報が入るとポップアップで教えてくれるため、情報をいち早く手に入れたい方には便利な機能かもしれません。
ただクラウド化ができないのが、残念です。

11.User Agent

OperaではUser AeantをOpera, FireFox, IEと切り替えることができます。
Opera Dragonflyのページの「Operaデバッグメニュー」をダウンロードすると、ツールバーの[Debug]から容易にUser Agentを変更できるようになります。

12.スタイル

ツールバーから[表示]→[スタイル]から

  • アクセシビリティレイアウト
  • ノスタルジア
  • 画像とリンクのみ表示
  • 擬似テキストブラウザ表示
  • 高コントラスト表示(黒/白)
  • 高コントラスト表示(白/黒)
  • 非リンク画像を表示しない
  • 表(table)要素を無効にする
  • 要素の構造を表示
  • 要素のアウトラインを表示

というスタイルシートをあてることができます。
[要素の構造を表示][要素のアウトラインを表示]は使えます。

[Debug]→[Layout]からも確認できます。

13.Mobile View

デバッグメニューがインストールされていると[Debug]→[Layout]→[Mobile View]からモバイルで見た時のレイアウトを見ることができます。
PCから携帯サイトを見る場合、"それなりに"確認することができます。

14.W3C Validate

デバッグメニューがインストールされていると[Debug]→[Validate]からW3CのValidateも行うことができます。
Validateの種類は

  • HTML
  • HTML5
  • CSS2.1
  • CSS3
  • Accessibility Report
  • Section 508 Report
  • Links

[Links]はリンクチェッカーですが、リンクチェックと同時にそのページの表示速度も出してもらえるので、スピードチェッカーとしても利用できます。

15.ドキュメントの参照

デバッグメニューがインストールされていると[Debug]→[specifications]からW3Cのドキュメントを参照することができます。
参照できるドキュメントは

  • HTML4.01
  • CSS2.1
  • XPath
  • XSLT
  • Unicode

仕様書を見ていると思わぬ発見があるかもしれません。

Operaブラウザのユーザーは全世界で約2%(2010年12月現在)ですが、
OperaのCTOがCSSを作った一人だったりWHATWGの設立、HTML5のフォームの仕様、Web標準など、Webにおいて大きく貢献している会社でもあります。 さらにブラウザは標準でこの機能。

Operaをちょっと使ってみませんか?