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

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

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

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

Facebook Graph API

Facebook Graph APIとは Facebookのグラフデータベース用のAPIであり、対応言語はPHP、Perl、ActionScript、JavaScriptなどがあります。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

jQuery

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

Q&A

0回答

1241閲覧

Instagram Graph API v11.0 インスタ 画像取得について 描画が 重たい 遅い 状況を改善したい

sh_azikikou

総合スコア16

Instagram API

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

Facebook Graph API

Facebook Graph APIとは Facebookのグラフデータベース用のAPIであり、対応言語はPHP、Perl、ActionScript、JavaScriptなどがあります。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2021/12/07 02:46

編集2021/12/13 05:04

### 前提・実現したいこと

  • 環境
  • サーバーOS:Linux
  • DBサーバー:MySQL
  • WEBサーバー:Apache
  • PHP:7.4.25

動的なECサイトを制作中です。
Instagram Graph API v11.0 を利用してInstagramの画像や動画を取得するブロックを作成中です。
しかしながら描画が遅くてモバイル端末(3G回線)だと画面が読み込み開始から10秒ほど固まり支障をきたすレベルです。
その間はスクロールが出来ない若しくはJSが読み込み完了しないので描画が不完全な状態のものが散見される。

処理は画像とLIKE(いいね)数と投稿内容の取得をしていて、投稿内容は文字数の調整を行います。
静的サイトではそこまで読み込みが遅くならないのでどうにか改善して支障ないレベルに落ち着けば再度ブロックをレイアウト追加して表示する予定です。。

Instagram Graph API経由で画像を取得すると、第三者コード(https://cdnjs.com/)が10000msほどかかって画面描画に支障をきたしているのが問題点です。

お忙しいところ恐縮ですが何かしらヒントをいただけますと幸いです。どうぞよろしくお願いいたします。

### 該当のソースコード

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script type="text/javascript" src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver" crossorigin="anonymous"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script> <script> $.ajax({ type: 'GET', url: 'https://graph.facebook.com/v11.0/【Instagramビジネスアカウント】?fields=name%2Cmedia.limit(【表示件数】)%7Bcaption%2Clike_count%2Cmedia_url%2Cpermalink%2Ctimestamp%2Cusername%7D&access_token=【2番目のアクセストークン】', dataType: 'json', success: function(json) { var ig = json.media.data; var html = ""; var caption; for (var i = 0; i < ig.length; i++) { var link = ig[i].permalink; var image; caption = ig[i].caption; var like_count; like_count = ig[i].like_count; jQuery(function($) { $('.ig_caption').each(function() { var $target = $(this); // オリジナルの文章を取得する var html = $target.html(); // 対象の要素を、高さにautoを指定し非表示で複製する var $clone = $target.clone(); $clone .css({ display: 'none', position : 'absolute', overflow : 'visible' }) .width($target.width()) .height('auto'); // DOMを一旦追加 $target.after($clone); // 指定した高さになるまで、1文字ずつ消去していく while((html.length > 0) && ($clone.height() > $target.height())) { html = html.substr(0, html.length - 1); $clone.html(html + ' ...more'); } // 文章を入れ替えて、複製した要素を削除する $target.html($clone.html()); $clone.remove(); }); }); if(!ig[i].thumbnail_url) { // 動画の場合はこちら image = ig[i].media_url;} else { // 写真の場合はこちら image = ig[i].thumbnail_url; } html += '<div class="child u-fadein _right" ><a rel="noopener norefferrer" target="_blank" alt="インスタグラム投稿" href="' + link + '" ><img data-lazy="true" loading="lazy" width="281px" height="281px" style="height:auto" class="ig lozad" src="" data-src="' + image + '" src="" async/><span class="like lozad"><i class="fa fa-heart"></i>'+like_count+'</span></a><p loading="lazy" class="ig_caption">'+caption+'...</p></div>' } $(".instagram").append(html); // lazy loads elements with default selector as '.lozad' const observer = lozad('.lozad', { rootMargin: '30%', }); observer.observe(); } }); </script> ----表示部分 CSSは省略します---- <div class="instagram parent"></div>

試したこと

特になし。指針が分からなかった為。
事前読み込みや不要ソースの削除なども試みましたが、結果にさほど影響を与えませんでした。
当然このブロックをレイアウトから外すと快適に閲覧できる状態になります。
静的サイトだと巧くいっていたのですが、書き方も自信がなかったのでそのままです。
プラグインを購入しようかとも悩み中ですが、投稿写真だけでなく投稿内容(文字列の一部)も表示させたかった訳です。

補足情報(FW/ツールのバージョンなど)

自分は非プログラマなので所々書き方は可笑しいと思います。
API記述はv12.0で現在は書けますが取り敢えず11.0で。

bootstrap/3.4.1/css/bootstrap.min.css
bootstrap/3.4.1/js/bootstrap.min.js
も利用しています。特に読み込みされているので読み込み順番は大丈夫かと思います。

jquery/3.6.0/jquery.min.js
はメインで使っているのでこれは、ヘッダ部で読み込みしています。

これら3つは本ブロックとは異なるブロックに記述しています。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問