KinoSpeakerDeck で Livebook にスライドを表示する

はじめに

SpeakerDeck はスライドを共有できるサービスです

例えばこんな感じに Web 上でスライドを表示できます

Livebook にもスライドを埋め込むため、 KinoSpeakerDeck を実装しました

ノートブックでの利用例はこちら

セットアップ

ノートブックのセットアップセルで KinoSpeakerDeck をインストールします

Mix.install([
  {:kino_speaker_deck, "~> 0.1"}
])

スライドの表示

SpeakerDeck のスライド URL を指定するだけで表示できます

KinoSpeakerDeck.new("https://speakerdeck.com/ryowakabayashi/livebookde-wei-xing-detawoxi-u")

仕組み

SpeakerDeck は oEmbed という埋め込みのための共通仕様に対応しています

https://speakerdeck.com/oembed.json?url=<スライドURL> にアクセスすることで、埋め込み用の HTML が取得できます

defmodule KinoSpeakerDeck do
  @moduledoc """
  A simple Kino for display Speaker Deck presentations on Livebook.
  """
  use Kino.JS

  def new(deck_url, opts \\ []) do
    case Req.get("https://speakerdeck.com/oembed.json?url=#{deck_url}") do
      {:ok, %Req.Response{status: 200, body: body}} ->
        width = opts[:width] || "100%"
        height = opts[:height] || "auto"

        body
        |> Map.get("html")
        |> String.replace(~r/width="\d*"/, "width=\"#{width}\"")
        |> String.replace(~r/height="\d*"/, "height=\"#{height}\"")
        |> Kino.HTML.new()

      {:ok, _} ->
        Kino.HTML.new("Invalid URL")

      {:error, _} ->
        Kino.HTML.new("Something went wrong")
    end
  end

  asset "main.js" do
    """
    export function init(ctx, iframe) {
      ctx.root.innerHTML = iframe;
    }
    """
  end
end

まとめ

KinoSpeakerDeck で Livebook にスライドを埋め込むことができました

Livebook 上に動画やスライド、プロトタイプなどを埋め込むことで、プレゼンテーションの幅が広がりますね