S5の使い方のまとめ。
Web標準の人たちがS5を使っているのを見て、自分も使ってみたいと思い、色々と実験。ただ、日本語ドキュメントがほとんど見つからなかったので、備忘録としてもメモしておく。参考にどうぞ。
そもそも、S5って何だ？
単純に言うと、インターネット上でマイクロソフトのパワーポイントを表現するようなもの。例えば、2xupさんとかがプレゼンの資料として公開している。でも、「それだけなら、パワーポイントをダウンロードするなり、PDF化すればいいんじゃないの？」と思われるかもしれないが、S5はXHTML＋CSSのWeb標準で実装されたパワーポイントのツールのようなものなので、検索エンジンにも引っ掛かるし、アクセシビリティにも対応できる。このへんが便利かなと思っている。
S5を使うために必要な技術
まず、HTMLなり、XHTMLが読み書きできること。デザインを自由自在に変えたいのなら、CSSも必要。S5自体は、XHTML＋CSS＋JavaScriptで実装されているので、動きを変えたいとか、この部分にナビは嫌だと言うのであれば、JavaScriptの知識も必要。でも、実際はXHTMLとCSSが分かれば、それなりにいけるんじゃないかな。
では、使い方。
まず、S5を作ったEric Meyer氏のホームページへ行く。右サイドバー最上部に、「Downloads」のメニュー。最新版は「S5 1.2a2（2006年9月28日現在）」だが、これは開発者用のリリースなので、安定版の「S5 1.1」をダウンロードする。すると、「s5-11.zip」というフォルダがダウンロードできるので、これを解凍する。
「s5-11.zip」を解凍すると、「s5-11」というフォルダが開く。いきなり多くのファイルがあるので、面食らうかもしれないが、ほとんどEric Meyer氏のホームページにあるS5の使い方を記したドキュメントなので、一旦無視しておく。「s5-11」内に「s5-blank.zip」というフォルダがあるので、これで解凍する。すると、「s5-blank」というフォルダが出現する。これ、そのものがS5というツール群。
はじめに、「__MACOSX」と「s5-blank」と分かれているが、たぶんMacとWin用のフォルダだと思う（Mac環境がないので、試していない）。Winユーザーは「s5-blank」をクリック。すると、「ui」フォルダと「s5-blank.html」が出てくる。この「s5-blank.html」をテキストエディタなり何なりで開くと、XHTMLのコードが出てきて、それをブラウザでプレビューすると、既にサンプルに仕上がっているスライドショーがブラウザで閲覧できる。ちなみに、この「s5-blank.html」というファイル名は変えても問題ない。
スライドショー自体はクリックとかで次のページに移動。ウィンドウ右下にカーソルを持っていくと、ナビゲーションが出現する。これで、スライドショーのページ単位で移動できたり、前のページに戻れたりする。S5は1つのXHTMLのファイルなので、ブラウザの「戻る」とクリックすると、S5そのもののから戻ることになってしまうので、ご注意。
コンテンツを作る
まず、プレゼンそのもののタイトルを決める。コードは27行目あたり、
<div class="layout"> <div id="controls"><!-- DO NOT EDIT --></div> <div id="currentSlide"><!-- DO NOT EDIT --></div> <div id="header"></div> <div id="footer"> <h1>[location/date of presentation]</h1> <h2>[slide show title here]</h2> </div>
編集するべき箇所は、h1とh2。それぞれ、全スライドの左下に表示される箇所。h1にはプレゼンの開催場所や日付を、h2にはスライドショーそのもののタイトルを入れる。また、metaのtitleにも適宜必要な内容を打ち込んでおく。
次に、スライドショーのトップの部分。コードは39行目あたり、
<div class="presentation"> <div class="slide"> <h1>[slide show title here]</h1> <h3>[name of presenter]</h3> <h4>[affiliation of presenter]</h4> </div>
presenetationのdiv classは、スライドショーのコンテンツそのものを包括するdivタグ。ここから、本格的にスライドショーが始める。h1にはスライドショーのタイトルを、h3にはプレゼンする人の名前、h4には所属団体、会社なんかを書き込んでおく。
そして、実際にコンテンツを作りこんでいく箇所は、48行目あたりから、
<div class="slide"> <h1>[slide title]</h1> <ul> <li>[point one]</li> <li>[point two]</li> <li>[point three]</li> <li>[point four]</li> <li>[point five]</li> </ul> <div class="handout"> [any material that should appear in print but not on the slide] </div> </div>
h1は1つ1つのスライドのタイトル。スライドショーそのもののタイトルではないことに気をつける。このh1が空白でもプレゼンは稼動するが、ウィンドウ右下のナビゲーションのリンク部分が空白になってしまうので、書いておいたほうが訪問者にとっては使いやすい。
h1の下には、ul、liでコンテンツを作っているが、別にpでもblockquoteでも問題ない。それぞれのタグがどういったスタイル指定をされているかは後述のCSSファイルを参考にしてほしい。ここで、実際にプレゼンの画面に表示したい内容をXHTMLで書き込んでいくわけ。
そして、divのclass属性のhandoutというもの。このスライドショーが印刷されるときやプレゼンのアウトラインの表示のみに出てくる箇所。つまり、スライドショーでS5をやっているときには見えないが、印刷やアウトラインの時のみ出現する。参照URLや何か残しておきたいコメントを書いておけばよい。このhandoutを使わなければ、
<div class="handout"> [any material that should appear in print but not on the slide] </div>
そのものを消しても問題ない。
このdivのclass属性のslideからdivを閉じるまでの箇所が1ページの扱いになる。そのため、1ページ増やしたければ、こんな感じにすればよい。これで、右下のナビゲーション部分にも新しいスライドが追加される仕組みになっている。
<div class="slide"> <h1>1ページ目</h1> <ul> <li>コンテンツ1</li> <li>コンテンツ2</li> <li>コンテンツ3</li> </ul> </div> <div class="slide"> <h1>2ページ目</h1> <p>自己紹介</p> <p>hogehogehogehoge</p> <div class="handout"> 私の個人ブログはこちら。。。。。 </div> </div>
コンテンツの作り方は以上で、あとは順次スライドを増やしていけばよい。また、S5ではエンコードが指定されていないので、文字化けする恐れがある。そのため、metaに
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" />
を入れておけばよい。
デザインを変える
S5はXHTML＋CSS＋JavaScriptなので、ほとんどのスライドショーのデザインをCSSが指定している。デフォルトのCSSファイルは「s5-blank→ui→default」に入っているCSSのファイル群。ここに、動きを指定しているJavaScriptのファイルも一緒に入っている。それぞれのファイルがどういった役割を担っているかを簡単に説明。
slides.js
クリックしたら先に進んだり、ナビを生成しているJavaScript。
s5-core.css
たぶん、各スライドをpositionで指定しているファイル。ただし、「you're likely to break the slide show unless you really know what you're doing.」というEric Meyer氏の解説があるので、触らないほうがよさそう。
pretty.css
スライドのデザインを全体的に包括しているファイル。ここのul、li、preなんかを変えた上で、s5-blank.htmlにXHTMLを記述すると、そのデザインが適用される。デフォルトで入っている、貝殻みたいな左上の画像もここでbodyのbackgroundで指定している。スライドショーのデザインを変更する時は、主にここをいじればよい。
outline.css
ウィンドウ右下のアウトラインのリンクをクリックした時に指定されるCSSファイル。ここもいじらないほうが吉。スライドショーがアウトライン形式に変換される（CSSがほとんど適用されない状態に戻るようなイメージ）
print.css
スライドをプリントアウトするときに適用されるCSS。「There are a couple of rules at the beginning of the file you should be careful about changing, but otherwise, it's all up to you.」ということなので、いじってもいいけど、あなたの責任に任せるよ、とのこと。ちなみに、デフォルトではアウトラインと印刷の際は、ほとんど同じような雰囲気になる。
あと、iepngfix.htcというのも入っているが、これはIEではPNG画像を読み込めないので、それを読み込ませるためのファイルらしい。詳細は分からない。
スライドをもっと動きのあるものにする
コンテンツを作り、デザインを変更し、このまま使っても何ら問題はないのだが、パワーポイントっぽく動きのあるスライドにもすることができる。
例えば、今のままでは1つのスライドが表示されると、その中のコンテンツが一気に表示されてしまうが、それを新しいスライドが出た時に、クリックするごとにコンテンツを出すという方法。やり方は簡単で、class属性にincrementalを指定すると、そういった効果になる。例えば、
<ul class="incremental"> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> </ul>
のような形で。このデザインに関しても、pretty.cssのファイル内に入っている。
また、もっとパワーポイントみたく動きをつけたい、という方がいれば、http://labs.cavorite.com/presentacular/を参考にすれば、スライドダウンなどの効果をJavaScriptファイルを読み込み、class属性を与えてやるだけで可能になる。
もっとカスタマイズするための注意点
- XHTML 1.0 Strict DOCTYPEはを冒頭で宣言する（そうしないと、IE6あたりが後方互換モードで起動してしまい、大幅にデザインが狂う）
- OSF 1.0に適合するために、metaに書かれているタグは消さない。たぶん、これのこと？
<meta name="generator" content="S5" />
- あと、CSSとJacvaScriptを読み込むファイルも消してはいけない。
<!-- style sheet links --> <link rel="stylesheet" href="ui/default/slides.css" type="text/css" media="projection" id="slideProj" /> <link rel="stylesheet" href="ui/default/outline.css" type="text/css" media="screen" id="outlineStyle" /> <link rel="stylesheet" href="ui/default/print.css" type="text/css" media="print" id="slidePrint" /> <link rel="stylesheet" href="ui/default/opera.css" type="text/css" media="projection" id="operaFix" /> <!-- S5 JS --> <script src="ui/default/slides.js" type="text/javascript"></script>
- XHTMLの"layout" div、"header"や"footer" divは動かさない。（スライドショーのトップ）
もっと詳細の情報はEric Meyer氏のホームページに書かれているので、そちらをご参照。
