スッとスライドを作れ！

Posted on by まろまろ

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

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

環境

  • 基本的には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 を読めばわかりますが，npmやyarnがあれば使用方法は非常に簡単です．

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

1. まずはインストール

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

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

$ mkdir -p /path/to/coooool-slides
$ cd /path/to/coooool-slides
$ yarn

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

$ yarn add -D asciidoctor-reveal.js

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

2. スライドをAsciidocで書く

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

= 非常にクールなスライドのタイトル
:author: まろまろ
:date: 2018/08/31

== さいきんのできごと

* 毎日のようにキムチ鍋を食べています
* 自転車を買いました
* 新しいキューブがほしい

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

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

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

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

const asciidoctor = require('asciidoctor.js')();
require('asciidoctor-reveal.js');

const attributes = {'revealjsdir': 'node_modules/reveal.js@'};
const options = {safe: 'safe', backend: 'revealjs', attributes: attributes};
asciidoctor.convertFile('slide.adoc', options);

とします（現代人のたしなみとしてvar はconst に変えました）．

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

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

4. スライドを錬成する

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

$ node build.js

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

5. 発表しよう

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

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

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

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

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

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

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

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

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

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

yarn add -D gulp@4 browser-sync

で，gulpfile.js を

const gulp = require('gulp');
const ps = require('child_process').exec;
const browswerSync = require('browser-sync').create();

gulp.task('browser-sync', () => {
  return new Promise((resolve, reject) => {
    browswerSync.init({
      server: {
        baseDir: ".",
        index: "slide.html"
      }
    }, (err, bs) => {
      if (err) {
        reject();
      } else {
        resolve();
      }
    });
  });
});

gulp.task('build-slide', () => {
  return new Promise((resolve, reject) => {
    ps('node index.js', (err) => {
      if (err) {
        reject();
      } else {
        resolve();
      }
    });
  });
});

gulp.task('bs-reload', () => {
  browswerSync.reload();
});

gulp.task('default', gulp.series('browser-sync', () => {
  gulp.watch('slide.adoc', gulp.task('build-slide'));
  gulp.watch('slide.html', gulp.task('bs-reload'));
}));

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

あとは

yarn run gulp

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

おわりに

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

ではまた．