---
title: DeepL APIを使用して、主言語に入力した文章を自動で翻訳し副言語に追加する
description: DeepL APIを利用して、新規追加したコンテンツを自動で翻訳し副言語のコンテンツとして登録する方法を紹介します。DeepL APIを使用することでHTMLタグの構成をそのままに文章のみの翻訳が可能です。  
---

## 概要
Kurocoはカスタム処理を利用して、任意の処理を管理画面に追加できます。
このチュートリアルでは、例としてDeepL APIを利用して、新規追加したコンテンツを自動で翻訳し副言語のコンテンツとして登録する方法を紹介します。  

DeepL APIを使用することでHTMLタグの構成をそのままに文章のみの翻訳が可能です。  
また、DeepLの用語集の機能を利用して、翻訳の結果をチューニングします。

### 学べること
以下の流れで自動翻訳機能を実装します。
- [認証キーの取得・登録をする](#認証キーの取得登録をする)
- [多言語の設定をする](#多言語の設定をする)
- [コンテンツ定義を作成する](#コンテンツ定義を作成する)
- [APIを作成する](#apiを作成する)
- [カスタム処理を作成する](#カスタム処理を作成する)
- [動作確認をする](#動作確認をする)

### 前提条件
:::info
機能はDeepL APIのドキュメントを元に作成しています。  
DeepL APIの仕様は[公式ドキュメント - DeepL API](https://www.deepl.com/ja/docs-api)を参照してください。
:::

## 認証キーの取得・登録をする
### DeepL APIの申込をして認証キーを取得する
まずは[DeepL API](https://www.deepl.com/ja/pro-api?cta=header-pro-api)にアクセスし、DeepLに登録します。

1か月に500,000文字までの翻訳であれば、無料版で構いません。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/94e9073d5e47f0d8051be50fba05d9b9.png)

登録が完了したら[DeepL Proのアカウント情報ページ](https://www.deepl.com/ja/account/summary)にアクセスします。  
アカウント情報下部にDeepL APIで使用する認証キーが表示されているので、これをコピーします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/d6ecbe5ab18e5d724f670d42b073889a.png)

### Kuroco管理画面に認証キーを登録する
Kurocoの管理画面にアクセスし、[環境設定] -> [シークレット]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/25b831fd4835ad993f02298629b9e8cf.png)

[追加]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/c51de1ecc8ead6fa837c6492757a7276.png)

以下のように入力して、[追加する]をクリックします。

|項目|値|
|:--|:--|
|名前|DEEPL_API_KEY|
|値|DeepL APIで使用する認証キー|

![Image from Gyazo](https://t.gyazo.com/teams/diverta/3aee2f0fe65a192c9abf1ad69115fe8a.png)

以上でDeepL APIを利用する準備が整いました。

## 多言語の設定をする
Kurocoの管理画面にアクセスし、[環境設定] -> [ローカライズ]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/7b8b41455b6d4e342e25ebad0317fbc1.png)

本チュートリアルでは、主言語を日本語[ja]、副言語を英語[en]として進めます。  
以下の設定をして、[更新する]をクリックします。

|項目|値|
|:--|:--|
|有効にする|チェックを入れる|
|主言語|日本語[ja]|
|副言語|英語[en]|

![Image from Gyazo](https://t.gyazo.com/teams/diverta/f488d477a79d1c6d9c0f39209882c0fc.png)

以上で多言語の設定は完了です。  

## コンテンツ定義を作成する
翻訳の結果をチューニングするための用語集を登録するコンテンツ定義と、自動翻訳の対象となるコンテンツ定義を登録します。  
コンテンツ定義一覧ページで[追加]をクリックして、以下2つのコンテンツ定義を作成します。

### 用語集
用語集を使って語句の訳し方を指定すれば、翻訳後の編集に時間をかけなくても一貫性のある訳文を作成できます。  
https://www.deepl.com/ja/blog/translate-your-way-with-the-deepl-glossary  

DeepLの用語集をKurocoのコンテンツで管理するため、用語集のコンテンツ定義を作成します。  
用語集のコンテンツ定義では、日本語と英語のペアの繰り返し項目と、DeepLの用語集IDを登録するテキスト項目を登録します。
以下のようになります。

|ID|親項目|項目名|項目設定|
|:--|:--|:--|:--|
|1|親項目名:Language pairs<br/>親項目識別子:glossary<br/>繰り返し回数:30|項目名:JA<br/>識別子:source_lang|テキスト|
|2|JAを選択|項目名:EN<br/>識別子:target_lang|テキスト|
|3|選択なし|項目名:glossary_id<br/>識別子:glossary_id|テキスト|

![Image from Gyazo](https://t.gyazo.com/teams/diverta/d4e8bc576e7d3700dc66b1a02fea1fea.png)

![Image from Gyazo](https://t.gyazo.com/teams/diverta/fe26b3080ba052474023e71622f85a06.png)

:::tip
グループの設定はコンテンツ定義追加時にできませんので、一度各項目を追加した後に親項目と繰り返し回数の設定をしてください。
:::

:::tip
項目の繰り返し回数はデフォルトで30が最大値となりますが、[管理画面](/ja/docs/management/management-screen/)で最大99まで変更可能です。
:::

また、用語集は1つのコンテンツを更新して使うため、元となるコンテンツを1つ登録しておきます。  

コンテンツ一覧ページで[追加]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/d08dfe96ce6d7c6de4ba2ebc9ced9cec.png)


例として以下のように登録します。  
ここで設定した言語のペアがDeepLに翻訳リクエストを送る際の語句の訳し方の指定になります。  

例えば記事という単語は通常、Articleと訳されますが、これにより、Contentと訳すように指定できます。  

|項目|値|
|:--|:--|
|Slug|glossary|
|タイトル|用語集|
|Language pairs 1|JA:記事<br/>EN:Content|
|Language pairs 2|JA:副言語<br/>EN:Secondary languages|
|glossary_id |空欄|

![Image from Gyazo](https://t.gyazo.com/teams/diverta/1d17c88ffbb70c88a1ab7fda770a6cd7.jpg)

入力ができたら[追加する]をクリックして、コンテンツを登録します。  

### 自動翻訳コンテンツ
自動翻訳の対象となるコンテンツ定義は、Wysiwygのみのシンプルな設定にします。  
以下のようになります。  

|ID|親項目|項目名|項目設定|
|:--|:--|:--|:--|
|1|選択なし|項目名:WYSIWYG<br/>識別子:source_text|WYSIWYG|

![Image from Gyazo](https://t.gyazo.com/teams/diverta/4ec67fd31092eeac5135f452898020e9.png)

![Image from Gyazo](https://t.gyazo.com/teams/diverta/88401ba23bda7a962240787e5bbe89a2.png)

## APIを作成する
### 内部処理用のAPI作成
Kuroco内部でのみ利用するエンドポイントはAPIを分けておくことをお勧めします。  
そこで、まずは内部利用のためのAPIを新規で作成します。  
既に追加済みの場合は次のステップに進んで構いません。  

#### APIの作成
Kuroco管理画面のAPIより「追加」をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/22c37e75a8244f384deb5b706d4979da.png)

API作成画面が表示されるので、下記入力し「追加する」をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/44c341acced8d685e67ec1da1e85abac.png)

|項目|設定内容|
| :--- | :--- |
|タイトル|Internal|
|版|1.0|
|ディスクリプション|内部処理用のAPI|

APIが作成されました。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/3c04c600fc74102913e9e668ae5cca0e.png)

#### セキュリティの設定
次にセキュリティの設定をします。[セキュリティ] をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/6bc5cb1beb28c74ede6aeca89715a647.png)

セキュリティを[動的アクセストークン]に設定して、[保存する]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/62aaa225db5d12ee84ccc6d5a52411fe.png)

セキュリティを[動的アクセストークン]に設定後、`Login::token`のエンドポイントが無い場合、利用をお勧めされますが、内部利用のみの場合は無視して構いません。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/0bb1efe099bdae8f1c0481037416a5d9.png)

#### CORSの設定
次にCORSの設定をします。[CORSを設定する] をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/74cd7a36fd926dbc20b04812553072c7.png)

CORS_ALLOW_ORIGINSの [Add Origin] をクリックし、下記を追加します。

- 管理画面URL

CORS_ALLOW_METHODSの [Add Method] をクリックし、下記を追加します。

- GET  
- POST
- OPTIONS

CORS_ALLOW_CREDENTIALSの[Allow Credentials]にチェックが入っていることを確認します。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/f2bc3744fe6a2ab042456fa8c635195c.png)

問題なければ [保存する] をクリックします。 

### エンドポイントの作成
エンドポイントは「用語集を取得するエンドポイント」「用語集を更新するエンドポイント」「副言語を更新するエンドポイント」の3つを作成します。  

InternalのAPIから[新しいエンドポイントの追加]をクリックしてそれぞれ作成します。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/6bfc5c05d2cc1c6daf4740f6787a467f.png)

#### 用語集を取得するエンドポイント

|項目|設定内容|
| :--- | :--- |
|パス|get_glossary|
|カテゴリー|コンテンツ|
|モデル|Topics|
|オペレーション|details|
|topics_group_id|用語集のコンテンツ定義ID(8)|
|ext_group|チェックを入れる|

![Image from Gyazo](https://t.gyazo.com/teams/diverta/3706e9755046199fe8bfa6fccf38d396.png)

![Image from Gyazo](https://t.gyazo.com/teams/diverta/8c11699eb64e3cb336689b15d4098d00.png)

#### 用語集を更新するエンドポイント

|項目|設定内容|
| :--- | :--- |
|パス|update_glossary|
|カテゴリー|コンテンツ|
|モデル|Topics|
|オペレーション|update|
|topics_group_id|用語集のコンテンツ定義ID(8)|

![Image from Gyazo](https://t.gyazo.com/teams/diverta/aaff4f80434e2559b42d211eb41dac14.png)  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/c5816bf53b774093dfedbe4cb3e36421.png)

#### 副言語を更新するエンドポイント

|項目|設定内容|
| :--- | :--- |
|パス|update_content|
|カテゴリー|コンテンツ|
|モデル|Topics|
|オペレーション|update|
|topics_group_id|自動翻訳コンテンツのコンテンツ定義ID(9)|

![Image from Gyazo](https://t.gyazo.com/teams/diverta/401490e1e912dd5eeeadbbaefefd2999.png)

![Image from Gyazo](https://t.gyazo.com/teams/diverta/746967c5ce5a77794b75dc4faa869167.png)

## カスタム処理を作成する
コンテンツとエンドポイントの準備ができたら、DeepLと連携して翻訳する処理をカスタム処理に書いていきます。  

[オペレーション] -> [カスタム処理]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/45a3b82e8fec3d1ad46a72c0bf8d394b.png)

[追加]をクリックして、「用語集の登録・削除をするカスタム処理」と、「コンテンツの翻訳をして副言語に登録するカスタム処理」の2つを作成します。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/471bc146570ff60efb362ece59b7fbe1.png)
  

### 用語集の登録・削除をするカスタム処理
DeepLに登録する用語集は更新が許可されていないので、都度、削除・更新をする運用となります。  

先ほど作成した`用語集`のコンテンツ更新をトリガにして、DeepLの既存用語集を削除し、更新された翻訳のペアを再登録する処理とします。

以下のように設定します。

|項目|値|
|:--|:--|
|タイトル|deepl_manage_glossary|
|識別子|deepl_manage_glossary|
|トリガ|コンテンツの更新後/用語集のコンテンツ定義ID(8)|
|処理|以下の内容|

```smarty reference title="deepl_manage_glossary"
https://github.com/diverta/kuroco-documents/blob/main/sample_code/custom_function/trigger/deepl_manage_glossary.txt
```

![Image from Gyazo](https://t.gyazo.com/teams/diverta/5c1f34196005bd41e47b030845e87b4e.png)

:::caution
`/rcms-api/3/get_glossary/`の部分はご自身のエンドポイントのURLに置き換えてください。
:::

:::tip
トリガがループするような使い方をする場合は、処理がループすることを防ぐため、以下のコードをカスタム処理の先頭に記述します。
```
{if $smarty.server.HTTP_RCMS_X_API_REQUEST_CNT > 0}
    {return}
{/if}
```

APIの無限ループ対策が実施されているため、この記述がなくてもループは停止しますが、設定されている制約により、トリガは2回作動します。  
詳しくは[コンテンツ更新後のトリガが二重に呼ばれるのはなぜですか？](/ja/docs/faq/why-is-the-trigger-called-twice-after-content-update/)を参照してください。
:::

入力ができたら[追加する]をクリックしてカスタム処理を追加します。

### コンテンツの翻訳をして副言語に登録するカスタム処理
コンテンツの翻訳をして副言語に登録するカスタム処理は、コンテンツの追加をトリガとして動作させます。  
追加されたコンテンツをDeepLに送り、翻訳されたHTMLを副言語に追加します。  

:::info
tag_handlingパラメータをhtmlに設定してDeepLにリクエストを送ることで、HTMLタグを考慮した翻訳をしています。  
詳しくは[HTML Handling](https://www.deepl.com/ja/docs-api/html/splitting-on-newlines)を参照してください。
:::

:::info
Kurocoの副言語を更新する場合は、`_doc_lang`パラメータをクエリで指定します。  
:::

以下のように設定します。

|項目|値|
|:--|:--|
|タイトル|deepl_translate|
|識別子|deepl_translate|
|トリガ|コンテンツの追加後/自動翻訳コンテンツのコンテンツ定義ID(9)|
|処理|以下の内容|

```smarty reference title="deepl_translate"
https://github.com/diverta/kuroco-documents/blob/main/sample_code/custom_function/trigger/deepl_translate.txt
```

![Image from Gyazo](https://t.gyazo.com/teams/diverta/53619e780236e0f6904d57bdc2a029b0.png)

入力ができたら[追加する]をクリックしてカスタム処理を追加します。

## 動作確認をする
以上で自動翻訳の設定は完了です。コンテンツを更新・追加して動作の確認をします。  

### 用語集
まずは、用語集のコンテンツを更新します。  
任意のLanguage pairsを追加し、glossary_id は空のまま更新します。  
更新後、glossary_idが自動で追加され、カスタムログに用語集追加完了のログが残ります。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/bf6632b1096dc9e717468c83a9e7cc96.jpg)

![Image from Gyazo](https://t.gyazo.com/teams/diverta/d421cb81dd93f53e2c9675729088f1d8.png)

以降の更新もglossary_idは手動で編集する必要はありません。
DeepLの用語集登録時に自動で更新されます。  

:::tip
glossary_idは手動で更新しないので、実際の運用時は[コンテンツ編集画面の表示を変更できますか？](/ja/docs/faq/can-i-modify-the-display-of-the-content-editor-screen/)を参考に非表示にするCSSを適用するのも有効です。
:::

### コンテンツの自動翻訳
次に、コンテンツの自動翻訳の動作を確認します。  
自動翻訳コンテンツ一覧のページから[追加]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/73d18b324efe42410b45ac59544fe8b1.png)

任意の日本語のコンテンツを入力し、[追加する]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/f4ebcb98f890ba48e3767745501b9c0a.png)

追加後のコンテンツを確認すると、副言語のコンテンツが同時に追加されていることが分かります。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/347c43f658475b8772fdfa0e550a83b8.png)

また、翻訳の内容を確認すると用語集で登録した通り、記事をContent、副言語をSecondary languagesと訳していることが分かります。  

以上で、DeepL APIを利用した自動翻訳機能の実装方法の紹介を終わります。  
DeepL APIはPDFやWordファイルをそのまま翻訳する[Translate Documents](https://www.deepl.com/ja/docs-api/documents)の機能も持っていますので、本ドキュメントを参考にトライしてみてください。 

## 関連ドキュメント
- [カスタム処理に利用できるトリガと変数の一覧](/ja/docs/reference/trigger-variables/)
- [Smartyプラグイン](/ja/docs/reference/smarty-plugin/)
- [コンテンツ編集画面の表示を変更できますか？](/ja/docs/faq/can-i-modify-the-display-of-the-content-editor-screen/)