スッとスライドを作れ!

とつぜんですがみなさま.大急ぎでスライドを作る必要に迫られたときどうしておられるでしょうか.

先日,わたしもそんなような感じになったので,どうやってやり過ごしたのかを紹介します.

環境

  • 基本的にはUbuntu 18.04で作業しますが,発表はmacOSあるいはWindowsで行わなければならないかもしれません.
  • 時間がないのでちょちょっと書かないといけません.
  • 高価なソフトウェア(およびそのライセンス)は所持していません.
  • 現代人として版管理はしますよね?

要望

ようするに,まずはクロスプラットホームを望みます.というより,プレーンなテキストとして書く→なにがしかの処理をする,という感じであれば,動作する環境は限定的であるとしても,スライドの作成自体はいつでもどこでもできそうだなぁという感じでしょうか.

テキスト自体はやはりAsciidocで書きたいというか書くべきというかそう思います.Markdownであればけっこう色々ありそうだったのですが,Markdownはポータビリティに乏しいので使うのをやめましょう.

……ここまで来るとAsciidoc→HTML5+CSS3+JSとする以外に選択肢なくないですか?

asciidoctor-reveal.js

実際のところ,そのようなソフトウェアは星の数ほどあるようですが,こんかいわたしはreveal.jsを使うことにしました.これはHTMLによるプレゼンテーションのフレームワークです.適当に検索したところasciidoctor-reveal.jsというプロジェクトを発見しました.スライドをAsciidocで書き,それをHTML+reveal.jsに変換できる!というもので,他に選択肢あんのか?って感じですね.

これを使えば,環境構築もすごく楽だし,Asciidocで書けるし,デフォルトのスタイルもそれなりだしであまり考えることも少なかったです.

実際にやること

詳しくは上記レポジトリの README.md を読めばわかりますが,npmyarnがあれば使用方法は非常に簡単です.

bundlerを使うやり方もあります.rubistはそちらをどうぞ.

1. まずはインストール

わたしはyarn大好きマンなのでyarnを使いますが,他のものをお使いの場合はいい感じに読み替えてください.ここではyarnはすでに導入済みであるとして進めます.

適当なディレクトリに移動してプロジェクトの初期化を行います.

その後,プロジェクトに asciidoctor-reveal.js を追加します.

これでインストールは完了です.

2. スライドをAsciidocで書く

あとはAsciidocでスライドをガリガリ書いていきます.

これをたとえば slide.adoc として保存します.

見てわかると思いますが,これは単なるAsciidocテキストです.もちろん版管理もらくらくです.

3. ビルドスクリプトを書く

書く,というか,公式にあるとおりに

とします(現代人のたしなみとして var は const に変えました).

必要に応じて attributes とか options とかはいい感じに設定しましょう.ページ番号つけるとか.

ファイル名は build.js とでもしておきましょう.

4. スライドを錬成する

あとはこれをnodeに食わせるなり,shebangつけて実行権限つけて走らせるなりすると,

slide.html というファイルができます.

5. 発表しよう

でそのslide.htmlをブラウザで開けば……

非常にクールなスライド
非常にクールなスライド
箇条書きはこんな感じ
箇条書きはこんな感じ

これで突然のスライド事故を回避できますね!

キーボードで簡単に画面を行き来したり,別画面に表示する用の,スピーカーノートとかタイマとかが一体になったウィンドウを出したりできます.詳しい操作はマニュアルをどうぞ.

6. もうちょっとよくできるよ

うーん,クールですねぇ……しかし,もうちょっと幸福度を上げることもできますよ.

なにをやるのかというと,変更監視しての自動ビルド,それからブラウザの自動リロードですね.

必要なものはgulp(ビルド,リロードをタスクとして定義して,実行させる),browser-sync(ブラウザをリロードする)です.

なおgulpは4系がオススメです.

これらをインストールします.

で, gulpfile.js を

こんなふうにしてみました.

あとは

とでもしておけば, slide.adoc に変更があるたびに勝手にHTMLが生成されブラウザにも反映されます.

おわりに

いかがだったでしょうか.こんかいは風のような速さでスライドを作る手段について紹介しました.みなさんもどうぞ幸せなプレゼンライフを!

ではまた.