とりあえず作ったプレゼンはこちらです：JSアプリをCoffeeでTDDするイマドキの環境

例えば↓が・・・

# おまけ

おまけです

---

## このプレゼンテーションはMarkdownで書いてます

- 説明
  + 説明
  + 説明

↓こうなります（ブラウザ上）

例えば↓が・・・

## expectJS

![expectJS](image/LearnBoost.png)（作者のLearnBoostさんのアイコン）

- **should.js** をべースに開発されたミニマムなBDDアサーションライブラリ
- **mongoose** や **stylus** の作者が作成
- クロスブラウザ: IE6+, Firefox, Safari, Chrome, Operaで動作
- 全てのテスティングフレームワークと併用可能
- Node.JSで使用可能(`require('expect.js')`)
- スタンドアローン

こうなります。

mdpress

（作者のAditya Bhargavaさん・・・読めない汗）

MarkDown文書からプレゼンテーションを生成するgem

$ mdpress readme.md

これだけで readme というフォルダが作成され、その中の index.html を開くとプレゼンテーションが始まります

mdpressの良いところ

Markdownラクチン！
とりあえずLT用に見出しだけ作って、
LT後に加筆すれば記事になります
できた記事をQiita・はてなブログに貼り付ければパブリッシュ完了
無駄がないワークフロー

シンタックスハイライト

言語別のシンタックスハイライトには未対応
しかたないのでOnline syntax highlighter like TextMateでシンタックスハイライトします

しかし・・・

Markdown文書を編集

→mdpressコマンドを実行

→ブラウザに移る

→ブラウザを更新

→Markdown文書の編集に戻る

めんどくさい

・・・そこで、

generator-mdpress

（作者のBrian Holtさん）

mdpressの作業を自動化します

$ yo mdpress

これで自動化準備完了

$ grunt server

これで

プレゼンテーションをブラウザで開き
mdpressのソースファイルを監視し
更新があるとプレゼンテーションを更新し
ブラウザの更新（LiveReload）までしてくれます

つまり全自動

2画面あると、片方で編集、もう片方で仕上がりのチェックができます

ひえー

（画像も更新するには）

では作ったプレゼンテーションをどこに置くか？

GitHub Pagesでプレゼンテーション

この記事のリポジトリ：weed/FizzBuzzCoffee_p140821

つくり方

まず、普通にMarkdown文書を作る
$ mdpress readme.mdでプレゼンテーションが readme フォルダに作られる
originブランチにpush
Setting -> GitHub Pagesで空のGitHub Pagesをつくる
gh-pagesブランチがGitHub上にできる
pullするとgh-pagesブランチもローカルに付いてくる
$ git checkout gh-pages
$ cp -rf readme/* .
$ git push -u origin gh-pages （最初だけ）
$ git push （2回目以降）

良いところ

改訂したとき、diffが見れる
プルリクも送ることができる
ソース(Markdown)とプレゼンテーション(HTML)を同じ一つのリポジトリで管理できる
Qiitaやはてなブログのように、画像を一枚一枚アップしなくて良い
LT後の質疑などの内容を、筆者だけでなく聞いた人もプルリクで追記できる

悪いところ

更新がややこしい

更新のやり方

[origin] まずoriginブランチであるか確認
[origin] Markdownに追記
[origin] Markdownエディタを終了
[origin] git push
[origin] mdpressでリポジトリとは別のフォルダにプレゼン作成
[gh-pages] gh-pagesブランチに切り替える
[gh-pages] プレゼンをリポジトリにコピー
[gh-pages] git push
[origin] originブランチに戻しておく

スクリプト化してみる：

push.sh


# レポジトリに入る
# フォルダ名は引数にしたい
cd 140127-2013-soukatsu-2014-houshin

# Markdownをpush
git add .
git commit -m "commited automatically by push.sh"
git push

# mdpressコマンドでreadmeフォルダを生成
cd ..
mdpress 140127-2013-soukatsu-2014-houshin/readme.md

# gh-pagesブランチに切り替える
cd 140127-2013-soukatsu-2014-houshin
git checkout gh-pages

# 先ほど生成したreadmeフォルダの中身をレポジトリにコピーする
cp -rf ../readme/* .

# 自動的にcommit＋push
git add .
git commit -m "commited automatically by push.sh"
git push

# originブランチに戻す
git checkout master

# 元いたディレクトリに戻る
cd ..

めんどくさい

・・・そこで、

gulp-gh-pages

（作者のMicheal Benedictさん。Twitter社に勤務。）

$ gulp deploy

これで全部やってくれます

ひえー

さて、プレゼンが終わって

作ったプレゼンをSpeakerDeckやSlideShareにアップしたい
今までは・・・HTMLページを一枚ずつPDFにして、
あとでたばねて一つのPDFファイルにしていた

めんどくさい

・・・そこで、

deck2pdf

（作者のCedricさん。フランスからPivotal社にリモート勤務）

$ deck2pdf --profile=impressjs index.html

これで1つのPDFファイルにしてくれます

SlideShare: Markdownでプレゼンテーション！

ひえー

まとめ

mdpress
mdpress-genarator
gulp-gh-pages
deck2pdf

・・・で、MarkdownでGitHubな

プレゼンテーションライフを実現しましょう

最後まで読んでいただいて、ありがとうございました

ブログやっています：Weed software

Markdownで無駄のないプレゼンテーション！

mdpress

mdpressの良いところ

シンタックスハイライト

めんどくさい

generator-mdpress

GitHub Pagesでプレゼンテーション

つくり方

良いところ

悪いところ

更新のやり方

めんどくさい

gulp-gh-pages

さて、プレゼンが終わって

めんどくさい

deck2pdf

まとめ