質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

1040閲覧

facebook グラフAPIで日付を表示させたい

nomura02

総合スコア133

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2021/04/09 02:17

編集2021/04/09 03:19

前提・実現したいこと

現在、インスタグラムAPIで最新8枚をサイト上に表示させています。
今回は、その写真の下に、投稿日を記載したいです。

該当のソース

HTML

1 <div class="instacontainer"> 2 <div id="instafeed" class="row"></div> 3 </div>

JS

1$(function(){ 2 $.ajax({ 3 type: 'GET', 4 url: 'https://graph.facebook.com/v3.0/178414456XXXXXXXX?fields=name%2Cmedia.limit(8)%7Bcaption%2Clike_count%2Cmedia_url%2Cpermalink%2Ctimestamp%2Cusername%7D&access_token=EAADkqohXZBZCsBACRqr7Iskia0OhL6ggIpyZAAUEOgGoQYjsLn56MoULLZC0FehXJ9Mx7R0Wol4Cw2KTnBMI46ZCg39lM5v6gKYO7KCWBLch9OrL2mUsWmEQsnMNGSAZBxW1ZAai6IRAFQDF15Q5hCGt1ZCXyuiS7b9vT3rGS3RfL2EgFZC6uhD6ZADZC40EWXXXXXXXX', 5 dataType: 'json', 6 success: function(json) { 7 var html = ''; 8 var insta = json.media.data; 9 for (var i = 0; i < insta.length; i++) { 10 html += '<div ><a href="' + insta[i].permalink + '" target="_blank"><img src="' + insta[i].media_url + '"></a></div>'; 11 } 12 $("#instafeed").append(html); 13 }, 14 15 error: function() { 16 17 //エラー時の処理 18 } 19 }); 20});

試したこと

こちらの過去の質問を見ると、
Instagram APIで日付を出力するには
この一文を追記すれば良いということを知り、

JS

1var d = new Date( Number( json.data[i].created_time+'000' ) );
$(function(){ $.ajax({ type: 'GET', url: 'https://graph.facebook.com/v3.0/178414456XXXXXXXX?fields=name%2Cmedia.limit(8)%7Bcaption%2Clike_count%2Cmedia_url%2Cpermalink%2Ctimestamp%2Cusername%7D&access_token=EAADkqohXZBZCsBACRqr7Iskia0OhL6ggIpyZAAUEOgGoQYjsLn56MoULLZC0FehXJ9Mx7R0Wol4Cw2KTnBMI46ZCg39lM5v6gKYO7KCWBLch9OrL2mUsWmEQsnMNGSAZBxW1ZAai6IRAFQDF15Q5hCGt1ZCXyuiS7b9vT3rGS3RfL2EgFZC6uhD6ZADZC40EWXXXXXXXX', dataType: 'json', success: function(json) { var html = ''; var insta = json.media.data; for (var i = 0; i < insta.length; i++) { html += '<div ><a href="' + insta[i].permalink + '" target="_blank"><img src="' + insta[i].media_url + '"></a></div>'; } 追記→ var d = new Date( Number( item.created_time+'000' ) ); 追記→ dateToFormatString(new Date(), '%YYYY%年%MM%月%DD%日 (%w%) %HH%時%mm%分%ss%秒'); $("#instafeed").append(html); }, error: function() { //エラー時の処理 } }); });

書く位置をいろいろためしたのですが、成功しませんでした。
もしかして、私が表示させてるこのdateTypeだと
この書き方では、日付が表示されないのでしょうか。

ご存知の方、ご教示いただけましたら幸いです。


2021/04/09 12:10追記

このサイトにあるように
こんな感じのcodeなら表示されるはずなのですが
真似てみたものの、画面が真っ白になるだけで…
どこに書けばうまく表示されるのでしょうか

イメージ説明

$(function(){ $.ajax({ type: 'GET', url: 'https://graph.facebook.com/v3.0/17841445667264403?fields=name%2Cmedia.limit(8)%7Bcaption%2Clike_count%2Cmedia_url%2Cpermalink%2Ctimestamp%2Cusername%7D&access_token=EAADkqohXZBZCsBACRqr7Iskia0OhL6ggIpyZAAUEOgGoQYjsLn56MoULLZC0FehXJ9Mx7R0Wol4Cw2KTnBMI46ZCg39lM5v6gKYO7KCWBLch9OrL2mUsWmEQsnMNGSAZBxW1ZAai6IRAFQDF15Q5hCGt1ZCXyuiS7b9vT3rGS3RfL2EgFZC6uhD6ZADZC40EW8Em3UZD', dataType: 'json', success: function(json) { var html = ''; var insta = json.media.data; var time = parseISO8601(json[i].created_time); for (var i = 0; i < insta.length; i++) { html += '<div ><a href="' + insta[i].permalink + '" target="_blank"><img src="' + insta[i].media_url + '"></a></div>'; } $("#instafeed").append(html); }, error: function() { //エラー時の処理 } }); }); function parseISO8601(str) { var date = str.match(/(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})/); return date = date[1] + "年" + date[2] + "月" + date[3] + "日";

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/04/09 02:46

そもそもFacebookのグラフAPIになってませんか?
nomura02

2021/04/09 03:20

ありがとうございます、そうですね…、なんだかどおりで類似記事がなかなか無いなと思っていました… ちょっと方向性を変えて調べてみたのですが、url部分の「%2Ctimestamp%2」を for文のところに書く感じでしょうか。 phpを用いておらず、類似する記事は見つかるものの、 いまいち書き方がわからずその通りといかないのですが、どのように書いたらよいでしょうか。
m.ts10806

2021/04/09 04:50

API利用なら他人の書いた他人の記事より公式ドキュメントを参考にしてください。 それに提示の記事、おもいきり「Facebookの投稿」とあります。インスタグラムの話ではないのですか?
m.ts10806

2021/04/09 04:53 編集

タイトルと中身がごっちゃになってますね。内容にインスタグラムの話が残ってる。 htmlも正しいのか怪しいです。全て提示されるわけではないのでわかりませんが。 Facebookは予告なしによく仕様がかわりますので、個人の記事は全くのあてにできませんよ。公式ドキュメントのみ参照してください。
nomura02

2021/04/09 09:13

すみません…ありがとうございます。助かります。 読んでみて、 やはりtimestampか、created_timeをなんとかすることは分かりました。 media.limit(8) (←メディアを8枚表示させる)のように、urlの方をいじって表示させるのか、 <img src="' + insta[i].media_url + '">(←メディアURLを表示させる)のように、for文をいじるのか、 分からなかったので、引き続き調べてみます。 すみません、フェイスブックのグラフAPIの中で、インスタAPIのアプリをいれたので、 インスタAPIでも、フェイスブックAPIでも、一緒かと最初思って質問したのですが、 どういう質問の言い回しだと、意味が通じますでしょうか。
guest

回答1

0

自己解決

いけました!!!!!
ありがとうございます!!
公式とcodepenを読みあさり

JS

1<p>' + insta[i].timestamp + '</p>

この一文追記でできました!!!!

しかし新たな問題が浮上したので、
+00000000
といらない数字が出てきてしまいこれを消してきれいにしたいので
また調べるとします。

投稿2021/04/09 09:43

nomura02

総合スコア133

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問