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

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

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

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Movable Type

シックス・アパートが開発・提供する,ブログで用いられることの多いCMS製品

Q&A

解決済

1回答

1507閲覧

MovableTypeのDataAPI画像の取得について

kirin311

総合スコア53

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Movable Type

シックス・アパートが開発・提供する,ブログで用いられることの多いCMS製品

0グッド

0クリップ

投稿2018/05/10 02:42

編集2018/05/11 05:16

調べていましたが、やり方が不明なので質問失礼します。

前提・実現したいこと

・新着記事内に添付された画像の表示がしたい。
→新着5件表示の上で記事内で添付された画像をサムネイル画像として表示させたいです。

JQuery

修正前 <script> const api = new MT.DataAPI({ baseUrl: "URL/mt/mt-data-api.cgi", // mt-data-api.cgi へのパス指定 clientId: 'token' }); var siteId = 2; var params = { limit: 5//5件まで表示する }; api.listEntries(siteId, params, function(response) { if (response.error) { return; } for (i=0; i< response.items.length; i++) { jQuery('#title').append('<a href="'+ response.items[i].permalink + '">' + response.items[i].title + '</a>' + '<a href="'+ response.items[i].permalink + '">' +'(詳細はこちら)'+'</a><br>'+ response.items[i].createdDate +'<br><br>'); jQuery('#img').append('<img src="'+ response.items[i].assets + '">' + 'img'); } }); </script>

Jquery

修正前 jQuery('#img').append('<img src="'+ response.items[i].assets + '">' + 'img'); 修正後 jQuery('#img').append('<img src="'+ response.items[i].assets[i].url + '">');

試したこと

jQuery('#img').append('<img src="'+ response.items[i].assets + '">');
を追加してみたのですが、結果として空白の状態でした・・

補足情報(FW/ツールのバージョンなど)

Movable Type Pro version 6.3.7

###追記
・エラー表示のコメントの件について
エラーの表示はなく、 console.log(response.items[i])を使ってChromeの検証(F12)で確認しましたところ<img src="[object Object]">でありました。

・console.log出力結果
長すぎるため一部ではありますが、必要と思われる個所開いて画像にいたしました。
黒で塗りつぶしているところは、会社のURLなので申し訳ありませんがサブのディレクトリまでしか出せないです。
console.log結果

ベストアンサー後の修正

画像取得できたものの、2件だけしか表示しなくなりました。

Jquery

1 api.listEntries(siteId, params, function(response) { 2 if (response.error) { 3 return; 4 } 5for (i=0; i< response.items.length; i++) { 6//jQuery('#result').append($('<li>').append(response.items[i].title)); 7 8 9 for (j = 0; j < response.items[i].assets.length; j++) { 10 jQuery('#title').append('<div class=\"box\"><div id=\"all_p\"><img src="'+ response.items[i].assets[j].url + '"width="300px" height="250px"><span id=\"bg\">' + response.items[i].createdDate + '</span><br><a href="'+ response.items[i].permalink + '">' + '<span id="post_title">' + response.items[i].title + '</span></a><br>' + '<div id=\"details_right\"><a href="'+ response.items[i].permalink + '">詳細はこちら\>\>'+'</a></div></div></div></div></p>'); 11 } 12}

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

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

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

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

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

karamarimo

2018/05/10 04:27

エラーは表示されていないでしょうか。また response.error があるとき return するようになっていますが、それは発生していないのでしょうか。
kirin311

2018/05/10 04:41 編集

エラー自体はありませんでした。URLがあってないのか画像が表示されていないという形ですかね。追記という形で質問編集させていただきます。
karamarimo

2018/05/10 05:38

Movable Type については何も知らないのですが、response.items[i].assets には何が入っているのでしょうか。
kirin311

2018/05/10 06:07

表示されないのでおそらく何も入ってないと思います。Movableで投稿された画像のデータはどちらにあるものか検討もつかないです。。
karamarimo

2018/05/10 08:29

どこに画像のurlがあるかはAPIのドキュメンテーションを調べてみるほかありませんよね。[object Object]と表示されているということは object が入っているのでとりあえず console.log で中身を確かめてみてはどうでしょうか。
Lhankor_Mhy

2018/05/10 10:19

ドキュメントを見る限り、エンドポイントが全然違うような気がするのですが、それで合ってますか?
kirin311

2018/05/10 11:03

すみません、エンドポイントとは何でしょうか?私の解釈としては、 baseUrlの部分かと思いますが、合っています。assetsでは表示されませんでしたが、permalinkやtitle等は正常に表示しております。
kirin311

2018/05/10 11:05

追記:一応URLの部分に関しては、企業者様のことなので私個人では少々出せなくて・・
Lhankor_Mhy

2018/05/10 11:52

javascriptSDKを使うと、エンドポイントを意識しなくてよいのですね。失礼しました。ちなみに、response.items[i].assets[0] にするとどうなりますか?
Lhankor_Mhy

2018/05/10 11:56

ん、違うかな? response.items[i].assets[0].url かも。実行環境がないので、推測なのはご勘弁。
kirin311

2018/05/10 12:01

私もこの時間帯では、自宅にいますので実行環境が・・。明日出勤したときに試してみます。
kirin311

2018/05/10 12:33

ありがとうございます。ただassets[0]のurl部分だけ参照先を読んでも理解できないです・・。assetsに関しては、配列になっていてデータタイプもassetsで読み取り専用ということだけは何となく理解しましたが・・
kirin311

2018/05/10 12:34

明日、console.log(response)で読み込んでその結果を質問編集で追記してみます。
karamarimo

2018/05/11 02:01

スクショは console.log(response.items[i]) の結果でしょうか?また、表示したい画像はスクショの assets[j].url ということですか(すべての j について)?でしたらもう答えは出ていると思いますが、何が分からないのでしょうか?
kirin311

2018/05/11 02:26 編集

はい、ありがとうございます。 console.log(response.items[i])の結果です。assets[j].url を追加させてみましたところ、画像は表示するようになりましたが記事が2件しか表示されなくなりました。さらには、コンソールでUncaught TypeError: Cannot read property 'url' of undefinedというエラーがでるようになってしまいました。。
kirin311

2018/05/11 02:30

追記:2件の記事は、画像が添付されていますが、残りの件数は添付されていませんでした。ということは、これは条件分岐を使うということでしょうか、どのように記述すべきか・・
guest

回答1

0

ベストアンサー

js

1jQuery('#img').append('<img src="'+ response.items[i].assets[i].url + '">');

iitemsのインデックスですから、assetsのインデックスとして指定するのは意味をなさないです。forループをあまり理解されていないのではないでしょうか。

各記事ごとにassetの配列をもっているので二重ループになります。

js

1for (let j = 0; j < response.items[i].assets.length; j++) { 2 jQuery('#img').append('<img src="'+ response.items[i].assets[j].url + '">'); 3}

このようにしてみてください。

投稿2018/05/11 02:49

編集2018/05/11 04:05
karamarimo

総合スコア2551

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

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

kirin311

2018/05/11 03:01

コード入力ありがとうございます。 お恥ずかしながら、勉強中の身です。あまり理解に乏しくお手数をおかけします。 コードについてですが、そのようにしてみましたところ、記事が1件しか表示しなくなりましたのでconst jのところをletにしてみましたところ無事解決いたしました。 ありがとうございました
karamarimo

2018/05/11 04:08

すみません間違えてました.いつも for...of を使うので const にしてしまってました.回答を修正しました.
kirin311

2018/05/11 05:14

修正ありがとうございます。 表示が出来たのでベストアンサーを入れましたが 修正していただいた内容のfor文の中をjQuery('#title~)入れさらにjQuery('#title').append内に入れたところ2件だけになっています・・ ソースコード、再度載せます
karamarimo

2018/05/11 14:02

> ...詳細はこちら\>\> これは html として間違ってますね。 これが原因かどうかは分かりませんが。 文字列内に expression を埋め込むときはバックティックを使ったほうが楽です。 "eeee" + 3 * 4 + "ffff" を `eeee${3 * 4}ffff` と書くことができます。
karamarimo

2018/05/11 14:07

あと、'...'の中で"をエスケープする必要はないですし、widthの前にスペースが足りません。
kirin311

2018/05/12 09:45

ありがとうございます、修正させていただきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問