自分だけのクイズ作成 - Quipha公開中

【Django】翻訳できるWebアプリを作ろう【DeepL】

Django
スポンサーリンク

はじめに

今回は、翻訳ができるWebアプリケーションを作成します。
DjangoでWebアプリケーションを作成し、DeepLを利用して翻訳を行います。

DeepLは無償のニューラル機械翻訳サービスで、翻訳結果がとても自然で質が高いです。

Djangoの環境とプロジェクトの作成方法は以下をご覧ください。

使用するバージョン
  • Windows 11 / 10
  • macOS Monterey (M1)
  • Python 3.10.2
  • Django 4.0.2
  • DeepLライブラリ 1.5.0

WindowsでもMacでも同様に作成できます。

余談ですが、Laravel向けに解説した記事もございますので参考にしてください。

他にも私のブログで、Djangoについて解説している記事がありますのでご覧ください。

スポンサーリンク

VS Codeインストール

VS Codeのインストール方法は、以下の記事にまとめましたのでご覧ください。

VS Codeのオススメ設定や拡張機能などは、以下の記事にまとめました。

Djangoプロジェクトの作成

以下のコマンドで、Djangoプロジェクトを作成します。
最後にドットを付けて、同じ階層にプロジェクトファイルを作成します。

$ django-admin startproject translationApp .

「translationApp」はプロジェクト名ですので、任意で指定してください。

アプリ追加と設定

追加

以下のコマンドで、Djangoプロジェクトにアプリを追加します。

$ python manage.py startapp translation

URLの追加

翻訳画面を表示するためのURLを追加します。
まずはビューに、適当な文字を返却する処理を実装します。

translation/views.py
from django.shortcuts import render
from django.http import HttpResponse

# Create your views here.


def index(request):
    """
    翻訳画面
    """
    return HttpResponse("Translation")

アプリのURLを定義するファイルを作成します。

translation/urls.py
from django.urls import path
from . import views

app_name = "translation"
urlpatterns = [
    path("", views.index, name="index"),
]

サイトのurls.pyに追加します。
パスは任意で指定していただければと思いますが、「tr/」としました

translationApp/settings.py
from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('tr/', include('translation.urls')),
    path('admin/', admin.site.urls),
]

設定の修正

サイトのsettings.pyに、アプリを追加します。

translationApp/settings.py
INSTALLED_APPS = [
    'translation.apps.TranslationConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

起動

この時点で動作確認をしましょう。
以下のコマンドでサーバーを起動します。

$ python manage.py runserver

以下のURLにアクセスします。

http://localhost:8000/tr/

「Translation」と表示されたらOKです。

スポンサーリンク

翻訳画面の作成

フォームの作成

画面からフォームのパラメータを受け取るためのクラスを作成します。

「翻訳する日本語の文章」を入力するためのテキストエリアを用意しました。

translation/forms.py
from django import forms

class TranslationForm(forms.Form):

    sentence = forms.CharField(label='翻訳(日本語)', widget=forms.Textarea(), required=True)

翻訳するための画面のテンプレートファイルを作成します。

translation/templates/translation/index.html
<html>

<head>
    <meta charset='utf-8' />
</head>

<body>
    <form method="POST">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">翻訳</button>
    </form>
</body>

</html>

{{ form.as_p }}は、フォームクラスの入力項目を表示します。
{% csrf_token %}は、CSRFの対策です。

ビューを修正します。
テンプレートをレンダリングするように修正します。

translation/views.py
from django.http import HttpResponse
from django.template import loader
from .forms import TranslationForm

# Create your views here.


def index(request):
    """
    翻訳画面
    """
    form = TranslationForm()
    template = loader.get_template('translation/index.html')
    context = {
        'form': form
    }
    return HttpResponse(template.render(context, request))

以下のURLにアクセスします。

http://localhost:8000/tr/

翻訳するための画面が表示されました。

デザインについては今回は気にしません。別記事で解説します。

フォームクラスの方で定義したテキストエリアが表示されます。
必須入力としたため、入力せずに翻訳ボタンを押下すると、エラーが表示されます。

翻訳ボタン押下時の実装

ビューを修正し、翻訳ボタン押下時の処理を実装します。(POST時)
リクエストをフォームに格納し、バリデーションを行います。
バリデーション結果に問題がなければ、翻訳を行う想定です。

translation/views.py
from django.http import HttpResponse
from django.template import loader
from .forms import TranslationForm

# Create your views here.


def index(request):
    """
    翻訳画面
    """
    if request.method == "POST":
        form = TranslationForm(request.POST)
        if form.is_valid():
            # TODO: 翻訳
            pass
    else:
        form = TranslationForm()
    template = loader.get_template('translation/index.html')
    context = {
        'form': form
    }
    return HttpResponse(template.render(context, request))

翻訳処理の実装

DeepLライブラリ

翻訳は、DeepLを利用します。
以下の記事を参考に、DeepLのAPIを使えるように登録を行ってください。

「認証キー」が必要になりますので用意してください。
また、無料プランでも、一ヶ月あたり50万文字の翻訳ができますので、まずは試してみましょう。

今回は、DeepLが用意しているPythonのクライアントライブラリを利用します。
詳しい解説は以下の記事を参考にしてください。

Djangoアプリケーションが動作しているPython環境に、DeepLのライブラリをインストールします。
今回はVS Codeを使い、Dockerコンテナで作業していますので、以下のファイルを修正します。

一番最後の行を追加します。(deepl)

.devcontainer/Dockerfile
FROM python:3
ENV PYTHONUNBUFFERED 1
RUN pip install django

RUN pip install --upgrade deepl

F1キーをクリックし、コンテナをリビルドします。(Remote-Containers: Rebuild Container)

実装

ビューを修正し、翻訳処理を実装します。
翻訳結果を受け取る変数(translation_results)を用意し、翻訳処理を行います。
(日本語から英語へ翻訳)
認証キーについては、各自の値を指定してください。

translation/views.py
from django.http import HttpResponse
from django.template import loader
from .forms import TranslationForm
import deepl

# Create your views here.


def index(request):
    """
    翻訳画面
    """
    
    # 翻訳結果
    translation_results = ""

    if request.method == "POST":
        # 翻訳ボタン押下時

        form = TranslationForm(request.POST)

        # バリデーションチェック
        if form.is_valid():
            # 翻訳
            # TODO: 認証キーのハードコーディングは避ける
            translator = deepl.Translator("認証キー")

            # 翻訳文を取得
            sentence = form.cleaned_data['sentence']
            # 日本語に翻訳
            translation_results = translator.translate_text(
                sentence, target_lang="EN-US")

    else:
        form = TranslationForm()

    template = loader.get_template('translation/index.html')
    context = {
        'form': form,
        'translation_results': translation_results
    }
    return HttpResponse(template.render(context, request))

認証キーについては、ソース中にハードコーディングするのは避けるべきです。
別記事で解説しますが、リポジトリ管理しないファイルに定数を用意するなど、そういった対応が必要です。
誤って認証キーをGitHubなどに公開しないように注意が必要です。

認証キーなど機密情報の管理については、以下の記事にまとめました。
本記事のDeepLの認証キーについても解説しています。

翻訳結果を出力するようにテンプレートファイルを修正します。

translation/templates/translation/index.html
<html>

<head>
    <meta charset='utf-8' />
</head>

<body>
    <form method="POST">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">翻訳</button>
    </form>

    {{ translation_results }}
</body>

</html>

動作確認

これで完成です。
テキストを入力して、翻訳ボタンをクリックすると、翻訳結果が表示されます。

デザイン調整

デザインの調整に関しては、以下の記事を参考にしてください。

その他

外部サーバーへ公開

作成したアプリは公開して使ってもらいましょう!
Djangoアプリケーションを外部公開する方法をまとめました。

脆弱性対策

脆弱性を抱えたアプリケーションの場合、攻撃を受ける可能性があり大変危険です。
作成したアプリケーションは、脆弱性対策も意識しましょう。

GitHubと連携

GitHubと連携する方法を解説しました。
プロジェクトの管理はGitHubを活用しましょう。

さいごに

今回は、DeepLを利用して、翻訳するWebアプリケーションを作成してみました。
応用して、実用的なものに活かせると思います。

ぜひ試してみてくださいね。

他にも私のブログで、Djangoについて解説している記事がありますのでご覧ください。

\オススメ/

コメント

タイトルとURLをコピーしました