1. ホーム
  2. ジャバスクリプト

[解決済み] API Forismatic JSON: ランダム引用マシン

2022-03-03 09:15:36

質問

現在、forismatic APIを使って見積もりマシンを作っているのですが、全く困っています。私のプログラムは、将来的に自分の作品を見直すことを決めるまでは、問題なく動作していました。以下は私のコードです。

var html = "http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?";

var getQuote=function(data){
  if(data.quoteAuthor === "") {
    data.quoteAuthor = "Unknown";
  }      
  $('#author').text(data.quoteAuthor);
  $('#text').text(data.quoteText);
  
  var quote = 'https://twitter.com/intent/tweet?text=' + "\"" + data.quoteText + "\"" + ' Author: ' + data.quoteAuthor +' @Gil_Skates';

  $('#tweet').attr("href", quote);
};

$(document).ready(function() {
  $.getJSON(html, getQuote, 'jsonp');
});
    
// On button click
$('#new-quote').on("click", function(){
  // Deletes text and creates spinner
  $('#text').text("");
  $('#author').text("");
  $('<span style = "margin-left:200px" class="fa-li fa fa-spinner fa-spin"/>').appendTo('#text');
  
  // Calls our random quote
  $.getJSON(html, getQuote, 'jsonp');
});

// Tweet popup
window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);
 
  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };
 
  return t;
}(document, "script", "twitter-wjs"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class = "quote-box centered">
  <div class = "quote-text">
      <i class="fa fa-quote-left"></i><span id = "text" >Quotes inspire<span>
  </div>
  <div class = "quote-author">
    <span id = "author">Programmer</span>
  </div>
    
  <div class = "buttons">
    <a class="button" href="https://twitter.com/intent/tweet" data-size="large" id="tweet" title="Tweet this now!" target="_blank">
      <i class = "fa fa-twitter"></i>
    </a>
    
    <!--<a class="button" id="tumblr" title="Share on Tumblr!" target="_blank">
      <i class = "fa fa-tumblr"></i>
    </a>-->
    
    <button class = "button" id ="new-quote">New Quote</button>
  </div>
</div>

何が間違っているのでしょうか?私はURLを保持するために変数を作成し、データを取得する関数を作成し、私の関数を利用するためにgetJSONを使用しています。(私の専門用語ですみません)

このサイトで実行するとうまくいくのですが、on: https://codepen.io/gilioo/pen/JKpjgr 引用符が生成されません。

よろしくお願いします。

解決方法は?

codepen.ioにhttpsでアクセスされていますが、forismatic APIはhttpでしか提供されていませんので、CORS(Cross-Origin Resource Sharing)の問題だと思われます。 次のようにしてみてください。 http://codepen.io をクリックし、動作するかどうかを確認します。私自身、https経由でAPIを使用しようとすると、同じ問題に遭遇したことがあります。