Lambdaカクテル

京都在住Webエンジニアの日記です

Invite link for Scalaわいわいランド

スライド作るならRemark

Remarkという、markdownを書くことでスライドを作れるツールがある。

remarkjs.com

一般的なスライド作成ツールと比べて、以下のような利点があって自分の主義にマッチしていると感じた。

  • 無料
  • プレーンなHTMLとランタイムのJavaScriptで動作する
  • Markdownを書けばよい
  • 軽い
  • CSSでゴリゴリカスタマイズ可能

自分も試しに作ってみた。

www.3qe.us

ストレスフリーにスライドを作成できる(図がたくさんあると大変かもしれない)。

けっこう由緒あるツールだが、その分初期設定値は例えばアスペクト比が4:3だったり、色がまぶしかったりするので、以下のような感じにCSSを書いてGruvboxの色にしている。

github.com

oEmbedに対応させる

もともとRemarkは単なるHTMLを吐き出すだけなのではてなブログに埋め込むといったことができない。せっかくなのでoEmbedを利用してブログなどに埋め込めるようにする。

oembed.com

developer.hatena.ne.jp

↑の記事などを参考に、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の使用に合わせて埋め込めるようにしてくれる。

★記事をRTしてもらえると喜びます
Webアプリケーション開発関連の記事を投稿しています.読者になってみませんか?