2008年10月3日金曜日

プレゼンにも使えるjavascriptライブラリ"HTML Slidy"

HTML Slidy以前学校での講義の際、ある先生がhtmlのページを"→キー"だけでスライドさせておりました。便利だなぁと思いつつ、今回制作物を発表することになったので、興味本位で試してみることにしました。先生のスライドファイルをFirebugで覗いていると、どうやらW3Cが公開する"HTML Slidy"というjavascriptライブラリを使用していると判明!そうとわかればコッチのもの、得意の執拗な検索コンボの始まりです。以下、今回制作するまでの僕の手順になります。

1.CSSファイルを作成(ファイル名"slidy.css")
→"http://www.w3.org/Talks/Tools/Slidy/slidy.css"
2.jsファイルを作成(ファイル名"slidy.js")
→"
http://www.w3.org/Talks/Tools/Slidy/slidy.js "
3.以下の雛形を貼り付けたXHTMLファイルを作成
*必要に応じて書き換えてください
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Slide Shows in XHTML</title>
<meta name="copyright"
content="Copyright &#169; 2005 your copyright notice" />
<link rel="stylesheet" type="text/css" media="screen, projection, print"
href="http://www.w3.org/Talks/Tools/Slidy/slidy.css" />
<script src="http://www.w3.org/Talks/Tools/Slidy/slidy.js"
charset="utf-8" type="text/javascript"></script>
<style type="text/css">
<!-- your custom style rules -->
</style>
</head>
<body>
... ここでマークアップしていきます ...
</body>
</html>
4.以下のルールに従い、マークアップ
・スライドさせるページは、以下の1枚目、2枚目…の部分に記述する
<div class="slide">1枚目</div>
<div class="slide">2枚目</div>
------------------------------------------------------------------------------------------------------------
・スライドのタイトルはh1タグで囲む
<h1>スライドのタイトル</h1>
------------------------------------------------------------------------------------------------------------
・ページ内の情報を"→キー"ごとに表示させる場合はclass="incremental"を使う
<div class="incremental">
<p>1クリック目に表示</p>
<p>2クリック目に表示</p>
<p>3クリック目に表示</p>
</div>
------------------------------------------------------------------------------------------------------------
と言ったところです。
スライドページの操作としては、"→","space"、"クリック"で次ページに進み、"←"で前ページに戻ります。キー1つで、文字サイズを変更やスライドページの解除も可能です。僕も参考にさせていただいた"HTML Slidyの使い方"さんでは、ここまで書いたものをより分かりやすく、そしてより詳しくまとめてくださってます。最初からこちらを紹介したほうが皆さんの為ですね(笑)
肝心のサンプルページですが、"HTML Slidyの公式ページ(英語)"や、先ほど紹介させていただいた"HTML Slidyの使い方"さんで確認できます。

プレゼンや説明などする際に役立ちそうなツール、覚えておいて損は無いと思いますよ!

2 件のコメント:

Unknown さんのコメント...

おおslidyじゃないですか・・・
昨日のプレゼンでぼくも使いましたよ。

昨日は6作品だけだったので、時間無制限と言われたので、25分位話したら、大ひんしゅくでした。

教訓:プレゼンはあまりしゃべりすぎると嫌われちゃうぞ!

詳細はブログで!

otani さんのコメント...

プレゼンお疲れ様でした!僕は先ほど東北から帰ってきましたよ(旅行に行ってたのですw)
6人しか発表者がいなかった…というのも驚きですが、25分のプレゼンのほうがもっと驚きですよwwそれだけ内容が充実しているってことですね!

教訓を活かし、僕は5分で切り上げます!