Instagram APIを活用してハッシュタグデータをグラフ化する方法

Posted at 2024-02-14

Instagram APIを活用してハッシュタグデータをグラフ化する方法

ハッシュタグ

私はインスタをあまりやっていないので、ハッシュタグの付け方がよくわかりません。

最近までハッシュタグという犬がいると思っていました。（バクみたいな）

ハッシュタグ、＃。

なんか＃この形、絶妙に持ちにくそうですよね？
＃＃＃＃
絶妙に積みづらそうですし。

＄＄＄＄
＆＆＆＆
＊＊＊＊

うん。全部持ち運び大変そう。

やっぱ　L　とかの持ち運びやすさよ！

持ち持ち言っていたら餅が食べたくなりました。

こんなところに良い網が。

#Ω#Ω# o(･ω･´o)

1. Instagram Graph APIの基本
2. ハッシュタグデータの取得
3. データの保存と分析
4. グラフの作成
5. おわりに

1. Instagram Graph APIの基本

　Instagram Graph APIは、Instagramのビジネスアカウントやクリエイターアカウントからデータをプログラムを通じて取得するためのAPIです。

　本記事では、Instagram Graph APIを利用してハッシュタグに基づく投稿情報を取得する方法を紹介します。

Instagram Graph API とは

　Instagram Graph APIを使用すると、Instagramのデータにプログラムからアクセスできます。

　これには、プロフィール情報の取得、投稿データの分析、インサイトの取得などが含まれます。

前提条件

Instagram Graph APIを使用するためには、以下の準備が必要です：

Facebook Developerアカウントの作成： APIを使用するためには、Facebook Developerアカウントが必要です。
Facebookアプリの作成：アプリケーションを通じてAPIにアクセスします。
Instagramビジネスまたはクリエイターアカウントへのアクセス： APIを使用するには、ビジネスアカウントまたはクリエイターアカウントが必要です。
アプリにInstagram Graph APIの使用を許可する： Facebookアプリの設定で、Instagram Graph APIの使用を許可する必要があります。

アクセス許可とトークンの取得
　APIを利用するためには、アクセストークンが必要です。アクセストークンの取得方法については、参考サイトに詳しく記載されています。

2. ハッシュタグデータの取得

Instagram Graph API とは

3. データの保存と分析

　今回は、特定のハッシュタグに関連する投稿情報を取得するツールの使用方法を紹介します。

具体的なステップは以下の通りです：

ハッシュタグIDの取得：まず、検索したいハッシュタグのIDを取得します。
投稿情報の取得：ハッシュタグIDを使用して、関連する投稿の情報を取得します。

具体的なコード例としては、以下のようになります：

// ESモジュールの構文を使用してaxiosをインポート
import axios from 'axios';
import fs from 'fs/promises';

const accessToken = '取得したアクセストークン';
const userId = '取得したビジネスID';
const hashtags = ['ふつうのマヨネーズ', 'ふつうのケチャップ', 'ふつうの塩', 'ふつうのドレッシング']; // 例

// ハッシュタグIDに基づいて関連する投稿のデータを取得する関数
async function fetchPostsByHashtagId(hashtagId) {
    const url = `https://graph.facebook.com/v12.0/${hashtagId}/top_media?user_id=${userId}&fields=id,media_type,media_url,permalink,like_count,comments_count&access_token=${accessToken}`;
    try {
        const response = await axios.get(url);
        return response.data;
    } catch (error) {
        console.error(`Error fetching posts for hashtag ID ${hashtagId}:`, error);
        return null;  // エラーが発生した場合はnullを返す
    }
}

// ハッシュタグに関連する投稿の情報を収集し、ファイルに保存するメイン関数
async function main() {
    for (const hashtag of hashtags) {
        // ハッシュタグに基づいてIDを取得
        const encodedHashtag = encodeURIComponent(hashtag);
        const searchUrl = `https://graph.facebook.com/v12.0/ig_hashtag_search?user_id=${userId}&q=${encodedHashtag}&access_token=${accessToken}`;
        try {
            const searchResponse = await axios.get(searchUrl);
            const hashtagId = searchResponse.data.data[0].id;  // ハッシュタグのIDを取得

            // ハッシュタグIDを使用して投稿の詳細を取得
            const postsData = await fetchPostsByHashtagId(hashtagId);
            if (postsData) {
                // 投稿データをファイルに保存
                await fs.writeFile(`./public/data/${hashtag}_posts.json`, JSON.stringify(postsData, null, 2));
                console.log(`Posts data for hashtag "${hashtag}" saved.`);
            }
        } catch (error) {
            console.error(`Error processing hashtag ${hashtag}:`, error);
        }
    }
}

main();

　このスクリプトは、Instagram Graph APIを使用して特定のハッシュタグに関連する投稿の情報を取得し、ローカルファイルに保存することを目的としています。

　以下は、主要な部分の解説です。

必要なモジュールのインポート

import axios from 'axios';
import fs from 'fs/promises';

axios: HTTPリクエストを簡単に行うためのライブラリです。APIへのリクエストを行います。
fs/promises: Node.jsのファイルシステムモジュールのPromiseベースのバージョンです。非同期にファイル操作を行います。

　因みにaxios（アクシオス）はギリシャ語で「価値が有る」という意味だそうです。

設定変数

const accessToken = '取得したアクセストークン';
const userId = '取得したビジネスID';
const hashtags = ['ふつうのマヨネーズ', 'ふつうのケチャップ', 'ふつうの塩', 'ふつうのドレッシング'];

accessToken: Instagram APIを使用するために必要なアクセストークンです。
userId: InstagramビジネスアカウントのユーザーIDです。
hashtags: 情報を取得したいハッシュタグのリストです。

ハッシュタグIDに基づいて関連する投稿のデータを取得

async function fetchPostsByHashtagId(hashtagId) { ... }

　この関数は、指定されたハッシュタグIDに関連する投稿のデータを取得します。

　axios.getメソッドを使用してAPIからデータを取得し、取得したデータを返します。

　エラーが発生した場合は、nullを返します。

メイン関数

async function main() { ... }

この関数は、各ハッシュタグについて以下の処理を行います：

1.ハッシュタグのエンコードとハッシュタグIDの取得
2.ハッシュタグIDを使用して関連する投稿のデータを取得
3.取得した投稿データをJSON形式でローカルファイルに保存

　このプロセスを通じて、指定されたハッシュタグに関連するInstagramの投稿データを収集し、分析や表示のために使用することができます。

4. グラフの作成

　記事のこのセクションでは、Instagram Graph APIを使用して取得したデータを基に、ReactとChart.jsを用いてインスタグラムの統計情報をグラフ化するプロセスを詳細に解説します。

データの準備

　まず、useInstagramStatsというカスタムフックを作成し、特定のハッシュタグに関連するインスタグラムの統計データを非同期に取得します。

　このフックは、事前にJSON形式で保存された各ハッシュタグの分析データをロードし、アプリケーションの状態に格納します。

// src/hooks/useInstagramStats.ts
import { useState, useEffect } from 'react';

interface Stats {
  [key: string]: number;
  totalPosts: number;
  totalLikes: number;
  totalComments: number;
  averageLikes: number;
  averageComments: number;
}

interface HashtagStats {
  [key: string]: Stats;
}

const useInstagramStats = (): HashtagStats | null => {
  const [stats, setStats] = useState<HashtagStats | null>(null);

  useEffect(() => {
    const hashtags = ['ふつうのマヨネーズ', 'ふつうのケチャップ', 'ふつうの塩', 'ふつうのドレッシング'];
    const fetchStats = async () => {
      try {
        const allStats: HashtagStats = {};

        for (const hashtag of hashtags) {
          const response = await fetch(`/data/${hashtag}_analysis.json`);
          const data: Stats = await response.json();
          allStats[hashtag] = data;
        }

        setStats(allStats);
      } catch (error) {
        console.error('統計データの読み込み中にエラーが発生しました:', error);
      }
    };

    fetchStats();
  }, []);

  return stats;
};

export default useInstagramStats;

グラフの描画

　次に、取得した統計データを基にグラフを描画します。

　ここではreact-chartjs-2とchart.jsライブラリを使用して、動的にグラフを生成します。

　各ハッシュタグごとの統計情報を、指定されたカテゴリ（総投稿数、総いいね数など）に基づいてグラフにします。

// src/components/InstagramStats.tsx
import React from 'react';
import { Bar } from 'react-chartjs-2';
import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js';
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
import useInstagramStats from '../hooks/useInstagramStats';

// カテゴリ名と、それに対応するstatsのプロパティ名
const categories = [
  { label: '総投稿数', prop: 'totalPosts' },
  { label: '総いいね数', prop: 'totalLikes' },
  { label: '総コメント数', prop: 'totalComments' },
  { label: '平均いいね数', prop: 'averageLikes' },
  { label: '平均コメント数', prop: 'averageComments' }
];

const InstagramStats = () => {
  const stats = useInstagramStats();

  if (!stats) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h2>商品別インスタグラム統計</h2>
      {categories.map(({ label, prop }) => {
        // 各カテゴリごとにデータセットを生成
        const data = {
          labels: Object.keys(stats),
          datasets: [{
            label,
            data: Object.values(stats).map(stat => stat[prop]),
            backgroundColor: Object.keys(stats).map(() => `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, 0.2)`),
            borderColor: Object.keys(stats).map(() => `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, 1)`),
            borderWidth: 1
          }]
        };

        const options = {
          scales: {
            y: {
              beginAtZero: true
            }
          }
        };

        return (
          <div key={label}>
            <Bar data={data} options={options} />
          </div>
        );
      })}
    </div>
  );
};

export default InstagramStats;

解説

　このコンポーネントでは、まずuseInstagramStatsフックを使用して各ハッシュタグの統計データをロードします。

　データがまだ利用可能でない場合は、"Loading..."と表示されます。

　データがロードされた後、指定されたカテゴリごとにBarグラフを生成し、ページ上に表示されます。

　グラフのデータセットは、各ハッシュタグごとに異なる色を持つように動的に生成されます。

　これにより、視覚的に異なるハッシュタグの統計情報を比較することが可能になります。

　Y軸は常に0から始まるように設定されており、グラフの比較が容易になっています。

　この方法により、Instagramのデータを視覚化し、ハッシュタグごとの影響力や人気を直感的に把握することができます。

　以下は表示される参考例です。

5. おわりに

　API系統を最近勉強しており、Instagram APIもその流れで興味を持ち、やってみました。

　正直、アクセストークン取るのが一番きつかったです......。

　今は簡素なグラフですが、これを応用して、活用していきたいです。（一週間のいいねランキングなど）

# API　✍️

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up