ロゴ
このセクションでは、Expressパネルで独自のロゴまたはアイコンを使用する方法について説明します。
HTML5アイコン
ブックマークアイコンに慣れているかもしれません。 1999年にInternet Explorerのバージョン5で初めて導入されました。 HTML4仕様には含まれていませんでしたが、ブラウザーメーカーは最終的に、リンクのrel属性の値としてアイコンサポートを含めることに同意しました 。 Appleは後にapple-touch-iconを通じてタッチスクリーンデバイスでのアイコンサポートを拡張しました。 HTML5仕様によると、アイコンは現在、rel属性の有効な 標準化された要素値です。
Express Panelアイコンのお知らせ
Expressパネルのアイコンのアナウンスは、サイトアイコンのアナウンスに非常に似ています。 タグをWebページのheadセクションに追加するだけです。
<head> <title>My Opera</title> <link rel="icon" type="image/png" href="http://path/to/logo.png"> </head>
Expressパネルのアイコンは次のとおりです。
- 最小114 x 114ピクセル。 小さいアイコンは無視されます。
- ファイルはPNG、JPG、またはGIF形式である必要があります。 SVGファイルはまだサポートされていません。 アニメーション画像を使用する場合、最初のフレームのみが表示されます。
Opera 11.10は、apple-touch-icon、apple-touch-icon-precomposed、image_srcもサポートしています。
複数のアイコンを使用する
複数のアイコンを指定することもできます。 これは、ユーザーがブックマークにページを追加するときに1つのアイコンを使用し、Expressパネルにサイトを追加するときに別のアイコンを使用する場合に非常に便利です。
<head> <title>My Opera</title> <link rel="icon" type="image/png" href="http://path/to/128x128image.png"> <!-- This will be the speed dial icon --> <link rel="icon" type="image/png" href="http://path/to/200x200image.png"> </head>
複数のアイコンを宣言すると、Expressパネルに大きなアイコンが表示されます（ demo ）。 アイコンのサイズが同じ場合、最初に宣言されたもの（ demo ）が使用されます。
コンテンツ固有のエクスプレスパネル
このセクションでは、Expressパネルのコンテンツを取得するいくつかの新しい方法について説明します。
- ビューモードの使用：CSSで最小化。
- X-Purpose HTTPヘッダーの使用
- 自動リブート。
ビューモードの使用：最小化
図1：Opera 11.10のExpressパネル
view-modeパラメーターは、ビューモードに応じてスタイルを指定する方法を決定します。 表示モード：最小化を使用すると、Expressパネルを対象としたコンテンツの代替表示スタイルを定義できます。 表示モードは、デバイス幅と同様に機能します。 スタイルにはメディアが含まれている必要があります。
@media screen and (view-mode: minimized) { body { color: #fff; background: #b20000; } }
CSSファイルを含めて、次のようにメディア属性の値を設定することもできます。
<link rel=stylesheet type="text/css" href="minimizedstyles.css" media="(view-mode:minimized)">
ビューモードを使用した例： ここで最小化。
view-mode：minimalizedは、Expressパネルの表示ウィンドウを260 x 195ピクセルに切り替えます。
HTTPヘッダーを使用する
Expressパネルに異なるURLを使用することもできます。各URLのリクエストには、追加のX-Purpose：preview HTTPヘッダーが含まれます。
GET / HTTP/1.1 Host: www.bbc.co.uk/news X-Purpose: preview User-agent: Opera/9.80 (Macintosh; Intel Mac OS X 10.6.6; U; en) Presto/2.8.99 Version/11.10
このHTTPヘッダーが検出されると、使用するURLを選択したり、Expressパネルに送信されるファイルを決定したり、Expressパネル用に特別に準備されたコンテンツを表示したりできます。 ユーザーが[Express]パネルからサイトに移動しても、同じ効果は発生しないことに注意してください。
以下の例では、Apacheサーバーのmod_rewriteディレクティブを使用して、すべてのExpress Panelリクエストをアドレス/preview.htmlにリダイレクトします（特定の状況でリクエストを指定することもできます）。
RewriteEngine On RewriteCond %{HTTP:X-Purpose} ^preview$ RewriteRule ^(.*) /preview.html
または、何らかの言語でサーバー側のクエリ処理を使用することを好むかもしれません。 以下はPHPの例です。
<?php if ($_SERVER['HTTP_X_PURPOSE'] == 'preview') { // Send Speed Dial content } else { // Send regular content } ?>
特定の間隔で自動更新
Expressパネルのコンテンツをより動的にするために、更新パネルにサイトを追加した後に使用される更新の間隔を設定できます。 これを行うには2つの方法があります。
- メタタグの使用：
<meta http-equiv="preview-refresh" content="3600">
- 次の形式のHTTP応答を返します。
Preview-Refresh: 3600
優先順位
Expressパネルのコンテンツを取得する手順は次のとおりです。
ビューモードが最初に優先されます：CSSとスタイルで最小化されます。 スタイルが利用できない場合、ブラウザはページのアイコン宣言を探します。 何も発表されていないか、ファイルにアクセスできないか破損していない場合は、標準の方法、つまりページ全体のスナップショットを追加します。
この機能をサポートする製品
これまでのところ、これらの改善は、Operaブラウザのデスクトップバージョンのユーザーのみが利用できます。
参照用
HTML5 WHATWG仕様からのリンク
ビューモード仕様