14
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

QiitaにCodePenを埋め込めない問題の対策

Last updated at Posted at 2018-02-17

はじめに

QiitaにはCodepenを埋め込めるはずですが、新しく作成したCodepenはなぜか正常に埋め込めませんでした。

Qiitaで記事にCodePenが埋め込めるようになりました

埋め込んだ結果はこんな感じ。
SS 2018-02-18 1.59.01.png

原因

codepenが生成する埋め込み用コード内に含まれるscriptのsrcが変更されていた。

赤枠の部分
SS 2018-02-18 2.11.55.jpg

<!-- これまでのscriptタグ -->
<script async src="https://static.codepen.io/assets/embed/ei.js"></script></script>

<!-- 2018/02/18時点のcodepen埋め込みコード -->
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

URLでアクセスできるjsファイルの中身は変化ありませんでした。恐らく、jsのURL変更により、Qiita上で動くjsのホワイトリストから漏れたのかなと予測。だとするなら、近いうちにQiitaが対応してくれそう。

対策

埋め込みコード内のscript urlを古いものに変更。

<p data-height="186" data-theme-id="0" data-slug-hash="WvPgPP" data-default-tab="html,result" data-user="plotly" data-embed-version="2" data-pen-title="Basic Line Plot with Plotly.js Charts" class="codepen">See the Pen <a href="https://codepen.io/plotly/pen/WvPgPP/">Basic Line Plot with Plotly.js Charts</a> by plotly (<a href="https://codepen.io/plotly">@plotly</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<!-- URLを古いものに変更 -->
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

ちゃんと動いた。

See the Pen my-plotly-sample by icchi (@icchi) on CodePen.

14
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?