remark.js を使った backslide というツールがとても便利

私はちょっとしたプレゼン用の資料を作成するときに remark.js を使用しているのですが、ブラウザで閲覧できないという人もおり、PDF を用意せざるを得ないこともあります。 remark.js のスライドを PDF に変換する方法として、Chrome から印刷する方法がよくネット上に記載されていますが、[remark.js の GitHub](https://github.com/gnab/remark) を見てみると [backslide](https://github.com/sinedied/backslide) というツールがあり、使ってみたらとても便利だったので紹介します。 [Qiita にも投稿しました](https://qiita.com/kuttsun/items/60e06b06db45a6237c85) <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmhb53w-x0rj6zmXs_WU7ykSe09ae8UBsKkqO98xp2upUErS8gdfpGYkTi1I6-4iDRtEU9cc_Ic5ipfOznX_FzNi1px5BWVYmpMyiW4ZvYvRAGD1X60pXqOMRWlD_ivG4E1LFm0reVUjE/s1600/df6e3b50-1f5f-11e7-895c-89e89d89fa5a.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmhb53w-x0rj6zmXs_WU7ykSe09ae8UBsKkqO98xp2upUErS8gdfpGYkTi1I6-4iDRtEU9cc_Ic5ipfOznX_FzNi1px5BWVYmpMyiW4ZvYvRAGD1X60pXqOMRWlD_ivG4E1LFm0reVUjE/s320/df6e3b50-1f5f-11e7-895c-89e89d89fa5a.jpg" width="320" height="185" data-original-width="1600" data-original-height="927" /></a> ※画像は引用です。 ちなみに reveal.js とか GitPitch とかも一時期使っていましたが、remark.js の軽さとシンプルさが好きですぐに戻ってきました。 ## 環境 - Windows 10 Pro - Node.js 8.9.4 - npm 5.7.0 ## インストール npm からインストールします。 ```sh > npm install -g backslide ``` 尚、私の場合はこれだけだとインストールに失敗しました。 どうやら Windows 環境では `windows-build-tools` をインストールしておく必要があるみたいです。 ```sh > npm install -g windows-build-tools ``` ※ PowerShell を管理者として実行してインストールする必要があります。 ## 使い方 一応簡単に説明しますが、詳細について知りたい方は [GitHub](https://github.com/sinedied/backslide) を参照してください。 ### テンプレートの作成 以下のコマンドを実行するだけでテンプレートからファイルが作成され、すぐに使い始めることができます。 ```sh > bs init --template ``` カレントディレクトリに `presentation.md` というファイルが作成されているので、これを編集してプレゼン資料を作成していきましょう。 基本的には普通の Markdown で書いていけばいいのですが、remark.js 用の記法や backslide のテンプレートで用意されている記法などもあるので、それは後述します。 ### HTML への変換 以下のコマンドを実行するだけで、拡張子が `*.md` のファイルを HTML へ変換してくれます。 ```sh > bs e ``` カレントディレクトリに `dist` というフォルダが作成され、その中に HTML が出力されています。 もちろん変換対象のファイルやフォルダを指定することもできます。 ### PDF への変換 以下のコマンドを実行するだけで、拡張子が `*.md` のファイルを PDF へ変換してくれます。 ```sh > bs p ``` カレントディレクトリに `pdf` というフォルダが作成され、その中に PDF が出力されています。 もちろん変換対象のファイルやフォルダを指定することもできます。 ### ライブプレビュー 以下のコマンドを実行することでサーバーが起動し、Markdown のライブプレビューが可能になります。 ```sh > bs s ``` デフォルトでは http://localhost:4100/ にアクセスすると Markdown が HTML に変換された状態で閲覧できます。 元の Markdown を変更したらブラウザ上の HTML も自動で再描画されます。 ## Markdown の書き方 Markdown の記法はググればいくらでも見つかるので省略します。 remark.js の記法については以下の記事でわかりやすく解説されていたので、そちらを参照していただければと思います。 - https://qiita.com/opengl-8080/items/d44aec7c6c643996916b 上記以外の backslide のテンプレートで用意されている記法について簡単に説明してみます。 （テンプレートから作成された `presentation.md` を見れば大体分かると思いますが・・・） ### 変数 以下のようにして変数を定義できるようです。 ```sh 変数名: 値 ``` ### スライド切り替え時の効果 `class: animation-fade` でフェードの効果が付きます。 ### ページのクラス属性 `class: impact` と書くとその画面がインパクトのあるものになります。 ```sh class: impact # {{title}} ## With a good subtitle :-) ``` <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh63M_fiKrT6BYQfJzlEO6gWTsEDXFlt841xEePXQwaBbgRJJJjMcWpSmIN8o06BENob-kF3hHPFYTDUF9Hrrd3phx2tvjvaW4h5Gtem3ybURwFffwpaIKF1TuB2Kxa89RyQLImTVtUJaE/s1600/backslide1.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh63M_fiKrT6BYQfJzlEO6gWTsEDXFlt841xEePXQwaBbgRJJJjMcWpSmIN8o06BENob-kF3hHPFYTDUF9Hrrd3phx2tvjvaW4h5Gtem3ybURwFffwpaIKF1TuB2Kxa89RyQLImTVtUJaE/s320/backslide1.png" width="320" height="180" data-original-width="1450" data-original-height="817" /></a> ### 段組み（グリッドレイアウト） レイアウトを12分割して配置します。 これは Bootstrap などと同じですね。 例えば、以下のように記述すれば左側と右側で２段組みにできます。 ```sh .col-6[ ### Left column - I'm on the left - It's neat! ] .col-6[ ### Right column - I'm on the right - I love it! ] ``` <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfkdsF57XErGh4KDuNSWWzLCkJOEjnNTo_-ojDkSojz-becOzMPwm5sdbaraDon47e8yxfem-ncamZ0WVppDk7cRLf-9iPeSnaP2O263lBeUm5t_w6TE4KMuFwRZYFhsqGsDaMjrbbHhc/s1600/backslide2.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfkdsF57XErGh4KDuNSWWzLCkJOEjnNTo_-ojDkSojz-becOzMPwm5sdbaraDon47e8yxfem-ncamZ0WVppDk7cRLf-9iPeSnaP2O263lBeUm5t_w6TE4KMuFwRZYFhsqGsDaMjrbbHhc/s320/backslide2.png" width="320" height="181" data-original-width="1450" data-original-height="818" /></a> ### 文字の装飾 `.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] ``` <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_wrAGVN6g1Tm-6KeX5gOtiC5E-o2nxtgMrzAVjCFG79P2LHhqIJBY-Gp_80b5SUArDDdU9grUT3yU2So9ADuJ3RJkNSdjJ3Lp16xrb0nXX3Fann_ofXF-xIt_e88t38R-hnp6I-G0DLQ/s1600/backslide3.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_wrAGVN6g1Tm-6KeX5gOtiC5E-o2nxtgMrzAVjCFG79P2LHhqIJBY-Gp_80b5SUArDDdU9grUT3yU2So9ADuJ3RJkNSdjJ3Lp16xrb0nXX3Fann_ofXF-xIt_e88t38R-hnp6I-G0DLQ/s320/backslide3.png" width="320" height="180" data-original-width="1450" data-original-height="817" /></a> ## 所感 もともとシンプルで使いやすかった remark.js がさらに使いやすくなる感じでよいですね。 テンプレートのデザインもシンプルで良いので、私はほぼこのまま使用しています。 PDF の変換については、基本的には HTML の表示ほぼそのままで変換されるので良いですが、漢字のフォントが残念です。 あとは Atom や Visual Studio Code などのエディタには、reveal.js 用のプラグインはあっても remark.js 用のプラグインは見当たらなかったので、ライブプレビューの機能も嬉しいです。 ただ、画像のパスに関しては注意が必要かなと思います。 変換後の HTML を見てみると、相対パスで指定した画像の URL が絶対パスに変換されていたので、作成した HTML を Web 上などに配置するとリンクが切れていたりします。 まぁ当たり前といえば当たり前なのですが、変換する際に画像も出力フォルダにコピーしてそこにパスを貼ってくれればフォルダごと配置することができるのにとかは思ったりしました。 （有能なエンジニアなら自分でコード変更して PR するのかもしれませんが・・・） ## 参考 URL npm のインストールで失敗した際に以下のサイトが参考になりました。 - https://qiita.com/AkihiroTakamura/items/25ba516f8ec624e66ee7 - https://sugimotonote.com/2017/10/31/npm-install-error/