jnobuyukiのブログ

研究していて困ったことやその解決に関するメモ。同じように困ったあなたのために。twitter ID: @j_nobuyuki

Reveal.jsを利用したプレゼンテーション

 学会発表などでスライドをつくるための定番ソフトウエアといえば、パワーポイントとキーノートです。最近は、Preziを使う人も増えてきました。
Prezi - Presentation Software
JavaScriptライブラリを利用すれば、どちらの形式のスライドも作れます。パワーポイントに似ているのがReveal.js、PreziににているのがImpact.jsです。PreziやImpact.jsは、上手に使わないと単に目の回るスライドになりがちです。今回は、Reveal.jsの使い方をまとめます。

Reveal.jsとは

Reveal.jsはHakim El Hattab(@hakimel)の開発したライブラリです。以下のウエブページでは、RevealでできることがRevealを利用したスライドの形式で示されています。
reveal.js - The HTML Presentation Framework
GitHubアカウントをお持ちの方なら、以下のサイトでコードをForkするのが手っ取り早いでしょう。
hakimel/reveal.js · GitHub
でも、一つ一つの機能をどこまで使うか分からないまま、いろいろなコードが最初から入っているサンプルコードを編集するのは、学習の効率で考えると必ずしも良いとはいえません。そこで、今回は必要最低限必要なコンポーネントを使います。また、このブログでは再三D3.jsを紹介していますが、D3.jsとの競合がないことを確認するため、あえて、D3.jsを加えたスライドの作成を目指しましょう。

Reveal.js部

まずはReveal.jsでスライドが動くようにします。

Head内

<head>
	<meta charset="UTF-8">
	<title>Test Slides</title>
	<link rel="stylesheet" href="reveal.js-2.6.1/css/reveal.min.css">
	<link rel="stylesheet" href="reveal.js-2.6.1/css/theme/default.css" id="theme">
	<script src = "reveal.js-2.6.1/lib/js/head.min.js"></script>
	<script src = "reveal.js-2.6.1/js/reveal.js"></script>
</head>

Head内では、エンコーディングとタイトルの設定のほか、reveal.min.cssとdefault.cssという二つのcssとhead.min.jsとreveal.jsという二つのjsファイルを読みこんでいます。
default.cssにフォントの種類やサイズ、背景の色指定などが書き込まれています。なので、これを書きかえることで、自分好みのデザインに変更できます。

Body内

Body内では最初に二つのdivノードを入れ子に作成します。外側のdivはスライドショーを示す"reveal"というクラスを設定します。入れ子にしたdivノードには"slides"というclassを設定します。slidesクラスが一連のスライドの範囲を決めていて、スライドショー全体としては、複数のスライドを含めることができるようです。

下位のdivノードの中にsectionノードを作成します。section要素で囲まれた内容がスライド1ページに相当します。

<div class = "reveal">
    <div class = "slides">
        <section>
		<h2>Reveal.js サンプルスライド</h2>
		<br><br>
		<h4>jnobuyuki</h4>
	</section>

    </div>

</div>

また、このsection要素はsection要素の下位におくことができます。上位のsectionオブジェクトはスライドの横スクロール、下位のsectionオブジェクトはスライドの縦スクロールに対応します。これを利用すると、大きなトピックの遷移は横スクロール、サブトピックの遷移は縦スクロールであらわすことができます。

			<section>
				<h2>Reveal.js サンプルスライド</h2>
				<br><br>
				<h4>jnobuyuki</h4>
			</section>

			<section id = "intro">
				<section>
				<p>本日の内容</p>
				<h4 class = "fragment visible">話題1</h4>
				<br>
				<h4 class = "fragment visible">話題2</h4>
				<br>
				<h4 class = "fragment visible">話題3</h4>

				</section>
				<section>
				<p>注意</p><br>
				<p><br><br><br><font color = "yellow">詳細な使い方は<br>Reveal.jsのウエブページで!</font></p>
				</section>
				
			</section>

最後に、reveal.js のinitialize を実行します。ここでも色々な設定ができます。

<script>
	Reveal.initialize();
</script>
D3.js部

次にD3.jsを利用してスライドの中にグラフを表示してみましょう。

どこでライブラリを呼び出すか?

D3.jsのライブラリを呼び出すタイミングですが、Reveal.jsと組み合わせて使うならhead内にしておく方がいいでしょう。個別のD3のスクリプトは、それを利用する場所にdiv要素を設置し、そのdiv要素に埋め込む形式で挿入します。

<head>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>

グラフ

では、例として[10,20,30,40,50,60,70,80,90,100]を要素に持つリストを棒グラフにしてみましょう。詳細を省略しますが、長方形の書きだす位置と高さをリストをデータとしたdとiで呼び出します。これで棒グラフのような形式が簡単に表示できます。

<section id = "difference">
	<section>
	<p></p>
	<div id = "div_cont"></div>
	<script>
		var svg_cont = d3.select("#div_cont").append("svg").attr("width",600).attr("height",480);
		var list = [10,20,30,40,50,60,70,80,90,100];
		var rect = svg_cont.append("g").selectAll("rect").data(list).enter().append("rect").attr("height",function(d){return  d*2;}).attr("width",46).attr("x",function(d,i){return i * 48;}).attr("y",function(d){return (480 - (d*2));}).attr("fill","white").attr("stroke","orange").attr("stroke-width",2);
	</script>
	</section>
</section>
まとめ Reveal.jsは手軽にスライドができる。こりたい人はCSSファイルを検討する。

Reveal.jsを利用すれば、ブラウザだけで、パワーポイント形式のスライドを作成し、プレゼンテーションを行えます。グラフの作成にはD3.jsが利用できます。現時点で、このような形式の発表が(心理学に関連したアカデミアでは)少ないので、それだけでインパクトを稼げるというメリットがあります。
また、このライブラリを使いこなせるかどうかは、いかにCSSファイルを自分好みに設定できるかにかかっていると思います。
(余裕があれば、今度はCSSの書き換えについてブログで取り上げます。)