Remarkという、markdownを書くことでスライドを作れるツールがある。
一般的なスライド作成ツールと比べて、以下のような利点があって自分の主義にマッチしていると感じた。
- 無料
- プレーンなHTMLとランタイムのJavaScriptで動作する
- Markdownを書けばよい
- 軽い
- CSSでゴリゴリカスタマイズ可能
自分も試しに作ってみた。
ストレスフリーにスライドを作成できる(図がたくさんあると大変かもしれない)。
けっこう由緒あるツールだが、その分初期設定値は例えばアスペクト比が4:3だったり、色がまぶしかったりするので、以下のような感じにCSSを書いてGruvboxの色にしている。
oEmbedに対応させる
もともとRemarkは単なるHTMLを吐き出すだけなのではてなブログに埋め込むといったことができない。せっかくなのでoEmbedを利用してブログなどに埋め込めるようにする。
↑の記事などを参考に、oembed.json的な名前で以下のようなデータを保存して、スライドと同じ階層にアップロードしておく。
{"url":"https://www.3qe.us/2023/0514-remark","author_name":"windymelt","author_url":"https://www.3qe.us","html":"<iframe width=\"640px\" height=\"360px\" src=\"https://www.3qe.us/2023/0514-remark\"></iframe>","width":640,"height":360,"type":"rich","cache_age":"3600","provider_name":"windymelt","provider_url":"https://www.3qe.us","version":"1.0"}
そしてoEmbedに対応していることを示すためのlink要素をhead要素内に入れておく。
<link rel="alternate" href="https://www.3qe.us/2023/0514-remark-oembed.json" title="Title of Slide" type="application/json+oembed">
するとはてなブログがいい感じにoEmbedの使用に合わせて埋め込めるようにしてくれる。
