質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Instagram API

Instagram APIは、写真共有SNSであるInstagramの投稿写真をWebサイトに掲載するためのAPIです。取得することでWebサイトと連携し、自動的に投稿写真を表示することができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1452閲覧

Barba.jsで画面遷移したあと、Instagramの投稿埋め込みで画像が読み込まれない

newmountain

総合スコア6

Instagram API

Instagram APIは、写真共有SNSであるInstagramの投稿写真をWebサイトに掲載するためのAPIです。取得することでWebサイトと連携し、自動的に投稿写真を表示することができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/05/14 09:02

編集2018/05/16 04:51

前提・実現したいこと

(数日前に同様の質問をしましたが、情報の追加修正をして改めて質問させていただきました)

Barba.jsを使用しています。
非同期で画面遷移した箇所にInstagramの投稿の埋め込みがあると、
画像が表示されないので、描画させたいです。
フィードではなく、一つ一つの投稿を埋め込みで表示させたいです。

発生している問題・エラーメッセージ

読み込みはされるが、投稿されている画像が下記のような表示になる。
ブラウザをリロードすると正常通り画像が読み込まれて表示される。
イメージ説明

該当のソースコード

埋め込みコードは下記のような形です。
(投稿が特定されそうな箇所は置き換えました)

javascript

1<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/hogehoge/" data-instgrm-version="8" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"> 2 <div style="padding:8px;"> 3 <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:62.5% 0; text-align:center; width:100%;"> 4 <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div> 5 </div> 6 <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;"><a href="https://www.instagram.com/p/hogehoge/" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none;" target="_blank">hogehoge(@hogehoge)がシェアした投稿</a> - 7 <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="20xx-xx-xxTxx:xx:xx+00:00">20xx年xx月xx日xx時xx分PDT</time> 8 </p> 9 </div> 10</blockquote> 11<script async defer src="//www.instagram.com/embed.js"></script>

試したこと

同様の現象がtwitterの投稿埋め込みでも発生しましたが、その場合は、下記のような処理でうまく表示されました。

javascript

1Barba.Dispatcher.on('newPageReady', function (currentStatus, oldStatus, container, newPageRawHTML) { 2 var twscript = document.createElement('script'); 3 twscript.setAttribute('async',''); 4 twscript.setAttribute('charset','utf-8'); 5 twscript.src = 'https://platform.twitter.com/widgets.js'; 6 document.body.appendChild(twscript); 7Barba.Pjax.start(); 8}); 9//非同期通信後に再読み込みするように設定した外部jsファイルにて 10$(window).on('load',function(){ 11    twttr.widgets.load(); 12});

Instagramの場合も、埋め込みコードに入っているスクリプト

<script async defer src="//www.instagram.com/embed.js"></script>

を再読み込みさせているのですが、
twitterでいうところの
twttr.widgets.load()
のような、再構築?する関数がわかりません。

どなたかこ存じの方、またその他に良い方法なとありましたら、
ご教授お願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

window.instgrm.Embeds.process() だと思います。お試しあれ。

投稿2018/05/14 16:11

yhg

総合スコア2161

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

newmountain

2018/05/16 04:57

回答くださいましてありがとうございます。 下記のように試してみたのですが、まだ表示は改善されないままです。。。 特にJavaScriptエラーも出ていないのですが。。。 Barba.Dispatcher.on('newPageReady', function (currentStatus, oldStatus, container, newPageRawHTML) { var igscript = document.createElement('script'); igscript.setAttribute('async',''); igscript.setAttribute('defer',''); igscript.src = 'https://www.instagram.com/embed.js'; document.body.appendChild(igscript); }); //非同期通信後に再読み込みするように設定した外部jsファイルにて $(window).on('load',function(){     window.instgrm.Embeds.process(); });
yhg

2018/05/16 05:23

その記述だと、初回読み込み時にだけ window.instgrm.Embeds.process() が実行されます。 Barba.js で画面遷移後には実行されません。 embed.js の読み込みが完了したタイミングで実行する必要があります。 newPageReady イベントの中で load-js (https://www.npmjs.com/package/load-js) などで embed.js を読み込ませて、読み込み完了したら window.instgrm.Embeds.process() を実行するようにしなければなりません。 それか、最初から https://www.instagram.com/embed.js をHTMLで読み込ませるよう記述しておいて、newPageReady イベントの中で window.instgrm.Embeds.process(); を実行するとか。
newmountain

2018/05/16 07:56 編集

回答くださいましてありがとうございます。 画面遷移後に https://www.instagram.com/embed.jsを読み込ませて、 window.instgrm.Embeds.process();を実行させる、というつもりで以下のように記述して試したりもしているのですが、Cannot read property 'Embeds' of undefined とエラーが出てしまいます。 Barba.Dispatcher.on('newPageReady', function (currentStatus, oldStatus, container, newPageRawHTML) { var igscript = document.createElement('script'); igscript.setAttribute('async',''); igscript.setAttribute('defer',''); igscript.src = 'https://www.instagram.com/embed.js'; document.body.appendChild(igscript); window.instgrm.Embeds.process(); }); 初心者で理解が追いつかず申し訳ないのですが、よろしくお願いいたします。
yhg

2018/05/16 08:21

document.body.appendChild(igscript) を実行して即座にスクリプトの読み込みが完了するわけではないので、それではエラーが出ます。読み込んでる最中に window.instgrm.Embeds.process() が実行されてしまいます。 ↑にも書きましたが、load-js などのライブラリを使ってスクリプトの読み込み完了を待たなければならないです。 一番手っ取り早いのは、HTMLのほうにあらかじめ <script src="https://www.instagram.com/embed.js"></script> を記述しておくこと。 load-js を使うなら、↓のような感じでしょう。 <script src="//cdn.jsdelivr.net/npm/es6-promise@4.1.1"></script> <script src="//cdn.jsdelivr.net/npm/load-js@3.0.2/index.js"></script> <script type="text/javascript"> . . . Barba.Dispatcher.on('newPageReady', function (currentStatus, oldStatus, container, newPageRawHTML) { if (!('instgrm' in window)) { loadJS([{async: true, url: 'https://www.instagram.com/embed.js'}]).then(function () { window.instgrm.Embeds.process(); }); } else { window.instgrm.Embeds.process(); } }); . . . </script>
newmountain

2018/05/16 09:20

度々ご回答ありがとうございます。 === 一番手っ取り早いのは、HTMLのほうにあらかじめ <script src="https://www.instagram.com/embed.js"></script> を記述しておくこと。 === 先ほどはこちらの意味をよく理解できていませんでしたが、 この方法でうまくいきました。 丁寧なお答えありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問