アークウェブのブログ

準備：記事に画像を登録する

MTで記事一覧用の画像を用意する方法はいくつかあると思います。

案１：
１記事につき画像を１枚しか使わないようであれば、普通にエントリーの入力画面で「記事アイテム」の追加から画像ファイルをアップロードすればOKです。

案２：
記事一覧に表示するためだけのカスタムフィールドを追加します。
画像カスタムフィールドには下記のように設定しておきます。

「ブログ記事＞新規」の入力画面で「表示オプション」から「一覧用イメージ（画像）」にチェックを入れておけば入力欄が表示されますので、あとは普通にアップロードすればOKです。アップロードした画像は「記事アイテム」にも追加されます。

▲表示オプションから「一覧用イメージ（画像）」にチェックを入れて
「画像を選択」からアップロードする
(※図版はクリックで拡大します)

Data APIで画像を取得するには

案１の場合：
Data APIで取得する時に fields に「assets」を追加します。
例： fields : "title,permalink,date,excerpt, assets " // 表示したい項目

案２の場合：
Data APIで取得する時に fields に「customFields,assets」を追加します。
例： fields : "title,permalink,date,excerpt, customFields,assets " // 表示したい項目

これで、listEntries()のコールバック関数の引数 response にassets, customFields が追加されます。

案１の場合は取得したassetsが下記のように入っているのでこれを出力するだけですね。

assets: Array[1]
▼0: Object
  description: null
  filename: "test3.jpg"
  id: "32"
  label: "test3.jpg"
  mimeType: "image/jpeg"

案２の場合はちょっと面倒で、

1.customFieldsの中から画像カスタムフィールドを探します。basenameを'entry_keyimage'にしたのでこれを探します。

2.画像カスタムフィールドの value は、下記ソースの(1)のようにHTMLタグで返ってくるので asset-id を正規表現で取得します。

3.assets一覧から asset-id に一致するasset情報を list_image として利用します。

        function(response) {
            if (response.error) {
              console.log("Error: "+ response.error.message);
              return ;
            }
            var total = response.totalResults;
            if (total == 0) {
              console.log("Notice: 記事がありませんでした。");
              return ;
            }
            var num   = response.items.length;
            for (var i = 0 ; i < num ; i++) {
                var record = response.items[i];
                // response.items[i].customFields[n].basename の value を探す
                var list_image_tag = me.get_value_from_customFields__('entry_keyimage', record.customFields);
                if (list_image_tag) {
                    // list_image_tagは↓こんな形で返してくるので正規表現で取得 .........(1)
                    // "<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="http://example.jp/images/Koala.jpg">Koala.jpg</a></span>"
                    list_image_tag.match(/mt:asset\-id="(\d+)"/);
                    var asset_id = RegExp.$1;
                    // response.items[i].assets[n].id を探す
                    var asset = me.get_asset_from_id__(asset_id, record.assets);
                    record.list_image = asset;
                }
                console.log(record); // コンソールにダンプ
            }
        }
    );
};
sample.get_value_from_customFields__ = function(basename, customFields) {
    for (var i = 0 ; i < customFields.length ; i++) {
        if (customFields[i].basename == basename) {
            return customFields[i].value;
        }
    }
    return null;
};
sample.get_asset_from_id__ = function(id, assets) {
    for (var i = 0 ; i < assets.length ; i++) {
        if (assets[i].id == id) {
            return assets[i];
        }
    }
    return null;
};

このようになるので、あとは出力します。

Object {excerpt: "テスト記事３の概要です",
 date: "2014-02-19T18:11:03+09:00",
 title: "テスト記事３",
 permalink: "http://example.jp/000003.html",
 ▼list_image: Object
   description: null
   filename: "test3.jpg"
   id: "32"
   label: "test3.jpg"
   mimeType: "image/jpeg"
}
Object {excerpt: "テスト記事２の概要です",
 date: "2014-02-18T11:10:14+09:00",
 title: "テスト記事２",
 permalink: "http://example.jp/000002.html"
 ▼list_image: Object
   description: null
   filename: "test2.jpg"
   id: "30"
   label: "test2.jpg"
   mimeType: "image/jpeg"
}
Object {excerpt: "テスト記事１の概要です",
 date: "2014-02-15T08:00:00+09:00",
 title: "テスト記事１",
 permalink: "http://example.jp/000001.html"
 ▼list_image: Object
   description: null
   filename: "test1.jpg"
   id: "30"
   label: "test1.jpg"
   mimeType: "image/jpeg"
}

以上です。ご参考になれば幸いです。(^-)