JavaScriptでInstagram投稿を取得(API不要)

作成日 : 2018/06/16日
何とかJavaScriptを使って、APIを使わずInstagramの投稿を取得したのでここに書く

※Tag検索表示が出来たのでコメントに載せています。

- [Instagram](https://www.instagram.com/)
- [Instagram API](https://www.instagram.com/developer/)

## まず最初に
Instagram APIは企業が取得しようとし
「申請が降りるまで2年たった...」
とまで言わしめたホラーゲームである。~~(大嘘)~~

僕も年始めに申請したが、結局現在も許可されるに至っていない。
**めっちゃ鬼畜**。

そんな訳で**Instagram APIを使わず**インスタの投稿を取得します

下記に書す方法ではJavaScriptだけではなく、PHPとかでも可能だろう

では~~**quiitta初投稿**で **汚い**~~投稿を見ていってください。

**※このプログラムを使用する場合は自己責任でお願いします。**
**たとえ何かしらの損害が生じても私に責任は無いものとします。**

## 1. ソースを解析する
何とかしてInstagramの投稿を表示できないか考えた時、
「とりあえずソースコードを見ればいいんじゃね」
って事でソースの表示で見て見ました。

が、HTMLの肝心の画像のURLが何一つないのです。

全部をくまなく見て言ったところ、JSと思わしき記述がありました。
<img width="515" alt="スクリーンショット 2018-06-16 19.58.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/264677/cb19c491-5396-6099-23c1-e5c98db2d580.png">

「これ...**Object**じゃね...?」
この中に投稿の画像のリンクが入ってました。大当たりです。

「それじゃあ ajaxでサイトのソース持って来ればいいんじゃないかな」
って事で jquery で 特定ユーザーのソースを引っ張ってきます。

```javascript:jquery
const UserName = "darpakyokutyou";
$.ajax('https://www.instagram.com/' + UserName + '/', {
  timeout : 2000,
  datatype:'html'
}).then(function(data){
  // dataにはHTMLが入っている
});
```
これでJSのソースがあるHTMLを引っ張って来れました。
UserNameには**取得したいユーザーの名前**を入れてください。
@~~~~~ の部分です。

## 2. ソースからObjectを抜き取る
さて、ソースは抜けたのですが、このままでは使えません。
なのでHTMLからJSの代入を抜き取ります。

正規表現は苦手なのでクソみたいなソースになってます。
そこらへんは「こうしたらいいよ」って言える人は自分で改良してください。

※当初はevalを使ってましたが、流石に仕事で使えなかったので調べていたら
JSON.parse なるものがありました。もう可愛いですね

```javascript:jquery
const UserName = "darpakyokutyou";
$.ajax('https://www.instagram.com/' + UserName + '/', {
  timeout : 2000,
  datatype:'html'
}).then(function(data){
  // dataにはHTMLが入っている
  // 代入しているobjectだけ切り取っている
  json_string = data.split("window._sharedData = ")[1];
  json_string = json_string.split("};</script>")[0] + "}";
  // stringのJSON を Object に変換する
  this.Arrya_data = JSON.parse(json_string);

});
```

はい。これでインスタの投稿データが this.Arrya_data の中にObjectとして入ってます。

投稿された画像のURLはこの中に入ってます。

```javascript:jquery
let url = this.Arrya_data.entry_data.ProfilePage[0].graphql.user.edge_owner_to_timeline_media.edges[数].node.display_url;

```
この前仕様変更され〜12件まで取得できるはずです。
前は9件まででした。

##まとめ

```javascript:jquery
$(function () {
	try {
		this.name = "darpakyokutyou";
		$.ajax('https://www.instagram.com/' + this.name + '/', {
			timeout: 2000,
			datatype: 'html'
		}).then(function (data) {
			json_string = data.split("window._sharedData = ")[1];
			json_string = json_string.split("};</script>")[0] + "}";
			this.Arrya_data = JSON.parse(json_string);
			let datas = this.Arrya_data.entry_data.ProfilePage[0].graphql.user.edge_owner_to_timeline_media.edges;
			for (i in datas) {
				url = datas[i].node.display_url;
				console.log(url);
			}
		});
	} catch (error) {
		alert(error);
	}
})
```

<img width="1438" alt="スクリーンショット 2018-06-16 21.14.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/264677/49f1e17a-e484-fc47-8ac0-1c1e6ed22ea8.png">


[1個目](https://scontent-nrt1-1.cdninstagram.com/vp/47058e5b327328d6852192a27191cf82/5BB10738/t51.2885-15/e35/28765611_1650186295089055_7265128457552527360_n.jpg)
[2個目](https://scontent-nrt1-1.cdninstagram.com/vp/398d8e0ca1662354d29df8f3d5f85eb3/5BB5F628/t51.2885-15/e35/28158173_156372588411532_8358401284553834496_n.jpg)
[3個目](https://scontent-nrt1-1.cdninstagram.com/vp/193fab3030a26882493a32f8dd25f763/5B9E7E9D/t51.2885-15/e35/26863766_212180549351511_132192663804837888_n.jpg)







##2018/06/18日 追記
Bootstrap4を使えば綺麗にサイトに出力できます
<img width="1334" alt="スクリーンショット 2018-06-18 21.03.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/264677/8a3b544d-2bb6-f5e8-cd5f-441a71508817.png">

```javascript:jquery
/* instagram */
$(function () {
    try {
        this.name = "bridalnewspaper";
        $.ajax('https://www.instagram.com/' + this.name + '/', {
            timeout: 2000,
            datatype: 'html'
        }).then(function (data) {
            json_string = data.split("window._sharedData = ")[1];
            json_string = json_string.split("};</script>")[0] + "}";
            this.Arrya_data = JSON.parse(json_string);
            let datas = this.Arrya_data.entry_data.ProfilePage[0].graphql.user.edge_owner_to_timeline_media.edges;
            for (i in datas) {
                url = datas[i].node.display_url;
                this.html = `
                <div class="card">
                    <img src="${url}" class="card-img-top" />
                </div>
                `;
                $(".insta-card").append(this.html);
            }
        });
    } catch (error) {
        alert(error);
    }
})
```

```html:html
<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="card-columns insta-card">
            </div>
        </div>
    </div>
</div>
```