ウェブ版スライドについて

XHTML版スライドとは
このスライドシステムの背景と特徴
スライドの構成
基本的な使い方
表示や動作の切り替え
XHTMLのhead要素の記述
XHTMLのスライド部分
個別スライドの記述
対応環境と、他のスライドシステムとの互換性

XHTML版スライドとは

CSSとJavaScriptによる疑似スライドシステム
- 1つのXHTMLファイルを、div要素あるいは見出し要素単位で複数のスライドに見立てる。
- CSSで1つのスライドブロックのみを表示（他はdisplay:none）。
- クリックやキー操作イベントでJavaScriptを起動し、表示するスライドブロックを切り替え。
- 様々なXHTMLスライドシステムが存在するが、基本的な考え方は同じ。
XHTML版スライドのメリット
- 1つのファイルにまとまってコンパクトで扱いやすい。
- 適切に作ればCSS、JavaScriptが使えない環境でも通常のウェブページとして閲覧可能。
- パワーポイントなどの専用アプリケーションが不要で、どこでもプレゼンテーションできる。
- ウェブアプリケーションのデモをするときに、そのままブラウザ内でシームレスに操作できる。
- アウトラインプロセッサの出力などの階層付きテキストから簡単にプレゼンテーションを作成できる。
- 配布用資料も印刷メディアスタイルシートの工夫でそれなりのものができる。

このスライドシステムの背景と特徴

作った経緯
- パワーポイントで作成したスライドショーをウェブで公開する目的で、1ファイル1スライドのシステムとして出発。
- まとめ読みしやすくするために、1つのXHTMLに全スライドを埋め込んで切り替え表示する方法に変更し、DOM操作とイベント処理の実験を兼ねてCSSとスクリプトを開発。
- 途中でW3CのSlidyを、また更に後に S5 を知るが、微妙にニーズに合わないので自作を継続。共通する部分はできるだけそれらと互換性がある形に。
このシステムの狙いと特徴
- 音声ブラウザやスクリプトが働かない環境でも閲覧可能で、目次も利用できる。
  - CSSのみ有効の場合はスライド一括表示と同等
  - スクリプトのみ有効の場合でもキーボードやマウスクリックのナビゲーションが機能
- プレゼンテーション効果よりも資料としての読みやすさを重視（しているはず）。
  - ウェブ版スライドではインクリメント表示、キャンバスを利用した手書きコメント追加などのプレゼンテーション効果は無効に
- 個別スライドも直接リンク、ブックマーク可能
  - けれどもブラウザの履歴を個別スライドで氾濫させない
  - 履歴を有効にするときは、Backボタンでもスライドを移動できる
  - スライドからリンク参照先に移動してBackで戻ったときに、元のスライドブロックが表示される
- パワーポイントもしくはアウトラインプロセッサの出力からそのままスライドに変換。

スライドの構成

スライド群（divブロック）の構成
- プレゼンテーション版（作者がプレゼンテーション時に用いるモード）では、最初のスライドブロック（画面）にはタイトル、日付などを表示。
- ウェブ公開版（通常モード）は、最初に全スライドの目次を表示。
- 2ブロック（画面）目以降がスライドの本体。
各スライド画面のツール類
- 前後のスライド、先頭、最後への移動などのナビゲーションを画面左下に表示。
- 単一スライド/全スライド切り替えなどのスイッチを右下に表示。
- ウェブ公開版の目次ブロックでは、サイト共通ヘッダ、フッタの表示の関係で、これらのツールは画面上部に表示。

基本的な使い方

ポインティングデバイスによるナビゲーション
- ウェブ公開版では、スライド画面のクリックで次のスライドに進みます。フォーム入力の部分などは、クリックしてもスライドは移動しません。
  - スライドの左端部分をクリックすると前のページに戻るようにしました。
- 画面左下のリンクツールをクリックしても移動できます。スライド番号部分をクリックすると、目次がポップアップします。
- 最後のスライドでクリック~~すると、先頭の目次に戻ります~~してもそれ以上は進みません。
キーボードによるナビゲーション
- キーボードの→、N、spaceキーで先に進みます。←、B、Pキーを使うと一つ前に戻ります。
- T、Homeキーで目次に戻ります。L、Endキーを使うと最後のスライドに移動します。
タッチデバイスでのナビゲーション
- 通常のタップはクリックと同等です。
- 左右のスワイプで前後ページに移動できるようにしました。

表示や動作の切り替え

スライド表示と一括表示
- Slide | All スイッチもしくはキーボードのAで、個別スライド表示と全スライド一括表示を切り替えることができます（キーはSlidyと同じ）。
- 個別スライド表示状態でも、印刷時には全スライドを表示します
  - ただし目次が表示されないなど不十分なところがあるので、一括表示に切り替えてから印刷する方がよりうまくいきます。
クリックなどの操作への反応
- click=on ボタンで、マウスクリックによるスライド移動を制御できます（offにするとスライドテキストの選択などが可能になります）。
- rec=off ボタンは各スライドをブラウザの履歴に登録するかどうかを切り替え、onのときはブラウザのBackボタンでもスライドを戻せるようにしますます。ただしブラウザによっては機能しないかも知れません。
  - ブラウザによっては、このボタンに関係なくスライドの移動を履歴に追加するものがあります。

XHTMLのhead要素の記述

スライド用スタイルとスクリプト
- The Web KANZAKI共通のスタイルシートとスクリプトに加え、slide.css、slide.jsを組み込む。
- ```
<link rel="stylesheet" href="/parts/kan01.css" type="text/css" />
<link rel="stylesheet" href="/parts/slide.css" type="text/css" />
<script type="text/javascript" src="/parts/std.js"></script>
<script type="text/javascript" src="/parts/slide.js"></script>
```
- （他の環境での汎用性よりもWeb KANZAKIとしての一貫性を重視しているため、共通スクリプト、スタイルを前提としています）
オプションで作者、講演名、日付を記述
- オプションとして、meta要素で作者を指定すると、プレゼンテーション版の冒頭で表示。
- address要素内にid="presenname"として講演名、id="presendate"として日付を記述すると、やはりプレゼンテーション版の冒頭で表示。
- ```
<meta name="author" id="docauthor" content="神崎正英" />
...
<span class="created" id="presendate">2006-08-01</span>
```

XHTMLのスライド部分

presentationクラス
- スライド部分全体をpresentationクラスを持つdiv要素としてマーク付け（OSFに準拠）。
slideクラスとcoverクラス
- 個別のスライドはslideクラスを持つdiv要素としてマーク付け（OSF、Slidyに準拠）
- オプションで目次スライドはcoverクラスを持つdiv要素としてマーク付け。このスライドブロックは、プレゼンテーションモードではタイトルなどの表示に置き換えられます。
- 各スライドには、"s[slide#]"の形式のid属性を与えます。目次がid="s0"となり、スライドはid="s1"から始まります。
  - 事前にidが与えられていない場合は、動的にidを割り当てますが、スクリプトが働かない環境でも個別スライドにリンクできるよう、あらかじめidを与えておくことにします。

<div class="presentation">
 <div id="s0" class="cover">
 ...
 </div>
 <div id="s1" class="slide">
 ...
 </div>
 ...
</div>

個別スライドの記述

スライド見出し
- 各スライドブロック（div.slide）はひとつのh2見出しを持ちます。
  - Slidy、OSFとの互換のために、h1要素でもスライド見出しとして機能しますが、文書構造として各スライドにはh2要素を与えるほうが適切です。
  - ブロック内にh1だけがある（ulリストがない）場合は、扉スライドとして見出しを中央に表示します。
スライド内容の箇条書き
- スライドの内容は、ul要素として箇条書きに記述します。
  - 全体がひとつのアウトラインを構成するように、スライドの内容も箇条書きを原則とします。
- 第1レベルのli要素は、マーカーアイコンつきの太字で表示されます。
- 第2レベル以下は一般的なリストとして表示されます。
- class="fig"、class="ex"を持つli要素は、それぞれ画像、例として扱われ、マーカーがつきません。

<div id="s7" class="slide">
<h2>個別スライドの記述</h2>
<ul>
 <li>スライド見出し
  <ul>
  ....
  </ul>
 </li>
</ul>
</div>

対応環境と、他のスライドシステムとの互換性

主要モダンブラウザでスライド機能
- IE6、Firefox1.5、Opera9で概ね正しく動作すると思います。iCabでも多少のスタイルの崩れに目をつぶれば閲覧できます。
- Safariは途中まで動作確認をしていましたが、手元のMacOS Xマシンが壊れたため、最新バージョンの動作確認は行っていません（一部問題があるという話も）。
- xfyの Slide Show for XHTML でもうまく表示できるはずです。
- スクリプトが機能しない場合は、通常の1ページのXHTMLファイルとして閲覧できます。
Slidy、S5との互換性
- 基本的にはThe Web KANZAKIの一部として資料を公開するためのシステムです。スタイルシートの使い分けなどは意図しておらず、考え方の違う部分もあるので、完全互換ではありません。
- OSF 1.0、S5と同等の基本構成なので、本システムのXHTMLは、これらのスクリプト、スタイルを適用してもおおむね動作すると思います（できない？）。
- Slidy用に作られたXHTMLは、全体をdiv.presentation要素で囲むなど部分的な追加修正で、本スライドシステムで表示できると思います。