DeepL API & \u6587\u5b57\u6570\u30ab\u30a6\u30f3\u30bf\u30fc<\/strong>\r\n https:\/\/gist.github.com\/sarap422\/b2c0fdff98b14197cc7fd41541b5cf34<\/a>\r\n<\/p>\r\n Suno\u306e\u30d7\u30ed\u30f3\u30d7\u30c8\u306f200\u6587\u5b57\u307e\u3067\u3068\u3044\u3046\u5236\u9650\u304c\u3042\u308a\u307e\u3059\u3002\u9577\u6587\u3092\u5206\u5272\u3059\u308b\u306e\u306f\u624b\u9593\u304c\u304b\u304b\u308b\u306e\u3067\u3001\u6587\u5b57\u6570\u3092\u30ab\u30a6\u30f3\u30c8\u3057\u306a\u304c\u3089\u7ffb\u8a33\u3067\u304d\u308b\u30c4\u30fc\u30eb\u3092\u4f5c\u3063\u3066\u307f\u307e\u3057\u305f\u3002DeepL API Free\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u670850\u4e07\u6587\u5b57\u307e\u3067\u7121\u6599\u3067\u9ad8\u7cbe\u5ea6\u306a\u7ffb\u8a33\u304c\u5229\u7528\u3067\u304d\u307e\u3059\u3002<\/p>\r\n \u30d6\u30e9\u30a6\u30b6\u304b\u3089\u76f4\u63a5DeepL API\u3092\u547c\u3073\u51fa\u3059\u3068CORS\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3059\u308b\u305f\u3081\u3001PHP\u3067\u30d7\u30ed\u30ad\u30b7\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\r\n HTML\u3067UI\u3092\u4f5c\u6210\u3057\u3001JavaScript\u3067\u6587\u5b57\u6570\u30ab\u30a6\u30f3\u30c8\u3068\u7ffb\u8a33\u6a5f\u80fd\u3092\u5b9f\u88c5\u3057\u307e\u3059\u3002<\/p>\r\n \u6587\u5b57\u6570\u30ab\u30a6\u30f3\u30c8<\/strong><\/p>\r\n \u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u5bfe\u7b56<\/strong><\/p>\r\n UX\u5411\u4e0a<\/strong><\/p>\r\n \u4fdd\u5b88\u6027<\/strong><\/p>\r\n \u8ffd\u52a0\u53ef\u80fd\u306a\u6a5f\u80fd<\/strong><\/p>\r\n \u30b9\u30bf\u30a4\u30ea\u30f3\u30b0<\/strong><\/p>\r\n DeepL API Free\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u9ad8\u54c1\u8cea\u306a\u7ffb\u8a33\u6a5f\u80fd\u3092\u7121\u6599\u3067\u5229\u7528\u3067\u304d\u307e\u3059\u3002\u6587\u5b57\u6570\u30ab\u30a6\u30f3\u30bf\u30fc\u3068\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001\u5236\u9650\u3092\u610f\u8b58\u3057\u306a\u304c\u3089\u52b9\u7387\u7684\u306b\u7ffb\u8a33\u4f5c\u696d\u3092\u884c\u3048\u307e\u3059\u3002<\/p>\r\n \u307e\u305f\u3001\u3053\u306e\u30b3\u30fc\u30c9\u306fGitHub\u3067\u516c\u958b\u3055\u308c\u3066\u3044\u308bDeepL\u306e\u516c\u5f0f\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30e9\u30a4\u30d6\u30e9\u30ea<\/a>\u3068\u4e92\u63db\u6027\u304c\u3042\u308a\u3001\u5fc5\u8981\u306b\u5fdc\u3058\u3066\u62e1\u5f35\u3059\u308b\u3053\u3068\u3082\u53ef\u80fd\u3067\u3059\u3002<\/p>\r\nDeepL API Free\u306e\u7279\u5fb4<\/h2>\r\n
\r\n
\u5b9f\u88c5\u624b\u9806<\/h2>\r\n
1. DeepL API Free\u306e\u30a2\u30ab\u30a6\u30f3\u30c8\u4f5c\u6210<\/h3>\r\n
\r\n
xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx:fx<\/code>\uff09<\/li>\r\n<\/ol>\r\n2. CORS\u306e\u554f\u984c\u3092\u89e3\u6c7a\u3059\u308b\u305f\u3081\u306e\u30d7\u30ed\u30ad\u30b7\u4f5c\u6210<\/h3>\r\n
<?php\r\n\/\/ translation-proxy.php\r\n\r\nheader('Access-Control-Allow-Origin: *');\r\nheader('Access-Control-Allow-Methods: POST, GET, OPTIONS');\r\nheader('Access-Control-Allow-Headers: Content-Type');\r\nheader('Content-Type: application\/json; charset=utf-8');\r\n\r\nif ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {\r\n http_response_code(200);\r\n exit();\r\n}\r\n\r\nif ($_SERVER['REQUEST_METHOD'] !== 'POST') {\r\n http_response_code(405);\r\n echo json_encode(['error' => 'Method not allowed']);\r\n exit();\r\n}\r\n\r\n$json = file_get_contents('php:\/\/input');\r\n$data = json_decode($json, true);\r\n\r\nif (!isset($data['text']) || !isset($data['source_lang']) || \r\n !isset($data['target_lang']) || !isset($data['api_key'])) {\r\n http_response_code(400);\r\n echo json_encode(['error' => 'Missing required parameters']);\r\n exit();\r\n}\r\n\r\n$url = 'https:\/\/api-free.deepl.com\/v2\/translate';\r\n$params = http_build_query([\r\n 'text' => $data['text'],\r\n 'source_lang' => $data['source_lang'],\r\n 'target_lang' => $data['target_lang']\r\n]);\r\n\r\n$ch = curl_init();\r\n\r\ncurl_setopt_array($ch, [\r\n CURLOPT_URL => $url,\r\n CURLOPT_POST => true,\r\n CURLOPT_POSTFIELDS => $params,\r\n CURLOPT_RETURNTRANSFER => true,\r\n CURLOPT_HTTPHEADER => [\r\n 'Authorization: DeepL-Auth-Key ' . $data['api_key'],\r\n 'Content-Type: application\/x-www-form-urlencoded'\r\n ],\r\n CURLOPT_SSL_VERIFYPEER => true,\r\n CURLOPT_TIMEOUT => 30\r\n]);\r\n\r\n$response = curl_exec($ch);\r\n$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);\r\n\r\nif (curl_errno($ch)) {\r\n http_response_code(500);\r\n echo json_encode(['error' => 'Curl error: ' . curl_error($ch)]);\r\n curl_close($ch);\r\n exit();\r\n}\r\n\r\ncurl_close($ch);\r\nhttp_response_code($httpCode);\r\necho $response;\r\n<\/code><\/pre>\r\n3. \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u5b9f\u88c5<\/h3>\r\n
<div class="translation-container">\r\n <div class="api-key-section">\r\n <label for="api-key">DeepL API Key:<\/label>\r\n <input type="text" id="api-key">\r\n <\/div>\r\n\r\n <div class="language-selection">\r\n <select id="source-lang">\r\n <option value="JA">\u65e5\u672c\u8a9e<\/option>\r\n <option value="EN">\u82f1\u8a9e<\/option>\r\n <option value="IT">\u30a4\u30bf\u30ea\u30a2\u8a9e<\/option>\r\n <option value="FR">\u30d5\u30e9\u30f3\u30b9\u8a9e<\/option>\r\n <\/select>\r\n \u2192\r\n <select id="target-lang">\r\n <option value="EN">\u82f1\u8a9e<\/option>\r\n <option value="JA">\u65e5\u672c\u8a9e<\/option>\r\n <option value="IT">\u30a4\u30bf\u30ea\u30a2\u8a9e<\/option>\r\n <option value="FR">\u30d5\u30e9\u30f3\u30b9\u8a9e<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <textarea id="code-area" placeholder="\u3053\u3053\u306b\u30c6\u30ad\u30b9\u30c8\u3092\u5165\u529b"><\/textarea>\r\n \r\n <div id="count">\r\n \u534a\u89d2\u6587\u5b57\u63db\u7b97\uff1a0\u6587\u5b57<br>\r\n \u5168\u89d2\u6587\u5b57\u63db\u7b97\uff1a0\u6587\u5b57<br>\r\n DeepL API Free \u6b8b\u308a\u6587\u5b57\u6570\uff1a500,000\u6587\u5b57\r\n <\/div>\r\n\r\n <button id="translate-button">\u7ffb\u8a33<\/button>\r\n <div id="translation-result"><\/div>\r\n <div id="error-message"><\/div>\r\n<\/div>\r\n<\/code><\/pre>\r\n4. \u4e3b\u8981\u306a\u6a5f\u80fd\u306e\u5b9f\u88c5<\/h3>\r\n
\/\/ \u6587\u5b57\u6570\u30ab\u30a6\u30f3\u30c8\u6a5f\u80fd\r\nfunction countCharacters(text) {\r\n let fullWidthCount = 0;\r\n let halfWidthCount = 0;\r\n for (let char of text) {\r\n if (char.match(\/[^\\x00-\\xff]\/)) { \/\/ \u5168\u89d2\u6587\u5b57\u306e\u5224\u5b9a\r\n fullWidthCount += 1;\r\n halfWidthCount += 2;\r\n } else {\r\n halfWidthCount += 1;\r\n fullWidthCount += 0.5;\r\n }\r\n }\r\n return { halfWidth: halfWidthCount, fullWidth: fullWidthCount };\r\n}\r\n\r\n\/\/ \u7ffb\u8a33\u6a5f\u80fd\r\nasync function translateText() {\r\n \/\/ API\u30ad\u30fc\u3068\u5165\u529b\u30c6\u30ad\u30b9\u30c8\u306e\u53d6\u5f97\r\n const apiKey = document.getElementById('api-key').value.trim();\r\n const text = document.getElementById('code-area').value.trim();\r\n \r\n \/\/ \u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\r\n if (!apiKey || !text) return;\r\n\r\n try {\r\n const response = await fetch('\/path\/to\/translation-proxy.php', {\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application\/json' },\r\n body: JSON.stringify({\r\n text,\r\n source_lang: document.getElementById('source-lang').value,\r\n target_lang: document.getElementById('target-lang').value,\r\n api_key: apiKey\r\n })\r\n });\r\n\r\n const data = await response.json();\r\n if (data.translations) {\r\n showTranslation(data.translations[0].text);\r\n }\r\n } catch (error) {\r\n showError(error.message);\r\n }\r\n}\r\n<\/code><\/pre>\r\n\u5b9f\u88c5\u306e\u30dd\u30a4\u30f3\u30c8<\/h2>\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u306e\u30d2\u30f3\u30c8<\/h2>\r\n
\r\n
\r\n
\r\n
\u6ce8\u610f\u70b9<\/h2>\r\n
\r\n
\u307e\u3068\u3081<\/h2>\r\n
\u53c2\u8003\u30ea\u30f3\u30af<\/h2>\r\n
\r\n