私はちょっとしたプレゼン用の資料を作成するときに remark.js を使用しているのですが、ブラウザで閲覧できないという人もおり、PDF を用意せざるを得ないこともあります。
remark.js のスライドを PDF に変換する方法として、Chrome から印刷する方法がよくネット上に記載されていますが、remark.js の GitHub を見てみると backslide というツールがあり、使ってみたらとても便利だったので紹介します。
※画像は引用です。
ちなみに reveal.js とか GitPitch とかも一時期使っていましたが、remark.js の軽さとシンプルさが好きですぐに戻ってきました。
環境
- Windows 10 Pro
- Node.js 8.9.4
- npm 5.7.0
インストール
npm からインストールします。
> npm install -g backslide
尚、私の場合はこれだけだとインストールに失敗しました。
どうやら Windows 環境では windows-build-tools をインストールしておく必要があるみたいです。
> npm install -g windows-build-tools
※ PowerShell を管理者として実行してインストールする必要があります。
使い方
一応簡単に説明しますが、詳細について知りたい方は GitHub を参照してください。
テンプレートの作成
以下のコマンドを実行するだけでテンプレートからファイルが作成され、すぐに使い始めることができます。
> bs init --template
カレントディレクトリに presentation.md というファイルが作成されているので、これを編集してプレゼン資料を作成していきましょう。
基本的には普通の Markdown で書いていけばいいのですが、remark.js 用の記法や backslide のテンプレートで用意されている記法などもあるので、それは後述します。
HTML への変換
以下のコマンドを実行するだけで、拡張子が *.md のファイルを HTML へ変換してくれます。
> bs e
カレントディレクトリに dist というフォルダが作成され、その中に HTML が出力されています。
もちろん変換対象のファイルやフォルダを指定することもできます。
PDF への変換
以下のコマンドを実行するだけで、拡張子が *.md のファイルを PDF へ変換してくれます。
> bs p
カレントディレクトリに pdf というフォルダが作成され、その中に PDF が出力されています。
もちろん変換対象のファイルやフォルダを指定することもできます。
ライブプレビュー
以下のコマンドを実行することでサーバーが起動し、Markdown のライブプレビューが可能になります。
> bs s
デフォルトでは http://localhost:4100/ にアクセスすると Markdown が HTML に変換された状態で閲覧できます。
元の Markdown を変更したらブラウザ上の HTML も自動で再描画されます。
Markdown の書き方
Markdown の記法はググればいくらでも見つかるので省略します。
remark.js の記法については以下の記事でわかりやすく解説されていたので、そちらを参照していただければと思います。
上記以外の backslide のテンプレートで用意されている記法について簡単に説明してみます。
（テンプレートから作成された presentation.md を見れば大体分かると思いますが・・・）
変数
以下のようにして変数を定義できるようです。
変数名: 値
スライド切り替え時の効果
class: animation-fade でフェードの効果が付きます。
ページのクラス属性
class: impact と書くとその画面がインパクトのあるものになります。
class: impact
# {{title}}
## With a good subtitle :-)
段組み（グリッドレイアウト）
レイアウトを12分割して配置します。
これは Bootstrap などと同じですね。
例えば、以下のように記述すれば左側と右側で２段組みにできます。
.col-6[
### Left column
- I'm on the left
- It's neat!
]
.col-6[
### Right column
- I'm on the right
- I love it!
]
文字の装飾
.alt[文字] とか .big[文字] と記述すると、文字の色や大きさが変更できます。
CSS を見てみたら全部で以下の種類が用意されていました。
- .left[.left]
- .right[.right]
- .center[.center]
- .justify[.justify]
- .primary[.primary]
- .alt[.alt]
- .em[.em]
- .thin[.thin]
- .huge[.huge]
- .big[.big]
- .small[.small]
- .dark-bg[.dark-bg]
- .alt-bg[.alt-bg]
所感
もともとシンプルで使いやすかった remark.js がさらに使いやすくなる感じでよいですね。
テンプレートのデザインもシンプルで良いので、私はほぼこのまま使用しています。
PDF の変換については、基本的には HTML の表示ほぼそのままで変換されるので良いですが、漢字のフォントが残念です。
あとは Atom や Visual Studio Code などのエディタには、reveal.js 用のプラグインはあっても remark.js 用のプラグインは見当たらなかったので、ライブプレビューの機能も嬉しいです。
ただ、画像のパスに関しては注意が必要かなと思います。
変換後の HTML を見てみると、相対パスで指定した画像の URL が絶対パスに変換されていたので、作成した HTML を Web 上などに配置するとリンクが切れていたりします。
まぁ当たり前といえば当たり前なのですが、変換する際に画像も出力フォルダにコピーしてそこにパスを貼ってくれればフォルダごと配置することができるのにとかは思ったりしました。
（有能なエンジニアなら自分でコード変更して PR するのかもしれませんが・・・）
参考 URL
npm のインストールで失敗した際に以下のサイトが参考になりました。