noramemo

こんにちは！@noramasaです。
web制作のお仕事に就いて早くも6年近く経ったところですが、最近は制作業務以外を担当することが増えてきています。
特に打ち合わせ・プレゼンテーションに関わることが多いです。
今回はそんなプレゼンテーションについて、webページで行うのにもってこいのフレームワークを使ってみたので使い方を覚え書き。

プレゼンテーションするなら○○！

一般的に使われるのは「PowerPoint」というoffice系ソフトだと思います。実際、私も高校～専門学校時代には使っていましたし、今でもよく使われているのを見かけます。
あとはIllustratorといったソフトを使って作成したシートをPDF化しているパターンも多いですね。

「PowerPoint」はプレゼンテーションに特化したソフトではありますが、制作会社がそれだとちょっと拍子抜け感がしたり。。。
個人的な意見では、文字を細かく小出しにしたり、エフェクトやサウンドを盛りに盛った「PowerPoint」の資料は好きじゃない（内容が頭に入ってこない…）ので、ページが変わるときにシンプルな動作をするくらいが丁度いいと思ってます。

理由は、単純にリスナーの「気を引く」こと以上に「内容が伝わる」ことの方が大事だと思うのです…まぁこのあたりは個人によって考え方はまちまちなので置いときましょう。

実装・設定方法

まずは配布元からデータをダウンロード。
サンプルのデータが多いので必要なファイルだけを選別しといた方がよさそうです。。。

ざっくりと重要箇所だけ出しておくと以下の通り。

・・・略・・・

<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/default.css" id="theme">
<link rel="stylesheet" href="lib/css/zenburn.css">

・・・略・・・

<div class="slides">
	<section>
		<h1>Scheduled departure plan</h1>
		<p>～ noramasaが定時に退社するための極秘計画 ～</p>
	</section>

	<section>
		<h2>Definite plan</h2>
		<ol>
			<li>面倒事には首を突っ込まない</li>
			<li>大きい案件は人任せ</li>
			<li>納期の不安な案件は後輩にフル</li>
			<li>それでも無理なら外注にフル</li>
		</ol>
	</section>
</div>

・・・略・・・

<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>

・・・略・・・

sectionの数がページ数

sectionタグで一括りの要素になります。上記の例だと横並びに2つのページができたわけです。ページ数のカウントなども自動で判断してくれるそうなので大助かり！
さらに、sectionタグを入れ子にすることで縦並びにスクロールする形も実装できます。章分けなんかに役立ちますね。

<section>
	<h1>これで1ページ！～タイトル～</h1>
	<p>～この部分が本文～</p>
</section>

画像や動画の掲載も可能

テキスト同様に、sectionタグ内にimg要素とかを記述することで画像も使えます。要素を全て画像化したものでもページ切り替えのエフェクトなんかは変わらないので、『htmlはimgタグしかわかりません！？！？！？』みたいな方でも画像さえできれば特殊なコーディングも必要ないので便利かなと思います。

時間指定による自動スライドショー

ページの切り替え時間を指定して自動化することが可能で、制限時間があるプレゼンでも重宝しそうです。
5秒おきに切り替える場合は下記のように設定します。

Reveal.configure({ autoSlide: 5000 });

簡単なデモサンプル

スタイルなどは編集せずにちょっとだけ触ってみたので仮置きレベルでサンプルアップしておきます。
配布されているものからざっくり抜粋しているので実際に使用するときは配布元のデータを参考にしてくださいまし。

>>>デモ版はこちらからご確認ください。

まとめ

プレゼンテーションは結局のところ資料が良くてもプレゼンターがしっかり伝えないと意味が無かったり…ということで、資料はいい具合にできたぞ！っていう自信につなげることにして、あとは自力でプレゼンテーションが成功するようにがんばりましょう:)

以上、@noramasaでした！

参考：もう時間オーバーしない、必ず時間ピッタリに終わるLT用スライド(reveal.js)