↓Skip to main content
  1. Entry/

remark.jsでMarkdownをスライドショーにするツールをつくった

Tech Golang Tool
Table of Contents

テキストベースでスライドを書くツールを物色している中でremarkがよさそうだと自分の中ではなったものの、 いちいちHTMLを書くのは嫌だったのでMarkdownを書くこと以外はやってくれるコマンドラインツールをつくった。 Markdownファイルを指定して実行するとhttp://localhost:8080でスライドとして表示することができる。

https://github.com/handlename/remarkgo

似たようなツールにreveal.js用のrevealgoがある。

https://github.com/yusukebe/revealgo

機能の紹介 #

READMEを読んでもらえればだいたいのことは書いてある。

Markdownファイルの指定 #

-sオプションで読み込み元のMarkdownファイルを指定できる。

$ remarkgo -s path/to/markdown.md

何も指定しないとカレントディレクトリにあるindex.mdを読みに行く。 ちゃんと確認していないけど、カレントディレクトリ以下のファイルしか指定できないはず。

カスタムCSSの指定 #

remark自体が自分でCSSを書いて好きにする方針らしいので、 自分で書いたCSSを読み込めるようにしている。

$remarkgo -c path/to/custom.css

ポートの指定 #

http://localhost:4423で表示する場合は以下のように指定すればOK。

$ remarkgo -l 4423

一応用意したけどほとんど使うことは無さそう。

リロード用のキーバインド #

毎回ブラウザリロードするとremark.jsの読み込みから始まるので時間がかかる。 そこでremarkgoで持っているHTML上でリロード用のキーバインドを定義することにした。 rをタイプすれば

  • スライド用のDOM要素削除
  • スライド用の各種JSイベント削除
  • Markdownファイルの読み直し

を行なって素早くMarkdownの内容をスライドに反映することができる。 実装し始めはJSイベントの削除をしていなかったので、リロードするたびにどんどん動作が重くなっていたけど今は大丈夫。

中身のはなし #

Functional Option Pattern #

このへん。

https://github.com/handlename/remarkgo/blob/master/remark.go#L24-L53

少し前にこの記事を読んで使ってみようと思ったのがきっかけ。

Go言語のFunctional Option Pattern - Qiita

本当に使ってみたかっただけ。 コマンドラインツールだし。ライブラリじゃないし。 確かにオプションを用意する側の手間は増えるが、オプション数が多い場合は便利そう。

go-bindata #

コマンド単体で動作させたかったのでtemplateをバイナリに埋め込みたかった。 かと言ってgoコードとしてHTMLやJSを編集するのは辛いものがあったので、 編集中はそれぞれ.htmlと.jsとして保存して、ビルド時にgo-bindataでまとめることにした。

https://github.com/jteeuwen/go-bindata

TODO #

  • オフラインで動くようにする
    • いまはCDNを参照しているのでオフラインでは動かない
    • オンライン状態で表示して以降はremarkgoのリロード機能だけで更新すれば、今のままでもオフラインで戦うことはできる。かろうじて。
  • テーマの選択
    • あらかじめ複数種類のカスタムCSSが用意されていると便利かもしれない
    • 自分でカスタムCSSを用意すれば事足りるので、モチベーションは低め
  • github releasesにバイナリデータ用意
    • goをビルドする環境がなくても使えるように
    • まだ自分しか使っていないのでモチベーションは低め

TODOは残っているものの、使い勝手には今のところ満足している。