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

windows JavaScript
2025.04.06
スポンサーリンク

PixabayやTTSを実際に呼び出すサンプル（HTML＋JSデモ）

See the Pen Pixabay Image Search + VoiceRSS Text-to-Speech Demo by MONO365 -Color your days- (@monoqlo365) on CodePen. 

<!--
画像検索 + TTS デモ (Pixabay + VoiceRSS)
- 単一の HTML ファイル：そのままブラウザで開けます。
- 注意：※デモ目的のためフロントエンドに API キーを置いています。公開サイトでは必ずサーバー側経由でキーを安全に渡してください。
- Pixabay API: https://pixabay.com/api/docs/
- VoiceRSS TTS API: https://www.voicerss.org/api/

使い方:
1) 下の `const PIXABAY_API_KEY` と `const VOICERSS_API_KEY` にそれぞれの API キーを入れて保存。
   - 実運用ではキーはサーバーで保護してください（このファイルは学習/デモ用）。
2) 検索ボックスに単語を入れて「検索」→画像カードが表示されます。
3) 画像カードの「大きい画像」リンクで画像を別タブで確認可能。
4) 下部のテキスト欄に読み上げたい文を入れて「読み上げ」→VoiceRSSで音声再生。

CORS やキー公開を避けたい場合：自前のサーバー／サーバーレス関数でプロキシを作り、API キーはサーバー側で管理してください。
-->

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Pixabay + VoiceRSS デモ</title>
  <style>
    :root{--bg:#0f1724;--card:#0b1220;--muted:#94a3b8;--accent:#60a5fa}
    html,body{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,Arial;background:linear-gradient(180deg,#071025 0%,#071a2b 100%);color:#e6eef8}
    .container{max-width:1100px;margin:28px auto;padding:20px}
    header{display:flex;gap:12px;align-items:center;justify-content:space-between}
    h1{margin:0;font-size:20px}
    .controls{display:flex;gap:8px;align-items:center}
    input[type=text]{padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:inherit}
    button{background:var(--accent);border:0;padding:10px 12px;border-radius:8px;color:#012;cursor:pointer}
    .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:18px}
    .card{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));padding:8px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
    .card img{width:100%;height:140px;object-fit:cover;border-radius:8px}
    .meta{font-size:13px;color:var(--muted);margin-top:8px;display:flex;justify-content:space-between;gap:8px}
    .tts-area{margin-top:18px;background:rgba(255,255,255,0.02);padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.03)}
    .small{font-size:13px;color:var(--muted)}
    a.link{color:var(--accent);text-decoration:none}
    footer{margin-top:18px;color:var(--muted);font-size:13px}
  </style>
</head>
<body>
  <div class="container">
    <header>
      <div>
        <h1>Pixabay 画像検索 + VoiceRSS TTS デモ</h1>
        <div class="small">Pixabay で画像を検索してプレビュー。読み上げは VoiceRSS を使用。</div>
      </div>
      <div class="controls">
        <input id="q" type="text" placeholder="検索ワード（例: cat, beach, 桜）" />
        <button id="searchBtn">検索</button>
      </div>
    </header>

    <main>
      <div id="status" class="small" style="margin-top:12px"></div>
      <div id="grid" class="grid" aria-live="polite"></div>

      <section class="tts-area">
        <label class="small">読み上げテキスト（日本語・英語など）</label>
        <div style="display:flex;gap:8px;margin-top:8px">
          <input id="ttsText" type="text" placeholder="こんにちは、世界！" style="flex:1;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit" />
          <button id="speakBtn">読み上げ</button>
        </div>
        <div id="ttsStatus" class="small" style="margin-top:8px"></div>
      </section>

      <footer>
        <div>※このデモは学習用です。APIキーは公開リポジトリに置かないでください。</div>
      </footer>
    </main>
  </div>

  <script>
    // --- 必要な API キーをここに入れてください ---
    const PIXABAY_API_KEY = 'YOUR_PIXABAY_KEY_HERE';
    const VOICERSS_API_KEY = 'YOUR_VOICERSS_KEY_HERE';
    // -----------------------------------------

    const el = id => document.getElementById(id);
    const status = el('status');
    const grid = el('grid');

    async function searchPixabay(q){
      if(!q) return;
      status.textContent = '検索中...';
      grid.innerHTML = '';
      try{
        const url = `https://pixabay.com/api/?key=${encodeURIComponent(PIXABAY_API_KEY)}&q=${encodeURIComponent(q)}&image_type=photo&per_page=24&safesearch=true`;
        const res = await fetch(url);
        if(!res.ok) throw new Error('Pixabay API エラー: ' + res.status);
        const data = await res.json();
        if(!data.hits || data.hits.length===0){
          status.textContent = '画像が見つかりませんでした。別のワードを試してください。';
          return;
        }
        status.textContent = `ヒット: ${data.totalHits} 件（表示: ${data.hits.length} 件）`;
        data.hits.forEach(h => {
          const card = document.createElement('div'); card.className='card';
          const img = document.createElement('img'); img.src = h.webformatURL; img.alt = h.tags || 'image';
          const meta = document.createElement('div'); meta.className='meta';
          const left = document.createElement('div'); left.innerHTML = `<div style="font-weight:600">${h.user}</div><div class='small'>${h.tags}</div>`;
          const right = document.createElement('div');
          right.innerHTML = `<div style='text-align:right'><a class='link' href='${h.largeImageURL}' target='_blank' rel='noopener'>大きい画像</a></div>`;
          meta.appendChild(left); meta.appendChild(right);
          card.appendChild(img); card.appendChild(meta);
          grid.appendChild(card);
        });
      }catch(err){
        console.error(err);
        status.textContent = 'エラーが発生しました。コンソールを確認してください。';
      }
    }

    // VoiceRSS を使った簡易 TTS
    async function speakText(text){
      if(!text) return;
      const ttsStatus = el('ttsStatus');
      ttsStatus.textContent = '音声生成中...';
      try{
        // VoiceRSS の GET エンドポイント
        const params = new URLSearchParams({
          key: VOICERSS_API_KEY,
          hl: 'ja-jp',
          src: text,
          c: 'MP3',
          f: '44khz_16bit_stereo'
        });
        const url = `https://api.voicerss.org/?${params.toString()}`;

        // VoiceRSS は音声データ（直接 audio）を返すため、そのまま audio.src にセット可能
        const audio = new Audio();
        audio.crossOrigin = 'anonymous';
        audio.src = url;
        audio.oncanplay = () => { ttsStatus.textContent = '再生中...'; audio.play(); };
        audio.onended = () => { ttsStatus.textContent = '再生終了'; };
        audio.onerror = (e) => { console.error(e); ttsStatus.textContent = '音声の再生に失敗しました。CORSやキーを確認してください。'; };
      }catch(err){
        console.error(err);
        el('ttsStatus').textContent = '音声生成中にエラーが発生しました。';
      }
    }

    // UI イベント
    el('searchBtn').addEventListener('click', ()=>{
      const q = el('q').value.trim();
      searchPixabay(q);
    });
    el('q').addEventListener('keydown', (e)=>{ if(e.key==='Enter'){ el('searchBtn').click(); } });
    el('speakBtn').addEventListener('click', ()=>{
      const txt = el('ttsText').value.trim();
      speakText(txt);
    });

    // サンプル初期検索
    document.addEventListener('DOMContentLoaded', ()=>{
      el('q').value = 'tokyo';
      //searchPixabay('tokyo');
    });
  </script>
</body>
</html>
HTML

短い補足：

  • ファイル内に使い方と注意（APIキーの差し替え・公開しないこと）を記載しています。
  • 実際に動かすには Pixabay と VoiceRSS の API キーをそれぞれ PIXABAY_API_KEY / VOICERSS_API_KEY にセットしてください。
  • CORS やキーの公開リスクが気になる場合、サーバー側プロキシ経由で呼ぶ方法に変換してお渡しできます。
前へ次へ
12345678910111213
スポンサーリンク
タイトルとURLをコピーしました