MiniMagick에서 마시멜로의 돈을 시도하십시오.

소개

Qiita 이나 하테나 블로그 의 이미지가 없는 기사를 공유할 때, 타이틀이 들어간 OGP 이미지가 나오게 된 것을 보고 있어, 쭉 흉내내고 싶었습니다.
마시멜로 로 코멘트가 이미지가 되어 있어, 자신의 대답의 트윗에 붙여지고 있는 것을 보고, 괜찮아, 라고 감격해, 자신도 머니 해 보고 싶어, 만들어 보았습니다.

샘플 애플리케이션

샘플 애플리케이션은 사용자가 좋아하는 문장을 게시할 수 있는 간단한 것입니다. (기본적으로는 rails g scaffold post body:string 입니다.)
이것에, 투고를 공유하는 트윗에 화상을 붙여 올리기 위해, 여러가지하고 있습니다.

출처
htps : // 기주 b. 코 m / 켄 1f ぁ / 미니 마기 ck_gp

heroku
htps : // 미니마기 ck-gp. 어리석은 p. 코 m/포 sts

상세

트윗 버튼

트위터에서 이미지를 사용하여 정보를 공유할 때 두 가지 방법이 있다고 생각합니다.

이미지 첨부 트윗

링크 OGP로 미리보기

앞의 이미지를 첨부하는 형태가, 보통으로 트윗할 때는 간단하다고 생각해 조사했습니다만, 자주 있는 트윗 버튼은 단지, 간단하게 이미지를 첨부할 수 없을 것 같았기 때문에, OGP를 사용 방법으로하기로 결정했습니다.

app/views/posts/show.html.erb

<!-- 省略 -->
<p>
  <%= render 'common/twitter_share_button', url: post_url(@post), message: 'ありがとうございます！' %>
</p>
<!-- 省略 -->

app/views/common/_twitter_share_button.html.erb

<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-text="<%= message %>" data-url="<%= url %>" data-show-count="false">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

트위터 카드와 이미지의 종횡비

공유 할 페이지의 메타 태그에서 twitter:card를 설정하면 미리보기 모양을 선택할 수 있습니다.
이렇게하면 OGP 이미지의 종횡비를 변경하는 것이 좋습니다. 모처럼 텍스트를 묻은 이미지를 합성해도, 버려져 버려서는 전해지지 않으니까…

여기에서는 화상이 크게 나오는 summary_large_image 를 설정해, 합성하는 화상의 사이즈는 640x315 로 했습니다.

샘플 은 meta-tags 을 사용한 것입니다.

app/views/posts/show.html.erb

<%
  set_meta_tags title: "post##{@post.id}", og: { title: "post##{@post.id}", description: @post.body, image: "#{request.base_url}/#{@post.image_path}" }, twitter: { card: 'summary_large_image' }
%>
  :
 (省略)

글꼴

이미지에 텍스트를 쓰므로 그때 글꼴이 필요합니다.
필연적으로 배포해 버리게 되므로, 이미지에 쓴 것을 배포해도 괜찮은 라이센스로 제공되고 있는 것을 찾아야 합니다.
샘플에서는 IPAex 글꼴을 사용합니다.

이것을 app/assets/fonts 에 배치하고 있습니다.

이미지 합성을 위한 클래스

투고 Post 에 대해서, 이미지를 합성하는 것이므로, Post::Image 라는 이름으로 했습니다.

app/models/post/image.rb

class Post::Image
  # (省略)
  attr_reader :post

  def initialize(post)
    @post = post
  end
  # (省略)
end

이것을 Post 에서 image_path 로 하면(자) 합성된 이미지의 패스를 얻을 수 있도록(듯이) 하고 있습니다.

app/models/post.rb

class Post < ApplicationRecord
  delegate :path, to: :image, prefix: true

  def image
    @image ||= Post::Image.new(self)
  end
end

텍스트 정형

MiniMagick에 의한 텍스트의 렌더링은, 지정 위치에서 개행하는 등의 기능이 없기 때문에, 스스로 성형할 필요가 있습니다.

이미지의 크기는 유한이므로, 표시할 수 있는 한 줄의 문자수와, 행수를 정해, 거기에 맞추어 텍스트를 성형해 갑니다.

app/models/post/image.rb

class Post::Image
  # (省略)
  MAX_ROWS = 5
  COLS = 20
  ROWS = 10
  OMMIT_MESSAGE = '…（省略させてください。）'
  # (省略)
  def formated_body
    lines = post.body.lines.map { |line| line.scan(/.{1,#{COLS}}/) }.flatten
    lines = lines[0, MAX_ROWS - 1].push(OMMIT_MESSAGE) if lines.size > MAX_ROWS
    lines.join('\n')
  end
  # (省略)
end

합성

이미지를 열고 성형된 텍스트를 그립니다.

app/models/post/image.rb

class Post::Image
  FRAME_IMAGE_PATH = Rails.root.join('app/assets/images/flame.png')
  FONT_PATH = Rails.root.join('app/assets/fonts/ipaexg00401/ipaexg.ttf')
  FONT_SIZE = 25
  INTERLINE_SPACING = (FONT_SIZE * 0.5).round
  COLOR_CODE = '#252828'
  START_X = 65
  START_Y = 60
  # (省略)
  def image
    image = MiniMagick::Image.open(FRAME_IMAGE_PATH) # 枠の画像を開き
    image.combine_options do |c|
      c.gravity 'northwest'                 # 左上から
      c.pointsize FONT_SIZE                 # 指定のフォントサイズで
      c.font FONT_PATH                      # 指定のフォントで
      c.interline_spacing INTERLINE_SPACING # 指定の行間のスペースで
      c.stroke COLOR_CODE                   # 指定の色で
      c.annotate "+#{START_X}+#{START_Y},0", formated_body # 整形したテキストを指定位置から描画します
    end
  end
  # (省略)
end

트윗 미리보기 재설정

만든 이미지가 마음에 들지 않을 때도 있다고 생각합니다. 하지만 최적화의 관계라고 생각되지만, 미리보기가 캐시되어 버려, 변경해도 반영되지 않는 경우가 있습니다. 그 때는 카드 유효성 검사기에서 미리보기를 보면 다시 해줍니다.

해봐

OGP를 사용한 경우라면 공유하는 콘텐츠에 원래 URL이 없으면 안되는 것이 넥…
평소부터 콘텐츠를 깨끗하게 분할하도록 해두고 싶습니다.