無料で使えるAPI（2025年版）

windows JavaScript
2025.04.06
スポンサーリンク

API比較ページ

See the Pen Image, Video, and Audio API Comparison by MONO365 -Color your days- (@monoqlo365) on CodePen. 

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>画像・動画・音声 API 比較（CodePen向けカードUI）</title>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
  <style>
    :root{
      --bg:#0f1724; --card:#0b1220; --muted:#94a3b8; --accent:#6ee7b7; --glass:rgba(255,255,255,0.03);
      --light-bg:#f6f8fb; --light-card:#ffffff; --light-text:#0f1724;
    }
    *{box-sizing:border-box}
    html,body{height:100%;}
    body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial; margin:0; background:linear-gradient(180deg,#071028 0%, #081226 100%); color:#e6eef8; -webkit-font-smoothing:antialiased; padding:32px}
    .container{max-width:1100px;margin:0 auto}
    header{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-bottom:24px}
    h1{font-size:20px;margin:0}
    p.lead{margin:0;color:var(--muted)}

    .controls{display:flex;gap:12px;align-items:center}
    .search{background:var(--glass);border:1px solid rgba(255,255,255,0.04);padding:8px 12px;border-radius:10px;color:inherit}
    .select, .toggle{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px 12px;border-radius:10px;color:inherit}
    .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-top:20px}

    .card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);padding:16px;border-radius:12px;backdrop-filter:blur(6px);}
    .card h3{margin:0 0 6px 0;font-size:16px}
    .badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.04);margin-right:8px}
    .meta{color:var(--muted);font-size:13px;margin-bottom:10px}
    .features{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
    .chip{font-size:12px;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.03)}
    .actions{display:flex;gap:8px;align-items:center}
    button.btn{background:transparent;color:inherit;border:1px solid rgba(255,255,255,0.06);padding:8px 10px;border-radius:8px;cursor:pointer}
    button.primary{background:linear-gradient(90deg,var(--accent),#4fd1c5);color:#012; border:none}
    pre.snippet{background:#021024;color:#dff6f0;padding:10px;border-radius:8px;overflow:auto;font-size:12px}
    footer{margin-top:28px;color:var(--muted);font-size:13px}

    /* Light mode */
    .light body{background:var(--light-bg);color:var(--light-text)}
    .light .card{background:var(--light-card);border:1px solid rgba(15,17,36,0.04);box-shadow:0 4px 18px rgba(16,24,40,0.06)}

    /* Responsive */
    @media (max-width:560px){body{padding:16px}.controls{flex-direction:column;align-items:stretch}}
  </style>
</head>
<body>
  <div class="container">
    <header>
      <div>
        <h1>画像・動画・音声API 比較</h1>
        <p class="lead">CodePen に貼って使えるカードUI。API説明・サンプルリクエスト・商用可否をまとめています。</p>
      </div>
      <div class="controls">
        <input id="search" class="search" placeholder="API名 / キーワードで検索（例: Pexels, TTS）">
        <select id="filterType" class="select">
          <option value="all">全て</option>
          <option value="image">画像</option>
          <option value="video">動画</option>
          <option value="audio">音声</option>
          <option value="tool">ツール</option>
        </select>
        <button id="toggleTheme" class="toggle">ダーク / ライト</button>
      </div>
    </header>

    <main>
      <div id="grid" class="grid"></div>
      <footer>※ 表示している無料枠や制限は変わる可能性があります。実装前に各APIの公式ドキュメントで最新情報を確認してください。</footer>
    </main>
  </div>

  <template id="cardTpl">
    <div class="card">
      <div style="display:flex;justify-content:space-between;align-items:start">
        <div>
          <h3 class="api-name"></h3>
          <div class="meta"><span class="badge type"></span><span class="badge auth"></span><span class="badge commercial"></span></div>
        </div>
        <div style="text-align:right">
          <div class="meta">無料枠: <strong class="quota"></strong></div>
        </div>
      </div>
      <p class="desc" style="margin:8px 0 12px 0;color:var(--muted)"></p>
      <div class="features"></div>
      <div class="actions" style="margin-top:12px">
        <button class="btn primary sampleBtn">サンプル実行（コンソール）</button>
        <button class="btn copyBtn">コードをコピー</button>
      </div>
      <details style="margin-top:10px"><summary style="cursor:pointer;color:var(--muted)">サンプルリクエスト</summary>
        <pre class="snippet" data-lang="http"></pre>
      </details>
    </div>
  </template>

  <script>
    const apis = [
      {
        id:'pixabay', name:'Pixabay API', type:'image', auth:'APIキー', commercial:'可', quota:'無料だが制限あり（要登録）',
        desc:'高品質な写真・イラスト・ベクター素材の検索API。カテゴリ・色・向き指定が可能。商用OK（要利用規約確認）。',
        features:['写真','イラスト','ベクター','カテゴリ検索','クエリパラメータ多数'],
        sampleHeader:`GET /?key=YOUR_KEY&q=cat&image_type=photo HTTP/1.1\nHost: pixabay.com` ,
        sampleJs:`// fetchサンプル（ブラウザで実行するとAPIキーが露出します。実運用はサーバー経由で）\nfetch('https://pixabay.com/api/?key=YOUR_KEY&q=cat&image_type=photo')\n  .then(r=>r.json()).then(d=>console.log(d.hits))`},

      {id:'pexels', name:'Pexels API', type:'image', auth:'APIキー (Authorization header)', commercial:'可', quota:'200 req / 時間 (目安)',
       desc:'写真と動画を同一APIで取得可能。解像度情報や撮影者情報が返る。',
       features:['写真','動画','高品質','撮影者情報'],
       sampleHeader:`GET /v1/search?query=nature&per_page=5 HTTP/1.1\nHost: api.pexels.com\nAuthorization: YOUR_API_KEY`,
       sampleJs:`fetch('https://api.pexels.com/v1/search?query=nature&per_page=5',{headers:{Authorization:'YOUR_API_KEY'}})\n  .then(r=>r.json()).then(d=>console.log(d.photos))`},

      {id:'unsplash', name:'Unsplash API', type:'image', auth:'APIキー', commercial:'可（条件あり）', quota:'レート制限あり（例: 50 req/時）',
       desc:'高品質な写真が豊富。シンプルなREST APIで人気。利用条件に注意。',
       features:['写真','開発者向け','シンプルAPI'],
       sampleHeader:`GET /search/photos?query=mountain HTTP/1.1\nHost: api.unsplash.com\nAuthorization: Client-ID YOUR_ACCESS_KEY`,
       sampleJs:`fetch('https://api.unsplash.com/search/photos?query=mountain',{headers:{Authorization:'Client-ID YOUR_ACCESS_KEY'}})\n  .then(r=>r.json()).then(d=>console.log(d.results))`},

      {id:'pexels_video', name:'Pexels Video API', type:'video', auth:'APIキー', commercial:'可', quota:'同Pexels枠（200/時目安）',
       desc:'短尺の高解像度動画素材。MP4直リンクが返るのでプレビューが簡単。',
       features:['動画','MP4 URL','高解像度'],
       sampleHeader:`GET /videos/search?query=beach HTTP/1.1\nHost: api.pexels.com\nAuthorization: YOUR_API_KEY`,
       sampleJs:`fetch('https://api.pexels.com/videos/search?query=beach',{headers:{Authorization:'YOUR_API_KEY'}})\n  .then(r=>r.json()).then(d=>console.log(d.videos))`},

      {id:'voicerss', name:'Voicerss TTS', type:'audio', auth:'APIキー', commercial:'可', quota:'約350 req/日（無料プラン）',
       desc:'シンプルで使いやすいTTS。HTTPで直接音声ファイルが返る（mp3/wav）。',
       features:['TTS','日本語対応','mp3/wav出力'],
       sampleHeader:`GET /?key=YOUR_KEY&hl=ja-jp&src=こんにちは HTTP/1.1\nHost: api.voicerss.org`,
       sampleJs:`const url='https://api.voicerss.org/?key=YOUR_KEY&hl=ja-jp&src=こんにちは';\nconst audio=new Audio(url);audio.play();`},

      {id:'removebg', name:'Remove.bg', type:'tool', auth:'APIキー', commercial:'可', quota:'無料は低解像度に制限（例: 50枚/月）',
       desc:'画像の背景自動除去サービス。人物・物体の切り抜きに強い。',
       features:['背景除去','REST','高精度マスク'],
       sampleHeader:`POST /v1.0/removebg HTTP/1.1\nHost: api.remove.bg\nX-Api-Key: YOUR_KEY`,
       sampleJs:`// curlサンプル\n// curl -H 'X-Api-Key:YOUR_KEY' -F 'image_file=@in.jpg' -o out.png https://api.remove.bg/v1.0/removebg`},

      {id:'assemblyai', name:'AssemblyAI / Whisper (音声認識)', type:'audio', auth:'APIキー', commercial:'可', quota:'無料トライアルあり（変動）',
       desc:'高精度の音声→文字変換。日本語対応。大きな音声ファイルの文字起こしに向く。',
       features:['音声認識','字幕生成','長尺対応'],
       sampleHeader:`POST /v2/transcript HTTP/1.1\nHost: api.assemblyai.com\nAuthorization: YOUR_API_KEY`,
       sampleJs:`// 例: AssemblyAI に音声URLを送り文字起こしを開始\nfetch('https://api.assemblyai.com/v2/transcript',{method:'POST',headers:{authorization:'YOUR_API_KEY','content-type':'application/json'},body:JSON.stringify({audio_url:'https://.../audio.mp3'})})\n  .then(r=>r.json()).then(d=>console.log(d))`}
    ];

    const grid = document.getElementById('grid');
    const tpl = document.getElementById('cardTpl');

    function render(list){
      grid.innerHTML='';
      list.forEach(api=>{
        const node = tpl.content.cloneNode(true);
        node.querySelector('.api-name').textContent = api.name;
        node.querySelector('.type').textContent = api.type;
        node.querySelector('.auth').textContent = api.auth;
        node.querySelector('.commercial').textContent = api.commercial;
        node.querySelector('.quota').textContent = api.quota;
        node.querySelector('.desc').textContent = api.desc;
        const features = node.querySelector('.features');
        api.features.forEach(f=>{const c=document.createElement('span');c.className='chip';c.textContent=f;features.appendChild(c)});
        node.querySelector('.snippet').textContent = api.sampleHeader + '\n\n' + api.sampleJs;

        node.querySelector('.copyBtn').addEventListener('click',e=>{
          navigator.clipboard.writeText(node.querySelector('.snippet').textContent).then(()=>{
            e.target.textContent='コピーしました';setTimeout(()=>e.target.textContent='コードをコピー',1500);
          });
        });

        node.querySelector('.sampleBtn').addEventListener('click',()=>{
          console.info('--- サンプル実行: '+api.name+' ---');
          console.info(api.sampleJs);
          alert('サンプルはコンソールに出力されます。CodePenのJSコンソールを確認してください。');
        });

        grid.appendChild(node);
      })
    }

    render(apis);

    // 検索・フィルタ
    document.getElementById('search').addEventListener('input',e=>{
      const q = e.target.value.trim().toLowerCase();
      const type = document.getElementById('filterType').value;
      const filtered = apis.filter(a=>{
        const matchQ = !q || (a.name+a.desc+a.features.join(' ')).toLowerCase().includes(q);
        const matchType = type==='all' || a.type===type;
        return matchQ && matchType;
      });
      render(filtered);
    });
    document.getElementById('filterType').addEventListener('change',()=>document.getElementById('search').dispatchEvent(new Event('input')));

    // テーマ切替（単純）
    document.getElementById('toggleTheme').addEventListener('click',()=>{
      document.documentElement.classList.toggle('light');
    });

    // キーボードでフォーカス時Enterでコピー
    window.addEventListener('keydown',e=>{
      if(e.key==='k' && (e.ctrlKey||e.metaKey)){
        const firstCopy = document.querySelector('.copyBtn'); if(firstCopy) firstCopy.click();
      }
    });
  </script>
</body>
</html>
HTML

See the Pen Image, Video, and Audio API Comparison #2 by MONO365 -Color your days- (@monoqlo365) on CodePen.

前へ次へ
12345678910111213
スポンサーリンク
タイトルとURLをコピーしました