Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
40
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

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

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

例えば↓が・・・

# おまけ

おまけです

---

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

- 説明
  + 説明
  + 説明

↓こうなります(ブラウザ上)

mdpress-sample01.jpg

mdpress-sample02.jpg

例えば↓が・・・

## expectJS

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

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

こうなります。

mdpress-sample03.jpg

mdpress

mdpress.png

(作者のAditya Bhargavaさん・・・読めない汗)

  • MarkDown文書からプレゼンテーションを生成するgem
$ mdpress readme.md
  • これだけで readme というフォルダが作成され、その中の index.html を開くとプレゼンテーションが始まります

mdpressの良いところ

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

シンタックスハイライト

mdpress-sample04.jpg

mdpress-sample05.jpg

mdpress-sample06.jpg


しかし・・・

Markdown文書を編集

→mdpressコマンドを実行

→ブラウザに移る

→ブラウザを更新

→Markdown文書の編集に戻る

めんどくさい

・・・そこで、

generator-mdpress

BrianHolt.png

(作者のBrian Holtさん)

  • mdpressの作業を自動化します
$ yo mdpress
  • これで自動化準備完了
$ grunt server

これで

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

つまり全自動

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

ひえー

画像も更新するには


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

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

mdpress-sample07.jpg

この記事のリポジトリ: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

MichealBenedict.jpeg

(作者のMicheal Benedictさん。Twitter社に勤務。)

$ gulp deploy

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

ひえー


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

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

めんどくさい

・・・そこで、

deck2pdf

CedricChampeau.jpeg

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

$ deck2pdf --profile=impressjs index.html

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

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

ひえー

まとめ

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

・・・で、MarkdownでGitHubな

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

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


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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
40
Help us understand the problem. What are the problem?