JavaScript

Instagram APIで取得したJSONデータ（画像、動画、URL）を表示する方法

  /

instagramのAPIを利用して、Instagramに投稿された画像や動画、およびそのリンクURLをWebサイトに表示する方法について解説します。
この方法を活用すれば、InstagramのコンテンツをWebサイトで手軽に共有することができます。

過去記事「Instagram APIのデータを指定時間毎にJSONファイルへ取得・保存するテクニック【PHP】」と組み合わせると最新のinstagramで投稿したデータを表示できます。

Contents

fetchとthenについて

fetchは、リモートサーバーからリソースを非同期的に取得するためのJavaScriptの機能です。thenは、Promiseの処理が成功したときに実行される関数を指定するためのメソッドです。これらを組み合わせることで、非同期的にデータを取得し、その後の処理を行うことができます。

CSSコード

Webページのスタイルを定義するために、以下のCSSコードを使用します。

<style>
body {
    font-size: 16px;
    text-align: center;
    margin: 0;
}
h1{
    text-align: center;
    font-size: 20px;
    padding: 40px 0;
    line-height: 1.8em;
}
ul{
    list-style: none;
}
ul li{
    padding: 0;
    margin: 0;
}
ul li img{
    border: solid 1px #cccccc;
}
</style>

HTMLコード

インスタグラムの画像や動画、リンクURLをid=”instagramimgs”に出力します。HTMLコードは以下のようになります。

<ul id="instagramimgs">
</ul>

JavaScriptコード

読み込むjsonファイルは「instagram.json」です。
InstagramのAPIから取得したJSONデータを処理して、画像や動画、リンクURLを表示するためのJavaScriptコードは以下の通りです。

<script>
// JSONファイルのURL
const url = 'instagram.json';

// fetch APIを使用してJSONファイルを読み込む
fetch(url)
  .then(response => {
    // レスポンスをJSONとして解析する
    if (!response.ok) {
        throw new Error('ネットワークの応答が正常ではありませんでした');
    }
    return response.json();
  })
  .then(data => {
    const mediadataArray = data.business_discovery.media.data;

    // mediadataArray内の各imgurlに対してループ処理
    mediadataArray.forEach(mediaItem => {
        const media_url = mediaItem.media_url;
            const permalink = mediaItem.permalink;

        // 新しいli要素を作成
        const liElement = document.createElement('li');
        
        // 新しいa要素を作成し、href属性を設定
        const aElement = document.createElement('a');
        aElement.href = permalink;
        aElement.target = '_blank'; // リンクを新しいタブで開くように設定

        // 新しいimg要素を作成し、src属性をセット
        if(media_url.indexOf( 'video' ) != -1){
            const videoElement = document.createElement('video');
            videoElement.muted = true;
            videoElement.autoplay = true;
            videoElement.loop = true;
            videoElement.playsinline = true;
            videoElement.src = media_url;

            // a要素にvideo要素を挿入
            aElement.appendChild(videoElement);
        }else{
            const imgElement = document.createElement('img');
            imgElement.src = media_url;
            imgElement.alt = '';

            // a要素にimg要素を挿入
            aElement.appendChild(imgElement);
        }

        // li要素にa要素を挿入
        liElement.appendChild(aElement);

        // li要素をul要素に挿入
        document.getElementById('instagramimgs').appendChild(liElement);
    });
  })
  .catch(error => {
    // エラーハンドリング
    console.error('フェッチ操作に問題がありました', error);
  });
</script>

instagram APIで取得したjsonデータ（img、video、URL）をfetch、thenを使って表示するデモページ

上記のコードを実装したデモページは、以下のリンクから確認できます。

instagram APIで取得したjsonデータ（img、video、URL）をfetch、thenを使って表示するデモページ

注意点

  • この方法を使用するには、InstagramのAPIを利用するためのアクセストークンが必要です。
  • 実際にWebサイトに組み込む際には、セキュリティやプライバシーに配慮してください。

まとめ

この記事では、InstagramのAPIを使用して画像や動画、リンクURLをWebサイトに表示する方法を紹介しました。fetchとthenを活用することで、非同期的にデータを取得し、動的にコンテンツを表示することができます。InstagramのコンテンツをWebサイトで効果的に活用してみてください。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

JSONデータ fetch then
関連記事