yoshi5170 commented 10 months ago

お疲れ様です。41期の高木と申します。

本リリースで追加予定の励ましリクエストと励ましメッセージの機能で、MiniMagickを使用して生成したメッセージカードをxシェアーするときに、OGP画像として表示されるようにしたいのですがデフォルトで設定しているwebアプリのロゴの画像が毎回表示されてしまいます。開発環境でChromeの拡張機能のLocalhost Open Graph Debuggerを使用して、x投稿するときにOGPが表示されるかをテストして時は問題なく表示されました。いろいろな方法を試したのですが、解決できなかったのでアドバイスをいただけると嬉しいです。

開発環境

Rails: 7.0.8 Ruby：3.2.2 Active Storage S3

機能の説明

励ましリクエストと励ましメッセージの２つの機能の説明をします。

機能の使い方としては以下のようなイメージです。

Aさんが、自己否定に陥り落ち込んだときに励ましリクエストカードを作成する。（励ましリクエストページで、選択肢の中から使用したい画像と、その画像にはめたいtextを入力していただくとバックエンド側で、MiniMagickを使用して画像を生成します）
生成した画像を、Aさんに提示します。
Aさんは、その画像をtwitterにシェアーします。
Aさんが作成した画像は、twitterにシェアー時のOGP画像になる。
Bさんが、Aさんがシェアーしたものを見つけました。
Bさんが、そのOGP画像をクリックすると、励ましメッセージカードを作成するページに飛びます。
そして、Bさんがメッセージカード作成ボタンをクリックすると、バックエンド側で、どのユーザーに対してのメッセージカードなのかを判断し（ここではAさんへのメッセージカードとなる）、Bさんによって作成されたメッセージカードと、Aさんの励ましリクエストカード紐付ける。
Aさんに対して、他の人たちが送ってくれた励ましのメッセージカードは、Aさんの励まし一覧ページから見ることができる。 *補足：励ましリクエスト作成するには、ログインが必要だが、励ましメッセージカードを送る側はログインしなくても励ましメッセージカードを作成することができる。

OGP画像の設定部分のコード

励ましリクエストと励ましメッセージの2つの機能の仕組みはほとんど同じなので、今回は励ましリクエストを例にとって説明します。 以下の実装は先輩の記事を参考にしました 【超簡単！】RailsアプリでOGPを動的に変更する方法

｀<%= show_meta_tags %>｀の部分でshow_meta_tagsメソッドを呼びだしてxのなのど設定をしています。 views/layoyts/application.html.erb

<!DOCTYPE html>
<html>
<head>
　　#省略
<title><%= page_title(yield(:title)) %></title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>

<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Zen+Maru+Gothic:wght@400;700&display=swap" rel="stylesheet">
<%= show_meta_tags %>
</head>

<body>
#省略
</body>
</html>

assign_meta_tags(options = {})の引数に値が入っている場合は、指定された画像がOGP画像になり、何も引数が渡されていない場合はデフォルトのimage_url('ogp.png')が表示される仕組みです。(image: options[:image].presence || image_url('ogp.png'))

helpers/application_helper.rb

module ApplicationHelper
  def show_meta_tags
    assign_meta_tags if display_meta_tags.blank?
    display_meta_tags
  end

  def assign_meta_tags(options = {})
    configs = {
      site: 'JustBe U',
      title: 'あなたの自己受容への旅をナビゲート',
      reverse: true,
      charset: 'utf-8',
      description: 'JustBe Uでは、ありのままの自分を受け入れる手助けをします。診断から始まり、AIを活用した自己受容トレーニング、励ましのメッセージ、幸せ日記まで、自己否定の連鎖を断ち切り、自己受容へと向かう一歩を踏み出しましょう。自分の全てを受け止める旅、今スタートです。',
      keywords: '自己受容, 自己肯定, 自己愛, ポジティブ思考, マインドフルネス, パーソナルグロース, セルフヘルプ, 自己改善, メンタルヘルス, ウェルビーイング, 自己受容を高める, 自己認識, セルフケア',
      canonical: request.original_url,
      separator: '|',
      icon: [
        { href: image_url('favicon.png') }
      ],
      og: {
        site_name: :site,
        title: :title,
        description: :description,
        type: 'website',
        url: options[:url].presence || request.original_url,
        image: options[:image].presence || image_url('ogp.png'),
        local: 'ja-JP'
      },
      # Twitter用の設定を個別で設定する
      twitter: {
        card: 'summary_large_image',
        image: options[:image].presence || image_url('ogp.png')
      }
    }
    set_meta_tags(configs)
  end
end

controllers/encouragement_requests_controller.rb

class EncouragementRequestsController < ApplicationController
  before_action :set_encouragement_request, only: %i[show edit update destroy]

  def index
  end

  def select_image;end

  def new
    @encouragement_request = EncouragementRequest.new
    # @encouragement_request.image_id = params[:image_id]
    @image_id = params[:image_id].to_i
  end

  def create
    @encouragement_request = current_user.encouragement_requests.build(encouragement_request_params)
    image = ImageCreator.build(@encouragement_request.text, @encouragement_request.background_id)
    image_path = image.path
    @encouragement_request.request_image.attach(io: File.open(image_path), filename: 'request_image.png', content_type: 'image/png')

    if @encouragement_request.save
      redirect_to encouragement_request_path(@encouragement_request), success: '画像を作成しました'
    else
      flash.now[:danger] = '画像の作成に失敗しました'
      render :new, status: :unprocessable_entity
    end
  end

  def show
    Rails.logger.info "Encouragement Request Image URL: #{url_for(@encouragement_request.request_image)}"
  end

  def edit; end

  def update
    @encouragement_request.update(encouragement_request_params)
    image = ImageCreator.build(@encouragement_request.text, @encouragement_request.background_id)
    image_path = image.path
    @encouragement_request.request_image.attach(io: File.open(image_path), filename: 'request_image.png', content_type: 'image/png')
    if @encouragement_request.save
      redirect_to encouragement_request_path(@encouragement_request), success: '画像を作成しました'
    else
      flash.now[:danger] = '画像の作成に失敗しました'
      render :edit, status: :unprocessable_entity
    end
  end

  def destroy
    @encouragement_request.destroy
    redirect_to select_image_encouragement_requests_path, success: '画像を削除しました'
  end

  private

  def set_encouragement_request
    @encouragement_request = current_user.encouragement_requests.find_by(id: params[:id])
  end

  def encouragement_request_params
    params.require(:encouragement_request).permit(:text, :request_image, :background_id)
  end
end

以下のassign_meta_tagsの部分でこの励まし詳細ページでxシェアーをすると、生成した画像がOGP画像になるように設定しています。それ以外のページでは、デフォルトの画像がOGP画像として表示されます。

views/encouragement_requests/show.html.erb

<% assign_meta_tags url: new_encouragement_message_url(request_id: @encouragement_request.id), image: rails_blob_url(@encouragement_request.request_image, only_path: false)%>
<div class="bg-customBeige min-h-screen">
  <div class="container mx-auto px-5 py-10">
    <div class="flex flex-col items-center  w-full">
      <%= image_tag @encouragement_request.request_image, size: '400x300' %>
    </div>
  </div>
  <div class="text-center my-8">
    <%= link_to 'テキストを編集する', edit_encouragement_request_path(@encouragement_request),  class: "bg-customGreen6 text-customGreen5 mx-6 my-2 px-5 py-2 rounded-full drop-shadow-lg hover:bg-customGreen7 hover:drop-shadow-lg border-2 border-customGreen2" %>
    <%= link_to "削除", encouragement_request_path(@encouragement_request), class:"bg-customGreen6 text-customGreen5 mx-6 my-2 px-5 py-2 rounded-full drop-shadow-lg hover:bg-customGreen7 hover:drop-shadow-lg border-2 border-customGreen2", data: { turbo_method: :delete, turbo_confirm: "画像を削除しますか?" } %>
  </div>
  <div class="twitter font-bold text-sm text-white my-6 py-1 px-4 border-2 border-gray-500 rounded-lg bg-gray-500 hover:bg-gray-700 text-center w-1/3 md:w-1/4 lg:w-1/5 xl:w-1/7 mx-auto">
    <%= link_to "https://x.com/share?url=https://www.justbe-u.com/encouragement_messages/new?request_id=#{@encouragement_request.id}&text= 励ましのメッセージを送る%0a%0a %23JustBeU %23自己受容", target: '_blank' do %>
      <i class="fa-brands fa-x-twitter"></i>シェア
    <% end %>
  </div>
</div>

config/storage.yml

test:
  service: Disk
  root: <%= Rails.root.join("tmp/storage") %>

local:
  service: Disk
  root: <%= Rails.root.join("storage") %>

# Use bin/rails credentials:edit to set the AWS secrets (as aws:access_key_id|secret_access_key)
amazon:
  service: S3
  access_key_id: <%= Rails.application.credentials.dig(:aws, :access_key_id) %>
  secret_access_key: <%= Rails.application.credentials.dig(:aws, :secret_access_key) %>
  region: ap-northeast-1
  bucket: justbeu-bucket
  public: true

試したこと

1. S3での画像のパブリックアクセスの部分のチェックを外す

2. S3のCORS設定の見直し(getメソッドを追加。独自ドメインと、herokuのドメインの両方とも追加。)

[
    {
        "AllowedHeaders": [
            "Content-Type",
            "Content-MD5",
            "Content-Disposition"
        ],
        "AllowedMethods": [
            "GET",
            "PUT"
        ],
        "AllowedOrigins": [
            "http://127.0.0.1:3000",
            "https://www.justbe-u.com",
            "https://justbe-u-edc9ec0f13ef.herokuapp.com"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3600
    }
]

3. 画像のurlを取得するために、Active Storageのurl_forやrails_blob_pathやrails_blob_urlヘルパーの全てのパターンを試しましたがだめでした。

リダイレクトモード

4. twitter card validatorを使用してキャッシュをクリア

開発環境でのOGPを表示するテスト

問題なくOGP画像が表示されました

本番環境の場合

検証ツールでメタタグのtwitter:imageを確認したら、ちゃんと生成した画像への絶対パスのurlが表示されているのですが、xシェアで表示されるのはデフォルトのwebアプリのロゴの画像になってしまいます。

以下の変数contentで提示されている画像のurlにブラウザーからアクセスすると、ちゃんと画像が表示されます。

<meta name="twitter:image" content="https://www.justbe-u.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBUdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--93f38f11339ee07a0d8bc2f2563847a1ee747090/request_image.png">

xシェアーするまでの流れ

https://github.com/yoshi5170/self_acceptance_journey/assets/122294799/68a4fc1a-c5d9-45f3-80da-d4591b95e2c4

kenchasonakai commented 10 months ago

動的OGPが出ないURLの共有をお願いします

yoshi5170 commented 10 months ago

お疲れ様です。以下にxシェアーするまでの流れと、ページへのリンクを提示しました。ログインしないとアスセスできないので、リンクをクリックすると最初にログイン画面の方に遷移すると思います。

画像を選択するページにアクセスしていただいて、そのページから使用したい画像を選択し、次にテキストを入力して、プレビューのボタンをクリックしていただくと、生成した画像の詳細ページに遷移しそのページにxのシェアーリンクがあります。

kenchasonakai commented 10 months ago

Xのシェアリンクは下記のためhttps://www.justbe-u.com/encouragement_messages/13で動的OGP設定しても反映されないですね

https://www.justbe-u.com/encouragement_messages/new?request_id=27

Xのシェアリンクで動的OGPが設定できるようにしましょうか

yoshi5170 commented 10 months ago

コメントありがとうございます。自分で考えてみたのですが、Xのシェアリンクをどのように変更すればいいのかわからなかったので、アドバイスいただけると幸いです。

上記の例は励ましメッセージ（encouragement_messages）の方だと思うのですが、励ましリクエストのshowページhttps://www.justbe-u.com/encouragement_requests/28の部分のXのシェアリンクの変更も必要ですか？また、現在励ましメッセージのxシェアーリンクはhttps://www.justbe-u.com/encouragement_messages/new?request_id=27となっているのですが、励ましリクエストした人が見れる、みんなが作成してくれた励ましメッセージ一覧に遷移するようにしたいと考えています。この場合、動的OGPにするのは難しいでしょうか？

Xのシェアリンクは下記のためhttps://www.justbe-u.com/encouragement_messages/13で動的OGP設定しても反映されないですね

https://www.justbe-u.com/encouragement_messages/new?request_id=27 Xのシェアリンクで動的OGPが設定できるようにしましょうか

xのシェアーリンクを、https://www.justbe-u.com/encouragement_messages/new?request_id=27ではなくhttps://www.justbe-u.com/encouragement_messages/13に変更する必要があるということでしょうか？

励ましリクエスト（encouragement_request）のxシェアーのリンクは以下のようになっています。クエリパラメータのrequest_idはencouragement_requestsのIDを渡しています。xシェアーされた投稿のリンクをクリックすると、励ましメッセージ（encouragement_message）を作成するページに飛んで、励ましメッセージを、励ましリクエストした相手に送ることができるようにしていく予定です。クエリパラメータのrequest_idはencouragement_messagesのencouragement_request_idカラムの部分でencouragement_requestとencouragement_messageを紐づけるために必要です。

<div class="twitter font-bold text-sm text-white my-6 py-1 px-4 border-2 border-gray-500 rounded-lg bg-gray-500 hover:bg-gray-700 text-center w-1/3 md:w-1/4 lg:w-1/5 xl:w-1/7 mx-auto">
    <%= link_to "https://x.com/share?url=https://www.justbe-u.com/encouragement_messages/new?request_id=#{@encouragement_request.id}&text= 励ましのメッセージを送る%0a%0a %23JustBeU %23自己受容", target: '_blank' do %>
      <i class="fa-brands fa-x-twitter"></i>シェア
    <% end %>
  </div>

kenchasonakai commented 10 months ago

そんなに難しく考える必要はないですよ下記のイメージでやれば大丈夫だと思います

Xにシェアするリンクを決める(複数でも大丈夫です)
Xにシェアするリンクから飛ぶページで動的なOGPを設定する(クエリでもなんでも方法はなんでも良いと思います)
Xにシェアしたページにログインしていないユーザーでもアクセス出来るようにする(OGPを表示するためのクローラーがアクセスできる場所はログインしていないユーザーと同じなため)

yoshi5170 commented 10 months ago

Xにシェアするリンクから飛ぶページで動的なOGPを設定したら、無事に動的OGPが表示されるようななりました。すごく複雑に考えていました。本当にありがとうございました。

yoshi5170 / self_acceptance_journey

本番環境で動的OGPが表示されない #101

開発環境

機能の説明

OGP画像の設定部分のコード

試したこと

1. S3での画像のパブリックアクセスの部分のチェックを外す

2. S3のCORS設定の見直し(getメソッドを追加。独自ドメインと、herokuのドメインの両方とも追加。)

3. 画像のurlを取得するために、Active Storageのurl_forやrails_blob_pathやrails_blob_urlヘルパーの全てのパターンを試しましたがだめでした。

4. twitter card validatorを使用してキャッシュをクリア

開発環境でのOGPを表示するテスト

本番環境の場合

検証ツールでメタタグのtwitter:imageを確認したら、ちゃんと生成した画像への絶対パスのurlが表示されているのですが、xシェアで表示されるのはデフォルトのwebアプリのロゴの画像になってしまいます。

xシェアーするまでの流れ