🐛

Zenn の @[tweet] の挙動調査

2020/10/02に公開約3,100字9件のコメント

Zenn の独自記法 @[tweet]

Zenn では独自記法を使うことでツイートを埋め込むことができます。

ZennのMarkdown記法 | Zenn

@[tweet](ツイートページのURL)

なぜかツイートが埋込されないケースが発生

ローカルのプレビュー環境ではちゃんと表示されているが本番環境では表示されない症状に遭遇しました。
記事はこちら「Zenn に投稿したらツイートする RPA レシピ | Zenn

ローカル

local preview

本番

deployed

問題の文章

## 結果

:::message
この記事公開後、ツイートされるはずなので、その結果を載せます。
:::

https://twitter.com/srz_zumix/status/1311583381721944065
@[tweet](https://twitter.com/srz_zumix/status/1311583381721944065)

:::message
10時頃記事公開、11時にトリガー設定してましたが、Integromat 側で新規フィード認識がされなかったので、
2時間おきのインターバルに設定し、17時に認識されました。
もしかしたら公開してすぐは認識できないかもしれません。なにかわかったら追記します。
:::

以下テスト

埋め込みたいツイートに含まれる URL が自分自身の記事の URL なのが良くないのかな?という予測を立てつつ、テストしてみます。

Zenn 公式のツイート

問題の記事でも表示されていたので問題ないはず。

https://twitter.com/zenn_dev/status/1306161147691675648

同じのを2つ。

筆者アカウントのツイート

問題のツイート以外の適当なツイートの埋め込みテスト。

https://twitter.com/srz_zumix/status/1311845949388414977

画像つきツイート

https://twitter.com/srz_zumix/status/1308940308885929986

問題のツイート

表示されなかった記事に埋め込んだツイート。

https://twitter.com/srz_zumix/status/1311583381721944065

この記事のリンクを含んだツイート

https://twitter.com/srz_zumix/status/1311849214775758849

デバッグ

コンソール出力。

console log

あやしいログ。

Issues detected. The new Issues tab displays information about deprecations, breaking changes and other potential problems.

issue

Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute
Because a cookie's SameSite attribute was not set or is invalid, it defaults to SameSite=Lax, which prevents the cookie from being sent in a cross-site request. This behavior protects user data from accidentally leaking to third parties and cross-site request forgery.

Resolve this issue by updating the attributes of the cookie:
Specify SameSite=None and Secure if the cookie should be sent in cross-site requests. This enables third-party use.
Specify SameSite=Strict or SameSite=Lax if the cookie should not be sent in cross-site requests

10 cookies
Learn more: SameSite cookies explained

結果

Discussion に書く。

どうやら自分のブラウザ環境が原因なことは確定。

キャッシュとクッキー削除でツイートが表示されるようになりましたmm

GitHubで編集を提案

Discussion

1つしかでない?

自分のブラウザの問題のようでした。
別のソフトなら見れました。(何が原因だろう?)

アドブロックを使用していたりしますか?

埋め込み部分は基本的にツイートの埋め込みの仕様に則って、https://platform.twitter.com/widgets.jsを読み込む形で実現しています。

考えられる原因としては、
①そのスクリプトの読み込みが弾かれている(その場合ブラウザのコンソールにエラーメッセージが出ている気がします)
②アドブロックにより広告だとみなされてしまっている
あたりかなと思っています。

②の場合だとどう対応したら良いんだろう・・・

サポートありがとうございます。
アドブロックは利用してないですね。(たぶん

  • Chrome の特定アカウントでのみ発生
  • 別アカウント・別ブラウザでは表示されている
  • 別の PC で問題のアカウントで設定同期した Chrome では表示されている(拡張機能が原因ではない?)
  • キャッシュ?

ありがとうございます。たしかにその情報を見ると、キャッシュが怪しそうな感じはありますね…。表示されないChromeで右クリック→「検証」→「console」タブを開いたときにエラーメッセージのようなものって表示されていますか?

コンソールログには以下が出ていました。
Issues detected. The new Issues tab displays information about deprecations, breaking changes and other potential problems.
そして、キャッシュとクッキー削除したら直りましたmm

詳細は記事の方にスクリーンショットと一緒に載せました。
ツイートが表示されるようにはなりましたが、コンソールのログ・issue は出たままでした。

詳しくありがとうございます!キャッシュとクッキー削除で直ったんですね。
なぜだろう…。また、何か分かりましたらこちらに書こうと思います。

Zenn を開いたままクッキー削除したときは直らなかったのですが、Zenn を開いてたタブを全部閉じてからクッキー削除したら直りました。
いろいろサポートしていただきありがとうございました。
こちらでも再発したり、何かわかったりした場合は追記したいと思いますmm

ログインするとコメントできます