[2019年] Instagram Graph APIを使ってみた！

インスタグラムのAPIが廃止 ?!

管理中のサイトにインスタグラムのフィードを載せる事になったので色々調べてみた。サイトはWordpPressで作られている。

検索してすぐに目に付いた方法は以下の2つ。

WordPressプラグインを使う。
Instagram API を使ってごにょごにょ。

まずは一番簡単そうなのでプラグインを使ってみることに。
インストールしては具合を見て削除、を3種類ほど試してみたところ、自作テーマでは上手く動作しない場合がある事がわかった。
WordPress標準のjQueryを読み込まない様にしている等、いくつか原因と思われる箇所が分かったものの、たかだかSNSのフィードを読み込むために大袈裟な事はしたくない。

完成イメージがシンプルなので、APIを使って自作でやってみる事にした。

Instagram APIについて調べていたら気になる情報があった。
段階的にではあるものの、Instagram APIは廃止されるというのだ。
2020年頃には全ての機能が廃止されるという。
しかし、代わりにInstagram Graph APIが買収元のFacebookから提供が開始されており、こちらは2020年以降も使える、、らしい。

というわけで、以下の記事を参考に Facebook for Developerでアプリを作る所から始めてみた。

Instagram API」が廃止に！代替の「Instagram Graph API」に移行しよう！

上記の記事では、jsonで取得したデータを配列に格納する所までを解説してくれている。大変親切な良記事。ありがとうございました。

配列には様々なデータが格納されているので、まずは必要な部分だけに絞ってみる。

<?php
// 取得したい記事数
$num = 27;
$f_api = 'https://graph.facebook.com/v3.2/';
$ig_id = 'put your id';
$token = 'put your token';
// 欲しいデータ。他にも色々あったよ。
$query = 'media.limit('. $num. '){caption,like_count,media_url,permalink,timestamp,thumbnail_url}';
// データを取得する
$json  = file_get_contents("{$f_api}{$ig_id}?fields={$query}&access_token={$token}");
// JSONデータを配列に展開する
// オブジェクトに展開する場合は第二引数を削除して下さい (第一引数のみ)
$data  = json_decode($json, true);
// 内容を絞って配列に格納
$target0 = $data["media"]["data"];
?>

あとは$target0の中から必要なデータを使ってhtmlに落とし込めばいいだけ。
当初は、規則正しくタイル上に並べようとしていたので、cssで正方形のdivを作って画像をセンタリングする、という部分に手こずったりしつつも、なんとか完成した。が・・。

出来上がりを見てなんだか味気なく感じてきた。
もうちょっと凝った事がしてみたい。
そこで正方形のdivを一つのマス目と捉えて、簡単なドットアートのような雰囲気を目指してみることにした。

まずイラレでこんな感じの下書きっぽいの。IGはインスタグラムの略です。

インスタから取得した画像を下書きの色付マスに当てはめようという算段。
全部で16×14の224マス。そのうち画像が入るのは108マス。
そもそも元々のインスタの投稿数は30弱しかないため、108の約数27個分だけデータを取得して、配列を必要回数マージした。今回は4回。

// 必要な108の約数でデータを取得。
$num = 27; 
$box_num = 224;
$target0 = $data["media"]["data"];
$target = [];
//$box_numを満たすまでマージ
for($i=0;$i<4;$i++){
	$target = array_merge($target, $target0);
}

空マスの処理をどうするか悩んだけど、実験だし、エクセル使って数えるという力技。
始まりはゼロにしとけば後々楽。

こうして洗い出したマス目の番号を配列にぶち込む。

$emp_box = [6,7,22,23,32,33,36,37,38,39,42,43,44,45,46,47,48,49,52,53,54,55,58,59,60,61,62,63,64,65,68,69,70,71,74,75,76,77,78,79,80,81,84,85,86,87,90,91,92,93,94,95,96,97,100,101,102,103,106,107,108,109,110,111,112,113,116,117,118,119,122,123,124,125,126,127,128,129,132,133,134,135,138,139,144,145,148,149,150,151,154,155,160,161,164,165,166,167,170,171,172,173,176,177,180,181,182,183,186,187,188,189,198,199,214,215];

長い。ださい。でも実験だからいいのだ、の精神。

ほいで元の配列に空要素として追加する。

foreach ($emp_box as $value) {
	array_splice($target, $value, 0, '');
}

これで空要素とデータ含め、224個の配列が出来上がりと。
あとはfor文で配列の個数分回して、配列の中身に応じて処理を分岐させればおｋ。

<div class="inst_box">
  <?php for($i=0;$i<$box_num;$i++): ?>
    // 一応固有のクラス名も付けてみた。
    <div class="inst inst<?php echo $i; ?>">
      // 動画の場合はサムネイルを表示
      <?php if($target[$i]["thumbnail_url"]): ?>
        <a href="<?php echo $target[$i]["permalink"]; ?>" target="_blank">
         <img src="<?php echo $target[$i]["thumbnail_url"]; ?>">
        </a>
      // 画像の場合はメディアURL
      <?php elseif($target[$i]["media_url"]): ?>
        <a href="<?php echo $target[$i]["permalink"]; ?>" target="_blank">
          <img src="<?php echo $target[$i]["media_url"]; ?>">
        </a>
　    // わざわざ数えてぶち込んだ空要素の場合は透過のダミー画像
      <?php else: ?>
        <img src="./img/dummy.png; ?>">
      <?php endif; ?>
    </div>
  <?php endfor; ?>
</div>

表示させてみたら上手いこといった！うれすい！

もう少し工夫してみようつー事で、JSでポジションをいじってみることに。

$(window).on('load',function(){
  for(var i=0;i<224;i++){
    var top = Math.floor( Math.random() * 21 -10 ) / 1;
    var left = Math.floor( Math.random() * 21 -10) / 1;
    var obj = ".inst" +i;
    $(obj).css('position','relative');
    $(obj).css('left',left+"px");
    $(obj).css('top',top+"px");
  }
});

乱数使ってノイズ的に位置をずらしてみた。

いい味出てきた～。ページ読み込むたびに若干変化するのも楽しい。
お腹も空いてきたので今日の所はここで終了することに。
また何か思いついたら改造します。

今後はイラロジの雑誌とか参考にしてみようかな。
ドット絵ってシンプルだけど意外に面白かった！

インスタグラムのAPIが廃止 ?!

Related Post