albatrosary's blog

UI/UXとエンタープライズシステム

YEOMAN Advent Calendar 10日目:generator-reveal を紹介します

ジェネレータ generator-reveal を紹介します。このエントリーは「YEOMAN Advent Calendar 2014」12月10日の記事です。

YEOMAN Advent Calendar 2014 - Adventar

reveal.jsというのはHTMLプレゼンテーションのことです。これを使うとかっこいいプレゼンテーションがすぐに作れしかもHTMLです。

reveal.js - The HTML Presentation Framework

インストールから実行まで

インストール

いつものようにジェネレータをインストールしてプロジェクトディレクトリを作りyoとgruntの実行です。

$ npm install -g generator-reveal
$ mkdir reveal && cd $_
$ yo reveal
$ grunt serve

revealにはいくつかのテーマがあります。今回は「beige」を選びました。

? What Reveal.js theme would you like to use? 
  1) beige
  2) blood
  3) default
  4) moon
  5) night
  6) serif
  7) simple
  8) sky
  9) solarized

実行

実行結果は次の通りです:

f:id:albatrosary:20141210142444p:plain

これで終わりではあまり面白いものではないのですがサブジェネレータを使ってページを増やすことができます。次のコマンドを実行するとページが増えます。先ほど生成したページに「▶︎」が加わっているのが確認できます。

$ yo reveal:slide "Slide Title"

f:id:albatrosary:20141210142651p:plain

f:id:albatrosary:20141210142708p:plain

最後に

reveal.js でHTMLでできたかっこいいプレゼン資料をつくることができますが、このジェネレータを使うかどうかは不明ではあります。今回はこういうのもありますよ的なご紹介でした。