[Quarto] リンク先のogタグからカード状のリンクを作成する

自分で修正出来るものはChatGPTに聞いて作ると効率が良い。

リンク先の画像とかがあるとリンクの見た目が良いよね。

Twitterなどで実装されている、リンク先の画像やタイトルが見えるようなリンクを自作しました。QuartoをR環境下で使っているので、R言語で対象のサイトのURLと必要なら他の情報を与えることで、リンクをリンク先のogタグの情報を使って生成します。当サイトでもリンクのページなどで実際に使っています。

ほぼChatGPTに聞いています。

ChatGPTそのままの出力だと余計な罫線が入ったり、タグの構造がおかしくなる（特にリストの子にした場合）ため、修正を入れています。

library(httr)
library(rvest)
library(glue)

create_link_card <- function(url, img="https://via.placeholder.com/150",
                             title="No Title", description="No Description"
                             ) {
  # Fetch the HTML content
  page <- GET(url)
  
  # Parse the HTML content
  content <- read_html(content(page, "text", encoding = "UTF-8"))
  
  # Extract OG tags
  og_image <- content %>% html_node('meta[property="og:image"]') %>% html_attr("content")
  og_title <- content %>% html_node('meta[property="og:title"]') %>% html_attr("content")
  og_description <- content %>% html_node('meta[property="og:description"]') %>% html_attr("content")
  
  # Fallback values if OG tags are not available
  og_image <- ifelse(is.na(og_image), img, og_image)
  og_title <- ifelse(is.na(og_title), title, og_title)
  og_description <- ifelse(is.na(og_description), description, og_description)
  
  # Create HTML card
  card_html <- glue('
  <div>
  <a href="{url}" class="link-card">
    <img src="{og_image}" alt="{og_title}">
    <span class="link-card-content">
    <h3 class="link-card-title">{og_title}</h3>
    <p class="link-card-description">{og_description}</p>
    </span>
  </a></div>')
  
  return(card_html)
}

使い方についてはこちらのページも参考に。ここでは呼び出し時のコードも表示しています。

create_link_card("https://tea-3.jp/blog/b_20240711_quarto_setup.html")

[Quarto] 共通処理を_setup.qmdに入れる – T-3

色々とカスタマイズ出来てきました。