はじめに

DeepL API & 文字数カウンター
https://gist.github.com/sarap422/b2c0fdff98b14197cc7fd41541b5cf34

Sunoのプロンプトは200文字までという制限があります。長文を分割するのは手間がかかるので、文字数をカウントしながら翻訳できるツールを作ってみました。DeepL API Freeを使用することで、月50万文字まで無料で高精度な翻訳が利用できます。

DeepL API Freeの特徴

月間50万文字まで無料
高精度な機械翻訳
シンプルなAPI
多言語対応（28言語以上）
セキュアな通信（HTTPS必須）

実装手順

1. DeepL API Freeのアカウント作成

DeepL API Freeにアクセス
アカウントを作成
APIキーを取得（形式: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx:fx）

2. CORSの問題を解決するためのプロキシ作成

ブラウザから直接DeepL APIを呼び出すとCORSエラーが発生するため、PHPでプロキシを作成します。

<?php
// translation-proxy.php

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type');
header('Content-Type: application/json; charset=utf-8');

if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(200);
    exit();
}

if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    http_response_code(405);
    echo json_encode(['error' => 'Method not allowed']);
    exit();
}

$json = file_get_contents('php://input');
$data = json_decode($json, true);

if (!isset($data['text']) || !isset($data['source_lang']) || 
    !isset($data['target_lang']) || !isset($data['api_key'])) {
    http_response_code(400);
    echo json_encode(['error' => 'Missing required parameters']);
    exit();
}

$url = 'https://api-free.deepl.com/v2/translate';
$params = http_build_query([
    'text' => $data['text'],
    'source_lang' => $data['source_lang'],
    'target_lang' => $data['target_lang']
]);

$ch = curl_init();

curl_setopt_array($ch, [
    CURLOPT_URL => $url,
    CURLOPT_POST => true,
    CURLOPT_POSTFIELDS => $params,
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_HTTPHEADER => [
        'Authorization: DeepL-Auth-Key ' . $data['api_key'],
        'Content-Type: application/x-www-form-urlencoded'
    ],
    CURLOPT_SSL_VERIFYPEER => true,
    CURLOPT_TIMEOUT => 30
]);

$response = curl_exec($ch);
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);

if (curl_errno($ch)) {
    http_response_code(500);
    echo json_encode(['error' => 'Curl error: ' . curl_error($ch)]);
    curl_close($ch);
    exit();
}

curl_close($ch);
http_response_code($httpCode);
echo $response;

3. フロントエンド実装

HTMLでUIを作成し、JavaScriptで文字数カウントと翻訳機能を実装します。

<div class="translation-container">
  <div class="api-key-section">
    <label for="api-key">DeepL API Key:</label>
    <input type="text" id="api-key">
  </div>

  <div class="language-selection">
    <select id="source-lang">
      <option value="JA">日本語</option>
      <option value="EN">英語</option>
      <option value="IT">イタリア語</option>
      <option value="FR">フランス語</option>
    </select>
    →
    <select id="target-lang">
      <option value="EN">英語</option>
      <option value="JA">日本語</option>
      <option value="IT">イタリア語</option>
      <option value="FR">フランス語</option>
    </select>
  </div>

  <textarea id="input-text" placeholder="ここにテキストを入力"></textarea>
  
  <div id="count">
    半角文字換算：0文字<br>
    全角文字換算：0文字<br>
    DeepL API Free 残り文字数：500,000文字
  </div>

  <button id="translate-button">翻訳</button>
  <div id="translation-result"></div>
  <div id="error-message"></div>
</div>

4. 主要な機能の実装

// 文字数カウント機能
function countCharacters(text) {
  let fullWidthCount = 0;
  let halfWidthCount = 0;
  for (let char of text) {
    if (char.match(/[^\x00-\xff]/)) {  // 全角文字の判定
      fullWidthCount += 1;
      halfWidthCount += 2;
    } else {
      halfWidthCount += 1;
      fullWidthCount += 0.5;
    }
  }
  return { halfWidth: halfWidthCount, fullWidth: fullWidthCount };
}

// 翻訳機能
async function translateText() {
  // APIキーと入力テキストの取得
  const apiKey = document.getElementById('api-key').value.trim();
  const text = document.getElementById('input-text').value.trim();
  
  // バリデーション
  if (!apiKey || !text) return;

  try {
    const response = await fetch('/path/to/translation-proxy.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        text,
        source_lang: document.getElementById('source-lang').value,
        target_lang: document.getElementById('target-lang').value,
        api_key: apiKey
      })
    });

    const data = await response.json();
    if (data.translations) {
      showTranslation(data.translations[0].text);
    }
  } catch (error) {
    showError(error.message);
  }
}

実装のポイント

文字数カウント
- 全角/半角を区別してカウント
- リアルタイムでの更新
- 月間制限（50万文字）との比較
セキュリティ対策
- APIキーの保護（プロキシ経由）
- XSS対策
- 入力値のバリデーション
UX向上
- エラーメッセージの表示
- ローディング状態の表示
- APIキーの保存（LocalStorage）
保守性
- モジュール化されたコード
- エラーハンドリング
- コメントによる説明

カスタマイズのヒント

追加可能な機能
- 翻訳履歴の保存
- 文字数制限のアラート
- ショートカットキー
- 翻訳結果のコピー機能
スタイリング
- レスポンシブデザイン
- ダークモード対応
- アニメーション効果

注意点

DeepL API Freeの利用制限（月間50万文字）を超えないよう注意
APIキーは適切に管理（環境変数やconfig管理推奨）
プロキシファイルのパーミッション設定に注意
HTTPS環境での運用推奨

まとめ

DeepL API Freeを使用することで、高品質な翻訳機能を無料で利用できます。文字数カウンターと組み合わせることで、制限を意識しながら効率的に翻訳作業を行えます。

また、このコードはGitHubで公開されているDeepLの公式クライアントライブラリと互換性があり、必要に応じて拡張することも可能です。

参考リンク