Instagram投稿の埋め込みコードを取得して、
とあるWebページに埋め込んだところ、
iPhoneのChromeでだけ、コンテンツが表示されなかった。
正常に動いた場合、blockquoteの部分がscriptによってiframeに書き換えられるっぽいんだけど、
その肝心のscriptが、どうも動いていないっぽい。
どうやってデバッグするの
iPhoneのChrome、Macでデバッグできない問題がある。
（Safariなら実機をつないでデバッグできる）
しかし、MacのSafariの「開発 > レスポンシブデザインモード」をよく見てみると、
なんとiPhoneのバージョンだけではなく、ブラウザを選択するプルダウンがあるではないか。
そこで「Google Chrome - macOS」を選択したところ、
同様の現象を再現できた。やっぴ〜
原因究明→解決
Mac版Safariでのデバッグによって判明したのは、
やはりinstagram側のscriptが全然読み込めていないということだった。
ここで、今回この問題が発生しているページが、
SSL化されていなかったことを思い出す。
つまり https ではなく、 http なのである。
Instagram埋め込みコードの最後をよ〜く見てみると…
<script async src="//www.instagram.com/embed.js"></script>
これか〜〜〜！！！！！！
<script async src="https://www.instagram.com/embed.js"></script>
に直したら、ちゃんと動くようになりました。めでたし
