표지 이미지가 없는 게시물에는 Twitter 사용자가 피드를 스크롤할 때 주의를 끌 수 있는 잘 디자인된 "카드"가 있는 것이 매우 중요합니다. 우리가 그렇게 잘 설계되었는지 확신할 수 없지만 그럴 수 있고 그 부분은 실제로 코드에 관한 것이 아닙니다.

이러한 기본 이미지를 동적으로 생성하는 방법에 대해 많은 질문을 받습니다. 나는 여전히 우리가 이것을 더 나은 방법으로 할 수 있다고 생각하기 때문에 이 글을 쓰는 것을 주저했습니다. 그러나 우리는 그것을 다르게 하기 위해 노력하지 않았기 때문에 여기에 우리의 현재 접근 방식에 대한 게시물과 가능한 대안 솔루션에 대한 설명이 있습니다.

다음은 #discuss 게시물에 대한 Twitter 카드의 예입니다.

우리가 하는 일

이미지 관리/조작 서비스 및 CDN으로 Cloudinary을 사용합니다. 이미지를 생성하는 데 사용하는 adding text overlays to images과 같은 기능이 있습니다. 따라서 궁극적으로 제대로 된 레이어를 만지작거리고 앱이 프로그래밍 방식으로 서비스와 상호 작용하도록 코드를 작성하는 문제입니다. 매우 간단하지만 우리의 창의성은 시스템 내에서 할 수 있는 작업의 좁은 범위로 인해 약간 제한됩니다. 훌륭한 서비스이지만 변경하기 힘든 이미지 템플릿을 생성합니다. 변경하기 어려운 코드는 좋은 코드가 아닙니다.

우리가 취할 수 있는 다른 접근법

HTML로 이미지를 생성한 다음 서비스를 사용하여 화면 캡처

이것은 우리에게 디자인에 대한 더 많은 유연성과 제어를 제공할 것입니다. 이것이 우리의 이상적인 접근 방식이라고 생각합니다. Cloudinary 자체는 이 서비스를 플러그인으로 제공하지만 우리는 아직 이 서비스로 이동하지 않았습니다.

서버에서 이미지를 동적으로 생성합니다.

ImageMagick은 확장성이 뛰어난 클래식 라이브러리입니다. 그것은 매우 인기가 있지만 제 생각에는 작업하기가 다소 고통 스럽습니다. Cloudinary와 같은 서비스는 ImageMagick이 고통스럽기 때문에 존재합니다. 백엔드 생태계에 따라 다른 라이브러리가 있다고 확신하지만 좋은 선택이 무엇인지 모르겠습니다.

ShareMeow와 같은 서비스

매우 특정한 유형의 생성된 이미지에 대해 ShareMeow는 우리가 가지고 놀았던 흥미로운 자체 호스팅 웹 서비스입니다.

테이크아웃

우리가 하고 있는 일은 효과가 있지만 권장할 만한지는 잘 모르겠습니다. 내가 당신이라면 HTML이나 다른 멋진 서비스를 통해 이러한 이미지를 생성하는 것으로 바로 건너뛸 것입니다.

전체 프로세스의 다른 흥미로운 부분

단순히 이미지를 생성하는 것 이상의 프로세스가 있습니다. 카드를 주기적으로 업데이트하려면 캐시 무효화 봇도 필요합니다. 시간이 지남에 따라 점점 더 많은 댓글을 표시하려면 Twitter가 일주일에 한 번 캐시를 버스트할 때까지 기다릴 수 없습니다. 여전히 즉시 업데이트되지는 않지만 트윗이 한동안 떠다니면 트윗이 원래 나갔을 때보다 많더라도 정확한 댓글 수를 표시합니다.

Twitter는 API를 통해 캐시 무효화 기능을 노출하지 않기 때문에 브라우저 자동화를 통해 핑해야 했습니다.

Twitter 카드 캐시 유효성 검사를 ping하는 프로세스를 자동화하기 위해 Capybara 및 Selenium을 사용하는 Ruby 파일입니다. 기본적으로 다음 세 가지 방법을 사용합니다.

  def visit_twitter_and_log_in
    visit 'https://cards-dev.twitter.com/validator'
    find('input.js-username-field').set(ENV['TWITTER_USERNAME'])
    find('input.js-password-field').set(ENV['TWITTER_PASSWORD'])
    click_on('Log in')
  end

  def enter_url_and_click_preview(url)
    find('input.FormControl').set(url)
    click_on('Preview card')
    result = has_content?('Page fetched successfully')
    visit 'https://cards-dev.twitter.com/validator'
  end
end

두 번째 방법은 일부 정크 캐시 버스팅으로 몇 번 핑해야 합니다. 다음은 이를 호출하는 메서드입니다.

  def enter_urls
    urls.each do |url|
      3.times do
        enter_url_and_click_preview("#{url}?#{rand(10_000)}=#{rand(10_000)}")
      end
      enter_url_and_click_preview(url)
    end
  end

그게 다야. 이 모든 것을 구축하는 것은 잠재적인 수동 작업을 자동화하는 좋은 방법이었습니다. 이 모든 것은 더 많은 사용자가 콘텐츠를 공유할 때 서비스를 더욱 가치 있게 만드는 데 사용됩니다.