Showerを使って作ったスライドをPDF化

背景

最近、人前で喋るスライドを作るツールとしてShowerを使わせていただいている。 マークダウンで作れるのは嬉しいが、困るのがスライドをSpeaker DeckやSlideShareでの共有、つまりPDF化だ。

軽くググったところ、今回は以下のライブラリを採用！

github.com

ただ、これをそのままShowerで作ったスライドに使おうとすると、全ページの一覧をキャプチャしてPDF化されてしまう（↓↓こんな感じ）

ので、 一手間入れて各ページにフォーカスが当たった画面のキャプチャを撮れるようにした。

コード

変更したのは、resumify/stub/main.js.stubファイル。 以下の行を追記した。

   mainWindow.loadURL(URL + "#" + pageNumber);
   const webContents = mainWindow.webContents;
+  if (isFirst) {
+     webContents.executeJavaScript(
+        "document.getElementById('cover').click();"
+     )
+  }
   webContents.executeJavaScript(

要は、1ページ目でclickイベントを発火させただけ。 Showerはデフォルトだと前ページの一覧画面が表示され、エンターなりクリックなりしないと各ページが表示されないため、 無理矢理clickイベントを発火させる必要があった。

これで心置きなくスライド作れる♪