Skip to content

OGPカードのリンク先を投稿されたURLに変更する#5152

Open
ramdos0207 wants to merge 2 commits into
masterfrom
change-ogp-card-link
Open

OGPカードのリンク先を投稿されたURLに変更する#5152
ramdos0207 wants to merge 2 commits into
masterfrom
change-ogp-card-link

Conversation

@ramdos0207
Copy link
Copy Markdown
Contributor

@ramdos0207 ramdos0207 commented May 17, 2026

概要

なぜこの PR を入れたいのか

OGPカードのリンク先としてog:urlを使うのは間違っていると思われる
主な文脈:https://q.trap.jp/messages/019d1988-4202-75bc-beed-a9c09b16ee95

動作確認の手順

https://cover-corp.com/news/detail/c2026032201 などのOGPカードを踏む

UI 変更部分のスクリーンショット

(UI変更なし)

PR を出す前の確認事項

  • (機能の追加なら)追加することの合意がチームで取れている
    • clientを変更すべきかは要議論です
  • 動作確認ができている
  • 自分で一度コードを眺めて自分的に問題はなさそう

見てほしいところ・聞きたいことなど

Summary by CodeRabbit

  • Refactor
    • OGPプレビューリストの内部データ処理を整理し、各プレビュー項目へのURL受け渡しを明確にしました。
    • プレビュー項目の描画ロジックを安定化(重複防止・正しい対応付け)。
    • ユーザー向けの見た目や操作感に変更はありません。

Review Change Stack

@github-actions
Copy link
Copy Markdown

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 17, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 70a8e6b9-c78c-4696-8161-3d21e5ee716d

📥 Commits

Reviewing files that changed from the base of the PR and between 35d454a and b04da5e.

📒 Files selected for processing (1)
  • src/components/Main/MainView/MessageElement/Embeddings/MessageOgpList.vue
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/components/Main/MainView/MessageElement/Embeddings/MessageOgpList.vue

📝 Walkthrough

Walkthrough

MessageOgpList.vueogpItems 計算プロパティを導入し、externalUrls から各 URL とその OGP データをペアにした配列を生成。テンプレートはこれを反復し、子コンポーネント MessageOgpListItem.vueurlogpData を分離した props として渡すよう変更しました。

Changes

OGP item rendering refactor

Layer / File(s) Summary
OGP items 計算ロジックとテンプレート統合
src/components/Main/MainView/MessageElement/Embeddings/MessageOgpList.vue, src/components/Main/MainView/MessageElement/Embeddings/MessageOgpListItem.vue
MessageOgpList.vueflatMap を使用した新しい ogpItems computed を実装し、各アイテムに URL と OGP データをペアで含める。テンプレートを更新して ogpItems を反復し、MessageOgpListItemurlogpData を個別に渡す。MessageOgpListItem.vue は新しい url prop を定義して、テンプレートバインディングで ogpData.url の代わりに使用。

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed PRのタイトルはOGPカードのリンク先を投稿されたURLに変更することを明確に説明しており、変更内容の主要な目的を適切に要約している。
Description check ✅ Passed PR説明は必須セクションの大部分を含んでいるが、UI変更部分のスクリーンショット欄が記載されていない(UI変更なしとのことだが)。
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch change-ogp-card-link

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/Main/MainView/MessageElement/Embeddings/MessageOgpList.vue`:
- Around line 4-5: v-for の key が現在 :key="item.url"
だと同一URLが複数ある場合に重複してしまうため、MessageOgpList.vue の ogpItems をループしている箇所で key
を一意化してください(例: item.url にループインデックスや item.id を組み合わせる)。具体的には v-for="(item, index)
in ogpItems" のようにインデックスを取得し、:key に item.url と index か、もし利用可能なら固有の識別子(item.id
など)を組み合わせて一意のキーを生成するよう修正してください。
🪄 Autofix (Beta)

✅ Autofix completed


ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: cc3f24cf-bc96-4560-85a1-5061d36fe317

📥 Commits

Reviewing files that changed from the base of the PR and between 66b58a0 and 35d454a.

📒 Files selected for processing (2)
  • src/components/Main/MainView/MessageElement/Embeddings/MessageOgpList.vue
  • src/components/Main/MainView/MessageElement/Embeddings/MessageOgpListItem.vue

Comment thread src/components/Main/MainView/MessageElement/Embeddings/MessageOgpList.vue Outdated
@codecov
Copy link
Copy Markdown

codecov Bot commented May 17, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 62.43%. Comparing base (66b58a0) to head (b04da5e).

Additional details and impacted files
@@           Coverage Diff           @@
##           master    #5152   +/-   ##
=======================================
  Coverage   62.43%   62.43%           
=======================================
  Files         108      108           
  Lines        3109     3109           
  Branches      635      635           
=======================================
  Hits         1941     1941           
  Misses       1058     1058           
  Partials      110      110           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 17, 2026

Note

Autofix is a beta feature. Expect some limitations and changes as we gather feedback and continue to improve it.

Fixes Applied Successfully

Fixed 1 file(s) based on 1 unresolved review comment.

Files modified:

  • src/components/Main/MainView/MessageElement/Embeddings/MessageOgpList.vue

Commit: b04da5ea0648da56eb00860e8d4820f190d93479

The changes have been pushed to the change-ogp-card-link branch.

Time taken: 2m 5s

Fixed 1 file(s) based on 1 unresolved review comment.

Co-authored-by: CodeRabbit <noreply@coderabbit.ai>
Copy link
Copy Markdown
Contributor

@uni-kakurenbo uni-kakurenbo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

みま
した
(一点だけコメントしてます)

.filter(isDefined)
.filter(o => o.title)
const ogpItems = computed(() =>
props.externalUrls.flatMap(url => {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nits 今までどおり filter いっぱい書くほうが素直で読みやすい気がしました (が、好みではあると思うのでお好みで直したり直さなかったりしてください)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

OGPカードのリンク先を og:url の値ではなく実際のURLにする

2 participants