無料画像アップロードAPIの使い方 – imgur.com

imgur.comが提供するAPIを使用すると、私が運営するブログやWebサイトに無料で画像を添付する機能を作成できます。

会員登録

会員登録ができない場合は、次のサイトで会員登録を先に進めてください。

Imgur: The magic of the Internet

右上隅にある[Sign up]ボタンを選択します。

他のソーシャルアカウントでも簡単に登録できます。私はGoogleアカウントでサインアップしてみましょう。

ユーザー名と自分の携帯電話番号を入力して Continue ボタンを押します。

携帯電話に送信された7桁の番号を入力し、Registerボタンを押します。

すぐに登録が完了し、次の画面に移動します。

アプリケーション登録

会員登録が完了したら、次のステップで自分が望むサービスに画像をアップロードするためのアプリケーション登録手順を実行する必要があります。

imgur.comサイトのメインの下部に表示されるAPIを選択します。

その後、次のようなImgur APIドキュメントが表示されます。

少し下に見てみると、Register your applicationリンクが見えますが、選択してみましょう。

すぐに移動したい場合は、次のリンクをクリックしてください。

Imgur – Register an Application

次の画面で必要な項目を入力してみましょう。 Application nameを適宜入力し、Authorization callback URLに自分が運営するサイトのURLを入力してください。他の住所を入力してもいいようですが、なぜそうなのかは分かりません。 Emailアドレスも入力してくれます。そして、送信ボタンを押します。

正常に入力したら、次のようにClient IDとClient secret値を取得できます。必要な値は Client ID です。後で必要なことがあるかもしれませんので、Client secret値もよく書き留めてください。忘れても、今後必要に応じて新しく作成して使用できます。

ファイルのアップロード方法

次の例で簡単に確認できます。 xxxxxxxxxx部分にはアプリケーション登録をしながら得たクライアントID値を入れてください。

<input type="file" id="upload_image">
<button onclick="uploadImageTest()">upload</button>
<script>
    function uploadImageTest() {
        var bodyData = new FormData();
        var imageFile = document.querySelector("#upload_image").files[0];
        bodyData.append("image", imageFile);
        fetch("https://api.imgur.com/3/image", {
            method: "POST",
            headers: {
                Authorization: "Client-ID xxxxxxxxxxxxxxx",
                Accept: "application/json",
            },
            body: bodyData,
        }).then(function(res){
            return res.json();
        }).then(function(json){
            console.log(json);
        });
    }
</script>

画像のアップロードに成功すると、次の情報が返されます。したがって、成功値で成功したかどうかを判断し、データのリンク部分を介して実際の画像を表示できます。

{
  "data": {
    "id": "orunSTu",
    "title": null,
    "description": null,
    "datetime": 1495556889,
    "type": "image/gif",
    "animated": false,
    "width": 1,
    "height": 1,
    "size": 42,
    "views": 0,
    "bandwidth": 0,
    "vote": null,
    "favorite": false,
    "nsfw": null,
    "section": null,
    "account_url": null,
    "account_id": 0,
    "is_ad": false,
    "in_most_viral": false,
    "tags": [],
    "ad_type": 0,
    "ad_url": "",
    "in_gallery": false,
    "deletehash": "x70po4w7BVvSUzZ",
    "name": "",
    "link": "http://i.imgur.com/orunSTu.gif"
  },
  "success": true,
  "status": 200
}

便利にお使いください。