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

とりあえず作ったプレゼンはこちらです：[JSアプリをCoffeeでTDDするイマドキの環境](http://weed.github.io/FizzBuzzCoffee_p140821/#/step-1)

例えば↓が・・・

```
# おまけ

おまけです

---

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

- 説明
  + 説明
  + 説明
```

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

![mdpress-sample01.jpg](https://qiita-image-store.s3.amazonaws.com/0/12939/e1905108-3f2f-8676-f9fd-bc964872a68a.jpeg)

![mdpress-sample02.jpg](https://qiita-image-store.s3.amazonaws.com/0/12939/95032509-41b4-5682-a7dd-e5ac12258c0c.jpeg)

例えば↓が・・・

```
## expectJS

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

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

こうなります。

![mdpress-sample03.jpg](https://qiita-image-store.s3.amazonaws.com/0/12939/9628ea9b-fcd2-5bf3-1007-85d15e245848.jpeg)

## mdpress

![mdpress.png](https://qiita-image-store.s3.amazonaws.com/0/12939/328f0127-36f6-192c-cb5e-f332957db09c.png)

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

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

```shell-session
$ mdpress readme.md
```

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

### mdpressの良いところ

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

###シンタックスハイライト

![mdpress-sample04.jpg](https://qiita-image-store.s3.amazonaws.com/0/12939/ed934e75-bcb4-2989-ae69-ec3e901d62ee.jpeg)

![mdpress-sample05.jpg](https://qiita-image-store.s3.amazonaws.com/0/12939/ac7ae8be-e627-a191-fa0e-5c06ef8b429c.jpeg)

- 言語別のシンタックスハイライトには未対応

- しかたないので[Online syntax highlighter like TextMate](http://markup.su/highlighter/)でシンタックスハイライトします

![mdpress-sample06.jpg](https://qiita-image-store.s3.amazonaws.com/0/12939/53eed83c-5b34-ea8a-009b-e3f2ae2e4461.jpeg)

---

しかし・・・

Markdown文書を編集

→mdpressコマンドを実行

→ブラウザに移る

→ブラウザを更新

→Markdown文書の編集に戻る

# **めんどくさい**

・・・そこで、

## generator-mdpress

![BrianHolt.png](https://qiita-image-store.s3.amazonaws.com/0/12939/83a5dafc-dca9-c71a-8414-b29e6b37dd9b.png)

（作者のBrian Holtさん）

- mdpressの作業を自動化します

```sh
$ yo mdpress
```

- これで自動化準備完了

```sh
$ grunt server
```

これで

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

つまり**全自動**

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

ひえー

（[画像も更新するには](http://weed.cocolog-nifty.com/wzero3es/2015/01/markdown---qiit.html)）

---

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

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

![mdpress-sample07.jpg](https://qiita-image-store.s3.amazonaws.com/0/12939/d13c90af-5cc2-7446-380f-73c2288452b5.jpeg)

この記事のリポジトリ：[weed/FizzBuzzCoffee_p140821](https://github.com/weed/FizzBuzzCoffee_p140821)
### つくり方

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

### 良いところ

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

### 悪いところ
    
- 更新がややこしい

### 更新のやり方   

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

スクリプト化してみる：

```bash: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

![MichealBenedict.jpeg](https://qiita-image-store.s3.amazonaws.com/0/12939/4196d9eb-2e9a-2fcf-00e4-814b6cf1f4c7.jpeg)

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

```sh
$ gulp deploy
```

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

ひえー

---

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

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

# **めんどくさい**

・・・そこで、

## deck2pdf

![CedricChampeau.jpeg](https://qiita-image-store.s3.amazonaws.com/0/12939/66757a75-2dc7-f7da-40ab-d1ccdbbfe8e8.jpeg)

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

```sh
$ deck2pdf --profile=impressjs index.html
```

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

SlideShare: [Markdownでプレゼンテーション！](http://www.slideshare.net/uedatatsuro/output1-43264152)

ひえー

# まとめ

- mdpress
- mdpress-genarator
- gulp-gh-pages
- deck2pdf

・・・で、MarkdownでGitHubな

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

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

---
ブログやっています：[Weed software](http://weed.cocolog-nifty.com/wzero3es/)