Opera Show - HTML のウェブプレゼンテーションツール

Opera ブラウザの優れた特徴の一つである Opera Show を利用して Opera ブラウザをプレゼンテーションツールとしても活用しましょう。Opera Show をマスターして、お使いのコンピュータからのプレゼンテーション時に生じる作業やイライラを減らしましょう！

他の人気プレゼンテーションツール（Microsoft PowerPoint など）と比較した場合、Opera Show には以下のような特長があります:

• 軽量にして高速なウェブブラウザの標準機能です。
• HTML をドキュメント形式として用いるので他のツールの独自形式に比較してファイルが軽量です。
• ウェブ上でのプレゼンテーションをいとも簡単にします。
• 他のプレゼンテーションツールと異なり Opera は無料です。
• 悪趣味なアニメーションで見る人をうんざりさせません。

プレゼンテーションツールはプレゼンターが聞き手にメッセージを伝えるための道具です。テキストや画像を含むスライドセットをプレゼンテーションすることで話の内容を盛り上げスピーカーを軌道に乗せ続けます。スライドの印刷やウェブ上での公開により、聞き手が後にプレゼンテーションの内容を簡単にレビューすることができます。

このチュートリアルは Opera Show を始める皆様のヘルプとして記載され、Opera Show ドキュメントの利用とオーサリングについてもご説明いたします。他のプレゼンテーションツールをご利用になった経験がおありで、また HTML の基礎知識をお持ちであれば、このチュートリアルのスタート地点において既に優位な地点に立っておられることになります。

コーディングなしで Opera Show のプレゼンテーションを行うには Opera Show Center に移動しオンラインの Opera Show ジェネレータをお試しください

Opera Show の起動

Opera をプレゼンテーションツールとして活用するのはいたって簡単です。F11 キーを押すと Opera はフルスクリーンモードを実行します - スクロールバーやメニューは非表示になり、ドキュメントのみが表示されるようになります。ドキュメントのスタイルシートにより、Opera は以下のような三つのアクションを実行します:

• 現在のドキュメントは複数ページもしくは複数 "スライド" に分割されます。
• コンテンツが変更する可能性があります - 特定のパートが非表示になったり隠れたりすることがあります。
• プレゼンテーション向きのフォントや色が適用されます - 典型的な例ではフォントが大きめになります。

既に皆様が Opera でブラウジング中であると仮定して、F11 を今すぐ押してみてください（Opera ブラウザをまだお使いになったことがないなら簡単に ダウンロード できます）。ブラウザはフルスクリーンモードになり、映写にふさわしいスライドが表示されます。既に フルスクリーンモードである場合は、Opera はブラウジング向きの通常のスクリーンモードに戻ります。F11 によってもフルスクリーンモードと通常のモードとを切り替えることができます。

フルスクリーンモードを実行している場合、矢印キーを使ってスクロールも行えますし、PgUp と PgDn キーでドキュメントのページ間を移動もできます。

どのようなドキュメントであれフルスクリーンモードで表示できますが、ほとんどのドキュメントは通常のブラウザウィンドウで表示されるのとほぼ同じに見えるでしょう; 同じコンテンツで同じレイアウトという風に。しかしながら大き目のキャンバスに表示されます。プレゼンテーションの映写向きに作られていないウェブサイトへの最良の解決法はもちろん、Opera のズーム機能をフルスクリーンモードで利用することです - F11 を押す前にドキュメントのサイズを拡大してください。また、Opera で画像ファイルを見るには F11 を押してフルスクリーンモードで黒背景にファイルを表示させられます。

Opera ブラウザをお使いでない場合、Opera Show についてのご説明を読むだけで経験なさるわけではありません。しかしながら Opera Show 用に書かれたドキュメントを他の標準準拠のブラウザで通常のウェブドキュメント同様ご覧いただけます。

それでは、Opera Show のキーが押されている時に、一体何がドキュメントを - 例えば今お読みになっているドキュメントを - 全く異なって見せるのでしょうか？それが次のセクションのトピックです。

スタイルシートのコントロール

ドキュメントが Opera Show のプレゼンテーションになるには、Opera に HTML ドキュメントをプレゼンテーションに変えるよう指示する必要があります。CSS2 スタイルシートをドキュメントヘッダに加えることで完成です。ウェブ用に書かれたドキュメントをお持ちの場合、スタイルシートの概念にはおなじみでしょう。スタイルシートは HTML ドキュメントへリンクさせたり、同ドキュメント内に実装させることができ、作成者がウェブ上でどのようにドキュメントを表示させるかを指定できます。

カスケードスタイルシートの第一世代は CSS1 として知られるものです。CSS2 では多くの機能が追加され、異なる メディアタイプ 用にスタイルシートを作成できる機能などがあります。メディアタイプの例には screen（通常のカラーコンピュータスクリーン用）、handheld、braille（ブライユ点字端末用）、projection などがあります。Opera Show は一番最後を使用しており、F11 キーを押すと Opera ブラウザが映写用に作成されたスタイルシードを探します。検出されるとこのスタイルシートが適用されてプレゼンテーションがそれに応じて変更されます。

Opera Show プレゼンテーションのオーサリング

自らの HTML を作成したくない方には Opera Software のオンライン Opera Show プレゼンテーションジェネレータ をご用意しました。他にもプログラマーの Phil Burns 氏が作成した Quickshow などのサードパーティ製アプリケーションもあり、これは Opera Show ドキュメントのオーサリングツールでシェアウェアになります。

このチュートリアルの残りは主として、ご自身の Opera Show プレゼンテーションの作成や適応をお望みの方向けになります。Opera Show プレゼンテーションは HTML および CSS についてご存知であれば極めて簡単です。例えば現在お読みになっている HTML ドキュメントは以下のようなセクションを含むスタイルシートにリンクします:

@media projection {

.screen {
	display:none;
	}

.projection {
	display: block; 
	padding:65px 200px 0px 24px;
	page-break-after: always;
	}

body    {
	background:#47557b url(operashowbg.jpg) fixed;
	padding:0;
	margin:0;
	font-family:'trebuchet ms',arial,sans-serif;
	font-size:150%;
	color:#fff;
	}
}

第一行ではこのスタイルが projection メディアタイプ用であることを示します。これはスタイルシートの一種で、F11 を押すと Opera はこれを探します。 ".screen" と ".projection" で始まる行はページコンテンツの非表示と表示用です - これは CSS のより洗練された利用法で、このチューリアルでも後述します。以下の行は、改ページ、フォントや色の設定になります。上記に全く理解できない行がある場合は、続行する前に HTML と CSS についてお読みになるといいでしょう。お勧めの資料の一覧はこのドキュメントの最後にあります。

フォントと色の設定

フォントと色の変更はスタイルシートの最も一般的なタスクになります。フォントサイズはここで 1.5em に設定され、これは通常のサイズの 150% に相当します。また、フォントシリーズはジェネリックフォントの "sans-serif" とともに "Trebuchet MS" に設定され、ユーザのコンピュータに "Trebuchet MS" がない場合には "sans-serif" が代わりに用いられます。

背景画像は第一行で適用され、color はテキストの色を白に設定しています。全てのプロパティは body 要素上で設定され、ここから他の全ての表示される HTML 要素を引き継ぎます。従ってドキュメント内の全てのテキストの色はこれ以外に指定されない限り白色になります。

改ページ

プレゼンテーションを行う際、一枚のページ（もしくは "スライド"）からその他へ移動することになります。 通常、ブラウザは右側のスクロールバーとともにドキュメントを表示し、このバーでテキストの上下へと移動します。Show キーを押すと Opera はフルスクリーンモードになりドキュメントを複数ページへと分割します。スタイルシートはどこで改ページを行うかを決定します -- 例えばスタイルシートは改ページが class "projection" の発生の都度、その後に改ページが行われると決定します。従って次のセクションは常に新しいページの先頭に表示されます。

.projection {
	display: block; 
	padding:65px 200px 0px 24px;
	page-break-after: always;
	}

ドキュメント内の上下の移動にスクロールバーを利用する代わりに、矢印キーと PgDn それに PgUp もフルスクリーンモードで使われます。

h1 や h2 のような Heading 要素は常に HTML で使われる必要があります。作成者によっては font タグや size 属性で Heading を行う場合もありますが、これは font 要素がドキュメントの 構成 について何も指示していないため推奨されません。

コンテンツの非表示と表示

このドキュメントで F11 を押すと、ドキュメントの外観（フォント、色、ページづけ）の変更のみならずコンテンツも変更されるのにお気づきかもしれません。これが CSS の最も高度な機能の一つであり、ほとんどの作成者はこの種のドキュメントを作成する必要がなくなります。ただし聞き手を魔法のような技術で感心させたい場合にはお勧めです。

CSS はドキュメント内の 変換 を容易にします - スタイルシートは例えばさもないと表示されるテキストを非表示にすることができます。このドキュメントで利用されているルールは以下のようになります:

.screen {
	display:none;
	}

.projection {
	display: block; 
	}

以下の行は div 要素（"class name" や "projection" のある要素）の class を表示にし、他の要素（ "screen" という class name のある要素）の class を非表示にします。Opera が通常のスクリーンモードに戻ると、ルールの逆の設定が適用されます:

@media screen {
	div.projection { display : none }
	div.screen { display : block }
}

要するに、今お読みになっているドキュメントは実際は一つにまとめられた二つのドキュメントということになります。フルスクリーンモードと通常のモードを切り替える際、Opera は一つのドキュメントから次のドキュメントへと切り替えを行います。Heading のみが同一で常に表示されます。

このドキュメントを再利用してプレゼンテーション用のテンプレートとしてご自由にお使いください。CSS を実装し、総合的な opera.com のない より簡単なバージョン もご利用可能です。

お使いのプロジェクターが常に輝かしいものでありますように！

Opera Show、CSS、HTML に関する推奨記事

• Day Thirty: OperaShow（30日で Opera 愛好者になる）
• W3C's HTML ホームページ
• W3C の CSS2 のイントロダクション
• W3C の CSS2 のメディアタイプのイントロダクション
• W3C の改ページ用 CSS2 の利用について

その他のプレゼンテーションに役立つリンク

• Opera Show ジェネレータ
• QuickShow は Phil Burns 氏作成の Opera Show のオーサリングツールでシェアウェアになります。
• W3C's MarkUp Validation Service はスタイルシートと HTML ファイルの検証を確実なものとする手助けをします。
• ColorMatch は色の選択やその16進数のコードの供給に便利です。