Internet Explorer 8 の製品候補版 (RC 版) がリリースされ、正式版のリリースがいよいよ秒読みとなってきました。
このコラムでは、IE 8 の数ある新機能のうち注目の「WebSlice」と「アクセラレータ」について、Expression Web 2 で実装する方法について取り上げます。
WebSlice とは
天気予報、スポーツの試合結果、オークションの商品価格など、頻繁に更新されるサイトの情報を手動でサイトにアクセスするのでなく、お気に入りツールバーから確認することができるのが「WebSlice」です。
なお、「WebSlice」は、Internet Explorer 8 のみだけでなく、WebChunks というアドオンによって Firefox 3 でも実装可能です。
WebSlice を使うには?
日本国内では「価格.com」が WebSlice に対応した Web ページを提供しており、商品の最安価格に WebSlice を設定することが可能です。
1．可能な領域にマウスポインタを移動すると、WebSlice のボタン
が表示されるので、クリックします。
2．すると、ツールバーにこの部分が WebSlice として登録されます。
3．これ以降は、「価格.com」を開くことなく、最新の価格を調べることができるようになるのです。
WebSlice を Expression Web で実装するには?
WebSlice はブックマークの一種と考えるとよいでしょう。そのため、ローカル環境では動作せず、テストできません。
Expression Web 2 では、Microsoft Expression 開発サーバーを使うことで、F12 キーを押してブラウザプレビューしながら検証することが可能です。
なお、Expression Web 2 を使わない場合には、サーバーにファイルをアップしたり、イントラネットワーク向けサーバー上で確認するなどのといった手間が必要になります。
Microsoft Expression 開発サーバーを使うには、次の手順で行います。
1. Expression Web を開き、[サイト] → - [サイトの設定] をクリックして [サイトの設定] ダイアログボックスを開きます。
2. [プレビュー] のタブに切り替え、[Microsoft Expression 開発サーバーを使用する] に
チェックがついていることを確認します (デフォルトではチェックされています)
3. [すべての Web ページ] にチェックを付け、[OK] をクリックしてダイアログボックスを閉じます。
WebSlice の実装に必須なのは、3 つの class と 1 つの id のみです。
<div class="hslice" id="webSlice01">
<h2 class="entry-title">タイトル</h2>
<p class="entry-content">コンテンツ</p>
</div>
- WebSlice として表示させるエリアを囲むための「ブロック要素」に「class=“hslice”」と id を設定します。
- WebSlice のタイトルに「class="entry-title"」を設定します。
- WebSlice のコンテンツ領域に「class="entry-title"」を設定します。
Expression Web 2 で設定する場合には、hslice、entry-title、entry-content をそれぞれクラスセレクタとする CSS ルールを作成しておくとよいでしょう。IntelliSence で選択することができるようになります。
その他、任意の設定項目に次のようなものがあります。
アクセラレータとは?
「アクセラレータ」により、Web ページの閲覧中に、辞書や地図、翻訳などの Web サービスを呼び出して手軽に利用することができるようになります。ほかの Web ページに移動せずに作業することができるため、Web ブラウズ体験は快適になるでしょう。
たとえば、検索したい文字列を選択すると、アクセラレータのアイコン
が表示されるので、メニューから実行したいサービスを選択します。
「アクセラレータ」を使うには?
「アクセラレータ」に対応する Web サービスは、Internet Explorer 8 にあらかじめインストールされていますが、Internet Explorer ギャラリーから追加のアクセラレータを入手することも可能です。
アクセラレータの削除、有効化、無効化は、
ブラウザーの画面右上の [ツール] ボタンの [アドオンの管理] をクリックして行います。
Masahiro Takano.
