はじめに

プログラミングの授業で「Web APIを使ってWebサービスを作ろう」という課題が出たためいろいろとWeb APIを探していたときにこの「Gifmagazine-API」見つけました。ただリファレンスを読むとサンプルコードが書いていなかったためこの記事でJavaScriptとNode.jsでのサンプルコードを書きます。(JavaScriptにはjQueryライブラリを使いました)

GIFMAGAZINE APIとは？

サンプルコードの前に「GIFMAGAZINE API」とは何なのか説明します。「GIFMAGAZINE」とはgif画像を投稿したり登校されたgif画像をダウンロードすることができるgif画像の投稿・共有サービスです。このAPIでは「GIFMAGAZINE」内のgif画像を検索することができます。このAPIのおもしろいところは感情別でgif画像を検索できるところです。感情は標準化されたユニコード絵文字を元に対応しています。また特徴として、id検索以外はAPIキーなしで利用できるところが挙げられます。ただしこの「GIFMAGAZINE」から提供されたデータを使用する際は以下のような決まりがあるの注意してください。(詳しくは http://api.gifmagazine.net/ )

無題.png URL:http://gifmagazine.net/ クレジット:http://sinkr.main.jp/api/brand_logo_kit.zip

サンプルコード

ここからはGifmagazine-API-Documentationに書かれているAPIの説明を引用しながら、それを参考に書いたサンプルコードを書いていきます。 JavaScriptの場合はjQueryを使用するのでhtmlの<head>タグの中に次のタグを入れてください。

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

文字検索

名前の通り文字で検索します。

パラメータ

q(必須) : 検索したい単語
limit : 返ってくる検索結果の件数。デフォルトは2件。最大2件。0~2以外の数値を指定した場合はデフォルト値が利用されます。
offset : オフセット。デフォルトは0。最大0。
safe : 0を指定するとR-18のgifを検索結果から除く。1を指定するとR-18のgifも含んだ検索結果を返す。デフォルトは0。

Request

JavaScript

var query = '猫';
var limit = 1;
var offset = 0;
var safe = 0;

var URL = 'http://api.gifmagazine.net/v1/gifs/search?q=' + query + '&limit=' + limit + '&offset' + offset + '&safe=' + safe;

$.getJSON(URL, function (response) {
    console.log(response);
})

Node.js

const request = require('request');

var URL = 'http://api.gifmagazine.net/v1/gifs/search';

request.get({
    url: URL,
    headers: {'Content-type': 'application/json'},
    qs: {
       q:"猫",
       limit:2,
       offset:0,
       safe:0

    },
    json: true
}, function(err, req, json){
    console.log(json);
});

Response

{
  "data": [
    {
      "id": 4003,
      "url": "http://gifmagazine.net/post_images/4003",
      "title": "いけー！",
      "description": "#cat #猫 cat 猫",
      "user_name": "berururunnnnnnn",
      "file_size": 2525252,
      "rate": "g",
      "image": {
        "default": {
          "url": "http://img.gifmagazine.net/gifmagazine/images/4003/original.gif",
          "width": 500,
          "height": 400
        },
        "medium": {
          "url": "http://img.gifmagazine.net/gifmagazine/images/4003/medium.gif",
          "width": 300,
          "height": 240
        },
        "small": {
          "url": "http://img.gifmagazine.net/gifmagazine/images/4003/small.gif",
          "width": 140,
          "height": 112
        }
      },
      "video": {
        "default": {
          "url": "http://img.gifmagazine.net/gifmagazine/images/4003/original.mp4",
          "width": 500,
          "height": 400
        },
        "medium": {
          "url": "http://img.gifmagazine.net/gifmagazine/images/4003/medium.mp4",
          "width": 300,
          "height": 240
        }
      },
      "tags": [
        "猫"
      ]
    },
  ],
  "pagination": {
    "total_count": 1,
    "count": 1,
    "offset": 0
  }
}

感情検索

感情を表した絵文字に対応する名前で検索します。

パラメータ

q(必須) : 各種絵文字に対応するName(詳細は現在対応済みの絵文字を参照)
limit : 返ってくる検索結果の件数。デフォルトは2件。最大2件。0~2以外の数値を指定した場合はデフォルト値が利用されます。
offset : オフセット。デフォルトは0。最大0。
safe : 0を指定するとR-18のgifを検索結果から除く。1を指定するとR-18のgifも含んだ検索結果を返す。デフォルトは0。

現在対応済みの絵文字(2017/12/03現在)

Emoji	Name
😁	grin
😂	joy
😃	smiley
😄	smile
😅	sweat_smile
😆	satisfied
😉	wink
😊	blush
😋	yum
😌	relieved
😍	heart_eyes
😏	smirk
😒	unamused
😓	sweat
😔	pensive
😖	confounded
😘	kissing_heart
😚	kissing_closed_eyes
😜	stuck_out_tongue_winking_eye
😝	stuck_out_tongue_closed_eyes
😞	disappointed
😠	angry
😡	rage
😢	cry
😣	persevere
😤	triumph
😥	disappointed_relieved
😨	fearful
😩	weary
😪	sleepy
😫	tired_face
😭	sob
😰	cold_sweat
😱	scream
😲	astonished
😳	flushed
😵	dizzy_face
😷	mask

Request

JavaScript

var query = 'yum';
var limit = 1;
var offset = 0;
var safe = 0;

var URL = 'http://api.gifmagazine.net/v1/gifs/emotion?q=' + query + '&limit=' + limit + '&offset' + offset + '&safe=' + safe;

$.getJSON(URL, function (response) {
    console.log(response);
})

Node.js

const request = require('request');

var URL = 'http://api.gifmagazine.net/v1/gifs/emotion';

request.get({
    url: URL,
    headers: {'Content-type': 'application/json'},
    qs: {
       q:"yum",
       limit:1,
       offset:0,
       safe:0
    },
    json: true
}, function(err, req, json){
    console.log(json);//返ってきたjson
});

Response

{
    "data": [
        {
            "id": 727127,
            "url": "http://gifmagazine.net/post_images/727127",
            "title": "face savouring delicious food[9-6]",
            "description": "face savouring delicious food[9-6]",
            "user_name": "Mr.emotion",
            "file_size": 1191679,
            "rate": "g",
            "image": {
                "default": {
                    "url": "http://img.gifmagazine.net/gifmagazine/images/727127/original.gif",
                    "width": 393,
                    "height": 200
                },
                "medium": {
                    "url": "http://img.gifmagazine.net/gifmagazine/images/727127/medium.gif",
                    "width": 300,
                    "height": 153
                },
                "small": {
                  "url": "http://img.gifmagazine.net/gifmagazine/images/4003/small.gif",
                  "width": 140,
                  "height": 112
                }
            },
            "video": {
              "default": {
                "url": "http://img.gifmagazine.net/gifmagazine/images/4003/original.mp4",
                "width": 500,
                "height": 400
              },
              "medium": {
                "url": "http://img.gifmagazine.net/gifmagazine/images/4003/medium.mp4",
                "width": 300,
                "height": 240
              }
            },
            "tags": [
              "猫"
            ]
        },
    ],
    "pagination": {
        "total_count": 10,
        "count": 2,
        "offset": 0
    }
}

pickup , topic , jumble

pickup : Pickup Gifに選ばれた投稿の新着フィードを返す topic : 今web上で話題のGIFの新着フィードを返す jumble : pickupとtopicを混ぜたgifのフィードを返す

パラメータ

limit : 返ってくる検索結果の件数。デフォルトは2件。最大2件。0~2以外の数値を指定した場合はデフォルト値が利用されます。
offset : オフセット。デフォルトは0。最大0。

Request

var feed = 'pickup';//topic , jumble
var limit = 1;
var offset = 0;
var safe = 0;

var URL = 'http://api.gifmagazine.net/v1/feeds/' + feed + '?limit=' + limit + '&offset' + offset + '&safe=' + safe;

$.getJSON(URL, function (response) {
    console.log(response);
})

Node.js

const request = require('request');

var URL = 'http://api.gifmagazine.net/v1/feeds/';
var feed = 'pickup';//topic , jumble

request.get({
    url: URL + feed,
    headers: {'Content-type': 'application/json'},
    qs: {
       limit:1,
       offset:0,
       safe:0

    },
    json: true
}, function(err, req, json){
    console.log(json);
});

Response

pickup

{
  "data": [
    {
      "id": 4003,
      "url": "http://gifmagazine.net/post_images/4003",
      "title": "いけー！",
      "description": "#cat #猫 cat 猫",
      "user_name": "berururunnnnnnn",
      "file_size": 2525252,
      "rate": "g",
      "image": {
        "default": {
          "url": "http://img.gifmagazine.net/gifmagazine/images/4003/original.gif",
          "width": 500,
          "height": 400
        },
        "medium": {
          "url": "http://img.gifmagazine.net/gifmagazine/images/4003/medium.gif",
          "width": 300,
          "height": 240
        },
        "small": {
          "url": "http://img.gifmagazine.net/gifmagazine/images/4003/small.gif",
          "width": 140,
          "height": 112
        }
      },
      "video": {
        "default": {
          "url": "http://img.gifmagazine.net/gifmagazine/images/4003/original.mp4",
          "width": 500,
          "height": 400
        },
        "medium": {
          "url": "http://img.gifmagazine.net/gifmagazine/images/4003/medium.mp4",
          "width": 300,
          "height": 240
        }
      },
      "tags": [
        "猫"
      ]
    }
  ],
  "pagination": {
    "total_count": 1,
    "count": 1,
    "offset": 0
  }
}

topic

{
  "data": [
    {
      "id": 4003,
      "url": "http://gifmagazine.net/post_images/4003",
      "title": "いけー！",
      "description": "#cat #猫 cat 猫",
      "user_name": "berururunnnnnnn",
      "file_size": 2525252,
      "rate": "g",
      "image": {
        "default": {
          "url": "http://img.gifmagazine.net/gifmagazine/images/4003/original.gif",
          "width": 500,
          "height": 400
        },
        "medium": {
          "url": "http://img.gifmagazine.net/gifmagazine/images/4003/medium.gif",
          "width": 300,
          "height": 240
        },
        "small": {
          "url": "http://img.gifmagazine.net/gifmagazine/images/4003/small.gif",
          "width": 140,
          "height": 112
        }
      },
      "video": {
        "default": {
          "url": "http://img.gifmagazine.net/gifmagazine/images/4003/original.mp4",
          "width": 500,
          "height": 400
        },
        "medium": {
          "url": "http://img.gifmagazine.net/gifmagazine/images/4003/medium.mp4",
          "width": 300,
          "height": 240
        }
      },
      "tags": [
        "猫"
      ]
    },
  ],
  "pagination": {
    "total_count": 1,
    "count": 1,
    "offset": 0
  }
}

jumble

{
  "data": [
    {
      "id": 4003,
      "url": "http://gifmagazine.net/post_images/4003",
      "title": "いけー！",
      "description": "#cat #猫 cat 猫",
      "user_name": "berururunnnnnnn",
      "file_size": 2525252,
      "rate": "g",
      "image": {
        "default": {
          "url": "http://img.gifmagazine.net/gifmagazine/images/4003/original.gif",
          "width": 500,
          "height": 400
        },
        "medium": {
          "url": "http://img.gifmagazine.net/gifmagazine/images/4003/medium.gif",
          "width": 300,
          "height": 240
        },
        "small": {
          "url": "http://img.gifmagazine.net/gifmagazine/images/4003/small.gif",
          "width": 140,
          "height": 112
        }
      },
      "video": {
        "default": {
          "url": "http://img.gifmagazine.net/gifmagazine/images/4003/original.mp4",
          "width": 500,
          "height": 400
        },
        "medium": {
          "url": "http://img.gifmagazine.net/gifmagazine/images/4003/medium.mp4",
          "width": 300,
          "height": 240
        }
      },
      "tags": [
        "猫"
      ]
    },
  ],
  "pagination": {
    "total_count": 1,
    "count": 1,
    "offset": 0
  }
}

id検索

idで指定されたgifの詳細情報を返す。

パラメータ

[必須]token : 専用トークンを指定する

Request

JavaScript

const YOUR_TOKEN = 'ここに専用トークンを書く';

var GIF_ID = 1;//gif画像のID

var URL = 'http://api.gifmagazine.net/v1/detail_gifs/' + GIF_ID + '?token=' + YOUR_TOKEN ;


$.getJSON(URL, function (response) {
    console.log(response);
})

Node.js

const request = require('request');

const YOUR_TOKEN = 'ここに専用トークンを書く';

var URL = 'http://api.gifmagazine.net/v1/detail_gifs/';
var GIF_ID = 1;//gif画像のID

request.get({
    url: URL + GIF_ID ,
    headers: {'Content-type': 'application/json'},
    qs: {
       token:YOUR_TOKEN
    },
    json: true
}, function(err, req, json){
    console.log(json);
});

Response

{
    "data": {
        "gif": {
            "id": 100000,
            "url": "https://gifmagazine.net/post_images/100000",
            "title": "かっこいいアウディが華麗に存在感を放っているGIF画像",
            "description": "[元動画] https://www.youtube.com/watch?v=_kPFr8H-o5g",
            "user_name": "gif_research61",
            "file_size": 2751967,
            "rate": "g",
            "image": {
                "default": {
                    "url": "https://img.gifmagazine.net/gifmagazine/images/100000/original.gif",
                    "width": 420,
                    "height": 236
                },
                "medium": {
                    "url": "https://img.gifmagazine.net/gifmagazine/images/100000/medium.gif",
                    "width": 300,
                    "height": 169
                },
                "small": {
                    "url": "https://media.gifmagazine.net/rszgif/wiI-PfLjd7ltYD4Ric90Lj-EmMQ=/420/236/140/140/100000/",
                    "width": 140,
                    "height": 79
                },
                "medium_thumb": {
                    "url": "https://img.gifmagazine.net/gifmagazine/images/100000/medium_thumb.png",
                    "width": 300,
                    "height": 169
                },
                "thumb": {
                    "url": "https://img.gifmagazine.net/gifmagazine/images/100000/thumb.png",
                    "width": 100,
                    "height": 100
                }
            },
            "video": {
                "default": {
                    "url": "https://img.gifmagazine.net/gifmagazine/images/100000/original.mp4",
                    "width": 420,
                    "height": 236
                },
                "medium": {
                    "url": "https://img.gifmagazine.net/gifmagazine/images/100000/medium.mp4",
                    "width": 300,
                    "height": 169
                }
            },
            "tags": [
                "from youtube",
                "車",
                "かっこいい",
                "普通車",
                "高級車",
                "アウディ"
            ]
        },
        "related_gifs": [
            {
                "id": 100023,
                "url": "https://gifmagazine.net/post_images/100023",
                "title": "かっこいいアウディが華麗に存在感を放っているGIF画像",
                "description": "[元動画] https://www.youtube.com/watch?v=qZVtnv3DeBI",
                "user_name": "gif_research61",
                "file_size": 3076909,
                "rate": "g",
                "image": {
                    "default": {
                        "url": "https://img.gifmagazine.net/gifmagazine/images/100023/original.gif",
                        "width": 420,
                        "height": 236
                    },
                    "medium": {
                        "url": "https://img.gifmagazine.net/gifmagazine/images/100023/medium.gif",
                        "width": 300,
                        "height": 169
                    },
                    "small": {
                        "url": "https://media.gifmagazine.net/rszgif/9XAWF4YNw99aR1XS_BffXhYDrzQ=/420/236/140/140/100023/",
                        "width": 140,
                        "height": 79
                    },
                    "medium_thumb": {
                        "url": "https://img.gifmagazine.net/gifmagazine/images/100023/medium_thumb.png",
                        "width": 300,
                        "height": 169
                    },
                    "thumb": {
                        "url": "https://img.gifmagazine.net/gifmagazine/images/100023/thumb.png",
                        "width": 100,
                        "height": 100
                    }
                },
                "video": {
                    "default": {
                        "url": "https://img.gifmagazine.net/gifmagazine/images/100023/original.mp4",
                        "width": 420,
                        "height": 236
                    },
                    "medium": {
                        "url": "https://img.gifmagazine.net/gifmagazine/images/100023/medium.mp4",
                        "width": 300,
                        "height": 169
                    }
                },
                "tags": [
                    "from youtube",
                    "車",
                    "かっこいい",
                    "普通車",
                    "高級車",
                    "アウディ"
                ]
            },
        ]
    },
    "pagination": {
        "total_count": 1,
        "count": 1,
        "offset": 0
    }
}

参考資料

github.com

qiita.com

ZawaWorks’s diary

プログラミング技術メモ

GIFMAGAZINE APIをJavaScript/Node.jsで叩いてみた

はじめに

GIFMAGAZINE APIとは？

サンプルコード

文字検索

Request

Response

感情検索

Request

Response

pickup , topic , jumble

Request

Response

id検索

Request

Response

参考資料