2019/09/12
2019/09/13
PisukeCode - Web開発まとめ

Imgur API を使ってサクッと画像アップロードしてみた

画像アップローダーとして有名な Imgur （主に5ch方面）

無料版でも無制限にアップロードできるので便利です。

実はこの Imgur には API が公開されていて、それを使うと画像データの取得とかアップロードとか動画のアップロードとか色々できます。

もしかしたら将来この API を使うかもしれないので、
実際にAPIの使い方とか画像のアップロード手順をまとめてみました。

APIの登録とかは簡単だったけど、画像アップロードは少し注意が必要かも

そういうのも合わせて、コード例付きで使い方を紹介してきます。

このページの目次

まず Imgur API のAPIキーとシークレット取得
画像を Imgur API 経由でアップロードしてみた（Ajax）
Imgur API は色々便利かもしれない

まず Imgur API のAPIキーとシークレット取得

このAPIを使うには、当然ながら Imgur のアカウントが必要

APIキーと APIシークレットがいるので、最初にアカウントを取得してみました。

その手順はこういう感じです。

まず次のページからアカウント登録

https://imgur.com/register?redirect=/

Imgur: The magic of the Internet

SNSサインインとメルアド登録のどっちか。
どっちを使うにしても、必ずメール認証を済ませておくのを忘れずに

そしたら次のアプリ作成画面にアクセス

▼ このページからアプリを作成できる

https://api.imgur.com/oauth2/addclient

Imgur: The magic of the Internet

アクセスすると、次画像みたいフォームが表示されるはずです。

このフォームには次のような内容を入力

Application name
適当にアプリケーション名を入力すればOK
Authorization type
OAuth2は面倒なので【OAuth 2 authorization without a callback URL】を選ぶ。
Authorization callback URL
OAuth2を使わないなら、入力する必要なし
Email
ここはSNSサインインなら必ず入力する必要あり（メルアド登録でも必要？）
その他
ウェブサイトとかアプリ概要とか...入力してもしなくても問題なし

以上の項目を埋めたら、「Send」ボタンをクリック

すると次のような Client ID と Client Secret が表示されたはず

この２つが Imgur API を操作するのにいります。

ちなみに Client Secret は管理画面で確認できないので要注意

もし忘れたら再発行になるので、必ずどこかに記録しておきのが安全です。

画像を Imgur API 経由でアップロードしてみた（Ajax）

ここからが本題

いよいよ Imgur API で画像アップロードしてみます。

これが意外と大変でした。
なんでかっていうと、リファレンスがかなり不親切だったから

▼ ちなみにリファレンスページ

https://apidocs.imgur.com/?version=latest#c85c9dfc-7487-4de2-9ecd-66f727cf3139

API StatusStatus for the API can be found at status.imgur.com!Getting StartedImgur's API exposes the entire Imgur infrastructure via a standardized programmatic interface. Using Imgur's API, you can do just about anything you can do on imgur.com, while using your programming language of choice. The Imgur API is a RESTful API based on HTTP requests and JSON responses.This version of the API, version 3, uses OAuth 2.0. This means that all requests will need to be encrypted and sent vi...

でも何とか試行錯誤して１枚のJPEG画像のアップロードをやってみました。

まずアップロードの場合、次のURL経由で行います。

https://api.imgur.com/3/upload

1	https://api.imgur.com/3/upload

このURLに対して次のデータをつけてPOST送信すればOK

ヘッダー（headers）
必ず Authorization: Client-ID {CLIENT_ID} のようにクライアントIDを送信すること
POSTするデータ
まず image パラメーターにbase64化されたデータ、そして type に 'base64' を渡す

ヘッダーについては他APIでもこういうの多いですね。

問題はPOST送信のデータ、
画像を bese64化して送らないといけなかったので苦戦しました。

それで・・・実際に Ajax で送信してみた時のコードは次の通り

var url = '【画像パス or 画像URL】';

/// 画像URLをbase64に変換する処理...（後述）

var base64Url = '【base64に変換されたURL】';
/// APIに渡すときは先頭の data:~~~base64 を除外
var base64 = base64Url.replace(new RegExp('data.*base64,'), '');

$.ajax({
  url: 'https://api.imgur.com/3/image',
  method: 'POST',
  headers: {
    "Authorization": 'Client-ID 【クライアントID】'
  },
  data: {
    image: base64,
    type: 'base64'
  }
}).done(function(resp){
  console.log('レスポンス : ', resp);
}).fail(function(error){
  console.error('アップロード失敗...');
});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

var url = '【画像パス or 画像URL】';

/// 画像URLをbase64に変換する処理...（後述）

var base64Url = '【base64に変換されたURL】';

/// APIに渡すときは先頭の data:~~~base64 を除外

var base64 = base64Url.replace(new RegExp('data.*base64,'), '');

$.ajax({

url: 'https://api.imgur.com/3/image',

method: 'POST',

headers: {

"Authorization": 'Client-ID 【クライアントID】'

},

data: {

image: base64,

type: 'base64'

}

}).done(function(resp){

console.log('レスポンス : ', resp);

}).fail(function(error){

console.error('アップロード失敗...');

});

ただし１つ注意点！

上のコードでは画像を base64形式URL に変換するコードは省略してます。

なのでその手順については別記事で解説したのでご覧ください。

PisukeCode - Web開発まとめ

JavaScriptで画像をbase64形式のURLに変換するやり方

https://pisuke-code.com/js-way-to-convert-img-to-base64

画像データを直接送れない場面・・・例えば画像そのものをPOST送信するときとか、URLに変換したいときとかそんなときに画像データを base64形式に変換する方法をまとめました。難しそうと思ってたけど、JavaScriptだけの機能で簡単にできます。base64とはそもそも何なのか・・・まあ base64 なんて日常生活じゃまず聞かない言葉ですよね。これはバイナリデータをテキストとして扱うための規格元々メールとかで使われてたんですが、今でも Rest API にデータを渡すときとかPOST通信するときにデータを送るために使われることがありま...

▲ 少し面倒だけど、やり方さえ分かれば簡単

そして上の Imgur API を実行したら、次のレスポンスが返ってきました（一部抜粋）

{
  data: {
    account_id: 0,
    account_url: null,
    bandwidth: 0,
    datetime: 1566205809,
    deletehash: "00BQaGTo5K6lNqi",
    link: "https://i.imgur.com/8Oq7I8i.jpg",
  ...
  },
  tags: [],
  title: null,
  vides: 0.
  vode: null,
  width: 259
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

{

data: {

account_id: 0,

account_url: null,

bandwidth: 0,

datetime: 1566205809,

deletehash: "00BQaGTo5K6lNqi",

link: "https://i.imgur.com/8Oq7I8i.jpg",

...

},

tags: [],

title: null,

vides: 0.

vode: null,

width: 259

}

実際にアップロードされた画像URLは link に表示されてるやつ

しっかりアップロードされてたので、API呼び出しは一応成功

画像関係のアプリとかWebサービス、そういうのを使うのに便利かもしれません。
（ただし他人の画像をダウンロードするアプリとかは規約的に危険）

Imgur API は色々便利かもしれない

そんなこんなで Imgur API の使い方はこんな感じ

あの容量無制限の Imgur を操作できるので、色々なことに使えそうです。

以上、 Imgur API の導入とか使い方をまとめてみました。ではまた(^^)/~~~

関連記事