リンクをわかりやすく見せる部品（リンクカード）が欲しい #7455
Comments
|
@komagata luckrya/markdown-it-link-to-card Usage(TypeScript)import MarkdownIt from "markdown-it";
import { linkToCardPlugin } from "@luckrya/markdown-it-link-to-card";
import type { LinkToCardPluginOptions } from "@luckrya/markdown-it-link-to-card";
const md = MarkdownIt({ html: true }).use<LinkToCardPluginOptions>(
linkToCardPlugin,
{
// options
size: "small",
}
);
const rendered = md.render(`
# Home
...
### Reference
- [github](https://github.com)
- [bing](https://cn.bing.com/)
- [知乎 - 发现页](https://www.zhihu.com/explore)
- [markdown-it-link-to-card](https://github.com/luckrya/markdown-it-link-to-card)
<br />
- [github](@:https://github.com)
- [bing](@:https://cn.bing.com)
- [知乎 - 发现页](@:https://www.zhihu.com/explore)
- [markdown-it-link-to-card](@:https://github.com/luckrya/markdown-it-link-to-card)
`);API(JavaScript)import { generateCard } from "@luckrya/markdown-it-link-to-card";
generateCard("https://github.com", {
linkTitle: "Github Home",
showTitle: true,
size: "small",
}).then(({ dom }) => {
// card dom fragment
console.log(dom);
}); |
|
@mousu-a 後からこのIssueを追った人にもわかるようにGitHub外でのやりとり（ミーティングやDiscordや口頭など）で決まったことがあればこちらにメモとして残すようにしてみてください〜。 |
ありがとうございます🙏 以下ミーティングで決まった方針です！ログとして残します。 概要リンクカードの実装方針に不安があり、komagataさんに相談させていただいた。 詳細上にあるように、リンクカードの実装使うnpmがTypeScriptで書かれていたため、Usageとして例に上がっているこちらのコードではなく、 APIとして提示されているこちらのコードを使って実装するものだと思い込んでいました。 そちらをミーティングにてkomagataさんに相談させていただいたところ、「なにか他に別の手段がありそう、探してみてほしい。というよりこの場合のAPIというのが(何に使うのか?)よくわからない」とのこと。 |
ログこちらご紹介いただいたnpmがTypeScriptなのですが、komagataさんより「TypeScriptを使ってしまうと、RailsエンジニアコースでもTypeScriptのカリキュラムを作る必要があり、あえて導入しないようにしているので、TypeScriptはbootcampに導入しない方向で進めていただければありがたいです〜。」とのことです。 TypeScriptを使わずにnpmを使って導入するという方向で進めていきます🙏 |
|
お疲れ様です！ npmの問題点リンクカードを生成する際にCORSでブロックされる
対処法間にRailsのコントローラーを挟む
詳細
# コード例
# JS → Railsコントローラー → 外部サイトの順にリクエスト
class API::LinkcardController < ApplicationController
def index
uri = URI.parse(params['url'])
http = Net::HTTP.new(uri.host, uri.port)
http.use_ssl = uri.scheme == 'https'
headers = { 'Content-Type' => 'application/json' }
response = http.get(uri.path, headers)
render json: response.body, status: :ok
end
end懸念点
ザックリこんな方針で進めています。
気になるところなどあればお考えをお聞きしたいです！ こちらの日報でこれらの問題について、メンターのyuuuさんにお話を伺っていました。 |
|
@mousu-a まず、この npmを使う人ほぼ全員がCROSの問題にあたるとおもいます。 |
|
一通り調べたつもりですが、確実にYESと言えるほど理解度が高くないのでもう少し調べてみます🙏 |
|
お疲れ様です。一通り調べましたがやはりサーバーサイドを間に通してリクエストをするのが良さそうだと思うのですがいかがでしょうか。以下詳細になります。 npmのCORS対策調べましたが、やはりこのnpmでCORS関連の記述は出てこないようです。 こんなサイトがありましたが、この中では予め用意したデータを使ってリンクカードを生成していたので参考にならずじまいでした。。（外部サイトにリクエストを送っていないのでそもそも前提条件が違いました） 他のリンクカードのCORS問題はどうしてるのか？
主にこの二つがありそうです。 ただ結局は、サーバーサイドかサーバーサイドの代わりになるものを用意してそれを間に挟もう、という試みなのは変わらなさそうです。 この場合Railsのコントローラーを間に挟むのは下策でしょうか？ご意見を伺いたいです🙇♂️ |
|
@mousu-a まずパラメーターにURLを渡してどのページでも表示するというのはセキュリティ上危険なのでできないです。 それだったらリンクカードをrailsで表示するページをつくって、別のページからはIFRAMEで表示する方がいいとおもいます。 |
|
質問が2つあります🙏ご意見を伺いたいです🙇♂️
これらの理由から、必ずブラウザ用にコンパイルされたJSから外部サイトへリクエストを送る必要がある（そしてその場合CORSが発生する）、という認識です。 他のリンクカード実装例
認識が間違っているところなどあればご指摘いただけますと幸いです🙇♂️ |
はい。
同じような実装の似た他のnpmを使ってほしいと思っているわけではないです。
なるほどです。 Railsのコントローラーを挟む場合の実装方法は一例考えがありますが、勉強になるとおもうので @mousu-a さんもサイトにリンクカード的なものを追加したい場合、どのような実装がいいのか考えてみてください。 |
|
@mousu-a すみません、ちょっとややこしいですよね。 リンクカード · fjordllc/bootcamp Wiki @machida リンクカードのHTMLや表示について問題点あればおっしゃっていただければとおもいます～。 |
|
@komagata
ありがとうございます！わからないところあれば質問させていただきます🙇♂️ |
|
お疲れ様です。すみません、早速ですが質問が2つあります。 質問1リンクカードの実装は、テキスト中に 例適用前： テキストテキスト
[TITLE](URL)
テキストテキスト適用後： <p>テキストテキスト</p>
<div class="link-card">
<div class="link-card__title">
<a href="URL" target="_blank">TITLE</a>
</div>
<div class="link-card__description">DESCRIPTION</div>
<div class="link-card__favicon"><img src="FAVICON" /></div>
<div class="link-card__site-title">
<a href="SITE URL" target="_blank">SITE TITLE</a>
</div>
<div class="link-card__image"><img src="IMAGE" /></div>
</div>
<p>テキストテキスト</p>質問2リンクカードwikiにて、
とありますが、 # markdown-initializer.js
# md.use(Plugin)の場合
…
md.use(MarkdownItEmoji)
# マークダウンを適用する流れで一緒に適用する場合(例として既存の実装をピックアップしました🙏)
…
MarkdownItTaskListsInitializer.initialize()よろしくお願いいたします🙇♂️ |
NOです。 下記の「リンクカード記法」の部分を参照してください。
markdown-itのプラグインとは何なのか、markdown-itの公式サイトなどを参考に調べてみてください。 |
ミーティングを経てのログ
|
|
@komagata リンクカード：考えている実装// markdown-initializer.js
import MarkdownItLinkcard from 'markdown-it-linkcard'
~
md.use(MarkdownItLinkcard)
~
// markdown-it-linkcard.js
export default (md) => {
~リンクカードの実装~
}bootcamp内での既存の実装例// markdown-initializer.js
import MarkDownItContainerDetails from 'markdown-it-container-details'
~
md.use(MarkDownItContainerDetails)
~
// markdown-it-container-details.js
export default (md) => {
~プラグインの実装~
} |
|
@mousu-a linkはcontainer（block要素）じゃなくてinline要素なので違うと思います。 import MarkdownItLinkcard from 'markdown-it-linkcard'これは下記がいいとおもいます。 import MarkdownItLinkCard from 'markdown-it-link-card'別の点で、これも、 import MarkdownItContainerDetails from 'markdown-it-container-details'こちらの間違いかなとおもいます。 |
|
@komagata ①1行に ② リンクカード生成にあたり、この2つが状況として考えられると思います。 自分の認識としては、 komagataさんのご意見を伺いたいです🙇♂️ 捕捉情報ZENNでは1行にURLのみ存在する場合（①の場合）のみリンクカードを生成するという形になっています。 |
ログ 上記質問に対するkomagataさんの回答①1行に |
MTGログ 下記質問に対するkomagataさんの回答質問1リンクカードWikiの「表示できない場合」とは具体的に何を指すのか？
回答
捕捉上記のいずれの状況もユーザーにとってハイコンテキストなため、ユーザーからは見えないのが望ましい。 質問2マークダウン記法がネストしている場合はリンクカードは生成されるのか？:::details ネタバレ注意！ 回答マークダウン記法がネストしている状態でもリンクカードは生成する。 |
|
お疲れ様です。 1つ目メタデータAPIのこちらのレスポンスですが、これらの {
site_title: "Moeny Forward Developers Blog",
site_url: "https://xxx.com",
favicon: "https://xxx.com/favicon.ico",
url: "https://xxx.com/xxxx",
title: "ChatGPTのAPIがオープンになったので(略)",
description: "xxxxxxx",
image: "https://xxx.com/xxx.png"
}補足情報OGP <meta property="og:url" content=" ページの URL" />
<meta property="og:type" content=" ページの種類" />
<meta property="og:title" content=" ページの タイトル" />
<meta property="og:description" content=" ページの説明文" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content=" サムネイル画像の URL" />2つ目もしそうであれば、差し支えなければ 補足情報というのも、レスポンスのkeyとogpのproperty値がほとんど一致しているためそれに即した実装を考えているのですが まだ未完成ではありますが、このような実装を考えています。 # リクエスト
uri = Addressable::URI.parse(url).normalize
res = Net::HTTP.get_response(uri)
# nokogiriでdoc化
doc = Nokogiri::HTML(res.body)
# OGPのmetatagを抽出
og_meta_tags = doc.css('meta[property^="og:"]')
# レスポンスを生成
js_response = { site_title: '', site_url: '', favicon: '', url: '', title: '', description: '', image: '' }
og_meta_tags.each do |meta|
js_response.each do |key, _value|
# レスポンスのkeyと、metadataのpropertyが一致したら contentの値をvalueにセット
js_response[key] = meta['content'] if meta['property'] == "og:#{key}"
end
end |
|
@mousu-a 厳密な仕様って感じではないので、やりやすいように変えてしまって大丈夫です〜 |
メモTweetのURLだけ特別仕様として実装する |
|
@machida 質問：Tweetのリンクカード(埋め込みTweet)だけ特別仕様とするかどうか？現状Tweetのリンクカードだけ、このようにTwitterのoEmbedAPIを使用しデザインが特別仕様となっています。
説明：Tweetのリンクカード(埋め込みTweet)の実装方法oEmbedAPIを通してTweetURLにリクエストを送ることで、このようなデータを取得することができます。
{"url":"https:\/\/twitter.com\/mousuFBC\/status\/1799277839138926685","author_name":"mousu","author_url":"https:\/\/twitter.com\/mousuFBC","html":"\u003Cblockquote class=\"twitter-tweet\"\u003E\u003Cp lang=\"ja\" dir=\"ltr\"\u003EGem ViewComponentを勉強中！\u003Cbr\u003Eまだフワフワした全体像が掴めただけで何もわかっていない\uD83D\uDE05\u003Cbr\u003E焦らずやっていくぞ\uD83D\uDCAA\u003C\/p\u003E— mousu (@mousuFBC) \u003Ca href=\"https:\/\/twitter.com\/mousuFBC\/status\/1799277839138926685?ref_src=twsrc%5Etfw\"\u003EJune 8, 2024\u003C\/a\u003E\u003C\/blockquote\u003E\n\u003Cscript async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"\u003E\u003C\/script\u003E\n\n","width":550,"height":null,"type":"rich","cache_age":"3153600000","provider_name":"Twitter","provider_url":"https:\/\/twitter.com","version":"1.0"}
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Gem ViewComponentを勉強中！<br>まだフワフワした全体像が掴めただけで何もわかっていない😅<br>焦らずやっていくぞ💪</p>— mousu (@mousuFBC) <a href="https://twitter.com/mousuFBC/status/1799277839138926685?ref_src=twsrc%5Etfw">June 8, 2024</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>↑のHTML中のscriptタグを実行することで、blockquoteタグがiframeタグに置き代わり、埋め込みツイートのデザインが適用されています。 懸念点Tweetのリンクカードも他のリンクカードとデザインを統一する場合、リンクカードのmetadataが必要となります。 {
site_name: "Moeny Forward Developers Blog",
site_url: "https://xxx.com",
favicon: "https://xxx.com/favicon.ico",
url: "https://xxx.com/xxxx",
title: "ChatGPTのAPIがオープンになったので(略)",
description: "xxxxxxx",
image: "https://xxx.com/xxx.png"
}前述したAPIを介したリクエストでは取得出来るmetadataが少なく、リンクカードとして成立させにくい、という問題があります。
ZENNでの実装ZENNではoEmbedAPIを使いTweetのリンクカード(埋め込みTweet)を特別仕様としています。 以上のことを踏まえて、Tweetのリンクカード(埋め込みTweet)も他のリンクカードとデザインを統一させるかどうかをお聞きしたいです🙏 |
|
Twitterのデザインは別にし、TwitterはTwitterに適した見た目にしたいと思います。もし、Twitterは何もしなかったら勝手にデザインが入るようになっているのであれば、それを確認したいです。 リンクカードのデザインは僕の方でやります。 確認、デザインがしやすいように、リンクカード、Twitterを入れた投稿をfixtureに入れておいてください。それをcommitしたら、メンションをお願いします。実際に手元でコードを見て確認します。 よろしくお願いします🙏 |
|
@machida |
|
お疲れ様です。 質問リンクカード記法の
metadata(レスポンス)の {
site_name: "Moeny Forward Developers Blog",
site_url: "https://xxx.com",
favicon: "https://xxx.com/favicon.ico",
url: "https://xxx.com/xxxx",
title: "ChatGPTのAPIがオープンになったので(略)",
description: "xxxxxxx",
image: "https://xxx.com/xxx.png"
}この2つは同じものと考えてもいいのでしょうか？ 補足同じものなのであれば、今回実装するAPIコントローラーのレスポンスは上記wikiの通り用意し、今回は(リンクカードの実装では)レスポンスの というのも、存在しないサイトのリンクカードを生成する時、リンクカード記法の |
|
📝 |
|
@komagata 質問
例1例2補足説明Markdown-it のプラグインとして実装する際に、 個人的には例1( お手間をとらせてしまい申し訳ありません🙇 |
|
仕様を変更させてください。 inlineで 理由は、inline の場合、p や li の中にリンクカードが生成されるのは、マークアップ的にinvaridなHTMLになるからです。 あああ @[card](URL) あああの場合は、 <p>あああ</p>
[リンクカード]
<p>あああ</p>という表示になるなら HTML は validにはなるので、そこまでしてあげたらユーザーには優しいですが、そもそも変換前の Markdown のコードの時点で invalid な HTML であるため、このように変更してあげる気遣いは不要です。 あああ @[card](URL) あああこのコードの場合、現在のコード（machidaのPR）では以下のように出力されます。 <p>あああ @<a href="URL">card</a> あああ</p>このままでいいと思います。 あああ
@[card](URL)
あああこのコードの場合は、 <p>あああ
<br>
[リンクカード]
<br>
あああ</p>というHTMLに変換されるのも、invalidなHTMLなのでNGです。 <p>あああ</p>
[リンクカード]
<p>あああ</p>このように変換されると、 HTML は valid にはなるので、そこまでしてあげたらユーザーには優しいですが、そもそも変換前の Markdown のコードの時点で invalid な HTML であるため、このように変更してあげなくてもいいとは思います。 ただ、Zennではこのように変換されるようにはなっていました（FBCがそこまでやってあげなくてもいいとは思いますが、簡単にできるならやってあげたい）。 現在のコード（machidaのPR）では、 <p>あああ
<br>
@<a href="URL">card</a>
<br>
あああ</p>このように表示されます。 少し別の話になりますが、 あああ
@[card](URL)
あああの場合、 <p>あああ</p>
<p>[リンクカード]</p>
<p>あああ</p>このように出力されます。 僕の PR で[リンクカード]を囲うpを削除するコードを含めています。 <p>あああ</p>
[リンクカード]
<p>あああ</p>機能を修正する場合は、差分が出てマージが難しくなるので |
|
このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。 |
↓こういうやつが欲しい。
ブログや日報など、Markdownエディターを使ってるところで使えるようにする。
下記のnpmを試してみてください〜（書式も下記のnpmに従います）
https://www.npmjs.com/package/@luckrya/markdown-it-link-to-card
The text was updated successfully, but these errors were encountered: