勝たんしかインスタ！！
Instagram Graph API Ver.14.0でユーザー・投稿情報を取得する。

SHARE

今回はInstagram Graph API Ver.14.0を使用し、ユーザー情報、ユーザーの投稿情報を取得・表示します。
焦点をInstagram Graph APIに絞るため、言語はJavaScript(+HTML,CSS)のみで実装します。
(言語間のデータの受け渡しが煩わしいため、サーバーサイド言語は使用しません。)

 

目次

流れ

実装を進めるにあたり、最初に作成するアプリの目標設定を行い、その後、実装をしていきます。

Instagram Graph APIを使用するにはinstagramビジネスIDとアクセストークンが必要ですが、今回は説明しないので他サイトを参考にして頑張って取得してきてください。

このあたりのサイトがおすすめです。

 

注意点として、秘匿情報を有するJavaScriptで作成したアプリは、公開(サーバーにアップロード)しないでください。

理由は、instagramビジネスIDとアクセストークンが外部から丸見えになってしまうからです。

 

目標

今回作成するアプリは以下の動画のようなアプリです。

 

画面の初期表示時にボタンが表示され、ボタン押下でユーザー情報と、最新の投稿(フィード)情報を表示するという流れです。

 

実装

実装手順を大まかに説明すると、

  1. HTMLで表示する画面を作成する。
  2. HTMLにjQuery、使用するJavaScriptファイルを読み込ませる。
  3. JavaScriptでボタンを押したときの関数を作成する。
  4. 作成した関数内でAjax通信でInstagram Graph APIを叩き、データを取得する。
  5. 取得したデータを表示する。

実際に書いていく前に、「勝たんしかインスタ.html」, 「index.js」, 「style.css」という3つのファイルを作成します。

ファイル構成は好きなようにして良いですが、今回は3つのファイルを同ディレクトリに配置します。

では実装していきます。

 

HTMLで表示する画面を作成する。

VSCodeで「勝たんしかインスタ.html」を開き、「!」を打って、Enterキー押下します。

色々と自動で入力されたと思うので、その中のbodyタグ内にボタンとユーザー・投稿情報を表示させるエリアを作成します。

ソースコードは以下の通りです。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>勝たんしかインスタ！！！！！</title>
</head>
<body>
    <input type="button" value="表示" onclick="get_info()">
    <!-- ↓に表示します。 -->
    <div id="indicate"></div>
</body>
</html>

onclick属性のget_info()は、「JavaScriptでボタンを押したときの関数を作成する。」で実装します。

 

HTMLにjQuery、使用するJavaScriptファイルを読み込ませる。

「勝たんしかインスタ.html」のbodyタグ内の最後にjQueryと使用するjsファイルを読み込ませます。

注意点として、jQueryを読み込ませるscriptタグをjsファイルのscriptタグより上に持ってきてください。

ソースコードは以下の通りです。(bodyタグ内のみ記載します。)


<body>
    <input type="button" value="表示" onclick="get_info()">
    <!-- ↓に表示します。 -->
    <div id="indicate"></div>
    <!-- jQueryを読み込む -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <!-- jsファイルを読み込む -->
    <script src="index.js"></script>
</body>

 

JavaScriptでボタンを押したときの関数を作成する。

「index.js」でボタンを押したときに呼び出される関数を作成します。

関数名は「get_info」とします。

 

ソースコードは次章と併せて記載します。

 

作成した関数内でInstagram Graph APIを叩き、データを取得する。

「index.js」でInstagram Graph APIを叩くためにAjax通信を使用します。

Ajax通信とは、サーバとの間の通信を行うものです。今回の場合では以下の画像のように、Instagramに「データください」と言って、Instagramがデータを渡してくれるというものです。

 

ちなみにですが、HTMLにjQueryを読み込ませたのはjQueryのAjax通信を使用するためです。

 

ソースコードは以下の通りです。


function get_info() {
    var instagram_business_id = '取得したinstagram_business_id';
    var access_token = '取得したtoken';
    var user_id = "bluebottle" // 取得するユーザー
    var limit = 1; // 取得する投稿数
    var media = `id,caption,media_url,permalink,media_type,comments_count,like_count,timestamp`; //取得する投稿の情報
    var fields = `business_discovery.username(${user_id}){profile_picture_url,follows_count,biography,name,username,followers_count,media_count,website,media.limit(${limit}){${media}}}`; // 取得する情報
    var target_url = `https://graph.facebook.com/v14.0/${instagram_business_id}?fields=${fields}&access_token=${access_token}`;
    $(function () {
        $.ajax({
            url: target_url
        }).done(function (res) { // 通信が成功したときの処理 
            console.log(res);
            indicate_info(res);
        }).fail(function (res) { // 通信が失敗したときの処理
            console.log(res);
            alert('ajax通信に失敗しました。')
        });
    });
}

instagram_business_idとaccess_tokenは自分が取得したものに置き換えてください。

user_idは取得したいユーザーのIDです。

limitは取得する投稿の上限数です。

mediaは取得する投稿情報です。

fieldsは取得する情報です。

「indicate_info」という関数は次章で実装します。

 

取得したデータを画面に表示する。

Ajaxで取得したデータを画面に表示します。

表示する関数を「indicate_info」とし、Ajax通信が成功した際に呼び出します。

表示方法は以下のようにして表示させます。

document.getElementById("indicate").innerHTML = "xxx"

ソースコードは以下の通りです。


function indicate_info(res) {
    document.getElementById("indicate").innerHTML = `
    <div class="relative">
        <div>
            <img class="profile_picture" src="${res.business_discovery.profile_picture_url}">
            <div class="title">ユーザー情報</div>
            <div class="indicate">
                <span class="indicate-title">説明文: </span>
                <span class="indicate-info">${res.business_discovery.biography}</span>
            </div>
            <div class="indicate">
                <span class="indicate-title">フォロワー数:</span>
                <span class="indicate-info">${res.business_discovery.followers_count}</span>
            </div>
            <div class="indicate">
                <span class="indicate-title">フォロー数:</span>
                <span class="indicate-info">${res.business_discovery.follows_count}</span>
            </div>
            <div class="indicate">
                <span class="indicate-title">投稿数:</span>
                <span class="indicate-info">${res.business_discovery.media_count}</span>
            </div>
            <div class="indicate">
                <span class="indicate-title">名前:</span>
                <span class="indicate-info">${res.business_discovery.name}</span>
            </div>
            <div class="indicate">
                <span class="indicate-title">プロフィール画像のURL:</span>
                <span class="indicate-info">${res.business_discovery.profile_picture_url}</span>
            </div>
            <div class="indicate">
                <span class="indicate-title">ユーザーID:</span>
                <span class="indicate-info">${res.business_discovery.username}</span>
            </div>
            <div class="indicate">
                <span class="indicate-title">ウェブサイト:</span>
                <span class="indicate-info">${res.business_discovery.website}</span>
            </div>
        </div>
        <hr>
        <div>
            <img class="feed_picture" src="${res.business_discovery.media.data[0].media_url}">
            <div class="title">最新投稿情報</div>
            <div class="indicate">
                <span class="indicate-title">キャプション文:</span>
                <span class="indicate-info">${res.business_discovery.media.data[0].caption}</span>
            </div>
            <div class="indicate">
                <span class="indicate-title">コメント数:</span>
                <span class="indicate-info">${res.business_discovery.media.data[0].comments_count}</span>
            </div>
            <div class="indicate">
                <span class="indicate-title">いいね数:</span>
                <span class="indicate-info">${res.business_discovery.media.data[0].like_count}</span>
            </div>
            <div class="indicate">
                <span class="indicate-title">投稿画像のURL:</span>
                <span class="indicate-info">${res.business_discovery.media.data[0].media_url}</span>
            </div>
            <div class="indicate">
                <span class="indicate-title">URL:</span>
                <span class="indicate-info">${res.business_discovery.media.data[0].permalink}</span>
            </div>
            <div class="indicate">
                <span class="indicate-title">投稿時間:</span>
                <span class="indicate-info">${res.business_discovery.media.data[0].timestamp}</span>
            </div>
        </div>
    </div>
    `
}

 

最後にCSSをいい感じに書き、ブラウザで確認すると、目標の動画になります。

(CSSは適当に作成したので、私の作成したstyle.cssを何も考えずにコピペで良いと思います。)

 

まとめ

Instagram Graph APIを使用することで、Instagramから情報を取得できました。

「いいね」や「保存」, 「フォロー」といったアクションをすることはできませんが、データを取得することができるため、分析ツールなどに役立つかと思います。

 

最後に、Instagramに限らず、TwitterもAPIを提供しています。興味がある方は見てみてください↓。

 

ソースコード

勝たんしかインスタ.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>勝たんしかインスタ！！！！！</title>
</head>
<body>
    <input type="button" value="表示" onclick="get_info()">
    <!-- ↓に表示します。 -->
    <div id="indicate"></div>
    <!-- jQueryを読み込む -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <!-- jsファイルを読み込む -->
    <script src="index.js"></script>
</body>
</html>

index.js


function get_info() {
    var instagram_business_id = '取得したinstagram_business_id';
    var access_token = '取得したtoken';
    var user_id = "bluebottle" // 取得するユーザー
    var limit = 1; // 取得する投稿数
    var media = `id,caption,media_url,permalink,media_type,comments_count,like_count,timestamp`; //取得する投稿の情報
    var fields = `business_discovery.username(${user_id}){profile_picture_url,follows_count,biography,name,username,followers_count,media_count,website,media.limit(${limit}){${media}}}`; // 取得する情報
    var target_url = `https://graph.facebook.com/v14.0/${instagram_business_id}?fields=${fields}&access_token=${access_token}`;
    $(function () {
        $.ajax({
            url: target_url
        }).done(function (res) { // 通信が成功したときの処理 
            console.log(res);
            indicate_info(res);
        }).fail(function (res) { // 通信が失敗したときの処理
            console.log(res);
            alert('ajax通信に失敗しました。')
        });
    });
}

function indicate_info(res) {
    document.getElementById("indicate").innerHTML = `
    <div class="relative">
        <div>
            <img class="profile_picture" src="${res.business_discovery.profile_picture_url}">
            <div class="title">ユーザー情報</div>
            <div class="indicate">
                <span class="indicate-title">説明文: </span>
                <span class="indicate-info">${res.business_discovery.biography}</span>
            </div>
            <div class="indicate">
                <span class="indicate-title">フォロワー数:</span>
                <span class="indicate-info">${res.business_discovery.followers_count}</span>
            </div>
            <div class="indicate">
                <span class="indicate-title">フォロー数:</span>
                <span class="indicate-info">${res.business_discovery.follows_count}</span>
            </div>
            <div class="indicate">
                <span class="indicate-title">投稿数:</span>
                <span class="indicate-info">${res.business_discovery.media_count}</span>
            </div>
            <div class="indicate">
                <span class="indicate-title">名前:</span>
                <span class="indicate-info">${res.business_discovery.name}</span>
            </div>
            <div class="indicate">
                <span class="indicate-title">プロフィール画像のURL:</span>
                <span class="indicate-info">${res.business_discovery.profile_picture_url}</span>
            </div>
            <div class="indicate">
                <span class="indicate-title">ユーザーID:</span>
                <span class="indicate-info">${res.business_discovery.username}</span>
            </div>
            <div class="indicate">
                <span class="indicate-title">ウェブサイト:</span>
                <span class="indicate-info">${res.business_discovery.website}</span>
            </div>
        </div>
        <hr>
        <div>
            <img class="feed_picture" src="${res.business_discovery.media.data[0].media_url}">
            <div class="title">最新投稿情報</div>
            <div class="indicate">
                <span class="indicate-title">キャプション文:</span>
                <span class="indicate-info">${res.business_discovery.media.data[0].caption}</span>
            </div>
            <div class="indicate">
                <span class="indicate-title">コメント数:</span>
                <span class="indicate-info">${res.business_discovery.media.data[0].comments_count}</span>
            </div>
            <div class="indicate">
                <span class="indicate-title">いいね数:</span>
                <span class="indicate-info">${res.business_discovery.media.data[0].like_count}</span>
            </div>
            <div class="indicate">
                <span class="indicate-title">投稿画像のURL:</span>
                <span class="indicate-info">${res.business_discovery.media.data[0].media_url}</span>
            </div>
            <div class="indicate">
                <span class="indicate-title">URL:</span>
                <span class="indicate-info">${res.business_discovery.media.data[0].permalink}</span>
            </div>
            <div class="indicate">
                <span class="indicate-title">投稿時間:</span>
                <span class="indicate-info">${res.business_discovery.media.data[0].timestamp}</span>
            </div>
        </div>
    </div>
    `
}

style.css


.indicate{
    display:table;
}
.indicate span{
    display:table-cell;
}
.indicate-title{
    width: 200px;
    text-align: right;
    padding-right: 10px;
}
.indicate-info{
    width: 1100px;
    text-align: left;
}
.title {
    font-size: 130%;
}
.relative{
    position: relative;
}
.profile_picture{
    position: absolute;
    border-radius: 50%;
    width: 250px;
    height: 250px; 
    object-fit: cover;
    z-index: -1;
    right: 0%;
}
.feed_picture{
    position: absolute;
    height: 250px; 
    object-fit: cover;
    z-index: -1;
    right: 0%;
}
ご覧いただきありがとうございます！ この投稿はお役に立ちましたか？

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

Kubernetes超初心者入門　4. EKS構築　後編　一つ…

次の記事

【2022年7月】OSSサポートエンジニアが気になった！OSS…