はじめに
Qiita で記事に https://piyopiyoex.connpass.com/ と URL を書き込むと、以下のように画像入りのリッチなリンクになってくれます
このようなリンチなリンクを Livebook に表示するため、 KinoLink を作りました
ノートブックでの利用例はこちら
OGP とは
画像入りのリンクには OGP (Open Graph Protocol) という規約が利用されています
Web サイトに以下のように meta タグを入れておくことで、 SNS 等にリンクを表示するための情報を提示します
<html prefix="og: https://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>
セットアップ
ノートブックのセットアップセルで KinoLink をインストールします
Mix.install([
{:kino_link, "~> 0.1"}
])
リンクの表示
KinoLink.new に URL を渡すことでリッチなリンクを生成します
KinoLink.new("https://piyopiyoex.connpass.com/")
OGP に対応していない Web サイトの場合は title タグからタイトルを取得して表示します
KinoLink.new("https://livebook.dev/")
スマートセル
スマートセルを使えば URL を貼り付けて実行するだけでリンクを生成できます
仕組み
Elixir の ogp モジュールを利用しています
まとめ
Livebook をプレゼンテーションや説明資料として使う際に活用できます
リンクのデザインは Qiita をリスペクトしました