遅ばせながら、JavaScriptで書けるプレゼン、revealjsを始めてみた

公開日:2021-11-17 更新日:2021-11-17

HTML/CSS Javascript revealjs

t f B! P L
20211117_revealjs_1

せっかく勉強したので、HTML/CSS/JavaScriptで書けるプレゼンツール、revealjsを使ってみたお話


  1. HTML/CSS/JavaScriptで書けるプレゼンツール比較
  2. Node.js(on nodebrew)のインストール
  3. revealjsのインストール
  4. revealjsの書き方

HTML/CSS/JavaScriptで書けるプレゼンツール比較

HTML/CSS/JavaScriptで書けるプレゼンテーションツールは色々あると思うけど、
impress.jsとか、revealjsあたりが有名らしい

両方触ってみて、学生時代Preziを使っていた自分にとっては、自由度の高いimpress.jsの方が親しみを覚えたが、デフォルトでPDF化できないのが辛いので、
revealjsの方が仕事では使えそう
※Preziは無償版では、作成スライドがインターネットに公開されてしまうので、仕事用には使えない

impress.jsデモサイト
https://impress.js.org/

revealjsデモサイト
https://revealjs.com/?demo

ということで、今回は、revealjsの始め方について紹介


Node.js(on nodebrew)のインストール

インストール方法は以下の公式ページに載っているが、今回は推奨のフルセットアップでインストールする
https://revealjs.com/installation/#basic-setup

フルセットアップのためにはnode(10.0.0以上)が必要なので
まずはNode.jsをインストール
(すでにインストールされている方は飛ばしてください)

※前提:brewはインストール済み

Node.jsのインストールは、以下記事を参考にしました
MacにNode.jsをインストール

まずはNodeのバージョン管理ツールのnodebrewをインストールする
(revealjsを動かすのに必須ではないですが今後のために、nodenvを使っている人はnodenvで良いです)

% brew install nodebrew
...
...
% nodebrew -v
nodebrew 1.1.0
...
...
Example:
    # install
    nodebrew install v8.9.4
    # use a specific version number
    nodebrew use v8.9.4

nodebrewを使えるようにする

% nodebrew setup
Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew
========================================
Export a path to nodebrew:
export PATH=$HOME/.nodebrew/current/bin:$PATH
========================================

nodebrewを使ってNode.js(v10.0.0)をインストール

% nodebrew install-binary v10.0.0
Fetching: https://nodejs.org/dist/v10.0.0/node-v10.0.0-darwin-x64.tar.gz
##################################################################################### 100.0%
Installed successfully

インストールできた

% nodebrew ls
v10.0.0
current: none

インストールしたv10.0.0を使えるようにする

% nodebrew use v10.0.0
use v10.0.0
% nodebrew ls
v10.0.0
current: v10.0.0

パスを通すためにzshrcに「export PATH=$HOME/.nodebrew/current/bin:$PATH」を追記
(自分の環境は.zshrcに書いていますが、bashrcなど使っている環境に合わせたファイルに記載してください)

% tail ~/.zshrc
export PATH=$HOME/.nodebrew/current/bin:$PATH

設定反映

% source ~/.zshrc
% node -v
v10.0.0

revealjsのインストール

ここからようやく、revealjsをインストールしていく

作業用ディレクトリを作成

% mkdir reveal_work
% cd reveal_work

git clone

% git clone https://github.com/hakimel/reveal.js.git
...
...

インストール

% cd reveal.js && npm install
...
...

インストールできたので起動する

% npm start
...
[09:38:39] Starting server...
[09:38:39] Server started http://localhost:8000
...

http://localhost:8000/
にアクセスすると無事に起動していることが確認できる

20211117_revealjs_2

revealjsの書き方

中身を見るとわかるとおり、基本的に「index.html」を編集する方法でOK
demo.htmlというファイルも入っているので、こちらの中身をみると使い方がよくわかる

%  tree -L 1 ./
./
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── css
├── demo.html
├── dist
├── examples
├── gulpfile.js
├── index.html
├── js
├── node_modules
├── package-lock.json
├── package.json
├── plugin
└── test

7 directories, 8 files

中身を見ると、bodyタグの中に、sectionタグがあり、sectionタグで囲まれた範囲がスライド一枚になる

% cat index.html
...
	<body>
		<div class="reveal">
			<div class="slides">
				<section>Slide 1</section>
				<section>Slide 2</section>
			</div>
		</div>
...

普通のhtmlとして書いて行ってもいいが、便利なアトリビュートも用意されており、
例えば、以下のように「data-background-image」に画像を指定すると

% cat index.html
...
	<body>
		<div class="reveal">
			<div class="slides">
				<section data-background-image="cat.jpg">Slide 1</section>
				<section>Slide 2</section>
			</div>
		</div>
...

こんな感じで背景画像が設定される(あら簡単)

20211117_revealjs_1

PDF出力するには、「http://localhost:8000/?print-pdf 」にアクセスして出力されたページをPDF化
自分の環境では、背景が黒だとうまく出力できなかったので、背景は白か画像指定で作成すると良いと思います

他にも色々機能あるので、公式サイト を見ながらいじってみてください

参考:https://revealjs.com/backgrounds/
素材出典元:https://girlydrop.com

以上。

About me

ゆかき(♀)

アラサー駆け出しインフラエンジニア
ど文系営業からSEへ転身し日々奮闘している人

一児の母

#AP応用情報 #HTML5Lv1 #第2種電気工事士 #DCP(Data Center Practitioner) #LPIC Lv2 #VCP6.5 #CCNP #Oracle Bronze #HTMLv5 #TOEIC860

Media

こちらのイベントで記事紹介いただいていた、嬉しい。

Line stamp

僭越ながら販売中

Green cat & Orange cat

Amazon