はじめに
最近、私の所属しているサークルでLT会をやっていこうという流れがあったので、Markdownからスライドを作れる「reveal.js」について紹介しました。
そのためにreveal.jsをセットアップしようとしたのですが、公式ドキュメントでは3行だったのが1時間以上かかってしまったので、その備忘録です。
Markdownとは
markdownは簡単な記法で記事などの文章を構成出来るマークアップ言語です。
qiitaやはてなブログなどで記事を上げている諸兄には馴染み深いものかもしれません。
記述例:
# 見出し1
## 見出し2
--- 線
**強調**
実行例:
見出し1
見出し2
強調
reveal.jsとは
かっこいいスライドを簡単に作れるフレームワークです。
htmlに書き込んで作りますが、ちょちょっと設定すると、Markdownを書くだけでそれがスライドになります。
パワーポイントをマウスクリックしながら無限に時間を溶かすことも、揃ってないデザインを先輩に怒られることもなくなります。
セットアップする
reveal.jsのセットアップには２つの方法があります。
-
簡単に使うだけなら、githubのページからプロジェクトをローカルに保存するだけで大丈夫です。
-
拡張マークダウンを使ったり、スピーカーノート(発表者のメモを隣に表示する機能)を使ったりする場合には、Node.jsを使いローカルにサーバーを建てるFull Setupが必要です。
今回はこの(2)のFull Setupの方法を解説します。
とりあえず公式ドキュメントの言う通りにやります
1. reveal.js をクローン OR ダウンロードする。
2. Node.js をインストールする
公式サイトからNode.jsをダウンロード&インストールします。
3. npmを使ってインストールします
やることは、Node.js についてくるパッケージマネージャnpmを使って環境を整えるだけです。
package.jsonファイルに設定はしてくれてあるので、これに従うだけです。
カレントディレクトリをreveal.jsのフォルダに移動してから
$ npm install
$ npm start
でサーバーをインストールして起動して終了なんですが、そうは問屋がおろしませんでした。
4.MSBuild.exeに関するエラーが出たら
VisualStudioを入れていないか、versionが異なっています。
もしVSを入れていなかったら入れましょう。
または、VS2019を入れていてエラーが出たらバージョンの設定が違うので、
$ npm config set msvs_version 2019
でコンフィグを設定します。
(デフォルトではVS2017を探しに行きます)
5. Windows Build Toolsをインストールする
Windows-Build-Toolsが入っていない場合はこれをインストールします
$ npm install -g windows-build-tools
これでOKです。
6. npm-check-updatesを入れる
npm-check-updatesを入れて、パッケージのバージョンを整理してもらいます。
$ npm install -g npm-check-updates
ncuコマンドを使います
npm-check-updatesを実行するコマンド、ncuを実行します
$ ncu
するとncu -uをしてアップグレードをするように促されるので、仰せの通りにします。
$ ncu -u
7. npm installをしなおす
これでnpm installをするように促されるので、仰せの通りにします。
$ npm install
「Binary is fine」と出れば成功です！
reveal.js を使う
インストールが終わったのでnpm startでサーバーを起動します。
$ npm start
ブラウザで見る
これで http://localhost:8000 にサーバーが立っています。
晴れて、reveal.jsを使えるようになりました！
終わりに
ここでは、Windows10でつまづきまくった環境構築について説明しました。
この記事ではその使い方、Markdownの書き方までは解説しなかったです。
(これについては非常に分かりやすい記事が沢山あるので)]
以下の記事をご参考にしてください。
reveal.jsでスライド作り。
reveal.jsを使うと非常に楽にスライドを作ることが出来るので、是非是非活用してください
蛇足
今回は2019年11月の段階でpackage.jsonのversionがズレていた(?)のでこの方法で直しましたが、もしかしたら修正されていくかもしれません。
また、今回はNode.jsを使ったことが無い人がぱぱっとFull Setupするための方法を解説しましたが、nvm(Node Version Manager)などを使っている人はそれで調整しても良いかもしれません。