2019/12 追記
LTのスライド作成に時間をかけたくない
でリンクをいただいたので調べると、すごくよい機能があるみたいです。!!
Marp for VSCodeというのがあるみたいで、VSCodeを使っている人はこれでいいのではないでしょうか。
2018/08 追記
未だにいいねされるので(2017年初期作成)、
最近の勉強会でよく使われているスライド作成ツールはマークダウンではありませんが
https://slides.com/ 圧倒的にこれだと思います。
Web上で簡単にスライド作れる系のやつです。
Markdown記法でスライドを作ろう!
内容
- 簡単な発表に使えるツールのまとめ
- Markdown記法 + スライド作成!
心の声(思ってないですよ!)
- 最近Markdown記法使いすぎて、PPTの作成めんどくさい
- PPTを作らずboostnoteでの発表を本気で考えた
- 忙しくて…レイアウトにこだわりたくない…簡単な発表にしたいけどどうすればいいの
- 自己紹介発表めんどう…
試したツール一覧
- reveal.js
- remark.js
- Marp
- Swipe
- Qiita
ツールごとのイメージ
こんな感じのマークダウンを書いた結果がこちら。
[Title]
===
###### Created by Yuki ( [@ykhirao](http://qiita.com/ykhirao) )
- reveal.js
- remark.js
- Marp
- Swipe
- Qiita
次のサンプル
次はこんな感じのマークダウンを書きました。
# How to write (1)
# # h1 test テスト
## ## h2 test テスト
### ### h3 test テスト
#### #### h4 test テスト
- reveal.js
- remark.js
- Marp
- Swipe
- Qiita
その他ちょっと長めのmdファイルの結果のスライド
こちらのMarkDown記法で書いたファイルを微調整しつつ作ったスライド一覧がこちら!
どれもほとんどプレーンMarkDownですが、
CSSとかいじらなくても、ある程度整えてくれるものが多いです!
reveal.jsはこちら
remark.jsはこちら(pdf)
Marpはこちら(pdf)
Swipeはこちら
Qiitaはこちら
ツール詳細
reveal.js
GitHubからファイルをダウンロードしてきて、index.html
に直接テキストを書いていく方式です。
何も変更加えなくても、かなり動きがかっこいいです!
スライドは水平方向だけじゃなくて垂直方向にも動いたりして、かっこいい。
[ --- ] この文字列が次のページ,
[ <<< ] こ文字列で垂直下ページへの区切りという設定追加は2行
remark.js
上記と同じくGitHubからダウンロードしてきて、htmlファイルをいじる感じです。ほんと何もしなくてもMDファイルだけに集中すればいい感じです。改ページは[ --- ]
ローカルだとうまくいってるのですが、GitHubページだとうまくいかないので、PDFでの公開です。情報求む。
Marp
こちらからダウンロードできる。
Electronで作られた、デスクトップアプリケーション。普通に使いやすい。
#に色ついたり、上下の余白とかが一番使いやすかった。
Swipe
Webで完結できるMD記法のスライド。
一度作成すると、ファイルがスライドごとに分割されてpdf化とmdファイルの取得ができない(?)ので、mdファイルの編集と保存管理はローカルでやるほうがいいかも。
Qiitaスライド
おなじみキータのスライドモード。限定共有にしてプレゼンすればいいと思った。
使いやすいけど、全画面とプレビュー画面の差が大きい。
まとめ
Marpが一番使いやすかったのと、reveal.jsがかっこよかったのでこの2つはおすすめ。
もちろん自分の用途にあったものをお使いください!
reveal.js | remark.js | Marp | Swipe | Qiita | |
---|---|---|---|---|---|
改ページ | 設定 | --- | --- *** | *** | *** |
下線<hr>
|
*** | *** | ? | --- | --- |
縦スクロール | 不可 | 不可 | 不可 | 可 | 可 |
独断と偏見のおすすめ | ***** | **** | ***** | *** | *** |
- 縦スクロールは、はみ出した部分が見れるか見れないか
- 操作感は若干違いあるので、一番気に入ったのを使ってください!
GitHubでwebページ公開しよう
皆様ご存知の通り、
GitHubの[ Master ]ブランチから [ gh-pages ]というブランチを切ったら、
https://[アカウント名].github.io/[リポジトリ名]/
で静的なWEBページ公開できるのでおすすめです!
上記URLだと、[リポジトリ名]直下のindex.htmlが読み込まれます!
最後に
- Markdownに慣れてるなら、簡単にそれっぽいスライド作れるようになったキガスル
- 1日でまとめた結果で間違ってる可能性高いので、何か誤情報あれば教えてください!