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

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

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

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

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

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

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

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

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

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

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

 

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

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

 

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

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

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

Imgur API から使うアプリの作成画面

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

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

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

 

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

Imgur API 呼び出しに必要なAPIキーとAPIシークレット

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

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

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

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

ここからが本題

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

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

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

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

 

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

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

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

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

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

 

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

ただし1つ注意点!

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

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

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

 

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

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

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

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

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

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

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

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

Shareこの記事をシェアしよう!

Commentsこの記事についたコメント

2件のコメント
  • Taroさん

    ありがとうございます!
    分かりやすいです!

    6月 24, 2022 7:12 pm
    • ぴー助

      記事が役に立ったようで嬉しいです。
      コメントありがとうございます!

      6月 24, 2022 7:28 pm

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください