HTMLでパワポっぽいスライドを作るための軽量フレームワークbespoke.js

Pocket

例えば「このページの内容をパワポっぽくスライド表示するモードが欲しい」なんていうとき、役に立つフレームワークです。

bespoke.js

reveal.jsと何が違うの?

HTMLでプレゼンテーションのスライドを作れるJSとして、とても有名なものにreveal.jsがありますが、これはHTMLで本格的なスライドを作るためのJSなので、冒頭の用途には使いづらいです。

bespoke.jsの動作は凄く単純で、

みたいなマークアップをされているコードに対して、

といった感じにクラスを振ってくれるだけです。

といった感じのコードでスライドを進めることができます(bespoke-activeが切り替わる)。

フレームワークとしてはこんな感じのJSが用意されているだけで、実際にスライドをスタイルするようなCSSは用意されていません。bespoke.jsが振ってくれるCSSクラスに対して自分でスタイルする必要があります。このJSの紹介に”DIY Presentation Micro-Framework”とあるのですが、これがDIYたる所以ですかね。

なにぶんこれしか機能がないので、既存のページをパワポっぽいスライドに仕立てるのにはぴったりなのです。

あとはCSSで表示しないHTMLをdisplay:noneしておいたり、CSSの切り替わりのときのアニメーションをtransitionで仕込んだりすれば、それっぽいのができます。

既存ページをパワポっぽいスライドに仕立てるニーズがある方は、お試しを。

bespoke.js