プレゼンテーション生成のbespoke.jsをさわってみた

プレゼン用のスライドショーを簡単生成する nodeで動くbespoke.jsをさわってみた

結論

超簡単なので、これから使う。

必要なもの

brew install node
npm install -g yo generator-bespoke

新規スライド作成手順

mkdir sample_slide
cd sample_slide
yo bespoke #yeomanでプロジェクトが生成される。色々聞かれるけど全部yesでOK
grunt server #勝手にブラウザが立ち上がって、スライドショーが開始される

スライドの編集の仕方

src/index.jadeを修正すればおｋ grunt serverをしとけば、スライド直せばブラウザも更新されるのがなにげに便利。

    meta(charset='utf-8')
    meta(name='viewport', content='width=device-width, initial-scale=1, maximum-scale=1')
    title Sample Presentation

    // build:css styles/styles.css
    //- Check out 'src/bower_components/prism/themes/' for available themes
    link(rel='stylesheet', type='text/css', href='bower_components/prism/themes/prism-tomorrow.css')
    link(rel='stylesheet', type='text/css', href='styles/main.css')
    // endbuild

  body

    article

      section
        h1 はじめてのプレゼン

      section
        h2 画像とかも貼れる
        h3 <img src="https://pbs.twimg.com/profile_images/1650275843/__________2011-11-21_23.03.19.png">
                                                                                                                                                                                                              

    // build:js scripts/scripts.js
    script(src='bower_components/bespoke.js/dist/bespoke.min.js')
    script(src='bower_components/bespoke-keys/dist/bespoke-keys.min.js')
    script(src='bower_components/bespoke-touch/dist/bespoke-touch.min.js')
    script(src='bower_components/bespoke-bullets/dist/bespoke-bullets.min.js')
    script(src='bower_components/bespoke-scale/dist/bespoke-scale.min.js')
    script(src='bower_components/bespoke-hash/dist/bespoke-hash.min.js')
    script(src='bower_components/bespoke-progress/dist/bespoke-progress.min.js')
    script(src='bower_components/bespoke-state/dist/bespoke-state.min.js')
    script(src='bower_components/bespoke-forms/dist/bespoke-forms.min.js')
    script(src='bower_components/prism/prism.js')
    script(src='scripts/main.js')
    // endbuild

ブラウザではこんな感じに見える

f:id:chocopie116:20140601013742p:plain