📌 導入の背景・解決したい課題
WordPressサイト構築に伴い、プラグインを使わずにMeta Graph API(Instagram Basic Display API)からInstagramの最新投稿を取得し、サイト上に表示する機能を実装しました。
実装にあたり、以下の課題を解決する必要がありました。
- サイトアクセスごとに外部APIへ通信すると、ページの表示速度が低下する
- 短時間に大量のリクエストを送ると、APIの利用制限が発生する可能性がある
- Instagramへ新規投稿した直後など、自動更新を待たずにサイトへ反映させたい場合がある
今回は、WordPressのtransientを利用してAPIレスポンスをキャッシュしつつ、必要な場合は管理者が手動で最新データを取得できる仕組みを実装しました。
🔑 アクセストークンの取得手順
Meta Graph APIからInstagramの投稿データを取得するには、長期アクセストークンの取得が必要です。
1. Meta for Developersでアプリを作成する
Meta for Developersへログインし、マイアプリから「アプリを作成」を選択します。
アプリタイプとして、以下のいずれかを選択してアプリを作成します。
- その他
- コンシューマー
2. Instagram Basic Displayを設定する
アプリのダッシュボードから、Instagram Basic Displayを追加します。
その後、以下の手順で設定を進めます。
- アプリ設定の最下部にある「Basic Display アプリを作成」をクリック
- 「Instagramテスター」に自身のInstagramアカウントを追加
- InstagramアプリまたはWeb版Instagramを開く
- 「設定」→「アプリとウェブサイト」→「テスターの招待」から招待を承認
3. 長期アクセストークンを発行する
Meta for Developersの以下のページを開きます。
Instagram Basic Display → Basic Display
「User Token Generator」の項目から「Generate Token」ボタンをクリックし、Instagramへログインして認証します。
発行された短期アクセストークンをコピーし、アクセストークンデバッガーなどのツールを使用して、長期アクセストークンへ変換します。
長期アクセストークンの有効期限は60日間です。
4. wp-config.phpへ保存する
取得したアクセストークンとInstagramユーザーIDは、セキュリティ対策としてテーマファイルやプラグインファイルへ直接記述せず、wp-config.phpへ定義します。
// wp-config.php に追加
define('INSTAGRAM_ACCESS_TOKEN', 'YOUR_LONG_LIVED_ACCESS_TOKEN');
define('INSTAGRAM_USER_ID', 'YOUR_INSTAGRAM_USER_ID');
YOUR_LONG_LIVED_ACCESS_TOKENとYOUR_INSTAGRAM_USER_IDは、実際に取得した値へ置き換えてください。
🔍 処理のロジック
今回の実装では、WordPressのtransientを利用して、Instagram APIから取得したレスポンスを4時間キャッシュします。
処理の流れは以下のとおりです。
- Instagram投稿データのキャッシュが存在するか確認
- キャッシュが存在する場合は、APIへ通信せずキャッシュを返す
- キャッシュが存在しない場合は、Meta Graph APIへ通信
- 取得した投稿データを4時間キャッシュへ保存
- 次回以降は保存したキャッシュを利用
- 管理者が手動更新URLへアクセスした場合は、キャッシュを削除して再取得
これにより、サイトへアクセスされるたびにAPIへ通信することを防げます。
💻 実装コード例
以下のコードを、使用しているテーマのfunctions.phpなどへ追加します。
<?php
/**
* 手動更新パラメータの判定と処理
*
* 管理者ログイン中に
* ?my_ig_update=1
* へアクセスすると、Instagram投稿のキャッシュを削除して再取得します。
*/
add_action('init', function () {
if (
isset($_GET['my_ig_update']) &&
$_GET['my_ig_update'] === '1'
) {
// 管理者権限チェック
if (current_user_can('manage_options')) {
// 保存済みのキャッシュを削除
delete_transient('my_instagram_posts_cache');
// Instagram APIから最新データを再取得
my_get_instagram_posts();
wp_die('Instagram投稿を強制更新しました。');
}
}
});
/**
* Instagram投稿データを取得する
*
* @return array Instagram投稿データ
*/
function my_get_instagram_posts()
{
$transient_key = 'my_instagram_posts_cache';
$cached_data = get_transient($transient_key);
/**
* キャッシュが存在する場合は、
* Meta Graph APIへ通信せずキャッシュを返す
*/
if ($cached_data !== false) {
return $cached_data;
}
/**
* アクセストークンとユーザーIDを
* wp-config.phpから読み込む
*/
$access_token = defined('INSTAGRAM_ACCESS_TOKEN')
? INSTAGRAM_ACCESS_TOKEN
: '';
$user_id = defined('INSTAGRAM_USER_ID')
? INSTAGRAM_USER_ID
: '';
/**
* 必要な情報が設定されていない場合は
* 空の配列を返す
*/
if (empty($access_token) || empty($user_id)) {
return [];
}
/**
* Meta Graph APIのリクエストURLを作成
*/
$url = "https://graph.instagram.com/v12.0/{$user_id}/media"
. "?fields=id,caption,media_type,media_url,permalink,timestamp"
. "&access_token={$access_token}";
/**
* APIからデータを取得
*/
$response = wp_remote_get($url);
/**
* 通信エラーが発生した場合は
* 空の配列を返す
*/
if (is_wp_error($response)) {
return [];
}
/**
* レスポンスを配列へ変換
*/
$body = wp_remote_retrieve_body($response);
$data = json_decode($body, true);
/**
* 投稿データの取得に成功した場合
*/
if (isset($data['data'])) {
/**
* 投稿データを4時間キャッシュへ保存
*/
set_transient(
$transient_key,
$data['data'],
4 * HOUR_IN_SECONDS
);
return $data['data'];
}
return [];
}
🛠️ 課題への対策・運用仕様
1. APIへの通信回数を抑える
WordPressのtransientを利用し、Instagram APIから取得した投稿データを4時間保存します。
キャッシュが残っている間はAPIへ通信しないため、以下のメリットがあります。
- ページの表示速度低下を防げる
- APIへのリクエスト回数を削減できる
- API利用制限のリスクを軽減できる
- Meta側で一時的な通信障害が発生した場合の影響を抑えられる
キャッシュ時間は以下の部分で設定しています。
set_transient(
$transient_key,
$data['data'],
4 * HOUR_IN_SECONDS
);
例えば、キャッシュ時間を1時間に変更する場合は、以下のように変更します。
1 * HOUR_IN_SECONDS
12時間に変更する場合は、以下のように変更します。
12 * HOUR_IN_SECONDS
2. 手動更新用URLを実装する
新しい投稿をInstagramへ公開した直後など、4時間のキャッシュ更新を待たずにサイトへ反映させたい場合があります。
そのため、管理者ログイン中に専用URLへアクセスすると、保存されているキャッシュを削除して最新データを再取得する仕組みを追加しました。
https://example.com/?my_ig_update=1
実際のサイトでは、example.comを対象サイトのドメインへ変更します。
このURLへアクセスすると、以下の処理が実行されます。
- 現在のユーザーが管理者権限を持っているか確認
- Instagram投稿のキャッシュを削除
- Meta Graph APIから最新データを再取得
- 新しいデータを4時間キャッシュへ保存
- 更新完了メッセージを表示
管理者権限を持っていないユーザーがアクセスしても、更新処理は実行されません。
if (current_user_can('manage_options')) {
delete_transient('my_instagram_posts_cache');
my_get_instagram_posts();
wp_die('Instagram投稿を強制更新しました。');
}
3. アクセストークンを定期的に更新する
長期アクセストークンには有効期限があります。
期限切れによってInstagram投稿が表示されなくなるトラブルを防ぐため、約45〜50日周期でアクセストークンを更新する運用としました。
更新時は、wp-config.phpに定義している以下の値を上書きします。
define('INSTAGRAM_ACCESS_TOKEN', '新しいアクセストークン');
アクセストークン更新後は、手動更新用URLへアクセスしてキャッシュを削除します。
https://example.com/?my_ig_update=1
これにより、新しいアクセストークンを使用してInstagram投稿データが再取得されます。
📝 実装結果
本番環境へ導入した結果、サイトの表示速度を大きく落とすことなく、Instagramの最新投稿を表示できるようになりました。
平常時
4時間に1回のみMeta Graph APIへ通信します。
キャッシュが有効な間はWordPress内に保存した投稿データを使用するため、ページ表示時の外部通信を抑えられます。
Instagram投稿直後
管理者が手動更新用URLへアクセスすることで、4時間のキャッシュ期限を待たずに最新投稿へ更新できます。
https://example.com/?my_ig_update=1
保守対応
長期アクセストークンの有効期限に注意し、約45〜50日周期で再発行とwp-config.phpの上書きを行います。
✅ まとめ
今回の実装では、以下の仕組みを組み合わせました。
- プラグインを使用せずInstagram投稿を取得
- WordPressの
transientで投稿データを4時間キャッシュ - サイトアクセスごとのAPI通信を防止
- APIの利用制限リスクを軽減
- 管理者専用URLから最新投稿を手動取得
- アクセストークンを
wp-config.phpで管理 - アクセストークンを約45〜50日周期で更新
通常時はキャッシュによってサイトのパフォーマンスを維持しつつ、新規投稿直後は手動更新URLから即時反映できます。
API通信の回数を抑えながら、運用担当者が必要なタイミングで更新できる構成にしたことで、安定したInstagram投稿表示を実現できました。