Getting Started


概要

SlidepadはDocpadをベースとしたmarkdownファイルからHTMLプレゼンテーションを作成するツールです。
markdownファイルからプレゼンテーション用HTMLの出力、サーバ機能を提供します。
テンプレートにはBigdeck.jshtml5slidesimpress.jsのいずれかを選択することができます。


稼働環境

SlidepadはNode.jsアプリケーションのため、事前にNode.jsをインストールしておく必要があります。
インストール方法についてはNode.jsのオフィシャルにてご確認ください。
なお、package.jsonの内容は以下のとおりです。

"engines": {
  "node": "0.8.x",
  "npm": "1.1.x"
},
"dependencies": {
  "docpad": "6.x",
  "docpad-plugin-cleanurls": "2.x",
  "docpad-plugin-coffeescript": "2.x",
  "docpad-plugin-eco": "2.x",
  "docpad-plugin-markdown": "2.x",
  "docpad-plugin-stylus": "2.x",
  "docpad-plugin-text": "2.x",
  "docpad-plugin-coffeekup": "~2.1.1"
},
"devDependencies": {
  "docpad-plugin-livereload": "2.x"
},

docpad-plugin-livereloadプラグインはwebsocketを使ってリアルタイムに変更を描画する機能ですので、
websocketが使えるブラウザ推奨です。


インストール

Slidepadのインストール

git clone http://github.com/georgeOsdDev/slidepad.git
cd slidepad
npm install

サーバ起動

npm install -g docpad
docpad run

docpadコマンドを使わないでサーバ起動する場合

node node_modules/docpad/bin/docpad-server

デフォルトでは9778ポートを使用します。
http://localhost:9778


スライドコンテンツの作成

SlidepadではMarkdownファイルの保存場所および、メタ情報を元に各スライドテンプレートに変換します。
各マークダウンファイルは以下の様な構成で保存します。マークダウンの内容は各index.html.coffeeにインポートされ、
最終的にはindex.htmlとして出力されます。

/ 
└── src
    └── documents
        ├── big
        │   ├── big1.html.md
        │   ├── big2.html.md
        │   ├── ...
        │   ├── 
        │   └── index.html.coffee
        ├── deck.js
        │   ├── deck1.html.md
        │   ├── deck2.html.md
        │   ├── ...
        │   ├── 
        │   └── index.html.coffee
        ├── h5slides
        │   ├── h5slides1.html.md
        │   ├── h5slides2.html.md
        │   ├── ...
        │   ├── 
        │   └── index.html.coffee
        ├── impress.js
        │   ├── impress1.html.md
        │   ├── impress2.html.md
        │   ├── ...
        │   ├── 
        │   └── index.html.coffee
        ├── index.html.coffee
        ├── pages
        │   ├── start-ja.html.md
        │   └── start.html.md
        ├── scripts
        │   └── script.js.coffee
        └── styles
            └── style.css.styl


Bigをテンプレートに使う場合

マークダウン

---
pageOrder: 1
tags: ['big']
title: 'big1'
---
use _↔_ to navigate

---で囲まれた先頭5行がメタ情報となります。
なお、---で囲まれた部分はcoffee-scriptの文法となります。

変換内容

Bigは<div>エレメント単位でスライドを表示するためSlidepadでは1マークダウンファイルを1<div>エレメントとしてindex.htmlに出力します。

スタイル

デフォルトではBigのデフォルトCSSを適用しています。
別のスタイルを適用したい場合は、/src/documents/laout/default.html.coffeeのL71付近を修正してください。

switch @document.layout
  when 'big.html.coffee'
    link rel:'stylesheet', href:'/vendor/big/big.css', type:'text/css'
    script src:'/vendor/big/big.js'

表示

http://localhost:9778/big

参考

Bigについて詳しくはこちら


deck.jsをテンプレートに使う場合

マークダウン

---
sectionId:'deck2'
pageOrder: 2
tags: ['deck']
child: ['deck3','deck4','deck5']
title: 'deck2'
---
## Deck.js is
### Modern HTML Presentations

---で囲まれた先頭5行がメタ情報となります。
なお、---で囲まれた部分はcoffee-scriptの文法となります。

変換内容

deck.jsは<section>エレメント単位でスライドを表示・アニメーションするためSlidepadでは1マークダウンファイルを1<section>エレメントとしてindex.htmlに出力します。
1スライド内で複数のセクションをアニメーションさせるためにはchildを記載する必要があります。

スタイル

デフォルトではdeck.jsのswissスタイルを適用しています。
別のスタイルを適用したい場合は、/src/documents/laout/default.html.coffeeのL74〜L90付近を修正してください。

when 'deck.html.coffee'
  text @getBlock('styles').add([
    '/vendor/deck/core/deck.core.css'
    # Chose extentions
    '/vendor/deck/extensions/goto/deck.goto.css'
    '/vendor/deck/extensions/menu/deck.menu.css'
    '/vendor/deck/extensions/navigation/deck.navigation.css'
    '/vendor/deck/extensions/status/deck.status.css'
    '/vendor/deck/extensions/hash/deck.hash.css'
    '/vendor/deck/extensions/scale/deck.scale.css'
    # Chose style
    '/vendor/deck/themes/style/swiss.css'
    # '/vendor/deck/themes/style/neon.css'
    # '/vendor/deck/themes/style/web-2.0.css'
    '/vendor/deck/themes/transition/horizontal-slide.css'
    # '/vendor/deck/themes/transition/vertical-slide.css'
    # '/vendor/deck/themes/transition/fade-slide.css'
  ]).toHTML()
  script src:'/vendor/deck/modernizr.custom.js'

また、deck.jsの拡張機能については
/src/documents/laout/deck.html.coffeeのL12〜L17でインポートしています。

text @getBlock('scripts').add([
  '/vendor/jquery.js'
  '/vendor/deck/core/deck.core.js'
  '/vendor/deck/extensions/hash/deck.hash.js'
  '/vendor/deck/extensions/menu/deck.menu.js'
  '/vendor/deck/extensions/goto/deck.goto.js'
  '/vendor/deck/extensions/status/deck.status.js'
  '/vendor/deck/extensions/navigation/deck.navigation.js'
  '/vendor/deck/extensions/scale/deck.scale.js'
]).toHTML()

カスタマイズは
/src/documents/deck/index.html.coffeeのL37以降を参照ください。

参考

deck.jsについて詳しくはこちら


html5slidesをテンプレートに使う場合

マークダウン

---
pageOrder: 2
tags: ['h5slides']
additionalClass:'build'
title: 'h5slides2'
---

### about html5slides
 * Official : http://code.google.com/p/html5slides/
 * Official Demo : http://html5slides.googlecode.com/svn/trunk/template/index.html

---で囲まれた先頭5行がメタ情報となります。
なお、---で囲まれた部分はcoffee-scriptの文法となります。

変換内容

html5slidesは<article>エレメント単位でスライドを表示するためSlidepadでは1マークダウンファイルを1<article>エレメントとしてindex.htmlに出力します。

スタイル

デフォルトではdefault Google templateを適用しています。
別のスタイルを適用したい場合は、/src/documents/h5slides/index.html.coffeeのL11を修正してください。

section class:'slides layout-regular template-default', ->

適用可能なスタイルについてはこちらを参照してください。

参考

html5slidesについて詳しくはこちら


impress.jsをテンプレートに使う場合

マークダウン

---
sectionId:'source'
title: 'impress7'
pageOrder: 7
tags: ['impress']
datax: 6300
datay: 2000
datarotate: 20
datascale: 4
additonalClass : ""
---
Save it at '/src/documents/impress'
Start server 'docpad run'
and then access [http://localhost:9778/impress.js](http://localhost:9778/impress.js)

want to know more?
Read [Get Started](/pages/start)
Luke!

---で囲まれた先頭5行がメタ情報となります。
なお、---で囲まれた部分はcoffee-scriptの文法となります。

変換内容

impress.jsの<div>にメタ情報を追記して1マークダウンファイルを1<div>ステップとしてindex.htmlに出力します。

スタイル

デフォルトではimpress.jsオフィシャルデモのCSSを適用しています。
任意のスタイルは変更可能です。
別のスタイルを適用したい場合は、/src/documents/laout/default.html.coffeeのL97〜L102付近を修正してください。

when 'impress.html.coffee'
  # write own style
  text @getBlock('styles').add([
    'http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic'
    '/vendor/impress/css/impress-demo.css'
  ]).toHTML()

参考

impress.jsについて詳しくはこちら


Back Home