APIを使わず、JavaScriptでインスタをサイトに埋め込む方法

下記のサイトに掲載されているコードを一部改変して試してみましたが、うまくいかないようです。

HTML
1<script>
2  $(function () {
3    try {
4      this.name = "【InstagramのID】";
5      $.ajax('https://www.instagram.com/' + this.name + '/', {
6        timeout: 2000,
7        datatype: 'html'
8      }).then(function (data) {
9        json_string = data.split("window._sharedData = ")[1];
10        json_string = json_string.split("};</script>")[0] + "}";
11        this.Arrya_data = JSON.parse(json_string);
12        let datas = this.Arrya_data.entry_data.ProfilePage[0].graphql.user.edge_owner_to_timeline_media.edges;
13          //表示件数12の場合
14          for (var i=0; i<12; i++) {
15            url = datas[i].node.display_url;
16            this.html = `
17              <div>
18                <a target="_blank" href="https://www.instagram.com/'${name}'/'" style="background-image: url('${url}');"></a>
19              </div>
20            `;
21            $("#instagram_box").append(this.html);
22          }
23      });
24    } catch (error) {
25      alert(error);
26    }
27  });
28</script>
29 
30 
31<div id="instagram_box">
32【この中に出力される】
33</div>

改変した部分ですが、~~insta-card~~ → instagram_box としました。
※ IDについては、こちらの質問前に、一時的に【InstagramのID】と変えさせていただいております。

確認してみると、このようになります。

また、VS Codeを使っており、そのままコピペしたのですが、このようにオレンジ色の波線が出ています。

json_string = json_string.split("};</script>")[0] + "}";
こちらの</script>の < のところです。

何がおかしいか、詳しい方いらっしゃいましたら教えてください。
よろしくお願いいたしますm(_ _)m

kei344

2020/05/07 06:00

teratailでは画像もアップできますので、ご自信で所持されている画像であればそちらを使用されてはいかがでしょうか。（画像として質問文に表示されますし）

Keight

2020/05/07 06:04

ありがとうございます。画像を追加しました。

kei344

2020/05/07 06:12

「gyazo.cpm」のリンクは画像ではないのでしょうか。

Keight

2020/05/07 06:13

スクリーンショットした画像のURLです。

AkitoshiManabe

2020/05/07 06:23

Keightさん、画像リンクの指摘については「外部サービスだとサービス終了時にデッドリンクになる為、teratilでの質問用ならteratail内にアップロードしましょう。」という意味です。私も有意義な投稿内容とするためにも、マークダウンエディタに付属の画像添付機能を使うべきだと思います。

Keight

2020/05/07 06:31

そういうことですね、失礼しました。スクリーンショットの画像URLを削除し、画像に差し替えておきました。

行動規範の内容に同意します

回答3件

このようなスクレイピングを使った技法は、

そもそも、Instagramの利用規約上も適当でない（「自動化された手段を用いて（中略）情報を取得したりする行為」が禁止と明記されている）
Instagram側のページの仕様が変われば、とたんに対応不能となる

などの事情があるので、全くおすすめできません。正規の方法で埋め込むことをおすすめします。

投稿2020/05/07 06:14

maisumakun

総合スコア146018

Keight

2020/05/07 06:33

ありがとうございます。そうですね、ただ、正規の方法だと自由度が低くなるのかなと思い、もしこの方法で実現できればと思ったのですが・・・。せめて、紹介されている方法をほぼそのままコピペで試したにも関わらず、正しく表示されない理由だけでも知りたいですm(_ _)m

maisumakun

2020/05/07 06:35

HTMLに混ぜて<script>でJavaScriptを書く場合、途中に</script>という文字列が現れてはいけません。

maisumakun

2020/05/07 06:36

> 正規の方法だと自由度が低くなるのかな Instagram側が制限している以上、致し方ないことです。

Keight

2020/05/07 06:40

＞ HTMLに混ぜて<script>でJavaScriptを書く場合、途中に</script>という文字列が現れてはいけません。そういうことなんですね。ただ、紹介されているサイトではHTMLに直接書かれてあるのかな？と思ったのですが???? ＞ Instagram側が制限している以上、致し方ないことです。そうですよね、正規の方法を検討してみることにします。

maisumakun

2020/05/07 06:41

> ただ、紹介されているサイトではHTMLに直接書かれてあるのかな？と思ったのですが元から間違っていますね。

行動規範の内容に同意します