ajaxでInstagramの写真を抜いて上げてみる

世の中にすでにこのようなツールは多数存在するのですが、あるウェブサイトのhtmlを解析してほしい情報だけを取得するという、基本的な部分をシンプルな流れてどのように実現できるか？をまとめました。例として、Javascript(JQuery)で Instagramのシ...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous">
  </script>  
  <title>Document</title>
</head>
<body>
  <div id="imgList"></div>
  <script>
    $(function(){
      $.ajax({
        url:'https://www.instagram.com/p/BnGxEuOnrgp',
        type:'get',
        dataType: 'html'
      }).then(
          //成功時の処理
          function(data){
            var parseHtml = $.parseHTML(data);
            var $html = $(parseHtml);
            var arr = $html.map(function(index,element){
              $element = $(element);
              if($element.is('meta')){
                if($element.attr('property')=='og:image'){
                  return $element.attr('content');
                }
              }});
              $.each(arr,function(index,element){
                $('#imgList').append('<img width="120px" src="'+element+'" />')
              });
        },
        
        //失敗時の処理
        function(){
          alert("取得に失敗しました");
        }
      );
    });
  </script>
</body>
</html>

<!DOCTYPE html>

<head>

<script

src="https://code.jquery.com/jquery-3.3.1.min.js"

integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="

crossorigin="anonymous">

</script>

<title>Document</title>

</head>

<body>

$(function(){

$.ajax({

url:'https://www.instagram.com/p/BnGxEuOnrgp',

type:'get',

dataType: 'html'

}).then(

//成功時の処理

function(data){

var parseHtml = $.parseHTML(data);

var $html = $(parseHtml);

var arr = $html.map(function(index,element){

$element = $(element);

if($element.is('meta')){

if($element.attr('property')=='og:image'){

return $element.attr('content');

}

}});

$.each(arr,function(index,element){

$('#imgList').append('<img width="120px" src="'+element+'" />')

});

//失敗時の処理

function(){

alert("取得に失敗しました");

}

);

});

</script>

</body>

</html>

メモ

使ってみようAjax！前編〜AjaxとJSONを合わせ...

使ってみようAjax！前編〜AjaxとJSONを合わせて使ってみる〜 | SRIA BLOG – ...

https://www.sria.co.jp/blog/2014/10/lets-use-ajax-part-1-try-it-with-ajax-and-json/

こんにちは！JavaScriptが大嫌いすぎてソースコードに対して殺意が芽生えるsatoです。さて今日は、デザイナーと学ぶシリーズのひとつとして現代のWEBサイトには欠かせない「Ajax」...

・typeにはHTTP通信の種類を指定します。Ajaxは”get”か”post”です。持ってくるか送るか、ですね。
・urlには、リクエストを送信する先のURLを指定します。
（test.json”、test.php”、test.js”などなど…。）

Build Insider

一般的なAjax通信を実装するには？（$.ajax）

https://www.buildinsider.net/web/jqueryref/059

jQuery逆引きリファレンス。非同期通信の動作をより細かく制御したい場面で使える$.ajaxメソッドの構文と利用可能なパラメーター群の概要を紹介。簡単なサンプルで使い方を説明する。

パラメータ名「type」は、通信に利用するHTTPメソッドを指定する。
（デフォルトはGETになっている）

Qiita

Ajaxの雛形パターン - Qiita

https://qiita.com/makoto1219/items/74afcf2e80c34c746768

Ajaxについて調べているときに、雛形となる書き方が複数ありどれがどう違うのかわからなかったので調べてみた。1.thenを使ったパターンjavaScript$.ajax({ url: '/api/topics',...

Ajaxについて調べているときに、雛形となる書き方が複数ありどれがどう違うのかわからなかったので調べてみた。

1.thenを使ったパターン
そもそも、thenについてよくわかっていなかったのだが調べてみるとPromiseオブジェクトのメソッドだとわかった。でもAjaxのなかでPromiseオブジェクト呼び出してないじゃん？！jQueryのAjaxではPromiseを返すんですね。それ早く教えてほしかっった。厳密にはｊQueryのjqXHRオブジェクト(jQueryのXMLHTTPRequestオブジェクト)がPromiseを実装しているということ。
※参考：ウェブカツjavascript・jQuery部中級（06）Ajaxとemail重複チェック

2.done failを使ったパターン
これはthenを使わず、doneとfailで分けた書き方。
※参考：ウェブカツWebサービス部（その18）お気に入り機能
※参考：ウェブカツjavascript・jQuery部中級（01）AjaxとJSON

4.success,errorのパターン
これはjQuery1.5以前の古いパターンなので、あまり必要ないかもしれない。”success”と”error”は”url”等と同様でajaxで指定可能なプロパティであり通信成功（失敗）時に実行されるコールバック関数を示す。

5.ライブラリを使用しないパターンについて
XMLHttpRequestオブジェクトを利用して、通信を行う。これが本当の雛形ですね。

Qiita

おじさんが若い時はね$.ajax()のオプションでsuccessとかerrorとか指定していたん...

https://qiita.com/tonkotsuboy_com/items/0722ad92f370ab0c411b

jQueryでAjaxを使う時、こんな書き方していませんか？昔の$.ajax()$.ajax({ url: "http://jsrun.it/assets/E/H/Z/t/EHZt3", success: fu...

イマドキは、jQueryのDeferredオブジェクトのthen()いうメソッドを使ってECMAScript 2015のPromise風のコードが使えます。複雑なコールバック地獄から解消され、すっきりと見通しのよいコードを記述できます。ECMAScript 2015のPromiseそのものとは違い、IEでも動作します。
then()の使い方は下記です。

$.ajax({
        オプション
    })
    .then(成功時の処理, 失敗時の処理);

$.ajax({

オプション

})

.then(成功時の処理, 失敗時の処理);

アロー関数でもっとイマドキに
上記のコードはECMAScript 2015のアロー関数を使って下記のように記述できます。

$.ajax({
  url: 'http://jsrun.it/assets/E/H/Z/t/EHZt3'
})
  .then(
    data => $('#results').append(data),
    error => alert('読み込み失敗')
  );

$.ajax({

url: 'http://jsrun.it/assets/E/H/Z/t/EHZt3'

})

.then(

data => $('#results').append(data),

error => alert('読み込み失敗')

);

peeks-blog

基本、自分のために書いてるブログ。日々でそっとのぞいた、ちらっと見た物事の中から、自分が「これは！」と思った物事を備忘録としてまとめました。

ajaxでInstagramの写真を抜いて上げてみる

メモ

関連記事

保護中: info-area（1.0）

保護中: テストコード（マンション）

保護中: 最初の３ページと申込（2.0）

保護中: パッチ処理9月

保護中: 速度改善レク

保護中: テストコード（免許）

管理人紹介

カテゴリー