ブラウザででプレゼンテーションするためのおすすめJavaScriptライブラリ3つ

ブラウザでプレゼンテーションするためのJavaScriptライブラリを調べて見ました。そのなかで特におすすめさせて頂きたい3つを紹介します。

deck.js

凝ったスライドを見せたいというようりもシンプルに利用したい人にお勧めです。

テクノロジーに強い層だけでなく幅広い層に対してWebでプレゼンテーションを公開する場合はdeck.jsが一番お勧めです。全画面展開をすると混乱を招く恐れがあるためヘッダー・フッターは残しつつ、コンテンツエリアでスライドを展開して、ページ送りボタンを目立たせる事で利用者に混乱が少ない状態でスライドをWebページに埋め込む事ができます。

サポートブラウザ

基本的にIE7以上をサポート対象

Github

imakewebthings/deck.js · GitHub Star: 4020 Fork: 478 [2014/04/16現在]
coreとextensionsに分けている事から拡張性に重きをおいている事が伺えます。

reveal.js

reveal.js - The HTML Presentation Framework

非常に高機能です。3Dの表現から始まりマークダウン対応、PDFエクスポートや講演者ノートまで様々な機能を内包しています。スライドを作りこんでプレゼンテーションをしたい人にはお勧めです。

個人的にはこれであればパワポで作った方が……なんて思ってしまいますが。

サポートブラウザ

3D有無やぐりぐりアニメーションを動かすかで変わってくるようですが、基本的にはIE8以上がサポート範囲です。凝ったことをするなら最新のクロムなどが必要と考えておいた方が良さそうです。

プレゼンテーションとして利用するユーザー層を想定すると問題になることはないでしょう。一般に公開する場合は少し注意が必要かもしれません。

Browser Support · hakimel/reveal.js Wiki · GitHub

Github

hakimel/reveal.js · GitHub Star: 14675 Fork: 4155 [2014/04/16現在]

長い長いREADMEに必要な情報は全て詰まっています。

impress.js

impress.js | presentation tool based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bartaz

パワーポイントやKeynoteとういよりも、Preziにインスパイアされて作成されたライブラリです。Preziのようなグリグリアニメーションのプレゼンテーションが利用できます。

セミナー等外部の人を対象にしたプレゼンテーションで利用するのはかなり勇気(力量)がいりますが、社内向けのプレゼンテーションなどで利用すれば注目されそうですね。また、ある程度のテクノロジーの明るい層に向けてインパクトを出したいときにも使えそうですが、実際は使いドコロが難しそうですね。。。

サポートブラウザ

CSS 3D transformsが(部分)サポートされているIE10以上がサポート対象です。まあ、性質上無理に下位ブラウザをサポートする必要性は感じられませんよね。

Github

bartaz/impress.js Star: 19876 Fork: 4013 [2014/04/16現在]

詳細ソース読め;)

まとめ

自社Webサイト公開など幅広い層に共有目的であればdeck.js
自分で凝ったプレゼンテーションをしたい人はreveal.js
時間がかかっても動きにこだわりたい職人はimpress.js