2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

reveal.jsとMarkdownでスライド作って発表してみた

Posted at

昨年末のFM関西オフミにて、とある小話(LT)を発表してきたんですが、
その際の発表スライドをreveal.jsとMarkdownで作ってみました。

ちなみにその時の発表スライド:CSV出力の小話

今後の備忘録として、本記事を作成しました。

事前準備

注:環境はMacです

ターミナル起動
githubからreveal.jsをダウンロード
npm startでサーバー起動
なんかスライドが出てきたー:raised_hands:

詳しくはこちらを参考に・・・
reveal.jsでスライド作り。
Reveal.js を使って Markdown ファイルでスライドを作ってみる

スライドの作り方

サンプルファイルを見よう見まねでMarkdownを編集していきます。
日本語なので字間や大きさがプレビューしたときあれっ?ってなりがちですが、
あとで調整するとして、とにかくガシガシ内容を作っていきます。

スライドのプレビュー

reveal.jsをDLした場所にある、index.htmlを編集します。
Markdown呼び出してる箇所を先ほど作ったファイル名に変更。

ターミナルでサーバー起動すると、ブラウザでスライドが表示されます。
あとはチェックしながら、mdを編集して、調整していきます。

スライドのPDF化

LT後、発表資料を共有のためにPDF化したいって時は、
localhost:8000/?print-pdf#/
印刷でOK

やってみて

Markdown自体にそこまでまだ慣れてはいないんですが、
テキストエディタでガッシガシ書いていけるので、
スライド作りがかなりラクにそして速く完成できたように思います。

今回はデザイン面など特に気にせず(気にする暇がなかった・・・)
デフォルトのテーマ(Black)でしたが、他にもテーマ色々あるし
エフェクトなんかも色々サンプルあるので、試してみようと思います。

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?