[ Markdownでスライド作成 ] 5種類くらいツールを試してみた結果


## 2019/12 追記
[LTのスライド作成に時間をかけたくない](https://qiita.com/ta9star/items/da9af53c4bf542d3ae7a)
でリンクをいただいたので調べると、すごくよい機能があるみたいです。！！

[Marp for VSCode](https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode)というのがあるみたいで、VSCodeを使っている人はこれでいいのではないでしょうか。


## 2018/08 追記

未だにいいねされるので（2017年初期作成）、
最近の勉強会でよく使われているスライド作成ツールはマークダウンではありませんが
https://slides.com/ 圧倒的にこれだと思います。

![Screenshot from 2018-10-25 12-35-55.png](https://qiita-image-store.s3.amazonaws.com/0/112929/495f2c45-62e9-6a90-72f4-c31613facbc0.png)

Web上で簡単にスライド作れる系のやつです。

# Markdown記法でスライドを作ろう！

## 内容
+ 簡単な発表に使えるツールのまとめ
+ Markdown記法 + スライド作成！

## 心の声(思ってないですよ！)
* 最近Markdown記法使いすぎて、PPTの作成めんどくさい
* PPTを作らずboostnoteでの発表を本気で考えた
* 忙しくて…レイアウトにこだわりたくない…簡単な発表にしたいけどどうすればいいの
* 自己紹介発表めんどう…

## 試したツール一覧

* reveal.js
* remark.js
* Marp
* Swipe
* Qiita

## ツールごとのイメージ

こんな感じのマークダウンを書いた結果がこちら。

```sample.md
[Title]
===
###### Created by Yuki ( [@ykhirao](http://qiita.com/ykhirao) )
```

* reveal.js
<img width="1124" alt="スクリーンショット 2017-02-24 15.42.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/112929/009679b2-f716-1934-dc6b-f8492501eca9.png">

* remark.js
<img width="697" alt="スクリーンショット 2017-02-24 15.42.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/112929/faebd9d9-2eab-7674-1e42-9dc96375aebf.png">

* Marp
<img width="985" alt="スクリーンショット 2017-02-24 15.42.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/112929/81c9d9f8-c8f5-92a1-50c5-618456442333.png">

* Swipe
<img width="1092" alt="スクリーンショット 2017-02-24 15.42.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/112929/96669095-ef10-930b-544d-6fc2580224bd.png">

* Qiita
<img width="709" alt="スクリーンショット 2017-02-24 15.42.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/112929/c35187fb-3c73-3684-14be-8961595c99f9.png">

### 次のサンプル

次はこんな感じのマークダウンを書きました。

```sample.md
# How to write (1)

# # h1 test テスト
## ## h2 test テスト
### ### h3 test テスト
#### #### h4 test テスト
```

* reveal.js
<img width="1131" alt="スクリーンショット 2017-02-24 15.48.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/112929/2eeac40d-51e8-c274-0e6d-3938fbf0e785.png">


* remark.js
<img width="709" alt="スクリーンショット 2017-02-24 15.48.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/112929/05ee628c-95f4-e06a-38bb-b0ba6a08c87f.png">


* Marp
<img width="1005" alt="スクリーンショット 2017-02-24 15.48.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/112929/04ffc2c5-a690-09c3-ae87-be0c6e008061.png">


* Swipe
<img width="1127" alt="スクリーンショット 2017-02-24 15.49.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/112929/d8206ac4-3506-e2fe-be3a-860500a9694a.png">


* Qiita
<img width="722" alt="スクリーンショット 2017-02-24 15.49.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/112929/80f4b0d4-a910-ce0e-c6e5-4ae628b3859e.png">



### その他ちょっと長めのmdファイルの結果のスライド
[こちら](https://github.com/ykhirao/SlideByMarkdown/blob/gh-pages/main_contents.txt)のMarkDown記法で書いたファイルを微調整しつつ作ったスライド一覧がこちら！
どれもほとんどプレーンMarkDownですが、
CSSとかいじらなくても、ある程度整えてくれるものが多いです！

reveal.jsは[こちら](https://ykhirao.github.io/qiita/slide_markdown/reveal_js/index.html)
remark.jsは[こちら](https://ykhirao.github.io/qiita/slide_markdown/remark_js/remark_js.pdf)(pdf)
Marpは[こちら](https://ykhirao.github.io/qiita/slide_markdown/Marp/marp.pdf)(pdf)
Swipeは[こちら](https://swipe.to/6287cw)
Qiitaは[こちら](http://qiita.com/ykhirao/private/4596e88cf22fa6e04790)



# ツール詳細

## reveal.js

[GitHub](https://github.com/hakimel/reveal.js/)からファイルをダウンロードしてきて、`index.html`に直接テキストを書いていく方式です。
何も変更加えなくても、かなり動きがかっこいいです！
スライドは水平方向だけじゃなくて垂直方向にも動いたりして、かっこいい。
[ --- ] この文字列が次のページ,
[ <<< ] こ文字列で垂直下ページへの区切りという設定追加は2行

## remark.js
上記と同じく[GitHub](https://github.com/gnab/remark)からダウンロードしてきて、htmlファイルをいじる感じです。ほんと何もしなくてもMDファイルだけに集中すればいい感じです。改ページは[ --- ]
ローカルだとうまくいってるのですが、[GitHubページ](https://ykhirao.github.io/SlideByMarkdown/remark_js/)だとうまくいかないので、PDFでの公開です。情報求む。

## Marp
[こちら](https://yhatt.github.io/marp/)からダウンロードできる。
Electronで作られた、デスクトップアプリケーション。普通に使いやすい。
\#に色ついたり、上下の余白とかが一番使いやすかった。

## Swipe
Webで完結できるMD記法のスライド。
一度作成すると、ファイルがスライドごとに分割されてpdf化とmdファイルの取得ができない(?)ので、mdファイルの編集と保存管理はローカルでやるほうがいいかも。

## Qiitaスライド
おなじみキータのスライドモード。限定共有にしてプレゼンすればいいと思った。
使いやすいけど、全画面とプレビュー画面の差が大きい。

# まとめ
Marpが一番使いやすかったのと、reveal.jsがかっこよかったのでこの２つはおすすめ。
もちろん自分の用途にあったものをお使いください！

|  | reveal.js | remark.js | Marp | Swipe | Qiita |
|:-:|:-:|:-:|:-:|:-:|:-:|
|  改ページ | 設定  | ---  | --- \***  | \***  |  \*** |
| 下線`<hr>`  | \***  |  \*** | ?  | ---  | ---  |
| 縦スクロール  | 不可  | 不可  | 不可  |  可 | 可  |
| 独断と偏見のおすすめ  | \*****  | \****  | \*****  |  \*** | \***  |

* 縦スクロールは、はみ出した部分が見れるか見れないか
* 操作感は若干違いあるので、一番気に入ったのを使ってください！

# GitHubでwebページ公開しよう

皆様ご存知の通り、
GitHubの[ Master ]ブランチから [ gh-pages ]というブランチを切ったら、
https://[アカウント名].github.io/[リポジトリ名]/
で静的なWEBページ公開できるのでおすすめです！
上記URLだと、[リポジトリ名]直下のindex.htmlが読み込まれます！

# 最後に
* Markdownに慣れてるなら、簡単にそれっぽいスライド作れるようになったキガスル
* 1日でまとめた結果で間違ってる可能性高いので、何か誤情報あれば教えてください！