会議や学会などで利用するプレゼンテーション資料の作成・投影にはPowerPointがよく使われるが、その資料を後からWebサイトに掲載したいと思うと意外とやっかいだ。PowerPointのファイルをhtmlに変換すると余分なタグが入ってしまい、ブラウザの種類とバージョンによってはうまく表示されない場合があるからだ。

このため、jpegやgifでスライドを保存し、htmlに貼り付けている例も多いが、ファイルサイズが大きくなるうえ、検索エンジンでは文字が検索されないという欠点がある。htmlへの加工が面倒なので、PowerPointファイルのダウンロードという形式をとっている場合もあるが、これも閲覧する側としては少々面倒だ。プレゼンテーション用の資料とWeb閲覧用の資料を同時に作成できればと思う人は多いだろう。

そんな時に便利なのがノルウェーのOpera Softwareによって開発されたWebブラウザ「Opera」のOperaShowという機能だ。OperaはInternet ExplorerやNetscapeに次ぐブラウザとして注目されており、オンラインソフト紹介サイト「窓の杜」では2003年の「年間かうんとだうん」総合1位を獲得している。ファイルサイズが小さく動作が軽快な事とともに、CSS2やXMLなど最新機能にも対応していることが特徴。また、Windows版、Macintosh版、Linux版などがあり、幅広いプラットフォームで動作する点も魅力だ。Operaには無料版と有料版があり、無料版ではウィンドウ右上にバナー広告が表示されるものの、一切の機能制限なく利用できる。Opera Softwareや日本国内の販売代理店であるトランスウエアのWebサイト( http://jp.opera.com/ )などからダウンロードできる。

OperaShow機能でhtmlファイルを表示してみたところ。CSSファイルなどの設定が必要になるが、ひとつのhtmlファイルでWeb閲覧とプレゼンテーションの双方に対応できる。

○htmlをプレゼンテーションする「OperaShow」

OperaShowはOpera 6以降に標準搭載された機能で、htmlファイルを全画面に表示し、画面を切り替えていくことで簡単にプレゼンテーションを行える機能。使用方法そのものは非常に簡単だ。まずOperaを起動してプレゼンテーション用のhtmlファイルを開く(作成方法は後述)。[F11]キーを押すと、画面がフルスクリーンモードに変わるので、そこで矢印キーを押すと画面をスクロールでき、[PageUp][PageDown]キーを押すことで前後にページを切り替えることができる。また、[Home]キーを押すと先頭ページが、[End]キーを押すと最後のページが表示される。再度[F11]キーを押すと通常の表示に戻る。

使用するのは通常のhtmlファイルであるから、ファイルサイズは小さく、表示も速い。また、プレゼンテーションに使用するファイルをそのままWebサイトに掲載することができる。htmlファイルをローカルに置く必要はなく、サーバーに置いたファイルをインターネットやイントラネット経由で表示することが可能だ。パソコンにはOperaだけをインストールしておけば良いので、いちいちプレゼンテーション用のファイルをパソコンに入れたり、CD-Rに焼いて持参したりしなくても、インターネットに接続されたパソコンさえあれば、どこでも即座にプレゼンテーションできることも魅力だ。

○OperaShow用のhtmlファイルの作成方法

通常のhtmlファイルでも[F11]キーを押すとOperaではフルスクリーンモードで表示されるが、プレゼンテーション用に複数ページを切り替えようとすると、スタイルシートでの設定が必要になる。また、プレゼンテーション用とWeb掲載用で文字サイズや書体、背景色などを変えたいと思う場合もあるだろう。

このようなプレゼンテーション用の見栄えのためには、CSS2のメディアタイプを使用する。CSS2は1998年にW3Cの勧告となったが、主流なブラウザでもその実装範囲はまちまち。メディアタイプには、aural(音声認識)、braille(点字出力)、handheld(ハンドヘルド)、print(印刷)、screen(画面表示)などいろいろなものがあるが、OperaShowではprojectionという投影表示用のタイプを使用している。このメディアタイプを使用するには、スタイルシート内で、プレゼンテーション用にのみ使いたい部分を@media projection{}で囲って指定する。例えば、htmlファイルのhead要素内で以下のようにスタイルシートを記述する。

このスタイルシートでは、プレゼンテーション用の画面に切り替えた場合に、body要素の背景色を#3300CC、文字色を#FFFFFFにしている。次にH1とH2をボールド体にし、それぞれの文字色を#FFCC00と、#FFFF00にしている。最後に、.breakで、このクラスが適用された部分の前でページを切り替えるように指定している。

(石田優子)