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

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

ただいまの
回答率

90.76%

  • JavaScript

    15304questions

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

  • jQuery

    6323questions

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

  • Instagram API

    31questions

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 220

newmountain

score 1

 前提・実現したいこと

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

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

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

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

 該当のソースコード

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

<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);">
  <div style="padding:8px;">
    <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:62.5% 0; text-align:center; width:100%;">
      <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>
    </div>
    <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> -
      <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>
    </p>
  </div>
</blockquote>
<script async defer src="//www.instagram.com/embed.js"></script>

 試したこと

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

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


Instagramの場合も、埋め込みコードに入っているスクリプト
<script async defer src="//www.instagram.com/embed.js"></script>
を再読み込みさせているのですが、
twitterでいうところの
twttr.widgets.load()
のような、再構築?する関数がわかりません。

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/16 13: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();
    });

    キャンセル

  • 2018/05/16 14: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(); を実行するとか。

    キャンセル

  • 2018/05/16 16:48 編集

    回答くださいましてありがとうございます。
    画面遷移後に 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();
    });

    初心者で理解が追いつかず申し訳ないのですが、よろしくお願いいたします。

    キャンセル

  • 2018/05/16 17: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>

    キャンセル

  • 2018/05/16 18:20

    度々ご回答ありがとうございます。

    ===
    一番手っ取り早いのは、HTMLのほうにあらかじめ
    <script src="https://www.instagram.com/embed.js"></script>
    を記述しておくこと。
    ===

    先ほどはこちらの意味をよく理解できていませんでしたが、
    この方法でうまくいきました。
    丁寧なお答えありがとうございます。

    キャンセル

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

  • ただいまの回答率 90.76%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    15304questions

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

  • jQuery

    6323questions

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

  • Instagram API

    31questions