search

fjordllc / bootcamp

プログラマー向けEラーニングシステム
https://bootcamp.fjord.jp
MIT License
286 stars 71 forks source link

リンクカードを実装 #8139

Open mousu-a opened 1 month ago

mousu-a commented 1 month ago

Issue

Screenshot

スクリーンショットは動きが固まった後で追加します🙇‍♂️

mousu-a commented 1 month ago

@machida お疲れ様です。 お手すきの際にリンクカードの動作確認をお願いいたします。

Tweetのデザインの適用のさせ方

こちらのリンク

HTML中のscriptタグを実行することで、blockquoteタグがiframeタグに置き代わり、埋め込みツイートのデザインが適用されています。

にあるように、レスポンス内のscriptタグを実行することでTweetのデザインを適用させていますが、 このようなissueがあり、後々この方法は使えなくなるかもしれません。

machida commented 1 month ago

@mousu-a

このPRに最新のmainを取り込みました。 手元で

git pull --rebase origin feature/introduce-of-link-card

をお願いします。

このブランチにプルリクを送りました。 https://github.com/fjordllc/bootcamp/pull/8143

デザイン以外にJSに手を入れてるので、それらを確認の上（コードを読んだり、動作を確認したり）、OKだったらこのブランチにマージしてくださいー

もし、修正が必要なときは、

もしくは、

どちらかでお願いします。

mousu-a commented 1 month ago

@machida ありがとうございます！！😭

machida commented 2 weeks ago

?なんかコミットの履歴がおかしい ↑ 修正しました！ 手元で動かすときは、

一旦手元のブランチ feature/introduce-of-link-card を削除して、再度 origin から持ってきてください。

git branch -D feature/introduce-of-link-card git fetch origin feature/introduce-of-link-card git checkout feature/introduce-of-link-card

machida commented 2 weeks ago

@mousu-a 

## A

あいうえお@[card](https://bootcamp.fjord.jp)かきくけこ

---

## B

あいうえお @[card](https://bootcamp.fjord.jp)かきくけこ

---

## C

あいうえお@[card](https://bootcamp.fjord.jp) かきくけこ

---

## D

あいうえお
@[card](https://bootcamp.fjord.jp)かきくけこ

---

## E

あいうえお@[card](https://bootcamp.fjord.jp)
かきくけこ

---

## F

あいうえお
@[card](https://bootcamp.fjord.jp)
かきくけこ

---

## G

あいうえお

@[card](https://bootcamp.fjord.jp)
かきくけこ

---

## H

あいうえお
@[card](https://bootcamp.fjord.jp)

かきくけこ

---

## I

あいうえお

@[card](https://bootcamp.fjord.jp)

かきくけこ

これを貼り付けると、GとIだけがリンクカードになります。 本当はIのときだけリンクカードになってほしかったのですが、これでいいかなーという感じです。

mousu-a commented 2 weeks ago

@machida ありがとうございます🙇‍♂️ 確認させていただきます！

mousu-a commented 2 weeks ago

@machida 例までありがとうございます！とても助かります🙇‍♂️ Iのときだけリンクカードに出来ないかちょっと調べてみます🙏

mousu-a commented 1 week ago

@machida お疲れ様です。

Iの時だけリンクカードを生成するようにコードを変更しました。合わせてフィクスチャも変更しています。 お手すきの際にご確認ください🙇‍♂️ （せっかくいただいた修正を上書きする形となってしまい、申し訳ないです🙇‍♂️）

ZENNのリンクカード実装がほとんどそのまま使えたのでそのまま使っています。（FBCの仕様に合わせて改変を加えています）

今回実装するリンクカードの仕様として「マークダウンにネストした状態でもリンクカードを生成する」となっていますが、これはdetailsだけ許容する形としています。 例えばmessage記法の中ではリンクカードを展開しません。認識に違いがあればご指摘いただけますと幸いです🙇‍♂️

ところでリンクカードの前後に中身のない空のpタグが表示されてしまい、いまだ原因が掴めません... こちら出来ればアドバイスなどいただきたいです🙇‍♂️

リンクカードの前後に謎のpタグが入ってしまう

現状説明

このようにリンクカードを展開すると<div class = "a- link-card">の前後に中身のないpタグが挿入されてしまっています。

Pasted_Graphic

私見、試してみたことなど

tokensの配列としては"paragraph_open", "html_inline", "paragraph_close"となっており、余計なpタグが入る余地はないと思うのですが...

Pasted_Graphic_1

確認してみたところ、リンクカードの対象となるToken(tokens[i])の前のpタグはどうやらtokens[i - 1]のようです。 tokens[i - 1].attrJoin('style', 'display: none')とすると、リンクカードの前のpタグにdisplay: noneが適用されます。

Pasted Graphic 2

ただ後ろのpタグはtokens配列の中に存在しません。（存在しないのにpタグが生成されてしまっているようです）

こちらアドバイスなどいただけたらと思います🙇‍♂️

machida commented 1 week ago

@mousu-a markdownの仕様に従ってmarkdown記法からHTMLを生成したときに発生してるのかもです。もしかしたら、pの開始タグだけ生成されてしまって、それをChromeがHTMLの矛盾を無くすために無理やりpを閉じている、とかかもしれないです。念のためFFとSafariでも確認してみるといいです。もしかしたら別のHTMLになっているかもです。

そのまま実装したらリンクカードがpで囲われてしまうのを、そのpを生成しないという機能も付けてるので、それとのバッティングなどもあるかも？

で、僕もその辺の問題がうまく解決出来なかったんですよねー。なので、Iのときだけリンクカードにするというのは、そこまで優先度は高くないので、今回の件が解決ができなかったら、前のコードでレビューを出してしまって大丈夫です。

ただ、変なHTMLに変換されないようにしたいので、コードを戻してもその点はチェックをお願いしたいです。

mousu-a commented 1 week ago

@machida お疲れ様です。 空のpタグが出てしまう問題が解決出来ました！ アドバイスありがとうございました🙇‍♂️

Pasted Graphic 5

正確には、Markdown-it プラグインを適用する時に元となったa要素(の親であるp要素)をdisplay: noneにし、replace-link-to-card.jsでリンクカードを生成する際に削除する形となっています。

image

なぜリンクカードの前後に空のpタグが出力されてしまっていたのか

コードのコメントにも書いてありますが、 tokens[i](リンクカード記法のToken)の位置に割り込む形でpushしてしまうと、Tokenの配列として正しい形でなくなり、正しくないHTMLが出力されてしまっていたようです。 （tokensの最後にpushすると余計なpタグは出てきませんでした） なので、リンクカード記法のToken(pOpen inline pClose)の後ろにpushすることで解決としています。

お手すきの際にご確認をお願いいたします🙇‍♂️

すみません、余計なdiffが混じってしまいました。ここは本質的な変更には関係ありません。 コミットを分けるべきでした🙇‍♂️ https://github.com/fjordllc/bootcamp/pull/8139/commits/4b3286b65f38b55ef6001808e561e595d9cc1368#diff-fd96d68161d49a2363a82d7312147b1395cff86b00fe40b27fed62ec83b1d1afR15

machida commented 1 week ago

@mousu-a 動作確認しました！！ バグを見つけましたので確認をお願いします。

@[card](https://esa.io/)

@[card](https://www.yahoo.co.jp/)

@[card](https://bootcamp.fjord.jp/)

このように、文章の最後がリンクカード記法になっている場合、最後のリンクカード記法がリンクカードに変換されませんでした。

@[card](https://esa.io/)

@[card](https://www.yahoo.co.jp/)

@[card](https://bootcamp.fjord.jp/)

aaaaa

上記だと変換されます。

デザインやクラス名を少し修正しました。

mousu-a commented 1 week ago

@machida 動作確認、デザインの調整ありがとうございます！ すみません、バグの方確認します🙇‍♂️

machida commented 1 week ago

@mousu-a調査よろしくお願いします。そこ以外の動作はバッチリでした👍

mousu-a commented 1 week ago

@machida バグ解決出来ました！ 再度動作確認の方お願いいたします🙇‍♂️

バグ

3つ以上リンクカードが生成されるとき、最後のリンクカードだけ生成されていませんでした。

原因

リンクカードを生成する際、html_blockをtokens配列にpushしていたことにより、tokensの要素数がズレ、そのズレによって最後の方のtoken(要素)が(html_blockをpushしてズレた数だけ)処理出来ず、最後のリンクカードが生成できていなかったようです。

解決

for文を使うことにより、tokens配列の要素数の増減に合わせて処理を行えるようにしました。

すみません、rebaseしたのでこちらをお願いいたします🙇‍♂️ git branch -D feature/introduce-of-link-card git fetch origin feature/introduce-of-link-card git checkout feature/introduce-of-link-card

machida commented 6 days ago

@mousu-a

確認しました！！ ほぼOKだったのですが、

@[card](https://bootcamp.fjord.jp/articles/146)あ
@[card](https://bootcamp.fjord.jp/articles/146) あ

上記のとき、「あ」が無視されリンクカードが生成されてしまいました。 小さなバグなので目をつぶってもいいかもですが、これも直せるとよりいいです。

mousu-a commented 6 days ago

@machida ありがとうございます！！ すみません、正規表現見直します！

machida commented 5 days ago

@mousu-a 了解です！よろしくお願いしますー🙏

mousu-a commented 4 days ago

@machida お疲れ様です。 再度ご確認のほどよろしくお願いいたします🙇‍♂️

以下行った変更です。