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

とりあえず作ったプレゼンはこちらです：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

つくり方

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

良いところ

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

悪いところ

• 更新がややこしい

更新のやり方

1. [origin] まずoriginブランチであるか確認
2. [origin] Markdownに追記
3. [origin] Markdownエディタを終了
4. [origin] git push
5. [origin] mdpressでリポジトリとは別のフォルダにプレゼン作成
6. [gh-pages] gh-pagesブランチに切り替える
7. [gh-pages] プレゼンをリポジトリにコピー
8. [gh-pages] git push
9. [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