ImgbbのAPIを使って簡単にサイト上に画像アップロード機能を追加する方法

2024年10月17日 API·管理人

個人的な備忘録です。

Imgbbという神サービスがあります。このサービスではユーザー登録不要で簡単だれもが画像をアップロードすることができます。

僕はこのAPIが大好きなのですが、これを使って自分のサイトに画像をURLに変換する機能を簡単に実装することができたのでご紹介します。

これを使うことで、 HTML , CSS , Javescript が機能するサイトであれば画像変換機能を実装することが可能です。WordPressはもちろんのこと、KAJABIなどのCMSでも活用することができます。

準備：imgbbのAPIを取得する

imgbbのAPIの取得は超簡単です。imgbb自体はアカウント不要で使えますが、APIを使うには無料登録が必要になります。

Googleアカウントで簡単に作成可能です。

ログインができたら、以下のAPIに進みます

↓ 以下のようにAPIが表示されているのでこれをコピーしておきます。これを Javascriptの部分に置き換えます。

APIと連携しているため、アップロードされてURL化処理された画像はすべて皆さんのアカウントに保存される仕組みになっています。なのでURL化の目的以外にも、単純に画像をアップロードしてもらうためだけのツールとしても使えそうです。

以下は、今回の実装に必要なスクリプトコードです。

HTML


<body>

<h2>画像アップロード</h2>

<form id="uploadForm">
    <label for="fileInput">画像を選択:</label>
    <input type="file" id="fileInput" accept="image/*">
    
    <div id="result" style="display:none;">
        <input type="text" id="imageUrl" readonly>
        <button type="button" id="copyButton">コピーする</button>
    </div>

    <br>
    <button type="button" id="uploadButton">アップロード</button>

    <!-- ローディング表示 -->
    <div id="loading">アップロード中...</div>

    <!-- アップロード完了メッセージ -->
    <div id="uploadComplete">アップロード完了</div>
</form>

<div id="preview">
    <p>選択した画像がここに表示されます</p>
</div>

<script src="upload.js"></script>

</body>

CSS

 body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }

        h2 {
            text-align: center;
            color: #333;
        }

        #uploadForm {
            max-width: 400px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        label {
            font-size: 14px;
            color: #555;
        }

        input[type="file"] {
            display: block;
            margin-bottom: 20px;
            width: 100%;
        }

        button {
            display: block;
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            border: none;
            color: white;
            font-size: 16px;
            cursor: pointer;
            border-radius: 4px;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #0056b3;
        }

        #preview {
            text-align: center;
            margin-top: 20px;
        }

        #preview img {
            max-width: 800px;
            width: 100%;
            height: auto;
            border-radius: 4px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
            display: block;
            margin: 0 auto;
        }

        #result {
            margin-top: 20px;
            text-align: center;
            font-size: 14px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #result input {
            width: auto;
            padding: 5px;
            font-size: 14px;
            margin-right: 10px;
        }

        #result button {
            padding: 5px 10px;
            font-size: 14px;
            background-color: #28a745;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 4px;
            transition: background-color 0.3s;
        }

        #result button:hover {
            background-color: #218838;
        }

        /* ローディングおよび完了メッセージ */
        #loading {
            display: none;
            text-align: center;
            margin-top: 10px;
            font-size: 14px;
            color: #007bff;
        }

        #uploadComplete {
            display: none;
            text-align: center;
            margin-top: 10px;
            font-size: 14px;
            color: #28a745;
            opacity: 1;
            transition: opacity 1s ease-out;
        }

Javascript

document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    const preview = document.getElementById('preview');

    if (file) {
        const reader = new FileReader();

        reader.onload = function(e) {
            const img = document.createElement('img');
            img.src = e.target.result;
            preview.innerHTML = ''; // 既存のプレビューをクリア
            preview.appendChild(img);
        }

        reader.readAsDataURL(file);
    } else {
        preview.innerHTML = '<p>選択した画像がここに表示されます</p>';
    }
});

document.getElementById('uploadButton').addEventListener('click', function() {
    const fileInput = document.getElementById('fileInput');
    const result = document.getElementById('result');
    const imageUrlInput = document.getElementById('imageUrl');
    const loadingMessage = document.getElementById('loading');
    const uploadCompleteMessage = document.getElementById('uploadComplete');
    
    if (fileInput.files.length === 0) {
        alert('ファイルを選択してください。');
        return;
    }

    const file = fileInput.files[0];
    const apiKey = 'YOUR_IMGBB_API_KEY'; // imgbbで取得したAPIキーに置き換えてください
    const formData = new FormData();

    formData.append('image', file);
    formData.append('expiration', '864000'); // 10日間（864000秒）

    // アップロード中の表示
    loadingMessage.style.display = 'block';
    uploadCompleteMessage.style.display = 'none'; // 完了メッセージを隠す

    fetch(`https://api.imgbb.com/1/upload?key=${apiKey}`, {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const imageUrl = data.data.url;
            imageUrlInput.value = imageUrl;
            result.style.display = 'flex'; // 結果のエリアを表示

            // アップロード完了後の状態に戻す
            loadingMessage.style.display = 'none';
            uploadCompleteMessage.style.display = 'block';

            // 数秒後にフェードアウト
            setTimeout(() => {
                uploadCompleteMessage.style.opacity = '0';
            }, 2000);

            setTimeout(() => {
                uploadCompleteMessage.style.display = 'none';
                uploadCompleteMessage.style.opacity = '1'; // 次回のためにリセット
            }, 3000);
        } else {
            alert('アップロードに失敗しました。');
            loadingMessage.style.display = 'none';
        }
    })
    .catch(error => {
        console.error('エラー:', error);
        alert('エラーが発生しました。');
        loadingMessage.style.display = 'none';
    });
});

// コピー機能
document.getElementById('copyButton').addEventListener('click', function() {
    const imageUrlInput = document.getElementById('imageUrl');
    imageUrlInput.select();
    document.execCommand('copy');
    alert('URLがクリップボードにコピーされました');
});

ポイント：

formData.append(’expiration’, ‘864000’); // 10日間（864000秒）の部分ではimgbb に保存できる期間を指定しています。秒数を入力することで日数を設定できます。現在は 10日間保存されて、その後削除されるようにしています。
const apiKey = ‘YOUR_IMGBB_API_KEY’; // imgbbで取得したAPIキーに置き換えてくださいの部分に皆さんのAPIを挿入します。

結果

実際には以下のように機能します。ファイル選択をクリックして画像を選択できます（1回につき1枚まで）

セキュリティの関係で、APIを設定していないので、実際に変換処理ははされません。画像のプレビューの確認まではできると思います。

↓ 実際の動作の動画です

最終更新日 2025年12月17日

ImgbbのAPIを使って簡単にサイト上に画像アップロード機能を追加する方法

準備：imgbbのAPIを取得する

HTML

CSS

Javascript

結果

広告